How To Build A WordPress CMS Theme – Part 6: The Footer!

We’ve come a long way in such a short series, haven’t we? In today’s post, we’ll be finishing up the homepage by doing the footer. Normally footers are pretty easy, but we’ve got an extra large one for you today, just full of goodies waiting to be WP functionalized (ok enough with the nerdness). Anyways, if you’re just joining us, here are the previous parts to this series:

Remember you can see the demo of the WordPress version here, and see the regular HTML/CSS sitehere. You can also download everything in Part 4 . Let’s get it started!

Chapter 17: The Footer

Not much goes on in most footers, you’ve normally got some links and copyright info and that’s it. In WordPress land, the same goes, and the only real piece of required functionality is the wp_footer() function before your body tag.

However, the latest trend seems to be in having even more complicated footers. In our project site, you can see that the footer is from the featured articles & conversation sections all the way down. Let’s take a look at the plain HTML of our footer:

<div id="footerWrap">
	<div class="footerfix">
		<div id="footerTop">
			<h3>Featured Articles</h3>
			<ul>
				<li>
					<a href="http://sophiebifieldcakecompany.wordpress.com"><img src="images/blog1.jpg" alt="The wedding palace bridal show" width="140" height="98" />The Wedding Palace Bridal Show</a>
				</li>
				<li>
					<a href="gallery.html"><img src="images/blog2.jpg" alt="National Flag Day Cake" />National Flag Day Cake</a>
				</li>
				<li>
					<a href="gallery.html"><img src="images/blog3.jpg" alt="Winterlude Fare & Flare Cake" />Winterlude Fare & Flare Cake</a>
				</li>
			</ul>
		</div>
 
		<div id="twitter">
			<h3>Our Conversation</h3>
			<div id="twitter_div">
				<ul id="twitter_update_list"></ul>
			</div>
		</div>
	</div>
</div>
 
<div id="footerBottom">
	<div class="footerfix">
		<div id="us">
			<h4>Site Links</h4>
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="http://sophiebifieldcakecompany.wordpress.com">Blog</a></li>
				<li><a href="about.html">FAQ</a></li>
				<li><a href="order.html">Ordering</a></li>
			</ul>
		</div>
		<div id="cakes">
			<h4>Company Information</h4>
			<ul>
				<li><a href="about.html">About Sophie</a></li>
				<li><a href="about.html">Careers</a></li>
				<li><a href="http://www.twitter.com/ottawacake">Follow on Twitter</a></li>
				<li><a href="http://www.facebook.com/ottawacake">Fan on Facebook</a></li>
				<li><a href="contact.html">Contact Us</a></li>
			</ul>
		</div>
		<div id="blog">
			<h4>From The Blog</h4>
			<ul>
				<li><a href="http://sophiebifieldcakecompany.wordpress.com">Recent Articles</a></li>
				<li><a href="http://sophiebifieldcakecompany.wordpress.com">Events</a></li>
			</ul>
		</div>
	</div>
 
	<div id="newsletter">
		<h4>Sign up for our newsletter</h4>
		<script type="text/javascript">var host = (("https:" == document.location.protocol) ? "https://secure." : "http://");document.write(unescape("%3Cscript src='" + host + "wufoo.com/scripts/embed/form.js' type='text/javascript'%3E%3C/script%3E"));</script>
 
<script type="text/javascript">
var q7x3s5 = new WufooForm();
q7x3s5.initialize({
'userName':'gelias',
'formHash':'q7x3s5',
'autoResize':true,
'height':'307'});
q7x3s5.display();
</script>
	</div>
</div>
 
<div id="copyright">
	<p>Copyright &copy; 2011 <a href="index.html">Sophie Bifield Cake Company</a></p>
</div>
 
 
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/ottawacake.json?callback=twitterCallback2&count=3" type="text/javascript"></script>
 
<script type="text/javascript">
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-21625812-1']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
</script>
 
</body>
</html>

Holy cow that’s a lot of stuff! What I love about WordPress (and any CMS really) is that we’re able to separate all of the junk (the content for us developers, lol) and let the code shine.)

Let’s start at the top and make our way down, shall we? We first see that there’s a featured article div and some thumbnail images. Let’s change that into a WordPress loop that grabs the 3 newest article that are in a category called “Featured” and automatically pull in a thumbnail.

First, you need to open up your functions.php file and add this line:

add_theme_support( 'post-thumbnails' );

Now, the size of our thumbnails are 140×98, so we need to let WordPress know that that’s how we want them returned:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 140, 98, true );

Make sure you add the “true” statement to the end of the post thumbnail size function, otherwise your thumbnails will be sized proportionally, instead of cropped to the exact dimensions. Also note, if you’ve uploaded images and then decide to change the post thumbnail size, you’ll have to reupload them again for the changes to take place (stinks I know).

Now that the functions file is take care of, let’s open up the standard footer.php file from Hijinks (the starter theme I’m using here):

 
	</div> <!--our container div closer-->
 
