It used to be a three way horse race for first place in the CMS wars. There was WordPress, Joomla, and Drupal. But sometime in the past year WordPress won the CMS wars.

Now, as the King of Thrones, so to speak, it’s worth taking a closer look at a few things.

We do a lot of development in WordPress these days. And we’re currently working on upgrading the website for our good friend Joey Boats, AKA the Cape Fear Naturalist.

The original website was hand built. We’ve upgraded it to WordPress. We started with a stock theme and have modified it pretty heavily.

It’s these modifications that we’re talking about today.

It seems like theme building in WordPress, at least for the first several months, is a case in “oh crap, how do I do that?” again and again. A lot of disciplines have to come together in order to get a site up and running. Off the top of my head you have:

• graphic design
• CSS
• HTML
• PHP
• An understanding of how WordPress works under the hood
• Marketing strategy
• UX

And there are a few I’ve probably left out.

For the purposes of today’s chat, we focus on that clusterfugg of CSS, PHP, and WordPress API.

And the first thing you need to know right off the bat is that…

You can do it the hard way

WordPress has two main ways to create new content: pages and posts.

The main difference between the two is that posts are taxonomic – meaning, they are associated with a date, tags, categories, and other types of classification. Pages are not.

For most businesses, it’s easy enough to consider posts as things that you do when you want to update content regularly and pages as something you use as the main content areas for the rest of your website.

As much sense as this makes to me, it turns out that posts are good for more than being used as a blog. Anything that needs to be grouped will benefit from being put in posts. That way they can be associated with tags or categories which can be referenced elsewhere in your template.

But, let’s say you’re me and that you created a bunch of pages that describe the kinds of tours that you can take with the Wrightsville Beach Scenic Tours. And then let’s say that I wanted to put those tours into groups and then I wanted to display that in a menu. And since it’s in the menu, I also wanted a group-level page that describes all the tours in that group. That’s got to be easy, right? I mean, there’s an API hook for that, surely.

As it turns out, no, there’s not. WordPress doesn’t play when it comes to things being taxonomic or not. From the jump, I did it backwards.

I setup the tour pages as pages, not posts. And now when I want to pull what is essentially a category page, I’m running into all kinds of trouble. But that’s okay because…

Actually, somebody else probably already did the heavy lifting for you

Learning CSS/PHP/Wordpress can be challenging. But it also has to be some of the easiest information to find, if you Google it. Practically every question you have, somebody has already answered. You don’t have to be good at coding to figure out the answer to my problem above – you have to be good at problem solving and resourceful with search engines.

Let’s take a closer look.

First, let’s look at the completed version.

The part we’re really concerned with is the featured image, title, excerpt, and button for each sub-page.

How do we do this? Well, before we go asking Google, there are a few things we know for sure:

1. We want to use the page’s featured image to display the thumbnail.
2. We want to use div tags for the layout, not tables.
3. Since this is in a template file, we need to be able to pull this information for each section.

Let’s look at these individually.

1. Working with the Featured Image in WordPress

If you’re making your own theme, or in this case, modifying an existing one – you may need to enable featured image support on your theme. The folks at WordPress have a great help page on their site to guide you through this. This is what’s known as the “easy part”.

Basically, you need to go into your functions.php file and add the following line of code:

add_theme_support( 'post-thumbnails' );

This enables the featured image section on pages and posts.

Then you need to add code to your page template page so that it will display. The exact nature of this code will depend on how you want to use your featured image, but at its most basic, it should look something like this:

// check if the post has a Post Thumbnail assigned to it.
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
the_content();

Now you have a working featured image that shows on the pages where you want.

2. We want to use div tags for the layout

This next part is pure HTML/CSS shenanigans. And I’ll be the first to admit, I kinda hate this part. Div behavior is still somewhat unpredictable to me but as you can tell from the image above, what I wanted were two divs side-by-side. The first contains the featured image and the second contains the title, excerpt, and button.

A basic layout looks like this:

<div id="cat-container">
<div id="cat-pic"></div>
<div id="cat-text"></div>
</div>

