How to Make Own WordPress Theme Part I

Does your wordpress blog look too dusty? Need a new refreshing theme? You’ve probably already spent hours browsing the web in order to find an ideal one but most of the free themes you’ll find just won’t be good enough. Well, what about making your own theme? Yeah. It’s not that hard. All you need is some experience with HTML and CSS plus maybe a little knowledge of PHP syntax (though this isn’t necessary – it’s enough to copy and paste all PHP codes).

Preparation

Before styling and coding the theme, you’ll need few things ready. Create a new directory (name it whatever you want your theme to be called) and move it to /wp-content/themes/ folder of your wordpress installation. I recommend you to install wordpress at localhost just for testing the theme but you can do all of the following online, too. Now move inside the directory and prepare few blank (for now) files:

header.php
sidebar.php
footer.php
index.php
page.php
single.php
archive.php
comments.php
style.css

For now, all of these files should be empty. Don’t put any code inside them, we will be filling them step by step. Just be sure you have saved them with the proper extension.

Step 1 – Stylesheet

Let’s start with the stylesheet. Copy and paste this inside:

/*
Theme Name: Name of your own wordpress theme
Theme URI: http://www.yoursite.com
Description: Description of your wordpress theme.
Version: 1.0
Author: Your name
Author URI: http://www.yoursite.com/
*/

Of course, fill in your own name, urls, description etc. This defines how will be the theme called and described in wordpress admin panel under Presentation tab.

Next, we need to put in the rest of stylesheet. We need some basic layout for our theme. This tutorial isn’t meant to teach you how to create tableless CSS layout so we will use one of my free CSS templates I have released few days ago. Copy and paste this inside the stylesheet, just after the lines you already have there. Now, the stylesheet should look like this:

/*
Theme Name: Name of your own wordpress theme
Theme URI: http://www.yoursite.com
Description: Description of your wordpress theme.
Version: 1.0
Author: Your name
Author URI: http://www.yoursite.com/
*/

* {
margin:0;
padding:0;
}

body {
background:#fff;
color:#000;
min-width:800px;
font-family:tahoma, arial, sans-serif;
font-size:10pt;
}

#wrapper {
width:800px;
height:auto;
margin:0 auto;
}

#header {
width:784px;
height:auto;
padding:8px;
text-align:center;
border-bottom:1px solid #000;
}

#nav {
width:784px;
height:auto;
padding:8px;
text-align:center;
border-bottom:1px solid #000;
}

#sidebar {
width:180px;
height:auto;
float:left;
padding:8px;
text-align: center;
}

#main {
width:587px;
height:auto;
float:right;
padding:8px;
border-left:1px solid #000;
}

#footer {
clear:both;
margin:0;
padding:8px;
text-align:center;
border-top:1px solid #000;
}

Great job so far.

Step 2 – Header

Now open the header.php file and copy & paste few lines there:

<!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 profile=”http://gmpg.org/xfn/11″>
<title><?php bloginfo(‘name’); ?><?php wp_title(); ?></title>
<meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />
<meta name=”generator” content=”WordPress <?php bloginfo(‘version’); ?>” />
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />
<link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ href=”<?php bloginfo(‘rss2_url’); ?>” />
<link rel=”alternate” type=”text/xml” title=”RSS .92″ href=”<?php bloginfo(‘rss_url’); ?>” />
<link rel=”alternate” type=”application/atom+xml” title=”Atom 0.3″ href=”<?php bloginfo(‘atom_url’); ?>” />
<link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />
<?php wp_get_archives(‘type=monthly&format=link’); ?>
<?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>
</head>

<!–
Here you can start editing. Edit the divs in order to match your template.
If you used my stylesheet, you don’t need to edit anything bellow.
–>


<body>
<div id=”wrapper”>
<div id=”header”>
<h1><a href=”<?php bloginfo(‘url’); ?>”><?php bloginfo(‘name’); ?></a></h1>
<?php bloginfo(‘description’); ?><br /><br />
</div><!– close header –>
<div id=”nav”>
</div><!– close nav –>

This is more or less an ordinary beginning of any HTML code. First we define the DOCTYPE. Then follows TITLE, attaching the stylesheet and traditional meta tags.

However if you look closer, you’ll find that values we filled in consist of some PHP functions like:

<?php wp_title(); ?>

Don’t be afraid of those. The reason behind using them is that we want the values to dynamically change once we edit certain settings in admin panel. PHP will take care of that. For instance, the code above will be sent to a server where it will be processed by a PHP interpreter. The server will then sent back the actual title of your blog you’ve set in wordpress settings.

This is it for now. You are on the right track to making your own wordpress theme. In next few days, I’ll post second part where we will continue with other files.

Related articles: Part II Part III, Part IV

This entry was posted in Featured, Wordpress and tagged . Bookmark the permalink.

10 Responses to How to Make Own WordPress Theme Part I

  1. You just started with a great move that exactly I was looking for. I would stick around for a while for next chapters.

  2. admin says:

    Thanks ;)

    I will post next chapter in two or three days cause I am finishing college exams right now…

  3. johnmvp says:

    Nice, thank you. I was curious, are you still going to make me that theme we talked about awhile back?

    http://www.johnmvp.com

  4. admin says:

    Do you have it designed already? I might find some time soon. I have already found out how to code JQuery tabbed sidebar so I should be able to do it.

  5. derek says:

    hi, thats a very good guide..

  6. johnmvp says:

    I don’t have any design because I have no idea how do create wordpress designs lol.. If you find time I’d really appreciate it, it would really spice up http://www.johnmvp.com. Thanks ahead of time!

  7. admin says:

    Uff… just finished this theme – usually I don’t have good design ideas but today I got kicked by muse so I hope you like the new design ;)

  8. Hey, wow! You moved to a new design, I just realized that… good looking … hmm!

  9. admin says:

    Thanks… During last couple of weeks I’ve made few WordPress themes but most of them weren’t too good. It seems like I finally managed to make a great one. I’m planning to release this theme for free download in various color schemes – just need few things polished.

  10. PSDproxies says:

    nice little tutorial, helped me out a bit with getting my new theme up for my site, thnx alot.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>