Line25

How to Build a Basic Portfolio WordPress Theme

Read the full post

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.

View the WordPress portfolio theme

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.

View the final portfolio theme demo

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

View the WordPress portfolio theme

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.

View the final portfolio theme demo

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

  • http://www.aphroecs.com Jocelyna

    A nice tutorial that's best for a beginners. I am going to read more articles of your website that's title looks interesting..

  • Cameron

    Killer tutorial Chris. This is a huge help to me and to anyone starting out on WordPress, thank you!

  • http://www.warrenwebdesigns.com/ Patrick Sweeney

    Great read Chris! Very thorough and easy to follow.

  • Frank

    Another great Tutorial, wich helps me a lot! Thanks for this!

  • http://patrickramos.net Patrick Ramos

    Great tutorial! I wish I would've seen it about a month earlier, when I began coding my website. Haven't seen many tutorials explain it the way you did.

    Thanks for the post!

  • ABDUL JANOO

    best tutorial

  • http://www.riabrown.com Ria Brown

    Fab! Very clear and easy to follow. Love your tuts!

  • http://www.seandey.co.uk Sean

    YES YES YES, brilliant!

  • http://caryscott.com Cary Scott

    Cool. One of the better WordPress tutorials I've seen. Thanks!

  • http://markpetherbridge.co.uk Mark Petherbridge

    Oh you absolute life saver, this could not of come at a better time.

    Muchos Gracias
    @mgpwr

  • http://realwebdesigns.com Filipe Valente

    Cool would have love to see a pagenavi on the portfolio

  • George E.

    Just in time. :) Just started my first WordPress site and you definitely cleared up a few things with this tutorial. :)

    Keep up the awesome work Chris.

  • webdesdev

    hah, waiting for this, you really good in writing tutorial thanks a million. This tut will help me somehow to improve my skills in developing wordpress templates.

  • http://terencedevine.com/ Terence

    This is great, can't wait to read it later!

    Wish I had this when I was starting with WordPress, would've made my first portfolio site a lot easier!

  • http://www.gonzodesign.com Gonzo the Great

    .. wow, love this tut! Well done, thanks for sharing, SIr.

    Cheers & Ciao ..

  • http://www.edithchandesign.com Edith Chan

    Great tutorial! Especially like the 3rd part where convert the site from html to WordPress for CMS. I have a question though, did you know that you would use WordPress as CMS when you created the html site? Do you usually decide on your CMS before building a site?

  • George Mamadashvili

    Chris, you should add this theme to WordPress theme direcoty

  • http://webdesignersbest.com/ dan

    webdesignersbest.com

    online project auction for clients and web designers

  • http://www.vizicore.com Vizicore

    This seems really complicated. I would love to try this out but just for one wordpress template that I'm not even sure will look good? I'm not sure if I'm ready for that haha. Thanks for the info though, I'll definitely keep it in mind next time I open up Dreamweaver!

  • http://www.codemyconcept.com/ Oliver Campos

    Thanks for the tutorial!

    Now I understand a little more what the company who works on my websites do!

  • Super Cwis

    Great tutorial! <3

    Thx :)

  • http://www.jasonlafferty.com Jason Lafferty

    Hoorah!

    Great tutorial, I use IBM WebSphere in my day-to-day and I have been looking for a quick tutorial to help me find something quick to use for my personal work.

    This ticks all the boxes now!!

  • Linnea

    Thanks! This is just what have been looking for.

  • nanuca

    I have a question… I'm a beginner :)
    do I have to buy any WordPress App to modify CSS? I've been investigating how to do what u do in this tut and I thought I have to…

    • Edwin

      Hello Nanuca,
      In order to modify your CSS or whatever programming language you want, you can use this great FREE editor. http://notepad-plus-plus.org/ If you are using a MAC, you should try Coda.
      Good luck :)

  • http://www.webdesigneruk.org web designer uk

    This is nice post. It's great Tutorial, wich helps me a lot! Thanks for this!

  • http://www.ezdrivingtest.com USA Free Driving Online Test

    Good tutorials thanks for sharing
    Joe
    http://www.ezdrivingtest.com (Free Online Portal to prepare for USA Driving written test)

  • http://www.glendelmdesign.co.uk Web Design Cambridgeshire

    Thanks for this awesome tutorial – having knowledge of WordPress these days is pretty much essential.

  • http://www.neuronsoftsols.com web design

    Informative tutorial.Thanks for sharing ,keep up the good work.

  • http://www.my-html-codes.com HTML Codes Dude

    Very good stuff. I like how you've used the comments (especially with the template files) to explain what everything is. A lot of tutorials tell you what you need to do but then you are left wondering "what is this file for?".

  • http://www.foresthost.com Pitch

    Thank you for sharing Chris, this is a a great post.

  • http://www.fazreen.com Fazreen

    As usual, very good step by step tutorial to create WP themes. Thank you for sharing Chris

  • http://thecybertramp.com CyberTramp

    looks like a good tut. found this through your tweet. I already design wordpress themes but I may look at this in more detail as I like the way you annotated the WP files!

    :)

  • http://www.survivethriveordive.com Marc-Andre Renaud

    As always a great Tutorial Chris.

    The lengths you go to with your comments really add a lot of meat to your explanation for the WP newbies in the crowd. Over the past month I've been researching how to convert part of a website to WordPress and this is by far the clearest example I've seen regarding the conversion process.

    At times I swear the WordPress Codex users go out of their way to provide ineffective tips and instructions. Thankfully you're here to fill in the void.

  • http://www.icu-india.com Web Design Agency India

    this is Great tutorial, I use IBM Web Sphere in my day-to-day and I have been looking for a quick tutorial to help me find something quick to use for my personal work…………..

  • http://www.slabcreative.com/blog SLAB

    I like your illustrations with the handwritten notes. Great post!

  • Zombiriro
  • Fangirl

    Btw, where's the tutorial for index.php and 404.php file? sorry, noob question

  • http://html5awesome.com/ HTML5Awesome

    Great tutorials and thanks for sharing Chris.

  • http://www.designmytemplate.com Website Design

    Chris , its Simple yet powerful tutorials , and u made is so nicely s non technical i can easily understand :)

  • http://www.buzz-webdesign.co.uk Web Design East Yorkshire

    This is just what I've been looking for… I've only recently started using WordPress and need to be able to create my own themes. I'll be putting aside some time tomorrow for this, thanks for sharing.

  • http://wpwebhost.com WPWebHost

    It looks like Greek to me at first.

    But somehow, I can understand what you are doing over the CSS codes on the templates after few read through.

  • Antonio

    to make portfolio_image even more simpler, incorporate the use of http://codex.wordpress.org/Post_Thumbnails

  • http://www.alihm.ir AliHM

    hi
    your web very best

    tnx