PSD to Wordpress Conversion Instructions

Section 1 - Designing a Wordpress theme in Photoshop

Designing a theme for Wordpress in Photoshop is straightforward. In our example today, we will create a simple two column fixed width theme. Before we start, we need to decide what the width of our theme will be. I chose a 980-pixel sixe because it will fit on most screens without the need to scroll form side to side, as most screens today are at least 1024 pixels wide.

To get started create a rectangle that is 1024px x 768px. This will serve as our background for the theme. You can color your backgrounds or even add an image. For our tutorial, we will color the background blue.

Next, we will layout the theme container. Later this will be defined in the web pages we create, but now let’s add a white rectangle 980pxx768px. This represents the themes overall width and the container that will hold our theme.

Now that we have the basic layout done let’s look at the different sections we will be creating. Our theme will have four basic sections:

  • Header
  • Content
  • Sidebar
  • Footer

We will add each section to our theme layout starting with the header. For this tutorial, I have decided to create a header that is 175px tall and I will add 13px above the header also. To do this I will create a box that is 188px x 980px aligned with the top of the page.

I now have the basic header shape in place. Remember I added 13px for a border at the top so I want to represent that in my design. If you have an image for your header, you can now format it to the right dimensions and paste it into the PSD like this.

I have decided to put the menu right below the header and to make it approximately 30px in height. To do this, I will create a rectangle 30px x 980px under the header image.  

I have decided to put the menu right below the header and to make it approximately 30px in height. To do this, I will create a rectangle 30px x 980px under the header image.

That is it, we have a design we can now transfer to a theme. Before we start coding, let’s look at some of the basics of a Wordpress theme.

Section 2 - Wordpress Themes Overview

Before we convert our Wordpress theme design into a usable Wordpress theme, it is important to understand the various parts of a theme and how they work together.

A Wordpress theme is made up of a collection of:

  • web pages,
  • Style sheets, and
  • Images.

These elements comprise the theme and are located in a folder within the Wordpress installation directories. All themes are located in subfolders within the wp-content/themes/ folder.

The elements that make up a Wordpress theme consist of three types in addition to the images. The style sheets or CSS files control the presentation or look of the theme. They define the colors used and how the data is displayed visually. The web pages are divided into two different types the template files and the optional functions.php files. The functions.php file is used for many things, but if you are going to create a widget ready theme, you will put the code to do this in the functions.php file. The template files generate the data or content that is displayed as a webpage.

Every Wordpress theme must have at least two files:

  • index.php and
  • style.css.

Other optional pages include:

  • home.php,
  • functions.php,
  • single.php,
  • page.php,
  • archive.php,
  • category.php,
  • search.php,
  • 404.php,
  • comments.php,
  • comments-popup.php,
  • author.php, and
  • date.php.

Each of these pages performs a different function and we will cover these later. Let’s look at each of the page types in more detail.

CSS pages- The Theme Style Sheet

As we discovered earlier, the CSS page or style.css controls the presentation or the look of our theme. It also does much more. The style.css also provides the details about the theme in the form of comments. Wordpress does not allow any two themes to have the same details in their comments. They do this because two themes with the same details would cause problems in the theme selection pages.

At the top of every style sheet are the details about the theme. These are used in the theme selection page. The style sheet comments are organized as follows:

Theme Name:  Your theme’s name

Theme URI:  The theme’s home page

Description:  The theme’s description

Author:  The author’s name

Author URI:  The author’s web page

Template:  This optional field defines a parent theme if one is used

Version:  The theme’s version number

If you are using a parent theme you will need use the name of the directory of the style in the Template field.

The Theme Functions.php File

To add more advanced functions to a theme you can use the optional functions.php file. The functions.php file acts like a plug-in if it is present in your theme. Some of the typical uses for this file include:

  • Create the code for a widget ready theme
  • Define functions used in the template files of your theme
  • Create an admin screen for your theme that gives users the ability to choose options for colors, styles, and other aspects of your theme

If you want to see a sample of a functions file that sets up an admin, look at the default Wordpress theme. This theme contains a functions.php file that defines functions and an admin screen. If you want to see a list of what is possible wit this file, look at Function Reference list available on www.wordpress.com.

The Theme Template Files

As we discovered earlier, Wordpress uses web pages or PHP files for templates to generate the pages requested by your site’s visitors. We already saw a list of all the possible templates, so let’s examine the key ones in more detail.

While it is not necessary to use every possible template, it is important to note that Wordpress chooses templates based on the template hierarchy, which is available at www.wordpress.com and is not important for the purposes of this book. As the theme designer, you can choose the level of customization you want by designing or not designing the various templates.

