How To Build A WordPress CMS Theme – Part 5: Coding The Homepage

Whew, here we are again! We’ve got a long way to go today, so let’s skip the fluff and get right down to the coding!

Last week we finished up the header code, and this week we’ll be coding the homepage. In case you’re just joining us, here are the previous tutorials:

Remember you can see the demo of the WordPress version here, and see the regular HTML/CSS site here. You can also download everything in Part 4 . Ready? Let’s go!

Chapter 16: Coding the Homepage

Let’s first take a look at our homepage HTML. If you look at the site, you’ll see we have a main image and some text up top, and some image buttons beneath that. Nothing too difficult:

	<div id="featured">
		<h2>Our Story</h2>
		<p>Sophie discovered her passion for creating cakes after an exhaustive search throughout Toronto and Ottawa for her own wedding cake ended in disappointment. "Everyone was trying to convince me to settle for the cake of the week, but the cake is a centerpiece none of them were expressing what I wanted to say ..."</p>
		<p><a href="about.html">Read More</a></p>
	</div> <!-- END Featured Section -->
 
	<div id="links">
		<ul>
			<li><a href="about.html"><img src="images/artist.jpg" alt="artist" width="221" height="175" /><span>the artist</span></a></li>
			<li><a href="gallery.html"><img src="images/cakes.jpg" alt="cakes" width="221" height="175" /><span>cakes</span></a></li>
			<li><a href="about.html"><img src="images/experience.jpg" alt="experience" width="224" height="175" /><span>the experience</span></a></li>
			<li><a href="http://sophiebifieldcakecompany.wordpress.com"><img src="images/blog.jpg" alt="blog" width="222" height="175" /><span>blog</span></a></li>
		</ul>
	</div><!-- END Links -->

Now in WordPress, it should always be your goal to make everything as editable as possible for your client. Let’s get started with the PHP and functions and see how we can do this. Open up index.php.

First, we’ll need to wrap the loop around our content, so it can eventually be controlled dynamically:

	<?php get_header(); ?>
 
	<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
			<div id="featured">
		<h2>Our Story</h2>
		<p>Sophie discovered her passion for creating cakes after an exhaustive search throughout Toronto and Ottawa for her own wedding cake ended in disappointment. "Everyone was trying to convince me to settle for the cake of the week, but the cake is a centerpiece none of them were expressing what I wanted to say ..."</p>
		<p><a href="about.html">Read More</a></p>
	</div> <!-- END Featured Section -->
 
	<div id="links">
		<ul>
			<li><a href="about.html"><img src="images/artist.jpg" alt="artist" width="221" height="175" /><span>the artist</span></a></li>
			<li><a href="gallery.html"><img src="images/cakes.jpg" alt="cakes" width="221" height="175" /><span>cakes</span></a></li>
			<li><a href="about.html"><img src="images/experience.jpg" alt="experience" width="224" height="175" /><span>the experience</span></a></li>
			<li><a href="http://sophiebifieldcakecompany.wordpress.com"><img src="images/blog.jpg" alt="blog" width="222" height="175" /><span>blog</span></a></li>
		</ul>
	</div><!-- END Links -->
	<?php endwhile; ?>
 
<?php get_footer(); ?>

Now, since there’s multiple areas of content, how do we decide how to split it up for the client? What’s usually best, is to put the main chuck of content (our featured section) into the WYSIWYG, and the rest into custom fields or even custom post types.

Let’s move the main content area inside of the featured div into the WordPress’s admin. Create a page called ‘Home’ and drop the content there. Save the page and come back to index.php.

Now add in the_content() where you removed the h2 and paragraph tags:

	<?php get_header(); ?>
 
	<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
 
             <div id="featured">
                  <?php the_content(); ?>
	     </div> <!-- END Featured Section -->
 
	<div id="links">
		<ul>
			<li><a href="about.html"><img src="images/artist.jpg" alt="artist" width="221" height="175" /><span>the artist</span></a></li>
			<li><a href="gallery.html"><img src="images/cakes.jpg" alt="cakes" width="221" height="175" /><span>cakes</span></a></li>
			<li><a href="about.html"><img src="images/experience.jpg" alt="experience" width="224" height="175" /><span>the experience</span></a></li>
			<li><a href="http://sophiebifieldcakecompany.wordpress.com"><img src="images/blog.jpg" alt="blog" width="222" height="175" /><span>blog</span></a></li>
		</ul>
	</div><!-- END Links -->
	<?php endwhile; ?>
 
