• Blog

    Latest from our Blog

  • Tools

    Our Favourite WP Tools

  • Hosting

    Recommended Web Hosts

  • Coupons

    Get great money off deals

  • Themes

    WordPress Theme Directory

  • Plugins

    WordPress Plugins Directory

  • Promote

    Your WordPress Product

I am launching my own theme company ( hopefully at the end of this month ) called ThemeFurnace, so over the last few months I have been building a lot of themes for public release so have had to get my theme building process together into some sort of system. This has helped me build each theme quicker than the last and I now have a process for the future as I aim to be releasing at least one new theme per month from now on. In this post Im going to talk about how I design and code a theme from scratch. For more articles about building custom WordPress themes, see the ultimate theme development kit.

Designing the Theme

I use Photoshop for my mockups – for each theme I will generally design the homepage first after laying some sort of grid, usually conforming to 960 pixels wide. You can download some free pre-made grids here if needed. Once the homepage is done I will design a single page view, then a category / archives page. If the theme has any special features like custom post-types or galleries etc I will also do them.

Something Ive started doing lately is building up a folder full of UI kits and other bits and pieces that I can re-use in my designs. It also helps to build up an array of icons and social media logos and most themes thesedays will also use  them. I also joined up to this Layoutlab the other day which provides some handy .PSDs for download to help you with wireframes and mockups.

Building the HTML / CSS

Once Im happy with the design, its time to save out any images that are needed in the design – the logo, icons, background images etc I save them all as .PNGs – I dont really bother using .GIFs any more and I just use .JPGs for photos. I will build the HTML and CSS – browser testing as I go along. I also split my CSS up into sections like so :

  • Reset – Always use a reset so you are working from a consistent starting point
  • Defaults – These are the default styles that WordPress needs
  • Headings – All the heading tag styling – H1, H2, H3 etc
  • Links – All the link styling
  • Theme Layout – The basic framework for the site
  • Inside Layout – Any styles just used on interior pages
  • Sidebar – Sidebar Styles
  • Slider – Any Styling for Sliders
  • Nav – The menu styles
  • Footer – The footer styles
  • Widgets – Any custom widgets and styling for default widgets like text and calendar

I also have a folder for any jQuery plugins that I need for the theme.

Installing the Theme & Adding Content

When the HTML and CSS is done, I will add the theme name to the top of the stylesheet with other info needed, which is what will show up when someone is activating your theme. Like so :

/*
	Theme Name: Busine
	Theme URI: http://themefurnace.com
	Description: A Clean and Tidy Business Theme
	Author: Oliver Dale
	Author URI: http://themefurnace.com
	License: GNU General Public License version 3.0
	License URI: http://www.gnu.org/licenses/gpl-3.0.html
	Version: 0.1
*/

Also will create a custom graphic for the theme called “screenshot.png” and save in the root theme folder and upload to the development server. You can set up a test environment locally if you prefer ( see our guide here ) but I’ve always worked on a live server when building themes.

Once the theme is uploaded and activated I add some starter content – a couple of blog posts with featured images using Lorem Ipsum, some posts for the custom post types if needed and a couple of comments.

Creating the Theme Templates

I have my own default blank theme I use as a starting point for each theme – this includes things like a custom portfolio post type, a functions.php file with some starter things added ( featured image sizes, theme options include, other custom functions ) , I also like to include multiple sidebars so people can use different ones for pages and posts and I also include my theme options framework – ( I use a modified version of the UpThemes Framework which you can download for free ).

Here is how a typical theme looks :

Once the theme in installed – I will open a copy of HTML template and go through replacing code, starting with the header.php file. Then I will do the index.php, then sidebar and then footer. That will usually make the basic theme look like my HTML and I can move on to other files like the category and archives pages. The last thing I do is the comments and any final tweaks around the theme.

Testing

The final part is testing the theme – you can use the WordPress theme test unit to make sure all your basic styling is there and nothing breaks your theme’s layout. Usually at this point there might be a few modicifcations to the stylesheet to make everything good. The WordPress theme check plugin is another final test you can use – this will warn you of any deprcated functions you might have used and any errors or things you have left out of your theme that are required.

Conclusion

I’d like to hear your thoughts on this – what’s your process look like ? Any tips or tricks you have picked up to make the process better ?


Post Tags

Author:

Oliver Dale is the founder of Kooc Media, a small internet company based in the UK. Kooc Media runs several high-profile websites including WPLift, ThemeFurnace and DesignersTalk.

Leave Yours +

23 Comments

  1. Xanfer

    Pretty boring! 

    • Ed

      LOL – what a terrible comment Xanfer! So terrible all I could do was laugh. Oli has been kind enough to lay out what is a very efficient and straightforward process for building themes that believe you me can easily become a real mess to those with less experience. Oli I think anyone building WordPress themes will get a lot of value out of this post. 

      Thanks for sharing.Ed

  2. I would like to know more about psd to wp conversion

    • Clain Dsilva

      He he there is no easy way out for that man. All you need is to slice it and code it from scratch… well you can still use this guide for coding.. do you think there is an easy way to do that… something like a plugin? Oh boy…!!! the answer is no..!!

      • Ahmad Awais

        I am a theme developer, I have 5 themes in market.I am not a beginner :)
        All I said was I would like to know more about psd to wp conversion.

  3. Thanks for sharing your workflow. 
    I sure will use some of these tips for my own themes.

  4. Rafael Ehlers

    Can you post the ”
    Defaults – These are the default styles that WordPress needs “, I haven’t found a really good one. Only this one 
    http://www.wpbeginner.com/wp-themes/default-wordpress-generated-css-cheat-sheet-for-beginners/

    • Thats all you need – all the styles are listed there,
      Add those to your CSS file and write some styles for them.
      A good starting point is taking them from the default twenty eleven theme.

  5. Excellent tutorial, I read quite a lot of blogs and it isn’t
    often that you actually find a useful tutorial that actually give real
    information, most bloggers don’t want to give away secrets so they’ll always
    beat around the bush. Good work.

  6. Worthy article for the bloggers! thanks for share.

  7. Mayur

    Hi Sir, do you have any plans to share the blank theme you use? Thanks in advance for your reply.

  8. Augusta tina

    Excellent themes… thanks for sharing with us.
    Corporate Logo Design

  9. veri god job i love the article…

  10. Thank you for this useful tutorial to make a word press theme !

  11. Is it just me or this blog is lacking a timestamp ? Very important thing IMO

  12. I used to be recommended this website via my cousin.

    I’m not certain whether or not this publish is written via him as nobody else realize
    such certain about my problem. You’re amazing! Thanks!

Leave a Reply

* Required Fields.
Your email will not be published.

Search

Our Sponsors