By Carl Heaton

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:

starting point index 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:

.home .content-area {

margin: 30px;

}

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:

<?php

if (has_post_thumbnail()) {

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

echo the_post_thumbnail( 'small-thumb' );

echo '</div>';

}

?>

small index thumb

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:

small thumb added

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:

entry-wrapper

We also float it to the left and establish its width:

.home .entry-wrapper{

float: left;

width: 80%;

margin-bottom: 30px;

overflow: hidden;

}

Next, we are styling the small thumbnail image we added to each post:

.small-thumbnail img {

border: 5px solid #7bc144;

}

.small-thumbnail {

width: 20%;

max-width: 168px;

float: left;

}

These styles add a nice green, 5px thick border around all the smalls thumbnails and float them to the left:

thumbnail image

Immediately after you enter these styles in the Posts and pages section of style.css, add the following lines of code too:

.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;

}

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:

floating content elements

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:

<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-->

This piece of code creates a Read more link just below your .entry-content div. However, we will need to style it too:

.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;

}

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:

continue reading

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:

.home .posted-on {

font-family: Arial, sans;

font-style: italic;

font-size: 12px;

font-size: 1.2rem;

}

posted on

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:

<?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";

?>

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:

pagination

I’ll create a new section in style.css, call it Pagination and add the following lines of code in it:

/* 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;

}

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:

styled pagination

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:

index full width completed

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:

@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;

}

}

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.

index responsive

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 1part 2part 3part 4part 5part 6part 7part 8part 9part 10part 11part 13part 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.