By Carl Heaton

By default, WordPress displays the 10 latest posts on the front page, and if you want to style their look, chances are you want to be working with the index.php template.

index full width completed

If you examine our design for the index.php template (our blog template) from the beginning of the course, you will see that we have a number of posts arranged vertically, with small featured images positioned on the left side of each post and excerpts of the posts on the right.

If you set WordPress to display the 10 latest posts on the front page of your site/blog, your index.php template will display your blog section in a way similar to the screenshot below:

index unstilled

As you see, although we have already inherited a lot of styles and our footer and header are complete, we still have a lot of work to do to make our blog section look the way we want it.

The first and the most obvious thing to do is to remove the call to the sidebar. Open index.php and remove the following line:

<?php get_sidebar(); ?>

Next, we have some text just above the posts in our content section, and we would like to create a widgetized area and set up a text widget in it so the users of the theme can insert any text they want in this section of the template. Inserting this text directly into our template won’t suffice.

widget area styled

It is now time to register our widgetize area in functions.php. Enter the following lines of code inside the simple_portfolio_widgets_init(), just as you see on the picture:

register_sidebar(array(

'name' => esc_html__('Blog Widget', 'simple-portfolio'),

'id' => 'widget-1',

'description' => esc_html__('Content widget area for our blog.', 'simple-portfolio'),

'before_widget' => '<aside id="%1$s" class="widget %2$s">',

'after_widget' => '</aside>',

'before_title' => '<h2 class="widget-title">',

'after_title' => '</h2>',

));

registering the widget area

Here, I’m just copying the contents of the first register_sidebar() function but setting the name of the widgetized area to “Blog Widget”, the id to “widget 1” and also adding a description. Save this function and go to the Widget area in your WordPress dashboard. You must see this:

widgetezed area in dashboard

Drag a text widget into the widgetized area and add some content and click “Save”.

Next, create a new file called sidebar-content.php in the default directory of the theme and add the following lines of code I already prepared for you:

<?php

/* Widgetized area for our blog. */

if ( is_active_sidebar( 'widget-1' ) ) : ?>

<div id="content-widget" class="content-widget widget-area" role="complementary">

<?php dynamic_sidebar( 'widget-1' ); ?>

</div><!-- #content-widget -->

<?php endif; ?>

Here we are testing if there are any active widgets inside the widget area we already registered in functions.php (widget-1). If there are, we output the markup for widget-1, together with all the widgets we placed in it. If there aren’t any active widgets, the code below the is_active_sidebar is skipped by the if() function and we don’t output anything in our new widget area.

Save it and edit index.php. Immediately after the div with the id of main, add a call to the sidebar we just created by adding the following line of code just as you see it on the screenshot:

<?php get_sidebar('content'); ?>

 

calling the sidebar in index.php

Save it, and if you have already placed the text widget in your widgetized area, its content should display just above the posts.

Now go to the if() function inside the simple_portfolio_scripts() function in functions.php and add the following condition:

editing conditions

Here we are also testing whether we are on the blog index page and if we are, we want to use content.css instead of content-sidebar.css because the latter reserves empty space for the right sidebar and we don’t have one in our full-width template.

The final thing we would like to do for our widget area is to style the text content inside it. Add the following styles to the end of the Widgets section in style.css:

#content-widget {

width: 100%;

text-align: center;

}

.site-main #content-widget  {

margin: 0;

}

#content-widget .widget-title {

font-family: 'Times New Roman', sans;

font-size: 36px;

font-size: 3.6rem;

color: #3b6a26;

}

Save and refresh your front page.

widget area styled

As you see from the screenshot, we have added a text widget to our blog index page and styled its content. The use of widgetized areas in our theme is a powerful tool for placing whatever content we want wherever we want it.

The next thing to do is to add the three posts from our original blog design. You can do that by opening the Web Essentials – Final Design (v3).psd file, found in the “design” folder. Just copy the headings and the body text and create 3 separate posts with them. Don’t forget to assign a featured image to each post. I have already added the three featured images, index1.jpg, index2.jpg and index3.jpg, in the 11.jpg folder. The result should look like this:

creating the posts

Don’t worry that you can’t see the featured images you have assigned. We are yet to call them in index.php. However, if you examine index.php, you’ll see that it calls the content.php template inside the template-parts folder and it is that exact template that we would want to make changes to.

In our original design, the categories the posts belong to are displayed in the entry header, above the post title while in Underscores these are displayed in the entry footer. The function that displays them is called simple_portfolio_entry_footer(), which is defined in the template-tags.php file inside the inc folder of our theme. To display this post meta above the title of each post, I’m just going to remove the simple_portfolio_entry_footer() function from the entry footer section and instead use the get_the_category_list() function in the entry header like this:

categori list meta

Just place the following line of code immediately after the opening header tag in content.php:

<?php echo get_the_category_list(' \\ ' , 'multiple'); ?>

The result should look like this:

categories above post titles

Now we are displaying the categories above the post titles for each individual post in our blog page, and as you see, I’ve already assigned the Graphic Design category to the first post, which is a subcategory of the category Tutorials, which in turn is a subcategory of the Articles category. You can do the same. Of course, you will have to create these categories in your WP dashboard first.

Next, after the title, we have the simple_portfolio_posted_on() that prints meta on when the post was originally made. This function is defined in template-tags.php file inside the inc folder, and it is this file that we will need to edit. Open it, and find the following lines of code:

posted on

Replace ‘Posted on’ with ‘Web Courses on’.

Then find the variable $time_string inside the simple_portfolio_posted_on() function:

time string

And replace it with:

$time_string = sprintf( $time_string,

esc_attr( get_the_date( 'l, F j, Y' ) ),

esc_html( get_the_date('l, F j, Y') ),

esc_attr( get_the_modified_date( 'l, F j, Y' ) ),

esc_html( get_the_modified_date('l, F j, Y') )

);

Also, remove the span with the class of byline inside the function, which outputs information on who make the post:

byline

The code to remove is in red. Reload your front page and you should see the following:

meta completed

Our meta information is now displayed the way we want.

Here is a list of all the other parts: part 1part 2part 3part 4part 5part 6part 7part 8part 9part 10, part 12part 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.