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.
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:
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:
[code language=”php” 1=”true”]
<?php get_sidebar(); ?>
[/code]
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.
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:
[code language=”php” 1=”true”]
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>’,
));
[/code]
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:
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:
[code language=”php” 1=”true”]
<?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; ?>
[/code]
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:
[code language=”php” 1=”true”]
<?php get_sidebar(‘content’); ?>
[/code]
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:
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:
[code language=”css” 1=”true”]
#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;
}
[/code]
Save and refresh your front page.
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:
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:
Just place the following line of code immediately after the opening header tag in content.php:
[code language=”php” 1=”true”]
<?php echo get_the_category_list(‘ \ ‘ , ‘multiple’); ?>
[/code]
The result should look like this:
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:
Replace ‘Posted on’ with ‘Web Courses on’.
Then find the variable $time_string inside the simple_portfolio_posted_on() function:
And replace it with:
[code language=”php” 1=”true”]
$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’) )
);
[/code]
Also, remove the span with the class of byline inside the function, which outputs information on who make the post:
The code to remove is in red. Reload your front page and you should see the following:
Our meta information is now displayed the way we want.
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 12, part 13, part 14
