WEB DESIGN COURSE
© 2012 Excel With Business
WEB DESIGN COURSE
BONUS UNIT WORDPRESS CUSTOM PAGE TEMPLATES
BU.0 Getting started
in PHP format; PHP is a scripting language that runs
on web servers. It looks a bit like HTML and can be
If you’re using WordPress for your website you will created in a text editor in much the same way. We
have already considered how to change the layout don’t need to know very much more than that for the
of your content. Custom page templates allow you purposes of this unit, just be aware that the end goal
to define a layout for a page that can be re-used of a PHP file is to generate HTML code that a browser
dynamically with your existing and future content.
can render.
How do custom page templates work?
WordPress pages are almost always divided up into
Before we go too deep into making our own templates sections. The header and footer will normally remain
it’s important to understand that page templates are the same for each page and the content in between
the foundation of how a WordPress site looks. In fact will vary.
this is true of most content management systems to In Fig. B.1 you can see how small bits of PHP called
some degree or other.
“template tags” relate to each part of the page. These
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
Browser View
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.
Page Template PHP FIle
Header
Content
Comments
Sidebar
Footer
Fig. B.1 – Page sections and their associated PHP tags in the template file.
BU
© 2012 Excel With Business
WEB DESIGN COURSE
BONUS UNIT WORDPRESS CUSTOM 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 Fig.
B.1. 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)
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 mytemplate.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.
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 sidebarFig. B.2 – The menu location of the WordPress editor
tvhat can be used to edit template files.
Fig. B.3 – The WordPress editor with the new my-template.php file active.
BU
© 2012 Excel With Business
WEB DESIGN COURSE
BONUS UNIT WORDPRESS CUSTOM PAGE TEMPLATES
The first and most important thing to change in the from the bottom...
file is the Template Name highlighted above in red.
You’ll notice we have already changed ours to “My <?php comments_template( ‘’, true ); ?>
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 ...and click update file. This will stop WordPress
fetching the comments section for this template.
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
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…
Fig. B.4 – Selecting a custom page template for an existing page.
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”.
Fig. B.5 – The Post Grid Template in use on a new blank page.
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.
BU
© 2012 Excel With Business