As we said earlier, you can create a Wordpress theme with just two files:

  • style.css
  • index.php

When we designed our theme, we included several areas including:

  • A header
  • A footer
  • A sidebar
  • A content area

All of these areas can be defined in the index.php template file or can each be their own template file in which case the index.php file will define how and where they are used. Note that if you do not create templates for the various template possibilities, Wordpress use the built-in default files. The default templates may not match your Theme and you may want to create your own to maintain consistency across the theme.

In our example, we designed a theme that will require the following templates:

  • index.php
  • sidebar.php
  • header.php
  • footer.php

To do this we will create an index.php that will call each of the other templates. To do this we will use Wordpress tags within the index.php template. The tags we need to use are as follows:

We will examine this in detail in Section 3 of this book.

Section 3 – Putting It All Together

Now that we have designed our theme and learned the basics of building a Wordpress theme, it is time to build our theme. To do this let’s start by creating a folder in our Wordpress installation. We will name our folder “World” and place it in the wp-content/themes/ folder.

Also create an images folder in the same folder. This will hold our images for the theme.

Now that we have our folder, let’s create the files we need in the folder. We will create the following files:

  • index.php
  • sidebar.php
  • header.php
  • footer.php
  • style.css
  • functions.php

Now that we have our folders and files created, let’s slice up our psd file to create the necessary images.

Slicing up Your PSD File

For this theme, we only need to create one image - the header image. To do this we will select the layer in our psd file that is our header image. You should also hide any layers that are above the header layer to prevent them from being copied.

Now we simply copy this layer and paste it into a new image.

Review the dimensions to ensure they are correct and if they are then save the file as headerbg.jpg. You are now ready to start creating your theme.

CSS Layout

The layout of a theme is done using CSS divs. The divs define the various sections and how and where they are placed. Additionally our style.css will further define the look based on these divs.

Our theme will be laid out as follows.

Furthermore, we will encase the entire page in two wrapper divs called wrapper and wrapper 2. Let’s start laying out the theme by starting on the template files.

Template Pages

Our layout for our divs will be as follows:

<div id="wrapper">

<div id="wrapper2">

<div id="superheader"></div>

<div id="header"></div>

<div id="tabs"></div>

<div id="content"></div>

<div id="sidebar"></div>

<div id="footer"></div>

</div></div>

There will be other divs in the theme, but these are the major ones and translate directly from our design. Let’s get started at the top with the header template.

Header.php

The header.php template contains our logo, site name, slogan, and in this case the menus. Open your header.php file and let’s get started.

You should have a blank page when you open the file. Wordpress templates all work together like the pieces of a puzzle to build a complete webpage. Because of this, certain tags live in different templates. Every web page requires certain tags to render in the browser. These tags are:

  • html
  • head
  • body

The header.php file will have the opening html tag, the head tags, and the opening body tag as well. We will close the html and body tags in a different template.

The first thing we should do is set up our tags and CSS divs as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title> </title>

</head>

<body>

<div id="wrapper"><div id="wrapper2">

<div id="superheader"></div>

<div id="header"></div>

<div id="tabs">

<ul></ul>

</div>

We have now created our basic header and inserted our HTML tags and CSS tags. Note that we did not close the Wrapper tags, as we will do this in the footer.php template. We have now lain out or page, but we have not put any Wordpress specific data in yet. There are several items we need to add to the page including:

  • page title code
  • blog description code
  • blog title code
  • menu code
  • the css link

We need to add the following lines of code  to our page:

  • <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
  • <?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?>
  • <a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a>
  • <?php bloginfo('description'); ?>
  • <a href="<?php bloginfo('url'); ?>">Home</a>  <?php wp_list_pages('title_li=&depth=1'); ?>           </ul>

We add it in the following manner:

<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

This creates the title text in the top of our browsers and links the CSS sheet to the page. To set the blog title and description to display in the header we add:

<div>

<h1><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1><br><?php bloginfo('description'); ?> 

<ul>

Finally, we add the menu items as follows:

<ul>

<li><a href="<?php bloginfo('siteurl'); ?>/">Home</a></li>

<?php wp_list_pages('title_li=&sort_column=menu_order&depth=1'); ?> 

</ul>

The first item creates a Home link and the second lists the pages within the Wordpress database.

Finally, we are left with the following header.php template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?>  <?php wp_title(); ?></title>

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style.css" type="text/css" media="screen" />

</head>

<body>

<div id="wrapper"><div id="wrapper2">

<div id="superheader"></div>

<div id="header">

<h3><a href="<?php bloginfo('home'); ?>/"><?php bloginfo('name'); ?></a></h3>

<h2><?php bloginfo('description'); ?></h2></div>

