One of the main features of WordPress is that it supports custom page templates, and you can add as many as you want, whenever you want. If you right click on our front page and expect an element, you can see that our body tag has a class of “page” applied to it. That means that we can apply styles to pages by targeting this class.
A common request for a WordPress theme is the creation of a custom full width page template, and since our theme asks for several such templates, let us create one now.
Make a new folder into your theme directory and name it “page-templates”. Then copy and paste the page.php file into this folder and rename it to page-home.php.
WordPress recognizes the subfolder “page-templates”, and because of that, it is a good idea to place your global page templates in it for better organization.
Now open the page-home.php template and find the first large commented out block of text immediately after the opening php tag. We will replace it with the name of our custom page template – Home Page. Just override the comment section with:
[code language=”html” 1=”true”]
/*
Template Name: Home Page
*/
[/code]
If you remember, we have already created a page named “HOME” without any content in it and assigned it as the front page of our site. Now edit that page via the WordPress dashboard, and assign the “Home Page” template we just created to the page you are editing, then click “Update”.
Of course, nothing has yet changed on the front end of our site because we need to apply styles, add a custom featured image and make additional changes to this new template as well.
I will also copy and paste the content-sidebar.css file within the layouts folder, and rename it to content.css like this:
After you do this, remove all styles inside it, except the following one:
[code language=”css” 1=”true”]
.site-footer {
clear: both;
width: 100%;
}
[/code]
You should also replace the line “Layout: Content-Sidebar” with “Layout: Content”. The rest of the styles do not relate to our template and we don’t need them.
Now we need to enqueue our stylesheet in the functions.php file so that it only applies to the correct template. Scroll down to the simple_portfolio_scripts() function. We must enqueue this new stylesheet after style.css.
Enter the following function immediately after the function that enqueues our style.css:
[code language=”php” 1=”true”]
if (is_page_template(‘page-templates/page-home.php’)) {
wp_enqueue_style( ‘simple_portfolio-homepage-style’ , get_template_directory_uri() . ‘/layouts/content.css’);
} else {
wp_enqueue_style( ‘simple_portfolio-layout-style’ , get_template_directory_uri() . ‘/layouts/content-sidebar.css’);
}
[/code]
This is a simple PHP if function that checks whether we are using the template we intend to use on the front page of our site. If we indeed use it, it enqueues the content.css stylesheet we previously created. If the condition isn’t met, on the other hand, we enqueue the regular content-sidebar.css file that comes with Underscores.
Save your changes and refresh your front page, then examine its sourse code. You should see a link to the new stylesheet in the head section of our theme. However, if you examine the source code of any other page of our site, you won’t see this link, and all of this is controlled by the if statement we just added. Combining page templates with conditional statements gives us the needed flexibility to customize different page templates the way we want it.
Although we have removed the styles for the sidebar in our content.css stylesheet, we are still printing its markup in our new template with the get_sidebar() function. Remove the following line from the page-home.php template and save it:
[code language=”php” 1=”true”]
<?php get_sidebar(); ?>
[/code]
Refresh your “Home” page and you should this:
As you see, we are no longer printing the markup for the sidebar because we have removed the call to the sidebar.
Next we need to style our template and add a big featured image to make it resemble our original front page design as closely as possible. That’s next.
Here is a list of all the other parts: part 1, part 2, part 3, part 4, part 5, part 6, part 8, part 9, part 10, part 11, part 12, part 13, part 14