<?php wp_footer(); ?>
 
</body>
</html>

Fantastic, let’s copy and paste the “featured” part of the Sophie site over:

<div id="footerWrap">
	<div class="footerfix">
		<div id="footerTop">
			<h3>Featured Articles</h3>
			<ul>
				<li>
					<a href="http://sophiebifieldcakecompany.wordpress.com"><img src="images/blog1.jpg" alt="The wedding palace bridal show" width="140" height="98" />The Wedding Palace Bridal Show</a>
				</li>
				<li>
					<a href="gallery.html"><img src="images/blog2.jpg" alt="National Flag Day Cake" />National Flag Day Cake</a>
				</li>
				<li>
					<a href="gallery.html"><img src="images/blog3.jpg" alt="Winterlude Fare & Flare Cake" />Winterlude Fare & Flare Cake</a>
				</li>
			</ul>
		</div>
 
 
 
 
 
 
 
	</div>
 
<?php wp_footer(); ?>
 
</body>

And now replace it with our standard loop (you should be familiar with this by now!) and use query_posts to pull posts only categorized in “featured” and only the newest three:

<div id="footerWrap">
	<div class="footerfix">
		<div id="footerTop">
			<h3>Featured Articles</h3>
 
			<ul>
				<?php query_posts('category_name=Featured&posts_per_page=3'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
					<li><a href="<?php the_permalink();?>"><?php the_post_thumbnail();?><?php the_title();?></a></li>
				<?php endwhile; wp_reset_query(); ?>
			</ul>
		</div>
 
 
 
 
 
 
 
	</div>
 
<?php wp_footer(); ?>
 
</body>
</html>

If you notice, I’ve added a new function to the end of the loop, wp_reset_query(), this function is a MUST when using multiple loops on one page, or everything gets wonky. Go ahead and open up your index.php page and add it to that loop as well.

Now, go ahead and create 3 posts, categorize them as ‘Featured’ and give them featured thumbnails. Refresh the page and look! Let’s move on (this is the p90x of tutorials, buddy).

Let’s move the everything else into our footer.php file

<p id="topbar"><img src="<?php bloginfo('template_url');?>/images/footerTopBar.jpg" alt="footerTopBar" width="332" height="4"></p>
 
<div id="footerWrap">
	<div class="footerfix">
		<div id="footerTop">
			<h3>Featured Articles</h3>
 
			<ul>
				<?php query_posts('category_name=Featured&posts_per_page=3'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
					<li><a href="<?php the_permalink();?>"><?php the_post_thumbnail();?><?php the_title();?></a></li>
				<?php endwhile; wp_reset_query(); ?>
			</ul>
		</div>
				<div id="twitter">
			<h3>Our Conversation</h3>
			<div id="twitter_div">
				<ul id="twitter_update_list"></ul>
			</div>
		</div>
	</div>
</div>
 
<div id="footerBottom">
	<div class="footerfix">
		<div id="us">
			<h4>Site Links</h4>
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="http://sophiebifieldcakecompany.wordpress.com">Blog</a></li>
				<li><a href="about.html">FAQ</a></li>
				<li><a href="order.html">Ordering</a></li>
			</ul>
		</div>
		<div id="cakes">
			<h4>Company Information</h4>
			<ul>
				<li><a href="about.html">About Sophie</a></li>
				<li><a href="about.html">Careers</a></li>
				<li><a href="http://www.twitter.com/ottawacake">Follow on Twitter</a></li>
				<li><a href="http://www.facebook.com/ottawacake">Fan on Facebook</a></li>
				<li><a href="contact.html">Contact Us</a></li>
			</ul>
		</div>
		<div id="blog">
			<h4>From The Blog</h4>
			<ul>
				<li><a href="http://sophiebifieldcakecompany.wordpress.com">Recent Articles</a></li>
				<li><a href="http://sophiebifieldcakecompany.wordpress.com">Events</a></li>
			</ul>
		</div>
	</div>
 
	<div id="newsletter">
		<h4>Sign up for our newsletter</h4>
		<script type="text/javascript">var host = (("https:" == document.location.protocol) ? "https://secure." : "http://");document.write(unescape("%3Cscript src='" + host + "wufoo.com/scripts/embed/form.js' type='text/javascript'%3E%3C/script%3E"));</script>
 
<script type="text/javascript">
var q7x3s5 = new WufooForm();
q7x3s5.initialize({
'userName':'gelias',
'formHash':'q7x3s5',
'autoResize':true,
'height':'307'});
q7x3s5.display();
</script>
	</div>
</div>
 
<div id="copyright">
	<p>Copyright &copy; 2011 <a href="index.html">Sophie Bifield Cake Company</a></p>
</div>
 
 
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/ottawacake.json?callback=twitterCallback2&count=3" type="text/javascript"></script>
 
<script type="text/javascript">
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-21625812-1']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
</script>
 
<?php wp_footer();?>
 
</body>
</html>

As you can see, the next section ‘Conversations’ (twitter) isn’t something we need to touch, so let’s skip that. We now come to the footer site links. We can do this section in one of three ways: we can either make each section a different WordPress menu, we can make the whole area a widget section, or we can say screw the client and make it static (let’s hope you don’t do this one!) For our tutorial, let’s make them each a different WordPress menu.

Set up your menus under the Admin > Appearance section. And then switch over to your footer.php and add in the new menus:

	<p id="topbar"><img src="<?php bloginfo('template_url');?>/images/footerTopBar.jpg" alt="footerTopBar" width="332" height="4"></p>
</div>
 
<div id="footerWrap">
	<div class="footerfix">
		<div id="footerTop">
			<h3>Featured Articles</h3>
 
			<ul>
				<?php query_posts('category_name=Featured&posts_per_page=3'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
					<li><a href="<?php the_permalink();?>"><?php the_post_thumbnail();?><?php the_title();?></a></li>
				<?php endwhile; wp_reset_query(); ?>
			</ul>
		</div>
				<div id="twitter">
			<h3>Our Conversation</h3>
			<div id="twitter_div">
				<ul id="twitter_update_list"></ul>
			</div>
		</div>
	</div>
</div>
 
<div id="footerBottom">
	<div class="footerfix">
		<div id="us">
			<h4>Site Links</h4>
			<?php wp_nav_menu( array('menu' => 'Site Links', 'container' => false, )); ?>
		</div>
		<div id="cakes">
			<h4>Company Information</h4>
			<?php wp_nav_menu( array('menu' => 'Company Info', 'container' => false, )); ?>
		</div>
		<div id="blog">
			<h4>From The Blog</h4>
			<?php wp_nav_menu( array('menu' => 'From the Blog', 'container' => false, )); ?>
		</div>
	</div>
 
	<div id="newsletter">
		<h4>Sign up for our newsletter</h4>
		<script type="text/javascript">var host = (("https:" == document.location.protocol) ? "https://secure." : "http://");document.write(unescape("%3Cscript src='" + host + "wufoo.com/scripts/embed/form.js' type='text/javascript'%3E%3C/script%3E"));</script>
 
<script type="text/javascript">
var q7x3s5 = new WufooForm();
q7x3s5.initialize({
'userName':'gelias',
'formHash':'q7x3s5',
'autoResize':true,
'height':'307'});
q7x3s5.display();
</script>
	</div>
</div>
 
<div id="copyright">
	<p>Copyright &copy; 2011 <a href="index.html">Sophie Bifield Cake Company</a></p>
</div>
 
 
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/ottawacake.json?callback=twitterCallback2&count=3" type="text/javascript"></script>
 
<script type="text/javascript">
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-21625812-1']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
</script>
 
<?php wp_footer();?>
 
</body>
</html>

Now to be good stewarts of web standards, let’s clean up the bottom some. The ID newsletter is hidden, so let’s delete it and it’s JS. Then, let’s move all of the rest of JS to a functions.js file:

	<p id="topbar"><img src="<?php bloginfo('template_url');?>/images/footerTopBar.jpg" alt="footerTopBar" width="332" height="4"></p>
</div>
 
<div id="footerWrap">
	<div class="footerfix">
		<div id="footerTop">
			<h3>Featured Articles</h3>
 
			<ul>
				<?php query_posts('category_name=Featured&posts_per_page=3'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
					<li><a href="<?php the_permalink();?>"><?php the_post_thumbnail();?><?php the_title();?></a></li>
				<?php endwhile; wp_reset_query(); ?>
			</ul>
		</div>
				<div id="twitter">
			<h3>Our Conversation</h3>
			<div id="twitter_div">
				<ul id="twitter_update_list"></ul>
			</div>
		</div>
	</div>
</div>
 
<div id="footerBottom">
	<div class="footerfix">
		<div id="us">
			<h4>Site Links</h4>
			<?php wp_nav_menu( array('menu' => 'Site Links', 'container' => false, )); ?>
		</div>
		<div id="cakes">
			<h4>Company Information</h4>
			<?php wp_nav_menu( array('menu' => 'Company Info', 'container' => false, )); ?>
		</div>
		<div id="blog">
			<h4>From The Blog</h4>
			<?php wp_nav_menu( array('menu' => 'From the Blog', 'container' => false, )); ?>
		</div>
	</div>
</div>
 
<div id="copyright">
	<p>Copyright &copy; 2011 <a href="index.html">Sophie Bifield Cake Company</a></p>
</div>
 
 
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/ottawacake.json?callback=twitterCallback2&count=3" type="text/javascript"></script>
<script src="<?php bloginfo('template_url');?>/js/functions.js"></script>
 
<?php wp_footer();?>
 
</body>
</html>

Look how much prettier that is!

Next Time

As this point, reach around and pat yourself on the back! The hardest part is now over! In the coming weeks, we’ll finish up by doing the sub pages (the easy part, I promise!). Join me then!