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:
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:
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:
[code language=”php” 1=”true”]
<?php get_sidebar(); >;
[/code]
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:
[code language=”php” 1=”true”]
//add_theme_support(‘post-formats’, array(‘aside’,));
[/code]
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:
[code language=”php” 1=”true”]
<?php
if (has_post_thumbnail()) {
echo ‘<div class=”large-thumbnail clear”>’;
echo the_post_thumbnail( ‘large-thumb’ );
echo ‘</div>’;
}
?>
[/code]
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:
Now, replace the .entry-content selector with the following group of selectors inside content-blog.css:
[code language=”css” 1=”true”]
.single .entry-content, .single .entry-header, .single .entry-footer {
line-height: normal;
display: block;
margin: 0 30px;
}
[/code]
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:
Let’s style the headings now! Edit the post and insert the following headings just below the <!–more–> tag:
[code language=”html” 1=”true”]
<h1> H1 Heading </h1>
<h2> H2 Heading </h2>
<h3> H3 Heading </h3>
<h4> H4 Heading </h4>
<h5> H5 Heading </h5>
<h6> H6 Heading </h6>
[/code]
Then add the following styles after the title selectors in content-blog.css:
[code language=”css” 1=”true”]
.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;
}
[/code]
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.
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:
[code language=”html” 1=”true”]
<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>
[/code]
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:
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:
Just insert the necessary spaces after the strings as you see it done on the screenshot below. This fixes the issue.
The previous and next links in our navigation come next.
Insert the following styles at the end of content-blog.css:
[code language=”css” 1=”true”]
/* 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;
}
[/code]
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:
[code language=”css” 1=”true”]
/* 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;}
[/code]
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:
Here is a list of all the other parts: part 1, part 2, part 3, part 4, part 5, part 6, part 7, part 8, part 9, part 10, part 11, part 12, part 14
