16th July, 2015
In a recent project which involved WordPress we needed to implement different page templates. The spec was to have a page with a sidebar and one which was full screen without a sidebar. Luckily for us WordPress incorporates a system to achieve this. The method behind this is also fairly simple to complete and allows for a great degree of flexibility.
So first things first your going to want to make a duplicate file of the standard page.php. This default page can be either of the two templates that we want. The WordPress twenty fifteen theme defaults to a sidebar included page. Lets continue with that in mind meaning our template will be the full screen version.
Now that you have a duplicate of the default sidebar page template you need to open it up in your editor. Above all of the content on the page insert a comment tag with the template name, like this:
<?php /* Template Name: Full Width */ ?>
Watch for capital letters as these are important and it wont work without them. The template name itself can be any selection of characters you like. To finish things off in the php file itself you will want to remove the default sidebar include.
Open up your style.css file so that we can add some specific styling for the new page template. This is needed because in the default theme the main content itself wont be 100% wide. Due to the fact that it had to surrender some of its width to the sidebar. Luckily when creating the page template WordPress creates a new class on the body tag. This class will take the form of .page-template-[file name], for example our file was called page-full-width.php meaning our class is .page-template-page-full-width. With this class we can specifically target the same element and overwrite the default code.
.page-template-page-full-width{
width:100%;
}
Now you have both the styles.css and your template file completed you need to save them. The style.css is easy enough but what do you call the template file? Always start with the word page and then add your prefix to it. Like as we used above page-full-width.php. It always helps to use a name linked to its purpose. Finally make a folder called page-templates and place it in the root directory of the theme. place any templates you create inside of this folder so our new template will go here.
To test if what you have done is working create a new page and look at the page attributes. In this section you should see a template title with a drop down underneath. Click this drop down and see if the template name you created is visible. Check out this image for reference:
I hope you enjoyed this quick WordPress tutorial, thanks for visiting…
Blayne Phillips