By Carl Heaton

The time has come for us to style the template for our single posts. Let’s use the post titled “Post Format: Standard” as our starting point. The starting point of this tutorial is a blog template that has a right sidebar but we would like to remove it and use a full width layout instead:

starting point single post template

The first thing I would like you to do is to copy the content.css stylesheet inside the layouts folder into content-blog.css. We will use the new stylesheet to apply styles to all our single blog posts. However, to do this, we also have to tell WordPress when to use this template.

Edit the simple_portfolio_scripts() functions inside functions.css and replace content-sidebar.css with content-blog.css. Take a look at the screenshot below:

simple_portfolio_scripts

Although we have already removed the stylesheet for the right sidebar layout, the sidebar itself is still visible below our content and we have to remove it from the single post template as well, and that template is single.php. Edit it and remove the call to the sidebar, which looks like this:

<?php get_sidebar(); >;

Save and refresh your single post template and you should be able to see the sidebar, while our content will span the full width of the page.

Let us also remove the post format “Aside” from displaying in the Edit Post section of our WP dashboard by commenting the following line of code inside functions.php:

//add_theme_support('post-formats', array('aside',));

If you examine the single.php template, you will notice that it makes a call to the content-single.php template. Furthermore, since we are displaying small featured images on our blog index page, we should be displaying the large featured image on individual posts if a user sets one. To do that, we just need to copy the following function from the content-page.php and insert it into content-single.php just like you seen on the screenshot:

<?php

if (has_post_thumbnail()) {

echo '<div class="large-thumbnail clear">';

echo the_post_thumbnail( 'large-thumb' );

echo '</div>';

}

?>

 

adding the large featured image

I’ve also reduced most of the text in the original post since we don’t need it. The result, after you add a featured image to the post, looks like this:

large featured image added

Now, replace the .entry-content selector with the following group of selectors inside content-blog.css:

.single .entry-content, .single .entry-header, .single .entry-footer {

line-height: normal;

display: block;

margin: 0 30px;

}

As you can see, I’m also using the .single class to stay on the save side of things and ensure I’m applying styles only to the single post template.

Next, I’m replacing the .entry-content h1 and the .entry-content h2 selectors with .single h1.entry-title and .single h2.entry-title:

entry titles styles

Let’s style the headings now! Edit the post and insert the following headings just below the <!–more–> tag:

<h1> H1 Heading </h1>
<h2> H2 Heading </h2>
<h3> H3 Heading </h3>
<h4> H4 Heading </h4>
<h5> H5 Heading </h5>
<h6> H6 Heading </h6>

Then add the following styles after the title selectors in content-blog.css:

.single .entry-content h1,

.single .entry-content h2,

.single .entry-content h3,

.single .entry-content h4,

.single .entry-content h5,

.single .entry-content h6 {

margin: 10px 0;

font-family: "Droid Serif", serif;

color: #3b6a26;

}

.single .entry-content h1 {

font-size: 32px;

font-size: 3.2rem;

}

.single .entry-content h2 {

font-size: 30px;

font-size: 3.0rem;

}

.single .entry-content h3 {

font-size: 28px;

font-size: 2.8rem;

}

.single .entry-content h4 {

font-size: 26px;

font-size: 2.6rem;

}

.single .entry-content h5 {

font-size: 24px;

font-size: 2.4rem;

}

.single .entry-content h6 {

font-size: 22px;

font-size: 2.2rem;

}

.single .entry-content p,

.single .entry-content ul,

.single .entry-content ol {

font-size: 18px;

font-size: 1.8rem;

}

.single p {

display: block;

clear: right;

text-align: left;

color: #5e6d66;

}

.single .entry-content blockquote p {

font-size: 23px;

font-size: 2.3rem;

}

.single .entry-content blockquote cite {

font-size: 21px;

font-size: 2.1rem;

}

These, although long, are simple styles. Here we are styling the size of each heading and applying a font-family and color to each one of them. The paragraphs are also aligned to the left and I’m styling the blockquotes too.

formatted headings

As you see, I’ve also added a citation to the post, and if you wander what its markup is, have a look at it and add it to the post if you wish:

<blockquote>Only one thing is impossible for God: To find any sense in any copyright law on the planet.

<cite><a href="http://www.brainyquote.com/quotes/quotes/m/marktwain163473.html">Mark Twain</a></cite></blockquote>

Let’s insert images of different sizes into the post and align the first one to the left and the second one to the right:

image alignment

This doesn’t look bad and we can continue with the rest of the content.

The next thing we would like to fix is the meta content in our entry footer, for which we would once again need to edit the simple_portfolio_posted_on() function inside template-tags.php:

entry footer meta

Just insert the necessary spaces after the strings as you see it done on the screenshot below. This fixes the issue.

meta spaces

The previous and next links in our navigation come next.

Insert the following styles at the end of content-blog.css:

/* Post Navigation */

.single .navigation {

margin: 0;

}

.single .navigation a{

color: #5e6d66;

}

.single .nav-links {

overflow: hidden;

margin: 30px;

}

.single .nav-previous {

text-align: left;

}

.single .nav-next {

text-align: right;

}

This is just a basic text and margin alignment as well as change of links color.

I almost forgot the categories and tags meta in the entry footer section. These are the styles for them:

/* Category and tag links */

.single .entry-footer {padding: 0;}

.single .cat-links {

display: inline-block;

width: 50%;

text-align: left;

}

.single .tags-links {

display: inline-block;

width: 50%;

text-align: right;

}

.single .edit-link {display: block;}

This helps display them in a line while allocating equal space to both the categories and tags meta and aligning the content to the left and the right in their containers. This concludes the tutorial on the single post template on which we had no design to guide our work. If you have followed my instructions since the start, your template should look exactly like mine:

single post template ready

Here is a list of all the other parts: part 1part 2part 3part 4part 5part 6part 7part 8part 9part 10part 11part 12part 14

carl68

About The Author

Carl

He is our senior instructor and originally from Manchester UK. Carl teaches our Web Design and Online Marketing Courses.