<div id="tabs">

<ul>

<li><a href="<?php bloginfo('siteurl'); ?>/">Home</a></li>

<?php

wp_list_pages('title_li=&sort_column=menu_order&depth=1'); ?>

</ul>

</div>

Now that we have our header.php file lets create our footer.php file.

Footer.php

The footer.php file contains the information for the footer and is used to clean up tags for other templates. In our case we have an open div tag from the page div in the header and the body and html tags that need to be closed. As usual, we will create a div and then add our content.

Our footer.php will look like this:

<div id="footer">

<p>

<?php bloginfo('name'); ?> is proudly powered by

<a href="http://wordpress.org/">WordPress</a>

<br /><a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>

and <a href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a>.

</p>

</div></div>

</body></html>

Let’s examine each piece of this. The <div id="footer">starts the div for the footer. The <p> creates a paragraph break in the top of the footer and the </p> tag closes that tag. The next tag (<?php bloginfo('name'); ?> )should look familiar,  it displays the title of the blog. After the link to Wordpress you will see two links that allow visitors to subscribe to rss feeds of the blog. Finally, you see our closing tags, one for the footer div, one for the page div and then the html and body tags.

Now let’s look at the sidebar.php template.

Sidebar.php

The sidebar.php template controls the items in our sidebar. When designing a sidebar, you can either create a static bar that you put the Wordpress items into such as categories, calendar, etc, or you can build a widget ready sidebar that lets you set the items in the admin panel.

The sidebar is an unordered list of items contained in a CSS div. The first thing we want to do is add the div to the page so open your sidebar.php and insert the following code:

<div class=”sidebar”>

</div>

If you want a widget ready sidebar, add the following code to the sidebar between the div tags:

<ul>

<?php /* Widgetized sidebar, if you have the plugin installed. */

if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

<?php endif; ?></ul>

If you do not want to add any static items then you are done. However, for those that want a static sidebar you can add a list of blog categories by adding the following code:

<ul>

<li><h2><?php _e(’Categories’); ?></h2>

<ul> <?php wp_list_cats(); ?>

</ul></li></ul>

There are many other items available, check the Wordpress site for more info. Our final sidebar should look like:

<div class=”sidebar”>

<ul>

<?php /* Widgetized sidebar, if you have the plugin installed. */

if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

<?php endif; ?> </ul> </div>

That is it; of course, you can put anything you want in here. Let’s look at our last template, index.php that will pull together all these templates.

Index.php

The index.php pulls the other templates together to create the basic page. To begin we will create the calls to our other pages as follows:

<?php get_header(); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

This calls the header.php, sidebar.php, and footer.php page. If you just loaded this, you would get a page with no content, so we need to add the content and necessary divs.

Let’s start by adding the content and main divs right below <?php get_header(); ?> as follows:

<?php get_header(); ?>

<div id="content">

<div id="main">

</div></div>

Now that we have our divs setup we can begin adding the code to get the data from the database.  You will most likely want to list your posts on the main page. To do this we add code that will retrieve the posts and lists them as follows:

<div id="main">

<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

<?php endwhile; ?>

<?php endif; ?>

</div>

Your theme is now ready to display the posts. We are only left with one template, the functions.php template.

Functions.php

The functions.php file can be used in many ways. In our case, we will use it to control the look of our widgets in our sidebar. Open your functions.php file and let’s get started.  Enter the following code into your functions.php template:

<?php

if ( function_exists('register_sidebar') )

register_sidebar(array(

'before_widget' => '<li>',

'after_widget' => '</li>',

'before_title' => '',

'after_title' => '',

));

?>

As you can see this checks to see if there is a widget in the sidebar and then inserts code before and after the widget to control the look of the widget.

We now have a set of templates that will produce a theme. To set the look of the theme we need to create a style.css file.

Style.css

The style.css file contains information about our theme and defines the look of our theme.  We start by opening our style.css file and entering the information about our theme at the top. We need to enclose our information in comment tags. CSS comment tags look like this:

  • /*  (open comment)
  • */  (Close Comment)

We need to include all the required info. We built our details as follows:

/*

Theme Name: World

Theme URI: http://www.Yoursite.com

Description: My first theme

Version: 1.0

Author: You

Author URL: http://www.yoursite.com

*/

Now that we completed the comments, we need to create classes for each of the divs we defined in addition to the body div. We will create the following classes.

  • body
  • wrapper
  • wrapper2
  • superheader
  • header
  • content
  • sidebar
  • footer

Let’s look at each one individually and what they do. We will keep it simple and just define the body portion of our pages. The body styles affect the entire page. We will define several elements including:

  • The background color
  • The font used by our pages
  • The font size

