Before we go too deep into making our own templates it’s important to understand that page templates are the foundation of how a WordPress site looks. In fact this is true of most content management systems to some degree or other.
When a particular URL is requested of a WordPress site one of the decisions it makes before the page loads is which template it will use to format the content. Once this decision has been reached the template file will go to work assembling the page. These files are in PHP format; PHP is a scripting language that runs on web servers. It looks a bit like HTML and can be created in a text editor in much the same way. We don’t need to know very much more than that for the purposes of this unit, just be aware that the end goal of a PHP file is to generate HTML code that a browser can render.
WordPress pages are almost always divided up into sections. The header and footer will normally remain the same for each page and the content in between will vary.
In above you can see how small bits of PHP called “template tags” relate to each part of the page. These tags act as the beginning of a set of instructions that tell your site where to go and look for the content for these sections and how to display them. There are lots of pre-defined template tags that we can use when building our own page templates.
All themes must include a template file called “index.php” – this is the file that is used if nothing else is present. It will look quite similar to the file in above shown. Many themes will include templates for specific
purposes - typically there will be a template for:
• A single blog post (single.php)
• A page (page.php)
• A list of blog posts (archive.php)
• A search results page (search.php)
Inside each of these files will be template tags as we mentioned before. Amongst other things the tags will
eventually go and fetch small PHP files that render the various sections on the page. So in most themes there will be a header.php file, a footer.php file and a sidebar.php file.
How do create my own custom page template ?
A good way to begin is to use an existing template as a starting point. As we have mentioned the template files are located within the theme folder on your web server. Assuming we are still using the default WordPress theme (recommended) we will need to navigate to /wp-content/themes/twentyeleven/ using your FTP program. From here locate the file sidebar-page.php and make a copy of it. Some programs will allow you to duplicate the file by right clicking on it and choosing “Duplicate” or you can download and re-upload it with a slightly modified file name for the same effect. Either way rename the new file my-template.php
Once this is done we need to edit the file’s contents so either open the file in the program you normally use to edit HTML or CSS files or use WordPress’ built in editor.
The first and most important thing to change in the file is the Template Name highlighted above in red. You’ll notice we have already changed ours to “My Template” – it’s important that there are no two files with the same template name declared as this will confuse WordPress and in turn confuse you too when your site stops working.
Now that we have that sorted we can play around with the template tags in the file. Perhaps the easiest thing to do is remove a few to see what effect that has and check everything is working. Delete the fourth line from the bottom...
<?php comments_template( ‘’, true ); ?>...and click update file. This will stop WordPress fetching the comments section for this template.
The next stage is to select this new template for use with an existing page. From the WordPress admin area go to Pages > All Pages and then edit an existing page. Then select the page template as follows...
All changes that are now made to the new custom page template PHP file will now be reflected in the layout of the existing page you have set to use this template.
Using our example custom template files on your WordPress site.
We have provided several PHP files for you to use on your site. They simply need to be uploaded to your theme folder as we did for the my-template.php file above. From there you will be able to select the templates for existing pages or create new blank pages.
Example Template 1 – Display latest posts in a grid:
1. Upload post-grid-page.php to your WordPress theme folder.
2. Create a new blank page and set the Template to “Post Grid Template”.
3. Ensure you have at least one post – many post with images are recommended.
4. View the page.
The content on this page will now update automatically as new posts are added.
No comments:
Post a Comment