If you’ve been following parts one and two of this portfolio website tutorial series you will already know how to design the concept in Photoshop and build a working demo in HTML/CSS. Now let’s take the design and convert it into a basic WordPress theme so you can easily manage and update your website through the popular WordPress application.
The theme we’re going to create is going to be made specifically for use as a portfolio website, so many of the usual features of WordPress themes will be omitted in this guide. Our website concept isn’t a blog, so this tutorial is aimed more at using WordPress as a simple CMS. With that said, we’ll still use the ‘post’ template to showcase our portfolio items, so we’re basically manipulating the core features of WordPress to suit our needs.
WordPress template files
Because we’re using WordPress as a basic CMS, we won’t be making use of some default template files such as archive.php or comments.php. However we’ll be introducing some additional template files as custom pages.
Style.css template file
Before working on any of the actual .php template files we first need to add the entire CSS styling the style.css WordPress stylesheet in our theme folder. We then need to customise the details at the top of the file so WordPress will recognise the theme in the Appearances section of the admin dashboard.
Header.php template file
The first template to work on is header.php. Paste in the upper portion of the HTML concept, right up to where the main content div begins. We then need to go through the code and swap out specific sections with WordPress template tags, which will inject dynamic content into the theme.
<?php bloginfo('stylesheet_url'); ?> will automatically link up the style.css CSS stylesheet, while
<?php bloginfo('template_url'); ?> can be used to place a link to the template directory in order to link up other files.
At the bottom of the
<head>, the template tag
<?php wp_head(); ?> is used to allow WordPress to insert other code from plugins etc.
In the navigation menu, the series of list items are replaced with the template tag
<?php wp_list_pages('title_li='); ?>, which will automatically inject a linked list item for every page published in WordPress.
Our design uses a different style of header for the homepage and the inner pages. We can replicate this in the WordPress theme using a conditional tag.
is_front_page() checks if the page is being used as the homepage, if it is it uses the first portion of the code. If not, the header is given the class of ‘page’ and the
<h1> is filled with the tag
<?php wp_title(''); ?> to render out the title of the post or page.
Home.php template file
Usually the index.php file is used as the homepage on a WordPress blog, but in our case we’re going to be using a static page, which is where the custom page file home.php comes in. At the top of the home.php file is a snippet of code which identifies the custom page. The rest of the template file is filled with lots of PHP…
<?php get_header(); ?> and
<?php get_footer(); ?> at the top and bottom of the file are used to insert the header.php and footer.php files in order to render out a complete HTML page.
The WordPress loop then checks for content, which is injected into the page using the
<?php the_content(''); ?> template tag.
Underneath our main content we then have another loop, this time using query posts. The
<?php query_posts('cat=11&showposts=4'); ?> code checks for posts from category 11 (the portfolio category) and displays the latest 4 items. This replicates the ‘latest work’ section of the design.
For each of these portfolio items we then use the code
<?php $image = get_post_meta($post->ID, 'portfolio_image', true); ?> to fetch the ‘portfolio_image’ custom field and set it up as a variable. This will then be used to insert the portfolio thumbnail into the design.
Footer.php template file
The remaining HTML from the static page is then pasted into the footer.php file. This particular design doesn’t require many more template tags, just
<?php wp_footer(); ?> to allow WordPress to insert code destined for the footer (an Analytics plugin for example). The other snippet of code is just a handy page load speed indicator which can help visualise the difference when using caching plugins.
Page.php template file
The page.php file is the template file used for generic pages added to the site. The contents are similar to the home.php file, with the exception of the additional loop that checks for portfolio items. All we have is the links to the header.php and footer.php files, the WordPress loop and the tag to insert the page content.
The About page of our design doesn’t contain anything unusual, so this page would be generated using the page.php file. Others, like home, portfolio and contact all use custom page templates.
Portfolio.php template file
The portfolio.php file is another custom page. This file is very similar to home.php as it uses the query posts script to look for blog posts in the portfolio category. The main difference is the parameters of this query posts script doesn’t limit the number to 4 and therefore displays every item found. Each post contains links to that post’s individual page using the
<?php the_permalink(); ?> template tag. This is simply inserted into the
href attribute of the anchors.
Contact.php template file
Another custom page template used in this build is contact.php. This page contains the contact form code and links to the social profiles within the two divs that are unique to this page. The social links alone could have been pasted into the HTML portion of the WordPress page editor, but the code used for the contact form would be stripped out so it’s best to hard code it directly into the theme file.
Single.php template file
The single.php file is identical to the basic page.php template. It only needs to include links to the header.php and footer.php files, the WordPress loop and the content tag. The rest will be generated using the online WordPress editor. Usually a link to the comments.php template file would be included in single.php, but in this build we’re not making use of comments as the theme is meant to be used as a simple CMS.
Extending the theme to work as a blog
Our theme is only built as a simple CMS that accommodates pages and the odd blog post in the form of portfolio pieces. If we wanted to extend the site to add a blog, we could develop the archive.php and comments.php files. We’ve separated the portfolio posts into their own category, so a list of normal blog posts could be generated by simply excluding this category from the query posts script in archive.php.
Adjusting the WordPress settings
In order to align our WordPress install with our theme we need to tweak the settings. First we need to create our four pages of home, about, portfolio and contact and type in the basic content. Before publishing each page, we then need to select the custom page templates for the home, portfolio and contact pages in order for them to display their unique functionality and content.
WordPress by default uses the index.php file to display a list of recent posts, so we need to head over to the Reading tab of the settings and change the front page to display the home.php template.
Finally, we need to add our series of portfolio pieces as posts. Create a new category named Portfolio, then begin creating posts. Add a title, then fill out the content with text and images using the WordPress uploader. Don’t forget to upload the small thumbnail image and copy the URL. This URL will then be pasted into the custom field area alongside ‘portfolio_image’. The script in the code will then take this custom field and use the location of the image to display the thumbnail of each portfolio post. Everything in the main content area will then be shown when the user clicks the ‘see more’ link and lands on the page generated by single.php.
The final WordPress theme demo
Our basic WordPress theme is now complete. The portfolio website is powered and updated using the WordPress engine and can be enhanced with plugins to optimise for search engines. Now the core site has been built, all updates and additions can all be made via the online dashboard, no more code editing.