Oh, and if you’re wondering about those IDs, I just made those up. The secret to all this div business is floating the divs. The general idea is to float the interior divs left and right respectively and then to float the parent div to the left. Remember to clear your float.

3. Let’s pull the data dynamically

The next problem to solve is to be able to get data about the subpages we want to display.

Fortunately, this is another easy part. WordPress has a way to check to see if a page is a subpage of another page. All you have to do is reference the parent page’s ID in the following code.

<?php if ( is_page(753) ): ?>

Insert content here.

<?php endif; ?>

In this case, the page ID is 753. Now, any code you run between those two tags will confine itself to the subpages of the parent page with an ID of 753. This will be important later.

So now we have this code, all told:

<?php if ( is_page(753) ): ?>
<div id="cat-container">
<div id="cat-pic"></div>
<div id="cat-text"></div>
</div>
<div style="clear:both;"></div>
<?php endif; ?>

Before we move on, let’s write out our code a little further. We know more than we think we do about how we want this to work.

We know, for instance, that in the place where the featured image needs to go that the image is going to be linked to the subpage. Let’s add in some temporary code now:

<a href="#"><img src=""></a>

We can actually do better than that. By referencing the WordPress Codex, we can get the code we want to use to update this temporary code. For example, let’s use the WordPress template tag to link to the subpage.

<a href="<?php the_permalink() ?>"><img src=""></a>

Now we want to drop in the code for the featured image. But before we do that, we have to learn something about how WordPress handles image uploads.

There are a few settings in WordPress that I used to ignore. Image settings was one of them. But it’s a fantastic idea. It’s easy, and it’s one you should use. You’re going to look in the WordPress menu under Settings –> Media. There, you’ll see this:

Here’s the simple trick: when you set these dimensions, you can later reference these sizes either in your posts/pages or in your code.

If you’re like me, you want a large featured image but a smaller version of the same image for the category page. This is an easy way to get it. For this website, I set the large size to be 844px x 310px and the thumbnail size to be 240px x 170px. (These dimensions aren’t pictured in the above image. Sorry, I know that’s confusing.)

When you set these values, and this is important, it’s only applied to newly uploaded images. WordPress doesn’t retroactively go back and resize the images you’ve already uploaded. So if you’re like me, once you set this value, you’ll have to go back and reupload your featured images so that they will crop correctly.

Now that we know we want to use the thumbnail of the featured image, we need to know how to reference that in the code. Again, WordPress Codex to the rescue.

the_post_thumbnail('thumbnail');

Put it all together and what do we have?

<a href="<?php the_permalink() ?>"><?php the_post_thumbnail('thumbnail'); ?></a>

Now let’s drop all of that into our set of divs.

<?php if ( is_page(753) ): ?>
<div id="cat-container">
<div id="cat-pic">
<a href="<?php the_permalink() ?>">
<?php the_post_thumbnail('thumbnail'); ?>
</a>
</div>
<div id="cat-text"></div>
</div>
<div style="clear:both;"></div>
<?php endif; ?>

The next challenge is to find the code for the title and the excerpt. We know that we want the title to be in an h2 tag that links to the subpage and we want the excerpt to be in a paragraph tag. Let’s write out the pseudo code. And since we already know how to insert the link code, I’ll add that in here too.

<a href="<?php the_permalink() ?>"><h2>Title of the Post</h2></a>
<p>The excerpt.</p>

A quick look at the WordPress Codex again (man, this thing is helpful) shows how to write the title using a template tag. Let’s look at that again.

<a href="<?php the_permalink() ?>"><h2><?php the_title(); ?></h2></a>

Now it’s time to deal with the excerpt. The problem is, pages don’t have an excerpt. It must be another distinguishing characteristic between pages and posts. So in order to make this work, I used a plugin. You can use whatever suits you best, but I used a plugin called Page Excerpt. What’s genius about this plugin is that it gives you a place when you write your page to add in an excerpt. Then all you have to do to call the excerpt is use the following code.

<?php the_excerpt(); ?>

Put it all together and what do we have now?

