Bookmark and Share
Check Google Page Rank Locations of visitors to this page
Click to get Free offers

Thursday, April 16, 2009

Create Custom WordPress Theme

In this tutorial, I will explain the basics of how WordPress theme works and show you how to convert a static HTML template into a theme. No PHP skill is required, but you need Photoshop and CSS skills to create your own design.

1. The Blog Frontend

Before you start, let’s take a look at the WordPress default theme and see how it is structured. Take note of the elements (header, post title, search form, navigation, footer, etc.).

Default Frontpage (index.php)

Default Single (single.php)

2. Photoshop Mockups

Based on the information gathered from the default theme, design a Photoshop mockup of your blog. Here I’m using GlossyBlue, one of my free WordPress themes, as an example.


3. HTML + CSS

After the PSD design is done, create a static HTML+CSS template of each page.

Why Create a Static HTML File First?

Mainly because it will make the development process a lot easier. I usually create a

HTML file for every template that I need, test it across all browsers, validate both HTML and CSS markups, then all I have to do is cut & paste the WordPress code. By doing so, I don’t have to worry about HTML or CSS bugs during my theme making process.

4. How WordPress Theme Works

If you go the default theme folder (wp-content/themes/default), you should see many PHP files (called template file) and one style.css file. When you are viewing the front page

, WordPress actually uses several template files to generate the page (index.php << header.php, sidebar.php, and footer.php).


5. Duplicate The Template Files

Copy the GlossyBlue HTML folder into the wp-content/themes folder. Then, go to the defaultcomments.php and searchform.php file to the glossyblue folder. theme folder, copy the

6. Style.css

Go to the WordPress default theme folder, open the style.css file. Copy the commented code at the top and paste it to the GlossyBlue style.css file. Change the theme name and the author information as you desire.

theme name and author's information

7. Splitting The Files

Now you need to understand where to split the file into several files: header.php, sidebar.php, and footer.php. The image below shows a simplified version of my index file and how the markups should split.

splitting files

8. Header.php

Open the index.html file. Cut from the top to where the ends, paste it in a new PHP file, and save the file as header.php.

header code

Go to the default theme folder, open the header.php. Copy and replace the tags where it requires PHP code (Template Tag): , stylesheet,

, and
.

replace code

Navigation Menu (wp_list_pages)

Replace the

  • tags in the
  • View blog reactions

    No comments: