How to Build a Basic Portfolio WordPress Theme

Read the full post

Add to Flipboard Magazine.

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

basic portfolio WordPress theme

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

basic portfolio WordPress theme

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

basic portfolio WordPress theme

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

  • 187
100 HD Blurred Backgrounds

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of 100 HD Blurred Backgrounds + bonus 10 realistic web shadows.

100 HD Blurred Backgrounds

Written by Iggy

Iggy is a designer who loves experimenting with new web design techniques collating creative website designs. You can follow Iggy on Twitter.


  1. Jocelyna says:

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

  2. Cameron says:

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

  3. Frank says:

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

  4. 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!

  5. ABDUL JANOO says:

    best tutorial

  6. Ria Brown says:

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

  7. Cary Scott says:

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

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

    Muchos Gracias

  9. Cool would have love to see a pagenavi on the portfolio

  10. George E. says:

    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.

  11. Patrick Sweeney says:

    Great read Chris! Very thorough and easy to follow.

  12. webdesdev says:

    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.

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

    Cheers & Ciao ..

  14. Sean says:

    YES YES YES, brilliant!

  15. George Mamadashvili says:

    Chris, you should add this theme to WordPress theme direcoty

  16. Terence says:

    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!

  17. Edith Chan says:

    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?

  18. dan says:

    online project auction for clients and web designers

  19. Thanks for the tutorial!

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

  20. Vizicore says:

    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!

  21. Super Cwis says:

    Great tutorial! <3

    Thx :)

  22. 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!!

  23. Linnea says:

    Thanks! This is just what have been looking for.

  24. nanuca says:

    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…

  25. Good tutorials thanks for sharing
    Joe (Free Online Portal to prepare for USA Driving written test)

  26. web designer uk says:

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

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

  28. 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?".

  29. web design says:

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

  30. Pitch says:

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

  31. CyberTramp says:

    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!


  32. Fazreen says:

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

  33. 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.

  34. 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…………..

  35. SLAB says:

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

  36. Fangirl says:

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

  37. HTML5Awesome says:

    Great tutorials and thanks for sharing Chris.

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

  39. 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.

  40. WPWebHost says:

    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.

  41. Antonio says:

    to make portfolio_image even more simpler, incorporate the use of

  42. AliHM says:

    your web very best


  43. Dan says:

    Awesome tutorial. What are your thoughts on building a clean theme with support and styling for common plugins like Jetpack Portfolios? That is what we did here —

  44. erin says:

    I’m wondering….could i just implement the portfolio part and have it work in another theme that I like? I like the way that you build your portfolio but dont feel the need to reinvent the wheel re: my entire theme. could i simply use it for a page?

  45. robert says:

    One of the best tutorials I’ve ever seen.


  46. seegatesite says:

    Thank you very much :)

    Inspired me to create a wordpress theme.

    Bookmark button is pressed :)

  47. a says:

    Guys where are the files? I would like to download them.

Leave a response