Get our posts emailed to you with our monthly newsletter, subscribe here.

This is the first post of a three part WordPress tutorial series, in which I will walk you through the three key stages of creating your own unique WordPress Theme. In this post I will be creating the design for the WordPress theme in Photoshop, next week I will be converting the PSD to HTML and in the third week making the site fully functional in WordPress.

Divi WordPress Theme


Follow the next two posts where I show you how I code the PSD into HTML/CSS and finally how I take the static HTML templates and create a fully functioning WordPress Theme.

Part 2: Create a Clean and Minimal WordPress Theme with HTML/CSS

Part 3: How To Create Your Own Clean And Minimal WordPress Theme

Finished Design

View large version

Create the canvas

Create a new document in Adobe Photoshop and give the canvas the dimensions of width: 1020px, height: 1404px.

For this design I will be using the grid, apply the the grid to your canvas, by using the grid, it will allow you to create a clean, well structured design.


Start by creating the header of the design, using the rectangle tool, draw a box along the top of the canvas with the dimensions – width:1020px, height:15px.

Apply a subtle gradient to the bar, select Layer -> Layer Style -> Blending Options. The gradient colors I used were #353535 to #616060.

Below this, using the line tool, draw a 1px line the width of the canvas, use the color #353535.

Sidebar Navigation/Logo

Next, we will draw the left navigation sidebar, this will contain the logo and an expandable navigation.

Using the font ‘Georgia’ draw the logo, I will be aligning the sidebar to the right side of the third column in from the left of the canvas.

The settings used for the logo are, font: Georgia, color: #353535, tracking: -25px, size: 29pt.

Add the menu in below the logo, again aligning it to the right side of the third column.

The settings I used for the menu are, font: HelveticaNeueLT BoldCond active color: #353535, hover color: #868585, tracking: 100.

The spacing above and below the logo is 60px, the spacing between each menu link should be 15px.


The post content will be 6 columns in width in total, I wanted each post on the homepage to contain a featured image, post meta data, an excerpt and a couple of tags.

The post image will be width:470px by height:140px, create a new layer behind the image and set the width and height to 480px and 150px respectively. This will form the image border. Select the box layer and select Layer -> Layer Style -> Blending Options -> Stroke.

Give the box a 1px stroke, set out the the box, using the color:#e0e0e0, fill the box with the color:#efefef.

The post meta data will sit 30px below the post image, for the post meta data I will be using the font: ‘Lucinda Grande’, font size: 10px. The dark text color is #35353535 and the light grey text color is #878686.

30px below the meta data insert the post title, the font I want to use for this is Georgia, color #353535, font size: 18pt, tracking -25.

30px below the post title insert the dummy post excerpt, the font settings for this is, font: ‘Lucinda Grande’, font size:12pt, color: #353535.

30px below the post excerpt create a read more button which will will link to the article, and the post tags. The post tags use the same font settings and the post meta data.

The read more button is created with a simple box behind the white capitalized text, the color for this is #4a7278. (Possibly the simplest button in history.)

To complete the post container  and to help separate the posts I will dd a double line below each post.

Using the line tool, draw a 1px line 30px below the read more button. The line should be 480px in width using the color #e8e7e7. Duplicate this line layer and drag the new line layer below the one you just created.

In the sidebar I created a simple search box, the font used is the same as the menu, the search box dimensions are: width: 108px, height: 30px. Using the rectangle tool draw a box out to this dimension, the box should have a fill color of #ffffff and a 1px stoke using the color #878686.

Next draw the search button again using the rectangle tool, draw the box to the dimensions of width: 33px, height: 27px. Fill the button with a solid color, I used #878686. The font used for the ‘GO’ search button is again the same as we used in the menu, only this time the font color is #ffffff.


The theme footer will consist of two widgetized areas, the footer background will span the width of the users screen and the content will st inline with post list.

Using the rectangle tool, draw a black box the width of your canvas with the dimensions of width: 1020px, height: 240px.

I will simply add a text box, to represtent the soon to be widgetized area, this will sit 3.5 columns in from the right, inline the post. The ‘About’ text box will be 271px in width. The font used for the ‘About’ title will be ‘Georgia’, font size: 18pt, tracking: -25.

The ‘About’ content will use, font: ‘Lucinda Grande’, size: 18pt, tracking: -25, leading, 18pt.

Lastly, in the footer I will add the second widgetized area, this being a ‘Menu’ links list.

The font settings used for this will be exactly the same as the ‘About’ text. The text box width will be 130px in width.

Final Design

This has given you a step by step walk through on the creation of my minimalist WordPress theme, next week, I will slice this design from Photoshop and convert to HTML. Stay tuned!

View large version


Follow the next two posts where I show you how I code the PSD into HTML/CSS and finally how I take the static HTML templates and create a fully functioning WordPress Theme.

Part 2: Create a Clean and Minimal WordPress Theme with HTML/CSS

Part 3: How To Create Your Own Clean And Minimal WordPress Theme

Posted by David Martin

David Martin is a WordPress developer & entrepreneur from the UK. He owns DesignWoop, CardDsgn and WhoDesignToday. Catch up with David on Twitter.


  1. Great ! I’ll look forward to that….

  2. This is very attractive stuff, and I might just ‘give it a go’… I also wonder if David intends talking us through his implementation of the ‘bouncy’ list (on the lhs of his page ?)….

    1. Hi Steve,

      I can write a tutorial on that if you would like, its a really simple jQuery effect. So I load all the categories/archives from WordPress, then use jQuery to hide/show then when a link is clicked.

      I’ll do little tutorial to cover it.

      – David.

  3. Thanks for that David! Cheers for the hard work!

  4. Thanks for this tutorial. I feel like I’m going to learn loads by completing this. My wordpress is rusty to say the least. When will you be providing the second tutorial (cut up)? Thanks again.

    1. Hi Kevin, Its up already here –

      WordPress conversion is on its way!


  5. gr8 post, found it very usefull.

    p.s. this image is lost :)

  6. Great post as I’m planning to start building a site in WordPress, so great timing. Thx. (couple of your images are missing tho)

    1. Hi Mark,

      I see all the images, any in particular? Feel free to send a screen shot over to

      Thanks :)

  7. Minimal WordPress Theme nice thanxx admin…

  8. Beautiful design here – such a nicely balanced layout. I really look forward to seeing the post where you code it into WordPress. (Timely for me as I am in the midst of a major redesign of my own site – and thinking of going fully WP).

    Thanks so much for posting this project.

Comments are closed.