How To Build A WordPress CMS Theme – Part 7: Subpages, Finale and an eBook!

We’ve come a long way through the series, and sadly, it’s time to finish up! All we’ve got left is a couple of subpages, so let’s go!

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 . Let’s get it started!

Chapter 18: The About Page

Here’s the regular HTML content for the about page:

<div id="main">
		<div id="title">
			<h2>About</h2>
		</div>
 
		<div class="about">
			<div class="aboutHeader">
				<h3>Discovery</h3>
			</div>
			<div class="aboutText">
				<p>Sophie discovered the sweet art of cake design when the search for her own	wedding cake ended in disappointment. Sophie believes that a cake should not only taste great, but should be a spectacular centerpiece that captures both the style and mood of an event.</p>
			</div>
		</div>
		<div class="about">
			<div class="aboutHeader">
				<h3>So the story goes</h3>
			</div>
 
			<div class="aboutText">
			<p>Trained by some of the most prestigious cake designers in the country, Sophie brings a combination of education, natural artistic talents, a meticulous eye for detail and an eye for colour to every custom cake she creates.</p>
 
			<p>Inspired by the endless possibilities of the edible arts, Sophie works with her clients imaginations to bring their vision to cake.</p>
			</div>
		</div>
		<div class="about">
			<div class="aboutHeader borderBottom fixed">
				<h3>Contact</h3>
			</div>
			<div class="aboutText borderBottom">
				<p>For more information, contact us via email at <a href="mailto:info@sophiebifieldcakecompany.com">info@sophiebifieldcakecompany.com</a> or by telephone at (613) 869-7674.</p>
			</div>
		</div>
	</div>

The about page is easy and mostly just a content dump. Open up that page inside of the WordPress admin and dump the following content in

<div class="about">
			<div class="aboutHeader">
				<h3>Discovery</h3>
			</div>
			<div class="aboutText">
				<p>Sophie discovered the sweet art of cake design when the search for her own	wedding cake ended in disappointment. Sophie believes that a cake should not only taste great, but should be a spectacular centerpiece that captures both the style and mood of an event.</p>
			</div>
		</div>
		<div class="about">
			<div class="aboutHeader">
				<h3>So the story goes</h3>
			</div>
 
			<div class="aboutText">
			<p>Trained by some of the most prestigious cake designers in the country, Sophie brings a combination of education, natural artistic talents, a meticulous eye for detail and an eye for colour to every custom cake she creates.</p>
 
			<p>Inspired by the endless possibilities of the edible arts, Sophie works with her clients imaginations to bring their vision to cake.</p>
			</div>
		</div>
		<div class="about">
			<div class="aboutHeader borderBottom fixed">
				<h3>Contact</h3>
			</div>
			<div class="aboutText borderBottom">
				<p>For more information, contact us via email at <a href="mailto:info@sophiebifieldcakecompany.com">info@sophiebifieldcakecompany.com</a> or by telephone at (613) 869-7674.</p>
			</div>
		</div>

Now, depending on how savvy your client is, you may want to break this done into custom fields, since it includes a lot of divs. I don’t think it’s too necessary here, because when the client views the regular WYSIWYG, they’ll be able to edit the content without messing with the layout too much.

Check out the about page right now, and you’ll see it’s a mess of ugliness. We need to add the #main container and the #title div to our page template – page.php:

<?php get_header(); ?>
 
	<div id="main">
		<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
			<div id="title"><h2><?php the_title();?></h2></div>
			<?php the_content();?>
		<?php endwhile; ?>
	</div>
 
<?php get_footer(); ?>

Refresh and ta da!

Chapter 19: The Menu Page

Here’s another easy page to that’s mostly a content dump. For the sake of the tutorial, I’m going to pretend that the client doesn’t want to do any layout in the WYSIWYG on this page, besides normal styling tags, so we’ll need to create two custom fields, one for the left column and another for the right. Here’s the original HTML:

<div id="column1">
			<h3>Sussex (Chocolate Buttercream)</h3>
				<p>Our signature flavour - a combination of chocolate cake and buttermilk that be a hit at your next event. Available with chocolate and vanilla buttercream. </p>
 
			<h3>The Byward (Chocolate Fudge)</h3>
				<p>If chocolate cake wasn’t enough, we just added a chocolate fudge into the mix. Available with chocolate buttercream, vanilla buttercream, chocolate or vanilla ganache. </p>
 
			<h3>The Village (Vanilla Bean)</h3>
				<p>Maybe your not such a chocolate person. Why not give our vanilla bean a go. Made with Madagascar Vanilla and moist to the last drop.</p>
 
			<h3>Available Buttercream Flavours</h3>
				<p>Vanilla<br />
				Chocolate<br />
				Chocolate chip<br />
				Strawberry</p>
		</div>
 
		<div id="column2">
			<h3>Banana Boat (Banana Yogurt)</h3>
				<p>A take on traditional banana bread - this is a great option for the health conscious. Available with chocolate, vanilla or chocolate chip buttercream.</p>
 
			<h3>Over the Rainbow (Rainbow Carrot)</h3>
				<p>Available seasonally this carrot cake uses the freshest of ingredients from local farms in Ottawa. Available with vanilla buttercream or cream cheese frosting for a more traditional approach.</p>
 
			<h3>Lemon Meringue</h3>
				<p>Sweet with just a touch of tart, our lemon cake uses an italian buttercream to offer a refreshing flavour that would make any mouth water.</p>
 
			<h3>Available Ganache Flavours</h3>
				<p>Milk Chocolate<br />
				Dark Chocolate<br />
				White Chocolate</p>
		</div>

First, let’s dump the content into the admin area. Open up the menu page, and scroll down to the “Custom Fields” section. Add a new custom field called “Left Column” and dump it’s content into the value field. Do the same for the right column, naming it “Right Column”.

Then open up your page.php template file. Instead of creating a whole new template page just for these two columns, we’ll make it easy on ourselves (and the client), by just adding a conditional – if the client is using these two fields, then show the correct HTML, if not, then don’t. This makes it easy to also add double columns to other pages as well.

<?php get_header(); ?>
 
	<div id="main">
		<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
			<div id="title"><h2><?php the_title();?></h2></div>
			<?php the_content();?>
 
			<?php if($myImageFileName = get_post_meta($post->ID, 'Left Column', true)){ ?><div id="column1"><?php echo get_post_meta($post->ID, 'Left Column', true);?></div><?php } ?>
			<?php if($myImageFileName = get_post_meta($post->ID, 'Right Column', true)){ ?><div id="column2"><?php echo get_post_meta($post->ID, 'Right Column', true);?></div><?php } ?>
		<?php endwhile; ?>
	</div>
 
<?php get_footer(); ?>

Chapter 20: The Challenge!

The last page I’m going to show you how to do is the gallery page. If you look on the original site, you’ll see it includes a gallery that switches between several thumbnails, and then can slide left to right to show different projects.

This is another layout that can be done in different ways, but I’m going to use a custom post type for this one. Open up your functions.php file and add the code for a custom post type:

register_post_type('gallery', array(
	'label' => __('Gallery'),
	'singular_label' => __('Gallery'),
	'public' => true,
	'show_ui' => true,
	'capability_type' => 'post',
	'hierarchical' => false,
	'rewrite' => true,
	'query_var' => false,
	'supports' => array('title', 'editor', 'author', 'custom-fields'),
));

