Template Hierarchy in a Nutshell

A WordPress theme will usually have some, or most of, the following template files:

single.php

page.php

category.php

tag.php

search.php

author.php

archive.php

And when you open a post WordPress looks for single.php, but what if you don’t have a single.php? What it boils down to is that if you’re trying to display a post, and there is no single.php file, it will default to using index.php.

In fact, it works this way across the board. There’s a flow chat courtesy of WordPress.org that goes shows it all and I strongly recommend keeping it bookmarked for quick reference.

Template Hierarchy in Practice

Even as early as now we can put this to the test. Open your site and view one of your posts, you’ll see that it’s based on index.php, most notably as the content available is only an excerpt.

Creating single.php

single.php should have;

Post Title

Meta data

Tags, and

Comments

With this new knowledge under our belt and the expectations for this page, it’s time to get down to business. Create a new file called single.php.

The Basics

We’re going to need a loop, so to save repeating what we’ve already done, simply copy index.php across and make the following changes

Many themes now come with custom page layouts, such as ones for full width and contact forms. Creating a full blown custom page will be included in the advanced series of Couch to WP Pro, but we’re going to create a full width page layout now as a teaser.

Creating a Full Width Page

For our full width page layout we essentially need to remove the sidebar and increase the width of the content area, therefore we need to be aware of what’s actually in the sidebar. In Flatstrap there are two particulars to be aware of.

Flatstrap is a 12 column layout, the sidebar consumes 3, therefore we need to make up for that space.

sidebar.php has the opening row div: <div class="row">

With these in mind, create a file called fullwidth-page.php and paste the contents of page.php in it and make do the following:

Save the file, and jump into your Dashboard and edit a page, and you should see our full width layout is now available.

Update your page with the new layout selected, and check it out to make sure it’s working!

Success!

WordPress Generated CSS

For the most part, you can make WordPress use whatever CSS classes and ids you like. But there’s a few classes that WordPress will automatically add to images, and though we can get around it, it’s definitely easier to support them. Plus if you intend on submitting your theme for sale it’s required that they are supported as the end user needs to be able to decide how to align their content. It also means that the experience of using WordPress can remain consistent across themes.

/*WordPress Generated Styles*/
.aligncenter{}
.alignleft{}
.alignright{}
.wp-caption{}
.wp-caption-text{}
.gallery-caption{}
/*These next two do not need styling,
but need to be present in the stylesheet*/
.sticky{}
.bypostauthor{}

How do images look at present?

As you can see, I’ve opened the “Image Test” post and they look absolutely dreadful.

We need to fix this, and to do that we need to write our own CSS for the first time in the series. Rather than make any changes to what Bootstrap includes, we’ll create style.css in the assets/css folder, and queue it just like we did inPart 4.

Winding Up

That’s really all to do for now, if you wanted to push the boundaries and carry on building bits and pieces into your page, or changing the layout, or something else, do so! Especially if you’re using Flatstrap, check out the documentation and see how you can spice up the layout with what it provides.

Coming up next we’re going to tackle the comments. We’ve got the tag in there ready for us, but it is a different kind of complexity compared to what we’ve just done, so take a break if you need it, and hit the comments when you’re ready.