In part 1 of our index template tutorial, we created the necessary posts for our index template and formatted the meta content of our posts in a way that it matches the format of our design. The following screenshot illustrates the starting point of part 2:
As you see, I’ve already set the number of posts to 3 via Settings -> Reading, as we only want to display 3 posts at one time on our blog index page.
Next, I’m setting a 30px margin for our content area by placing the following style at the end of “Posts and pages” section in style.css:
[code language=”css” 1=”true”]
.home .content-area {
margin: 30px;
}
[/code]
The next most obvious thing we are missing after we dealt with the meta content, is the small featured image we previously set up in functions.php.
Open content.php and paste the following code immediately after the opening article tag div just the way you see it on the screenshot below:
[code language=”php” 1=”true”]
<?php
if (has_post_thumbnail()) {
echo ‘<div class="small-thumbnail clear">’;
echo the_post_thumbnail( ‘small-thumb’ );
echo ‘</div>’;
}
?>
[/code]
Here we are testing whether the post has a thumbnail assigned to it, and if it does, we are displaying it. Refresh the front end of your site and you should see the small thumbnail between the meta content and the text of the post:
Now that we have added the small thumbnail, it is time to style the posts we display on our home page.
First, we are adding a new div with a class of .entry-wrapper that wraps around the entry-header, the entry-content and the entry-footer section of each individual post:
We also float it to the left and establish its width:
[code language=”css” 1=”true”]
.home .entry-wrapper{
float: left;
width: 80%;
margin-bottom: 30px;
overflow: hidden;
}
[/code]
Next, we are styling the small thumbnail image we added to each post:
[code language=”css” 1=”true”]
.small-thumbnail img {
border: 5px solid #7bc144;
}
.small-thumbnail {
width: 20%;
max-width: 168px;
float: left;
}
[/code]
These styles add a nice green, 5px thick border around all the smalls thumbnails and float them to the left:
Immediately after you enter these styles in the Posts and pages section of style.css, add the following lines of code too:
[code language=”css” 1=”true”]
.home .entry-header {
padding-left: 20px;
}
.home .entry-header a {
color: #3b6a26;
}
.home h2.entry-title {
font-family: ‘Droid Serif’, serif;
font-size: 30px;
font-size: 3rem;
font-weight: 400;
margin: 0;
color: #518e00;
}
.home .entry-content {
padding: 0 0 0 20px;
margin: 0;
}
.home .entry-content p {
text-align: left;
font-size: 15px;
font-size: 1.5rem;
margin: 10px 0;
}
.navigation, article {
display: block;
clear: both;
}
.home .entry-footer{
padding: 0 0 0 20px;
}
[/code]
These are a set of styles that add the proper margins, padding and color to our content. As you can also see, we are using the Droid Serif font we added at the beginning of this course for the first time to style our headings. Finally, we are clearing some elements so that they display properly in our design. The result looks like this:
This screenshot resembles our blog index template much closer. However, we have forgotten our green button that stands below the text of each post. Let us add it too!
Replace your footer that has the entry-footer class applied to it with the following code:
[code language=”php” 1=”true”]
<footer class="entry-footer keep-reading">
<?php echo ‘<a href="’ . esc_url( get_permalink() ) . ‘" title="’ . __(‘Read more’, ‘simple-portfolio’) . get_the_title() . ‘" rel="bookmark">Read more</a>’; ?>
</footer><!–.entry-footer–>
[/code]
This piece of code creates a Read more link just below your .entry-content div. However, we will need to style it too:
[code language=”css” 1=”true”]
.keep-reading {
float: left;
}
.keep-reading a{
margin: 10px auto;
color: white;
padding: 10px;
background: #7bc144;
text-decoration: none;
text-align: center;
display: block;
width: 126px;
font-size: 16px;
font-size: 1.6rem;
}
[/code]
Add this set of styles just after the previous styles we already added to style.css. After saving your changes, you should see the following, and clicking on the link should take you to the single posts template, which we are yet to stile:
Let us also add some styles to the meta text “Web Courses on …”. Add this bit of code to style.css as well and refresh the index template:
[code language=”css” 1=”true”]
.home .posted-on {
font-family: Arial, sans;
font-style: italic;
font-size: 12px;
font-size: 1.2rem;
}
[/code]
Next, we will be adding the final element of our blog index template – the pagination. Go to index.php. Scroll down to the the_posts_navigation() function and replace the following line of code:
[code language=”php” 1=”true”]
<?php the_posts_navigation(); ?>
with
<?php
echo "<div class=’pagination navigation post-navigation’>";
global $wp_query;
$big = 999999999; // need an unlikely integer
echo paginate_links( array(
‘base’ => str_replace( $big, ‘%#%’, esc_url( get_pagenum_link( $big ) ) ),
‘format’ => ‘?paged=%#%’,
‘current’ => max( 1, get_query_var(‘paged’) ),
‘total’ => $wp_query->max_num_pages
) );
echo "</div>n";
?>
[/code]
This is the standard way of implementing pagination into a WordPress theme and you can read more about it at the WordPress Codex. We have also added some classes to the markup so that we can style our pagination.
If you refresh the index template now, you should see the unstyled pagination at the bottom, right above our footer:
I’ll create a new section in style.css, call it Pagination and add the following lines of code in it:
[code language=”css” 1=”true”]
/* Pagination */
.navigation.post-navigation {
border-top: 3px solid #5e6d66;
text-align: center;
}
.pagination {
clear: both;
padding: 20px 0;
font-size: 15px;
line-height: 15px;
}
.pagination span, .pagination a {
margin: 2px;
padding: 6px 9px;
text-decoration: none;
width: auto;
color: #5e6d66;
background: #b9bab9;
border-radius: 5px;
text-align: center !important;
}
.pagination a:hover {
color: #fff;
background: #2d2824;
}
.pagination .current {
padding: 6px 9px 5px 9px;
background: #2d2824;
color: #fff;
}
[/code]
As you see, we are targeting the classes we just added to our pagination in index.php and I’m not going to go over these styles in detail as I assume you are familiar with CSS. Basically, what we are doing here is styling the pagination so that it resembles the one in one blog template design as closely as possible. The result is illustrated on the screenshot below:
This was the final element of our blog index template, and if you followed me since the start of this course, your blog template should look similar to mine on the following screenshot:
The only thing that remains is to make this template responsive and this is achieved through writing down some media queries. In fact, I’ve included all the responsive styles for this template into just one such query:
[code language=”css” 1=”true”]
@media screen and (max-width: 37.5em) {
.content-area {
margin: 20px;
}
.home h2.entry-title {
line-height: normal;
}
.home .entry-content p {
text-align: center;
}
.home article {
overflow: hidden;
}
.home .small-thumbnail,
.home .entry-wrapper {
width: 100%;
float: none;
text-align: center;
margin: 0 auto;
}
.home .entry-header,
.home .entry-content,
.home .entry-footer {
padding: 0;
float: none;
text-align: center;
}
}
[/code]
What we are basically doing here is centering all the content when the screen width is below 37.5em (37.5em * 16px = 600px). This is the brakepoint for our entire theme so far.
And this pretty much is everything about our blog index template. We have created a new widgetized area in which we can place any type of content on the fly, displayed the 3 latest posts with the small featured image we defined previously, added a pagination and made all of this content responsive.
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 13, part 14