Refresh your WordPress admin area, and you should now see a “Gallery” section in the left hand nav. Now let’s look at the HTML required for that page:

 
		<div id="slideshow">
			<div id="slideshowContainer">
				<div class="slide">
					<div class="images">
						<a name="lady1"></a><img src="images/slideshow/lady_spot_main.png" alt="lady_spot_main" width="319" height="387" />
						<a name="lady2"></a><img src="images/slideshow/lady_spot_001.png" alt="lady_spot_001" width="319" height="387" />
						<a name="lady3"></a><img src="images/slideshow/lady_spot_002.png" alt="lady_spot_002" width="319" height="387" />
						<a name="lady4"></a><img src="images/slideshow/lady_spot_003.png" alt="lady_spot_003" width="319" height="387" />
					</div>
 
					<div class="slideText">
						<h3>Lady Lace</h3>
						<p>With a hint of elegance and a touch of romanticism this golden lady cake has it all. A startling centerpiece at any event, this lady of lace will truly be the belle of the ball! Featuring a golden bust with sugar flowers, rice paper fans and a stunning silver brooch, this cake is almost too good to eat. Speaking of eating, our golden lady would be delicious in our trademark Sussex (chocolate butter cream) flavor.</p>
 
						<ul class="thumbnail">
							<li><a href="#lady1"><img src="images/slideshow/lady_thumb_main.png" alt="lady_thumb_main" width="85" height="98" /></a></li>
							<li><a href="#lady2"><img src="images/slideshow/lady_thumb_001.png" alt="lady_thumb_001" width="85" height="98" /></a></li>
							<li><a href="#lady3"><img src="images/slideshow/lady_thumb_002.png" alt="lady_thumb_002" width="85" height="98" /></a></li>
							<li><a href="#lady4"><img src="images/slideshow/lady_thumb_003.png" alt="lady_thumb_003" width="85" height="98" /></a></li>
						</ul>
					</div>
				</div><!-- END Lady Lace - Slide 1 -->
 
 
				<div class="slide">
					<div class="images">
						<a name="mask1"></a><img src="images/slideshow/mask_spot_main.png" alt="mask_spot_main" width="319" height="387" />
						<a name="mask2"></a><img src="images/slideshow/mask_spot_001.png" alt="mask_spot_001" width="319" height="387" />
						<a name="mask3"></a><img src="images/slideshow/mask_spot_002.png" alt="mask_spot_002" width="319" height="387" />
						<a name="mask4"></a><img src="images/slideshow/mask_spot_003.png" alt="mask_spot_003" width="319" height="387" />
					</div>
					<div class="slideText">
						<h3>Mysterious Masquerade</h3>
						<p>Everyone needs a bit of mystery in their life. Our stunningly dramatic red, white, and black masquerade cake is one of our leading cake designs. The elegance of the feathers and finely detailed hand-ruffled ribbons give this cake its flair. Attention to detail is what this cake is all about with the red ruffled sugar mask, the delicately painted edges and the hand placed sugar dragees. To make the event complete, hand each guest a red mask to wear for the night!</p>
 
						<ul class="thumbnail">
							<li><a href="#mask1"><img src="images/slideshow/mask_thumb_main.png" alt="mask_thumb_main" width="85" height="98" /></a></li>
							<li><a href="#mask2"><img src="images/slideshow/mask_thumb_001.png" alt="mask_thumb_001" width="85" height="98" /></a></li>
							<li><a href="#mask3"><img src="images/slideshow/mask_thumb_002.png" alt="mask_thumb_002" width="85" height="98" /></a></li>
							<li><a href="#mask4"><img src="images/slideshow/mask_thumb_003.png" alt="mask_thumb_003" width="85" height="98" /></a></li>
						</ul>
					</div>
				</div><!-- END Maskquerade - Slide 2 -->
 
 
				<div class="slide">
					<div class="images">
						<a name="music1"></a><img src="images/slideshow/music_spot_main.png" alt="music_spot_main" width="319" height="387" />
						<a name="music2"></a><img src="images/slideshow/music_spot_001.png" alt="music_spot_001" width="319" height="387" />
						<a name="music3"></a><img src="images/slideshow/music_spot_002.png" alt="music_spot_002" width="319" height="387" />
						<a name="music4"></a><img src="images/slideshow/music_spot_003.png" alt="music_spot_003" width="319" height="387" />
					</div>
					<div class="slideText">
						<h3>Music Staff</h3>
						<p>Everyone has a favorite song. Our five-tiered black and white musical cake brings the spirit and vibe of your favorite song to your party, wedding or event. Featuring detailed sheet music wraps, romantic purple butterflies and flowers, this cake will leave you and your guests singing and dancing. The perfect cake to celebrate a recent graduation, engagement or even to welcome summer! There won't be a wrong note with this stunning cake. (This design was inspired by Young Designs holiday party. <a href="http://youngjewelrydesigns.com">http://www.youngjewelrydesigns.com/)</a> </p>
 
						<ul class="thumbnail">
							<li><a href="#music1"><img src="images/slideshow/music_thumb_main.png" alt="music_thumb_main" width="85" height="98" /></a></li>
							<li><a href="#music2"><img src="images/slideshow/music_thumb_001.png" alt="music_thumb_001" width="85" height="98" /></a></li>
							<li><a href="#music3"><img src="images/slideshow/music_thumb_002.png" alt="music_thumb_002" width="85" height="98" /></a></li>
							<li><a href="#music4"><img src="images/slideshow/music_thumb_003.png" alt="music_thumb_003" width="85" height="98" /></a></li>
						</ul>
					</div>
				</div><!-- END Music - Slide 3 -->
 
 
				<div class="slide">
					<div class="images">
						<a name="white1"></a><img src="images/slideshow/white_spot_main.png" alt="white_spot_main" width="319" height="387" />
						<a name="white2"></a><img src="images/slideshow/white_spot_001.png" alt="white_spot_001" width="319" height="387" />
						<a name="white3"></a><img src="images/slideshow/white_spot_002.png" alt="white_spot_002" width="319" height="387" />
						<a name="white4"></a><img src="images/slideshow/white_spot_003.png" alt="white_spot_003" width="319" height="387" />
					</div>
					<div class="slideText">
						<h3>Vintage Glam</h3>
						<p>There is nothing quite like the image of a beautiful bride in a flowing white gown on her wedding day. Inspired by a bridal gown at Luxe Bridal Boutique, our six tier white wedding cake tastes as good as it looks. The entire cake is edible from the silver bird in the golden bird cage to the flowers, lace and feathers. Mmm, perfect in our vanilla bean flavor (The Village), this cake will have your guests coming back for one more slice.</p>
 
						<ul class="thumbnail">
							<li><a href="#white1"><img src="images/slideshow/white_thumb_main.png" alt="white_thumb_main" width="85" height="98" /></a></li>
							<li><a href="#white2"><img src="images/slideshow/white_thumb_001.png" alt="white_thumb_001" width="85" height="98" /></a></li>
							<li><a href="#white3"><img src="images/slideshow/white_thumb_002.png" alt="white_thumb_002" width="85" height="98" /></a></li>
							<li><a href="#white4"><img src="images/slideshow/white_thumb_003.png" alt="white_thumb_003" width="85" height="98" /></a></li>
						</ul>
					</div>
				</div> <!-- END White - Slide 4 -->
 
 
				<div class="slide">
					<div class="images">
						<a name="blue1"><img src="images/slideshow/blue-spot-main.png" alt="blue-spot-main" width="319" height="387" /></a>
						<a name="blue2"><img src="images/slideshow/blue-spot-001.png" alt="blue-spot-001" width="319" height="387" /></a>
						<a name="blue3"><img src="images/slideshow/blue-spot-002.png" alt="blue-spot-002" width="319" height="387" /></a>
						<a name="blue4"><img src="images/slideshow/blue-spot-003.png" alt="blue-spot-003" width="319" height="387" /></a>
					</div>
 
					<div class="slideText">
						<h3>Something Blue</h3>
						<p>Make your wedding day complete with our Something Borrowed, Something Blue cake. This simple yet sophisticated cake brings with it that final touch of class that you want on your wedding day. The feather and sugar ruffles highlight the fun and laughter that is sure to be part of your big day. For a rich tasting cake, we suggest our signature chocolate fudge flavor (The Byward) with chocolate ganache.</p>
 
						<ul class="thumbnail">
							<li><a href="#blue1"><img src="images/slideshow/blue-thumb-main.png" alt="blue-thumb-main" width="85" height="98" /></a></li>
							<li><a href="#blue2"><img src="images/slideshow/blue-thumb-001.png" alt="blue-thumb-001" width="85" height="98" /></a> </li>
							<li><a href="#blue3"><img src="images/slideshow/blue-thumb-002.png" alt="blue-thumb-002" width="85" height="98" /></a></li>
							<li><a href="#blue4"><img src="images/slideshow/blue-thumb-003.png" alt="blue-thumb-003" width="85" height="98" /></a></li>
							<li></li>
						</ul>
					</div>
				</div> <!-- END Blue - Slide 5 -->
 
 
				<div class="slide">
					<div class="images">
						<a name="pink1"></a><img src="images/slideshow/pink_spot_main.png" alt="pink_spot_main" width="319" height="387" />
						<a name="pink2"></a><img src="images/slideshow/pink_spot_001.png" alt="pink_spot_001" width="319" height="387" />
						<a name="pink3"></a><img src="images/slideshow/pink_spot_002.png" alt="pink_spot_002" width="319" height="387" />
						<a name="pink4"></a><img src="images/slideshow/pink_spot_003.png" alt="pink_spot_003" width="319" height="387" />
					</div>
					<div class="slideText">
						<h3>Sugar and Swarovski Crystals</h3>
						<p>Next to diamonds, pearls and Swarovski crystals are definitely a girl's best friend. This cake is class and elegance. Decorated with sugar pearls, a flowing edible script and a sugar crown, this cake will leave your groom eating out of your hand.</p>
 
						<ul class="thumbnail">
							<li><a href="#pink1"><img src="images/slideshow/pink_thumb_main.png" alt="pink_thumb_main" width="85" height="98" /></a></li>
							<li><a href="#pink2"><img src="images/slideshow/pink_thumb_001.png" alt="pink_thumb_001" width="85" height="98" /></a></li>
							<li><a href="#pink3"><img src="images/slideshow/pink_thumb_002.png" alt="pink_thumb_002" width="85" height="98" /></a></li>
							<li><a href="#pink4"><img src="images/slideshow/pink_thumb_003.png" alt="pink_thumb_003" width="85" height="98" /></a></li>
						</ul>
					</div>
				</div> <!-- END Pink Cake - Slide 6 -->
 
 
				<div class="slide">
					<div class="images">
						<a name="elephant1"></a><img src="images/slideshow/elephant_spot_main.png" alt="elephant_spot_main" width="319" height="387" />
						<a name="elephant2"></a><img src="images/slideshow/elephant_spot_001.png" alt="elephant_spot_001" width="319" height="387" />
						<a name="elephant3"></a><img src="images/slideshow/elephant_spot_002.png" alt="elephant_spot_002" width="319" height="387" />
						<a name="elephant4"></a><img src="images/slideshow/elephant_spot_003.png" alt="elephant_spot_003" width="319" height="387" />
					</div>
					<div class="slideText">
						<h3>Lucky Elephant</h3>
						<p>Wisdom. Good luck. Strength. Power. Bring the spirit of the lucky elephant to your big day. Featuring detailed accents in red, white and blue with a golden necklace, this lucky elephant is just the cake you've been looking for. Bringing with it a sense of confidence and fun, our edible elephant cake will bring the good luck you want to your life.</p>
 
						<ul class="thumbnail">
							<li><a href="#elephant1"><img src="images/slideshow/elephant_thumb_main.png" alt="elephant_thumb_main" width="85" height="98" /></a></li>
							<li><a href="#elephant2"><img src="images/slideshow/elephant_thumb_001.png" alt="elephant_thumb_001" width="85" height="98" /></a></li>
							<li><a href="#elephant3"><img src="images/slideshow/elephant_thumb_002.png" alt="elephant_thumb_002" width="85" height="98" /></a></li>
							<li><a href="#elephant4"><img src="images/slideshow/elephant_thumb_003.png" alt="elephant_thumb_003" width="85" height="98" /></a></li>
						</ul>
					</div>
				</div>
			</div><!-- END SlideshowContainer -->
		</div><!-- END Slideshow -->