To do this we will enter the following into our style.css page.

body {

margin: 0;

padding: 0;

color: #333;

text-align:center;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 100.1%;

background:#0099FF;

}

Let’s examine each item separately.

  • body{ - This opens the style class and defines which tags are effected in the pages.
  • Margin: -  Defines the margins around the page. A 0 margin will have no margin.
  • padding: - Padding is like a margin and setting it to 0 will remove it completely.
  • color: - This tag defines the color of the font.
  • font-family:  - This defines the font used for the  class. Not every font can be used and web pages use specific fonts. Refer to CSS standards for a complete list. In this case, we chose the Verdana, Arial, Helvetica, sans-serif font.
  • font-size:  - This sets the size of the basic font.
  •  
  • background: – sets the color of the background on the webpage.  We used 0099FF which is the hex representation of our color. To get the hex color you can use photoshop.

You might have noticed a semicolon at the end of each value. This is used to end the line and is required.

We now can define our two wrapper classes as follows.

#wrapper{

width: 980px;

margin: 0px auto;

padding: 0px;

text-align:left;

font-size: 78%;

line-height:18px;

background: #fff;

border-left: 2px solid #fff;

border-right: 2px solid #fff;

}

#wrapper2{

background: #fff;

}

Here we have used the width tag to create the width of our theme and it matches our design width. The text-align tag sets the text alignment in the div, and finally we create a border around the div. with the border-right and border-left tags. The wrapper two class only sets the background color to white which is what we use for our sidebar and content.

Now that we have the global tags set, let’s address our header. Our header section will control the look of the items in our header and will include several items such as:

  • the header image,
  • header text, and
  • the menu text.

We will do this in the following manner and step through this one class at a time.

#superheader{

padding: 0;

margin: 0;

height: 13px;

background-color:#0569ac;

}

#header{

padding: 0  0 0px 0;

height: 175px;

margin: 0 0 0px 0;

border-bottom:2px solid #fff;

background:#fff;

background-image:url(images/headerbg.jpg);

}

The superheader class is used to create that band at the top of the page.  We simply set the margins,height, and color.

The header class defines the overall style of the header div. In this case, we are setting the background image, borders, margins, and height. You can see we used the sliced header image we created earlier.

The menu is controlled by the tab class and controls how the menu looks and functions. Because a Wordpress menu functions as an unordered list, we set the list tags for the menu tags as well. An unordered list in html will use the tags ul and li, with ul defining a list and li a list item. Let’s start by looking at the menu class.

#tabs{

padding: 0;

background:black;

}

First, we define the background color of the menu and set the padding to 0. Next, we define the look of the ul tags.

#tabs ul{

margin: 0;

padding:3px 0;

list-style-type:none;

}

Finally, we  set the li tags.

#tabs ul li{

margin: 10px 0 3px 15px;

padding: 6px 15px 6px 0px;

display:inline;

border-right: 2px solid #fff;

font-size: 90%;

font-family: Tahoma, Arial, sans-serif;

Display:inline makes the list display in a horizontal line as opposed to a vertical line.  Next we define how the links look in our menu. Since each item will be a link we will want to change the look form the default link style. Here we set the font color to white.

#tabs ul li a{

color: white;

}

The last step is to define the behavior of the text when we hover the mouse over it. Here we simply change the color.

#tabs ul li a:hover{

color:#A1E7FD;

 text-decoration:none;

}

Next, we can create the style for our footer. We will define our footer style as follows.

#footer {

clear: both;

margin: 0;

padding: 10px 16px 0 16px;

text-align: center;

font-size: 85%;

background: #fff;

}

This class defines the footer class and sets the margins, padding, text alignment, font size, and background color for the class.

Now that we have the footer, let’s define the sidebar styles as follows.

#sidebar {

padding: 0;

margin: 0px 0px 0px 540px;

}

That is it for the sidebar for now. Next, we will set the style for the main content of the pages as follows.

#content{

clear:both;

padding: 0;

margin: 15px 10px;

}

This will define the content container’s style. We set the margins and padding for the class

#main {

width: 530px; 

float:left;

margin: 0;

padding: 0 0 10px 0px;

overflow:hidden;

}

Here we set the main div’s class by setting the width, placement, margins, padding, and the overflow properties.

That is it, we are ready to upload the theme and test it.

Putting it all together

If you upload this to your server and browse to the blog you should see something like this.

Conclusion

We have created a simple Wordpress theme. There are many other things you can do with Wordpress themes and there are many great tutorials available to help you. There is no limit to what you can do with a Wordpress theme as long as you follow the basic principles contained within this document. If you want to do more advanced theme building check out the Wordpress developer site at www.wordpress.com.