Have you ever had a feeling that You can’t find and appropriate theme for You Wordpress blog? You know that You have a good design for it, or maybe You even have a finished xhtml template, but You don’t know how to make a Wordpress theme from it. What You really know is that You don’t have time to search for manual how to make one. Annoying isn’t it? :)

I had the same problem, so I spent some time looking for some kind of Wordpress theme SDK. After numerous searches I decided to make one. I will try to write a step by step tutorial how to use it.

Before starting I must say that I’m not very experienced Wordpress user, I only start enjoying this blog system and all of its good features. I know that there will be always people who will be complaining about one or other software (and maybe at some point they will be right, but…), so please don’t tell me why Wordpress is bad choice for a blog, at least yet. :)

Further more if you want to make Your own Wordpress theme You must have some knowledge in xHTML, CSS and PHP.

Installing Wordpress

1. Download latest Wordpress (http://wordpress.org/download/).
2. Extract downloaded archive contents and upload it to a root folder on Your web server.
3. Create a MySQL database and write down database name, database username, database password You where using. phpMyAdmin (http://www.phpmyadmin.net/) is the best software for this kind of operations.
4. Go to Your web servers root folder (where You uploaded Wordpress) and rename file wp-config-sample.php to wp-config.php.
5. Open the new file for editing (download it if You can’t edit it on the server)
6. Find this (at the top of the file):

   define('DB_NAME', 'putyourdbnamehere');
   define('DB_USER', 'usernamehere'); 
   define('DB_PASSWORD', 'yourpasswordhere');

7. Replace login data with that which You wrote down earlier.
8. Point Your browser to location http://www.youraddresshere.com/wp-admin/install.php and follow the instructions.
9. After finishing the installation wizard You will have a full working Wordpress copy on Your web server, and You will be able to upload some custom themes.

Uploading new test wireframe theme

1. Download test theme wireframe I made for You.
2. Extract downloaded archive contents and upload it to Your web servers folder \wp-content\themes\
3. Login into Your Wordpress control panel (http://www.youraddresshere.com/wp-admin).
4. Go to “Presentation” then “Themes”, and select theme named “test”.
5. Voila Your blog (http://www.youraddresshere.com/) has a simple test theme. I made simple CSS file which is basically some lines and colors. In this way You can see what you can modify.

Modifying wireframe theme

There are some files in this test theme folder. Lets talk about them.

• screenshot.png
  This is the theme thumbnail image You will see on Wordpress presentation page in the control panel. When You will change the look&feel of Your theme change this image too.
• screen.css
  This is Your themes CSS (visual presentation) file. Additionally at the top of this file you can (and maybe must) specify Your new themes name, themes homepage, description, authors name, authors homepage.
• header.php
  In this file You can load JavaScript’s, additional CSS files.
• footer.php
  Themes footer (copyright, date, author, etc.).
• sidebar.php
  Themes sidebar is defined in this file. This is the place where all of your Wordpress widgets will go.
• index.php
  This is the main themes file, which has a lot of conditional PHP statements (its not hard to understand them because they are self explanatory) for many different purposes. This file will generate static pages, posts, include other files (if needed).
• comments.php
  This file contains code for comment listing and comment form.

Don’t be afraid, try to change something. Try to divide Yours existing xHTML template (remember You have created the best ever design? :) ) into parts (header, footer, sidebar, main part) and paste code into this wireframe theme carefully. Don’t do everything at once and I assure You that in few minutes you will have Your own Wordpress theme. Just don’t forget to share it with others. :)

More on theme development you can find here: http://codex.wordpress.org/Theme_Development.

Share, bookmark this article