Designing a WordPress Theme

Throughout this tutorial we will design a simplistic WordPress theme in Photoshop. This tutorial was written to go along-side Developing a WordPress Theme. Here is the finished design –

Finished WordPress theme design.

Blank canvas.
First we must decide which resolution to design for; roughly 85% of visitors are running 1024*768 resolution or higher so this will be our target resolution.

Start by creating a blank canvas 900px width and 600px height and give is a background color, I used a very light green – #f7f8f2.

Blocked in elements.Now that we have a canvas to work on we can start blocking in the general areas/elements of the theme.

As I said in Developing a WordPress Theme, the elements we will include in the theme are: a banner, a navigation, a sidebar, a content area and a footer. To the left is how I’ve blocked in my elements.

Blocked in elements with banner image.We are now ready to start on the specifics of the design – we’ll start with the banner. For the background of the banner I will be using a landscape photo from Deviant Art. To set the photo as the background of the banner: copy the image and paste onto your canvas, select the photo layer, make a selection of the banner area with the marquee tool, click Layer>Layer Mask>Reveal Selection and finally un-link the photo from its layer mask in the layers panel. Now you can make the photo freely until it is positioned correctly.

Banner and title.
Since the layout is for a WordPress theme, the title must be plain text with no Photoshop styles so the title can be changed through the HTML. The changes you can make to the text include: size, color, bold, italic and font (although you’re limited to default fonts).

For my title text I chose: Trebuchet MS font, 28px tall and color #4c880b.

Theme Navigation tabbed buttons.For the navigation I will make tabbed buttons. Start by creating a new layer above the background layer but below the banner layer, now create a rectangle with its starting 20px above the banner but ending behind the banner. Now add a style to the rectangle – stroke: 1px #333333. gradient: linear #C8E193 – #E5F8C0. Finally add some text to it, I used Verdana 10px #167323. Now duplicate the button several times and spread them evenly.

Finished WordPress theme design.Now for the main content I want a main column and sidebar, I simply added a gray rectangle for the sidebar and added a 1px line to separate the columns. To finish the theme I’ll add some WordPress style content to the content area, the sidebar and the footer. Here is the finished design –

Latest website templates

  • Vendors
  • Item: #100704
  • Downloads: 0
  • Price: $12
  • Vendors
  • Item: #78824
  • Downloads: 9
  • Price: $22
  • Vendors
  • Item: #97021
  • Downloads: 4
  • Price: $22
  • Vendors
  • Item: #76418
  • Downloads: 2
  • Price: $17