<?php get_footer(); ?>

If you save the page and try to check it in the browser – nothing happens. That’s because right now, WordPress doesn’t know what page to grab content from. We have to tell WordPress with a query, to take the content from our newly created Home page.

Note: Some people prefer to do “templates” in WordPress, especially for the homepage. This consists of a separate PHP page with a special tag. You’d then create a page, choose that template in the sidebar, and then go to Settings > Reading to set that page as the homepage. That’s a lot of unnecessary work for both you and client, which is why I suggest doing it the way I do below.

Here’s the query telling WordPress to pull the content from the page called “Home”:

	<?php get_header(); ?>
 
	<?php query_posts('pagename=Home'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
 
             <div id="featured">
                  <?php the_content(); ?>
	     </div> <!-- END Featured Section -->
 
	<div id="links">
		<ul>
			<li><a href="about.html"><img src="images/artist.jpg" alt="artist" width="221" height="175" /><span>the artist</span></a></li>
			<li><a href="gallery.html"><img src="images/cakes.jpg" alt="cakes" width="221" height="175" /><span>cakes</span></a></li>
			<li><a href="about.html"><img src="images/experience.jpg" alt="experience" width="224" height="175" /><span>the experience</span></a></li>
			<li><a href="http://sophiebifieldcakecompany.wordpress.com"><img src="images/blog.jpg" alt="blog" width="222" height="175" /><span>blog</span></a></li>
		</ul>
	</div><!-- END Links -->
	<?php endwhile; ?>
 
<?php get_footer(); ?>

Refresh the page and look! The featured content should be showing up now!

Let’s look at the four image links below. There are several ways we could code these for the client, and depending on how technical minded your client is or how often they want to change content, should help you decide which way to go with these. For the sake of the tutorial, let’s say our clients know basic HTML and are planning on changing these links weekly. In that case, it’s best to just drop them in as a custom field.

When doing custom fields, you should try to automate as much as you can for the client. In our example above, we don’t need the client to enter the div, ul, or li tags, we just need him to enter the link, the image they want to use, and the title.

So copy and paste each link into a separate custom field, and name each custom field “Link”. You can have as many custom fields as you’d like with the same name. You’ll also need to change the image path to match yours. Also be sure to add the custom fields in the order you want to links appear.

Now we can delete the links from our code and replace it with the get_post_meta function that will echo out our custom fields:

<?php get_header(); ?>
 
	<?php query_posts('pagename=Home'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
	    <div id="featured">
	       <?php the_content(); ?>
		</div> <!-- END Featured Section -->
 
		<div id="links">
			<ul>
				<li><?php echo get_post_meta($post->ID, 'Link', true);?></li>
			</ul>
		</div><!-- END Links -->
	<?php endwhile; ?>
 
<?php get_footer(); ?>

Save the page and refresh in your browser…where’d all of our links go??? It should only display one at this point.

When using multiple custom fields with the same name, you can’t just echo the get_post_meta function like you’d normally do. Instead, you need to replace that with a foreach that will also surround each link with a li tag:

<?php get_header(); ?>
 
	<?php query_posts('pagename=Home'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
	    <div id="featured">
	       <?php the_content(); ?>
		</div> <!-- END Featured Section -->
 
		<div id="links">
			<ul>
				<?php $link = get_post_meta($post->ID, 'Link', false); ?>
				<?php foreach($link as $link) { echo '<li>'.$link.'</li>'; } ?>
			</ul>
		</div><!-- END Links -->
	<?php endwhile; ?>
<?php get_footer(); ?>

And BOOM! How easy is that? Compare it to the original HTML site and it looks just the same, but is now controllable by the client.

Next Week

We move on to coding the footer! Please let me know if you have any questions or issues regarding this week’s post in the comments below. See ya next week!