<?php if ( is_page(753) ): ?>
<div id="cat-container">
<div id="cat-pic">
<a href="<?php the_permalink() ?>">
<?php the_post_thumbnail('thumbnail'); ?>
</a>
</div>
<div id="cat-text">
<a href="<?php the_permalink() ?>"><h2><?php the_title(); ?></h2></a>
<p><?php the_excerpt(); ?></p>
</div>
</div>
<div style="clear:both;"></div>
<?php endif; ?>

The last thing we need is a button that links to the sub-page. I love this CSS button generator. Let it do the heavy lifting for you on the CSS front. The only code we need to add for it to work on the page is this:

<a href="<?php the_permalink() ?>">Read More and Book Now</a>

Add that into our code block and you have:

<?php if ( is_page(753) ): ?>
<div id="cat-container">
<div id="cat-pic">
<a href="<?php the_permalink() ?>">
<?php the_post_thumbnail('thumbnail'); ?>
</a>
</div>
<div id="cat-text">
<a href="<?php the_permalink() ?>"><h2><?php the_title(); ?></h2></a>
<p><?php the_excerpt(); ?></p>
<a href="<?php the_permalink() ?>">Read More and Book Now</a>
</div>
</div>
<div style="clear:both;"></div>
<?php endif; ?>

Now, we’re starting to get somewhere. But, you’d find if you dropped this code into your site that it still doesn’t work. Why it that?

The main problem is that we need to have WordPress cycle through the subpages to output each instance of the code. That means we need to do two things:

1. Start a WordPress loop
2. Use a while statement

The magic code looks like this:

<?php query_posts(array('post_parent' => 753, 'post_type' => 'page'));
while (have_posts()) { the_post(); ?>

I would love to tell you that I wrote this line of code but I didn’t. Remember above when I said that people have probably already solved your problem? Well this guy is the one who solved this problem for me. (Look at the second code block on the linked page.) I was looking for how to handle page excerpts in WordPress (before I knew that pages didn’t have them) when I ran across this guy who was essentially working out the same code.

Now let’s add that code into our existing code block.

<?php if ( is_page(753) ): ?>
<?php query_posts(array('post_parent' => 753, 'post_type' => 'page'));
while (have_posts()) { the_post(); ?>
<div id="cat-container">
<div id="cat-pic">
<a href="<?php the_permalink() ?>">
<?php the_post_thumbnail('thumbnail'); ?>
</a>
</div>
<div id="cat-text">
<a href="<?php the_permalink() ?>"><h2><?php the_title(); ?></h2></a>
<p><?php the_excerpt(); ?></p>
<a href="<?php the_permalink() ?>">Read More and Book Now</a>
</div>
</div>
<div style="clear:both;"></div>
<?php } ?>
<?php endif; ?>

And that is all she wrote. With that code block and the CSS that follows you should get something that looks like this:

[toggle title=”View the CSS”] /* Category Pages */

.cat-container {
width:800px;
padding:5px;
float:left;
} .cat-pic {
width:250px;
float:left;
} .cat-text {
float:right;
width:550px;
} .cat-button {
-moz-box-shadow:inset 0px 1px 0px 0px #fed897;
-webkit-box-shadow:inset 0px 1px 0px 0px #fed897;
box-shadow:inset 0px 1px 0px 0px #fed897;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f6b33d), color-stop(1, #d29105) );
background:-moz-linear-gradient( center top, #f6b33d 5%, #d29105 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#f6b33d’, endColorstr=’#d29105′);
background-color:#f6b33d;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #eda933;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #cd8a15;
}.cat-button:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d29105), color-stop(1, #f6b33d) );
background:-moz-linear-gradient( center top, #d29105 5%, #f6b33d 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#d29105′, endColorstr=’#f6b33d’);
background-color:#d29105;
}.cat-button:active {
position:relative;
top:1px;
}.cat-button:visited {
color:#ffffff;
}
[/toggle]

If you wanted you could add in other bells and whistles. You could check for a featured image and show a default one if one doesn’t exist, for example. But this a basic and straightforward way to get featured images, headlines, and excerpts out of pages.