WHOA quite a lot isn’t it? Let’s make this easier by breaking it down. Each “slide” container is going to be a new post inside of gallery. The h3 will be the title of the gallery post, the p tags will be content in the WYSIWYG, the large photos will be added via custom fields called “Slide”, and the thumbnails will be added the same way, although I recommend using something like TimThumb to get sizes proportional. Let’s get started!

Now, let’s get content out of the way before the structure.

Create a new post underneath the Gallery custom post type for each slide, and add the content where I stated above. (I’m gonna be lazy and only do one :P)

Now, open up your page.php file. The code is pretty complicated, so let me go ahead and show you the completed code, and I’ll explain what I did:

<?php get_header(); ?>
 
	<div id="main">
		<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
			<div id="title"><h2><?php the_title();?></h2></div>
			<?php the_content();?>
 
			<?php if($myImageFileName = get_post_meta($post->ID, 'Left Column', true)){ ?><div id="column1"><?php echo get_post_meta($post->ID, 'Left Column', true);?></div><?php } ?>
			<?php if($myImageFileName = get_post_meta($post->ID, 'Right Column', true)){ ?><div id="column2"><?php echo get_post_meta($post->ID, 'Right Column', true);?></div><?php } ?>
		<?php endwhile; wp_reset_query(); ?>
 
 
		<?php if(is_page('The Gallery')) { ?>
			<div id="slideshow">
				<div id="slideshowContainer">
					<?php query_posts('post_type=gallery&posts_per_page=-1'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
						<div class="slide">
							<div class="images">
								<?php $i=1; $lang = get_post_meta($post->ID, 'Slide', false); ?>
								<?php foreach($lang as $lang) { echo '<a name="slide'.$i.'"></a><img src="'. get_bloginfo('siteurl').'/wp-content/themes/sophie/'.$lang.'" alt=""/>'; $i++; } ?>
							</div>
 
							<div class="slideText">
								<h3><?php the_title();?></h3>
								<?php the_content(); ?>
 
								<ul class="thumbnail">
									<?php $d=1; $thumb = get_post_meta($post->ID, 'Slide', false); ?>
									<?php foreach($thumb as $thumb) { echo '<li><a href="#slide'.$d.'"><img src="'. get_bloginfo('siteurl').'/wp-content/themes/sophie/'.$thumb.'" alt=""width="85" height="98" /></a></li>'; $d++; } ?>
								</ul>
							</div>
						</div>
					<?php endwhile; wp_reset_query(); ?>
				</div>
			</div>
		<?php } ?>
	</div>
 
<?php get_footer(); ?>

First, I added the wp_reset_query since we needed to close the loop for that page, and begin one to pull the custom posts in. Then, I created a conditional to only show the slider code if we were on the gallery page.

After pasting in the bones of the HTML, I replaced the content with WordPress functions. Then, I replace the large images with a foreach loop that will grab each “Slide” custom field”. Lastly, you’ll need to include the correct JS files for the slider and slideshow to work, which you can do by viewing the source of the demo site.

Chapter 21: Conclusion

In conclusion, WordPress is actually really easy to learn versus other CMS’s. It’s fun and versatile to work in, and there’s pretty much nothing you can’t do in it. After you’ve made it through this series and you want to learn more, I suggest checking out Digging into WordPress by Chris Coyier.

Enjoy this book and want to purchase a PDF version to keep with you?