In this tutorial we willshow you how to create a classic Wordpress theme. You will learn how to build valid XHTML template files, how to create them in PHP and define their stylesheet design. This is a beginner's guide that will hopefully result in a theme of your own or the very least help you understand how a theme is built.
Table of Content
Since this turorial is quite extensive a table of content has been included. This is so that you can finish each step in your own time, not having to go through the whole tutorial at once.
1. Create Index.php and Style.css
2. Define the header
3. Separate the content
4. Add the Sidebar
5. Make sidebar widget-ready
6. Create the Footer
7. Validate Your Code
8. Start Stylesheet & Initial Tweaking
9. Add Commententing
10. Divide index.php into separate template files
Installing Wordpress locally
Before you start we suggest you get Wordpress installed on your local computer. It will allow you to view your creation offline which is much more convenient than using a remote web server. To do this (Windows XP is required) you need to download XAMPP lite. Follow our 3 steps to install Wordpress on your local computer and have a local server and Wordpress up and running in no time. Remember to create a local folder for your theme files: c:\xampp\htdocs\wordpress\wp-content\themes\yourtheme
Remote Wordpress Hosting
If you do not wish to install XAMPP lite on your personal computer, since it will require both space and memory, you have other options. Eventually you will still need to move your theme to a web server and we can help you find a secure and relibale hosting plan to meet your Wordpress needs. Here at WebHostingSearch.com we have dedicated an entire toplist to a type of hosting plan that is referred to as Wordpress Hosting. This simply means that the hosting providers presented on the list all offer tailored hosting plans that fully support the Wordpress CMS. This includes MySQL, PHP, Linux/Windows and pres-installable scripts to ease your Wordpress installation process.
1. Create index.php and style.css
To save you time and sanity we'll jump right to it. Open your favorite text editor, Notepad or EditPlus recommended, and save the new document as index.php to your theme folder. Copy all code from this file: index.txt and paste it into index.php.
Then open another new document in Notepad and save it as style.css. Paste all the code from style.txt into you your css-file and save again. You now should have two files in your theme folder: index.php and style.css. We'll come back to fill the stylesheet later. For now you can close the css-file.
Activate the Theme
If you have installed Wordpress on your local computer, log in to the Wordpress admin and click Appearance>Themes in the left dashboard column. If you are running Wordpress on a remote hosting server simply replace localhost/wordpress with your domain and directory location.
Back to the admin, locate your theme, New Theme, and activate it (Note! If you first want to change the theme name, simply open your style.css and change the theme details listed there). Click on the link in the top right corner to view your site. It should display a blank page. If any errors occur, double-check your index-file and css-file.
2. Define the header
The header is a standard template, used in most PHP based websites and certainly Wordpress themes. It defines the top section of a page. Open the index.php file and add this code in between the <body> and </body>:
<div id="wrapper">
<div id="header">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<?php bloginfo('description'); ?>
</div>
</div>
What are DIV tags?
You are using the <div> tag to initially define the header. A DIV-tag is like an invisible box where you include the things you want in the header. Assigning an ID to the div-tag is so that you later may define the design of the header in the stylesheet-file, style.css. When defining the design of a certain div-tag you can either use an ID or Class. Simply put, DIV ID is for unique designs and DIV Class for reoccurring designs.
Save the file index.php and open your web browser. Go to http://localhost/wordpress to view the changes. Remember to always start the XAMPP software and activate server and database. Otherwise your site won't show in the web browser.
Code Explanation
You should now see the blog title and blog description in the upper left corner. We have thus used DIV tags to define two invisible boxes so far: the "wrapper" and the "header". The "wrapper" is simply added as the big box in which the other smaller boxes, like the header, will be placed. The "header" DIV now includes the blog's title and description using:
- <h1> - to determine the title's size
- <a> - to make it a link
- 2 PHP codes within the <a>tag to display where the link should lead and what it should say. A 3rd PHP code has been included to add the blog description.
Included PHP code
- <?php bloginfo('url'); ?> - defines the link source as blog-url: http://localhost/wordpress
- <?php bloginfo('name'); ?> - Defines the title as the blog's name: New Theme
- <?php bloginfo('description'); ?> - code to display the blog description.
3. Separate the content
Next thing to do after defining the header is to make sure that the following content will be properly separated from other sections like the header, footer and sidebar. Here the blog's posts will be displayed. In the Wordpress community this slip of code is referred to as the Loop.
Add the invisible box for posts
Open you index.php and add this DIV ID in between the <body> and </body> tag under the header div tags:
<div id="box">
</div>
Then add this PHP code within the DIV tags:
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<?php endwhile; ?>
<?php endif; ?>
Add the Loop
By first adding a ID-assigned DIV tag you have created an invinsible box which you will later get to style and define in the stylesheet. Inside the invisible box you have put the loop; PHP code that basically calls posts, if there are any, from the database to be displayed on the site, in the "box". To structure the posts that will appear in the "box" div tag you will now define the post title(as a permalink) and the post as content.
Add this code after the_post(); ?> and before <?php endwhile; ?>:
<div class="post">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<div class="entry">
<?php the_content(); ?>
</div>
</div>
You have now created two more invisible boxes within the "box"; one for the post title (div class="post") and one for the post content (div class="entry"). In these div-tags you have also entered PHP code that calls for the post's specific title name, making it a permalink, and the posts content.
Add postmetadata
To add postmetadata to each post simply copy all the code from this document: postmetadata.txt and paste it under <?php the_content(); ?>. You will now have comment details, category etc. displaying in the post.
And last but not least you need a link to the rest of your posts that didn't make it to the frontpage. In the Wordpress admin under Settings>Reading you can decide how many posts that should be displayed on the frontpage. Your visitors will then be able to find remaining posts thanks to a Next and Previous link under listed posts.
Add this code between <?php endwhile; ?> and <?php endif; ?>:
<div class="navigation">
<?php posts_nav_link(); ?>
</div>
Now save the index.php-file and refresh your web browser window. In order to see the Next and Previous links you need to 1. add more posts and 2. define how many post to be displayed on the frontpage.
So far your index.php should look like this. Do a cross-reference with your own code to make sure you haven't missed anything. If you have, simply select all you code and replace it.
4. Add the Sidebar
The sidebar is an essential part of any Wordpress theme and it is now time to add it. In the sidebar you will add listings of categories, pages, archive and blogroll. Later on you will also make the sidebar Widget-ready so that you may use the Widget function in the admin to customize the sidebar.
To add the sidebar including category, page, archive and blogroll listings add this code under the "box" div end-tag in index.php:
<div class="sidebar">
<ul>
<?php wp_list_pages('depth2&title_li=<h2>Pages</h2>'); ?>
<li><h2><?php _e('Categories'); ?></h2>
<ul>
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
</li>
<li><h2><?php _e('Archives'); ?></h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
<?php get_links_list(); ?>
</ul>
</div>
Save index.php and refresh you browser window. Your index.php code should now look like this
5. Make sidebar widget-ready
This step is easy. In order to make the theme work with Wordpress' widget feature we need to create a file called functions.php. Open Notepad and a new document, save it as functions.php in your theme folder. Copy the code from functions.txt and paste it in to functions.php. Then open index.php and add this before the first <ul> tag in the sidebar DIV:
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>
And this code right before the last </ul> tag in the sidebar DIV:
<?php endif; ?>
Save the index.php and refresh your web browser. No changes will appear until you start using Wordpress Widgets. If it does, double-check you code.
6. Create the Footer
The last template you need is the footer. This part of the page defines what comes in the bottom; normally Copyright announcements and page-links. Add this code to index.php, under the sidebar DIV tags:
<div id="footer">
<p>
Copyright 2007 <?php bloginfo('name'); ?>
</p>
</div>
View code here and screenshot below.
You now have a footer section containing Copyright and your blog's name. We will soon start looking at the stylesheet where you will be able to style the footer as well as all the other DIV tags/ invisible boxes.
7. Validate Your Code
But first it is time to validate your code, just to make sure the code is clean and worthy. Open a new tab in your web browser and visit the XHTML Validator. View the page source of your site (go to site, right-click, choose page source), copy all code and paste in the window Direct input at XHTML Validator. Click "Check" and hopefully your code will be passed. Otherwise the validator lists its noted errors below the box.
8. Add Commententing
Leaving the CSS tweaking for a moment, you'll now get to not only add a commenting feature to each post, but also start dividing all the code in the index-php-file into separate template files. You'll then use special PHP function for Wordpress to call on specific template files when a page is requested by the web browser. Let's start with the comments.
Add the comment feature
Open Notepad and save a new document as comments.php to your theme folder. Paste all code in comments.txt into comments.php, save and close the document. Then paste the code from comments.css and paste it into the empty style.css. Where in the stylesheet does not matter, as long as the code is correctly closed.
The next step is dividing the posts into a separate template file; single.php. You will later continue to divide the index.php into separate template files.
Open Notepad and save the new document as single.php and then as page.php in your theme folder. Paste all code from index.php into these files and save them. You have now created separate template files for pages and posts since they normally look different in classic Wordpress themes. For now we will concentrate on the post template file, single.php, since commenting rarely is applied to static pages.
But before we forget it, you have to replace <?php posts_nav_link(); ?> with this code in single.php to create next and previous links below the single post:
<?php previous_post_link('<< %link') ?> <?php next_post_link(' %link >>') ?>
Finally to add the commenting function to published posts, add this code under the "entry" DIV end-tag in single.php:
<div class="comments-template">
<?php comments_template(); ?>
</div>
Save your files and refesh your browser window. Go to a single post and see the comment feature and navigation link under it.
9. Divide index.php into separate template files
Previewing the theme in your web browser you can see the theme works as it is and you could even leave it as is. Regardless, to keep your files as clean and structured as possible we shall divide the DIV tags and code content into several template files. This will ease future tweaking and additional programming.
Let's start by creating all the template files. Open Notepad and create the following php-files, then save them to your theme folder: header.php, sidebar.php and footer.php. Starting with the header; copy everything from the top down to the end of the "header" div tag in index.php and paste into header.php, single.php and page.php. Then replace everything you have selected in index.php with this code:
<?php get_header(); ?>
Then select the "sidebar" DIV tag, from start to end, in index.php and copy it into sidebar.php. Replace what you have selected with this code:
<?php get_sidebar(); ?>
The same goes for the "footer" tag in index.php. Select everything from the start of the footer DIV tag to the end of the page, including </body> and </html> and copy it into footer.php. Replace what you've selected in index.php with this code:
<?php get_footer(); ?>
When you've replaced all code with the code above, your index.php should look like this:
Note! Do not forget to divide the code into its appropriate template files, in single.php and page.php as well.
10. Start Stylesheet & Initial Tweaking
Now comes the really fun part. Up until now we have kept you buisy defining what content your Wordpress theme will have. The only element you have defined in the stylesheet is comments. Now you get to decide how everything else will look as well. In the stylesheet you'll define all the remaining DIV ID's and Classes. So let's get to it.
Note! Make sure you have both FireFox and Internet Explorer open when you style your site. The trick is to make the design work for as many browsers as possible, as they all interpret CSS differently.
Open the style.css - file you created in the first tutorial step. Simply copy all the code from stylesheet1.txt and paste it into the stylesheet under the */. With all the DIV ID's and Classes defined you can now locate them in the stylesheet and change their assigned values as you wish.
Here are some design values that are used to define the different elements of the site:
Font-family
Defines the ovarall typography of the site. Normally added to the {body} value in the stylesheet, you also need to add two or three font-families so that the web browser will have alternatives if the first on does no work. Here is an example from the stylesheet:
{body
font-family: Arial, Verana, Times New Roman;
}
Margin
When setting the margin you are defining the space around an element. Margin is defined according to four values; top, right, bottom, and left. In plain code an elements margins is thus defines like this:
margin: 0 0 10px 0;
Defining an element with the values in the example above, it would thus have a 0px top-margin, 0px right-margin, 10px bottom-margin and 0 px left-margin. The code in the pink boxes we use in this tutorial, for example, have a standard 10 px bottom margin.
Margins are also used for position. In the stylesheet for this tutorial we have centered the "wrapper" DIV tag using this margin code:
margin: 0 auto 0 auto;
Padding
The padding value defines the space between the element border and its content. Padding properties are defined according to top, right, bottom, and left margins and looks like this in plain code
padding: 0 0 10px 0;
Float
This value defines where in an element a text or image shall be set. Left, right or Default will set the text or image to the left, right or as inserted in the element. Common is to place thumbnail images or text paragraphs to the left in an element, thus requiring this definition in the stylesheet:
float: left;
Clear
When the postition of text and images are set by the float-tag within an element, the clear-tag simply clears the sides. The clear tag can be defined to clear both, left, right or no sides of an element. An example:
clear: both;
Width & Height
We have set the width for the ovarall wrapping invisible box (div ID wrapper) to 750px since it ensures proper display on smaller screen resultions as well. The width value simply defines the width of the parent element. It is important that all other elements are not wider than this main width.
For example, we have set the width for the "wrapper" to 750px, the "box" to 500px and thus the sidebar to 240px since it has a 10px left-margin (10px+240px+500px=750px).
The height value is useful to alter headers and footers for example. This value simply defines the height of an element. Try adding this slip of code when defining the header and footer DIVs in the stylesheet:
height: 150px;
As you can see when you save style.css and refresh your web browser window, the styesheet has added a design to your site-elements. Basic elements like background color and font-family have been defined in the body-tag. Special design rules have been set for the "wrapper" DIV ID, that for example has been centered and limited to 750 px in width. After you have finished this tutorial we urge you to return to the stylesheet to create your own web design.
Congratulations! You've Made Your Own Wordpress Theme
You have made it through this tutorial and here is our tweaked version of this theme. If you like it, you can download the Squeeze Theme here for free. Think of it as a reward for finishing this tutorial.
Now, your own Wordpress theme should look like the screenshot below. Bare in mind that the posts in the screenshot are our own test posts and that we have changed the theme name to Squeeze. Well done!
Here are all the files you have created this tutorial, if you encounter any errors in you own files, please cross-reference with these:
Hopefully you have now reached a better understanding how a Wordpress theme is built. From here on out we suggest you return to the stylesheet and just mess around for a bit, trying out margins, color, widths etc. If you feel that this theme is too basic, which you probably do, simply take what you have learned here and start adding more templates and site elements. Remember it all really comes down to DIV tags and proper PHP and a stylesheet. Good luck!
Last remark! If you find any errors in this tutorial, we would appreciate if you report it by commenting below. And that goes for any questions that may arise.
What's next?
All of this tweaking won't do you any good if you don't pick a top WordPress hosting plan supporting it. Below are three plans that our editors would recommend to anyone with a blog/site built on WordPress.
Methew Costner, 29 October, 2014
Great tutorial.. Thanks for sharing with us. I can create my own WP theme using TemplateToaster software. Easy and Code free.
Kritika, 21 August, 2014
Hi,
Well, you shared an excellent post. Thanks for this! I think using a theme generator is great to have customized and responsive layouts. It takes no time to create amazing templates and the user can easily generate his own choice of website theme. Have a look for such a software that generates website layouts without the need of learning the code, http://templatetoaster.com/
Thanks!
joe, 21 October, 2012
Awesome tutorial, i don't really blog but i do set up blogs and sites for friends and family so this will come in handy
Frank, 19 March, 2012
Thank you for this great tutorial. It is really a big help for beginners like us!
Can you please make a new tutorial which can guide us beginners on how to convert this template to HTML5?
nana, 27 December, 2011
THis tutorial sucked.
chetaa, 14 December, 2011
This article is really very very nice this help me lot to create my own
theme.
Shaina Tim, 28 September, 2011
Wow. Your so great, thanks for the tutorial. I always wanted to make a theme on my own but i don't know how . And I am so happy I was able to reach your page.
Avi, 10 September, 2011
hi , u have done a marvelous job , for those who have some some difficulties while creating the theme in wordpress, thanks a lot
god bless
DaninKaz, 30 June, 2011
This article was what I had been looking for for a long time, how to set up a wordpress template from the bottom up instead of taking a ready made template, changing bits and never really understanding how the theme was built. Coming from a coding background I was always reluctant to move to WordPress as I never thought I'd have full control over the theme, now I'll be fine with it, thanks very much..
did notice a small mistake though - when cutting out the code for the 'footer', instructions say to include the end div, 'body' and 'html' tags in the footer.php file, in the resulting index.php you show those 3 tags are left in index .php - if you run this you'll get duplicate tags as they are in both files.
param, 24 June, 2011
Good tutorial that even the new people will understand easily.
Alex, 4 February, 2011
Thank You so much for this information! Wordpress.org was very confusing because of information overload, but you broke it down into more basic steps with easier to follow instructions. This is the only site I found that actually helped me create my own theme! Much appreciated!
Jen, 23 January, 2011
I've just used this tutorial and uploaded the theme and all that displays when I navigate through the WP dashboard is tonnes of chinese characters. I can't unistall the theme or install another, I can't do ANYTHING.
please help as soon as possible, I'm creating a business website for my dad on a tight timeframe and I can't move forward at all.
Yuri Ingutlsov, 7 January, 2011
Thank you. I always hate to split a valid html and php code to poorly formed and badly controlled files as most of Wrodpess theme developers suggest. With tis article you will get the strong approach to create robust and well controlled Wordpress themes. Than you again.
Ben Goud, 7 December, 2010
Can you email code that validates to my email so i can use it? Ben
Ben Goud, 7 December, 2010
your code did not validate properly... many errors with the < tags when using php code... i am not familiar with php should we be validating this code with a php validator rather than xhtml?
tori, 23 November, 2010
When you say validate your code do you mean the index.php file from this site? I did that and it said there were 37 errors, many to do with these signs. <
I didn't understand how to fix the errors.
Nathan, 12 November, 2010
Very interesting, I have just written some simple Wordpress Training tips on how to change your WordPress Theme, I thought you might find it useful.
navy, 7 November, 2010
Thank you very much. A great help!
AJ, 1 November, 2010
I created a left and right sidebar. It's working. But when I go into the control panel widgets, it only shows my right sidebar. Any ideas how to get both to show in here? Thanks!
Ajaxx, 17 October, 2010
One of the best tutorials I've ever come across. EXTREMELY helpful, especially for those of us wanting to get into wordpress. Thank you!
Abigail, 7 August, 2010
The best tutorial ever. I've made my own theme already lol.
Avanish singh, 5 August, 2010
good
Xue, 14 July, 2010
you are amazing! thanks for the tut :)
AJ, 10 July, 2010
Sorry. I'm stuck at step 1! Under activate the Theme subhead. It says "back to the admin, locate your theme, New Theme, and activate it". Maybe I'm missing something but what is my new theme? I haven't got one yet - I thought that was what we were making? Do I need to download one? Thanks.
mariosl, 8 July, 2010
question: I designed my own template via photoshop! I designed a unique homepage that is a different from the main blog! Any who, How can I convert MY OWN design into a Wordpress Theme? Where can I find that information!
rosamundwo, 17 June, 2010
I got it i got it, it's my mistakes, i name function.php without the "s"
:P
rosamundwo, 17 June, 2010
This is a very good tutorial, i've follow all successfully
the only think is "No sidebars define"
I''ll have to surf around and see how to do it..
Thanks so much! , ur a genius, easy to understand
rosamundwo, 17 June, 2010
To remove the bullets at the sidebar page title is to place these code into your style.css
li {
list-style: none;
margin:0px 0px 0px -28px;
}
ul.menu {
list-style: none;
margin: 0;
}
sergi, 1 June, 2010
the tutorial starts off strong then completely falls apart at the end. you tell us to cut everything including the closing </body> and </html> into the footer. But then you show us what index.php "should look like" and it still has those closing tags in it. also, in the downloadable theme, you haven't replaced the header content in the single and page php template files. You haven't even bothered to create the header and footer files.
DO NOT DO THIS TUTORIAL. WASTE OF TIME. BROKEN. USELESS.
BROKEN TUTORIAL. PHONY.
frann, 28 May, 2010
This is great, real step by step, easy to understand and soooo much better than anything on the wordpress site!
dave, 19 May, 2010
how do you remove the bullets that show on your page at the beginning of each widget? I couldn't find the code to pull them out.
you can see them on my page at www.notoriousapparel.net
marck_don, 16 May, 2010
I want to make a WP theme directory, but just dont know, how to make one?
LIke People should come and submit their themes to my site.,
How will that work?
I have zero knowledge on programming
Elle, 11 May, 2010
I think #9 is incorrect. I ended up just copy and paste all the files because my brain hurt from trying to figure out which ones were not right. LOL. But overall, thanks for the tut.
Josh, 19 April, 2010
Great tutorial, easy to understand and follow!
But i'm getting the following error when i try to preview/ activate: Parse error: syntax error, unexpected T_IF in /home/csm30904/public_html/wp-content/themes/csm/functions.php on line 9.
Have triple checked the files and re-uploaded but still no good. Any ideas?
Lindsey, 6 April, 2010
Great Tutorial! How can I get the tags associated with a post to display under the post's headline?
chris , 6 April, 2010
This is the best tutorial I've come across that ACTUALLY works! Well done and keep it up.
pamela dowie, 4 April, 2010
This is an excellent tutorial, thank you so much
byron, 22 March, 2010
i'm having issues with the bottom navigation. your code calls for a class=navigation. but there is no navigation in the css. any help would be appreciated
SH, 13 March, 2010
Thanks very much for the tutorial. Everything seems to work fine until Step 9, where I end up with files that have end tags with no matching beginning tags. Also, I can't see most of the linked examples for comparison. I just get a blank page.
TC, 5 March, 2010
I think I can-----I think I can ----I think I can----before I read this I was like blind but now I see dimly but I see.
brian franklin, 22 February, 2010
philip king: thanks for the feedback, will make the correction :)
Ally, 17 February, 2010
Good stuff!! I couldn't grasp customising WP until I read this tutorial...now it's all clear! :D
jl, 26 January, 2010
if your creating your own theme, is it possible to add a column? I want to make an extra column where I can post content from a different category.
motown, 21 January, 2010
Thanks for the tutorial. But why can't I add comments? I've checked with the files that was uploaded here on this site. Am I the only one with this problem?
Derek, 13 January, 2010
Never mind just solved! Once again great tut!!
Derek, 13 January, 2010
Great tut! Following to tee but seems to be one prob. Only one post displays itself and I have it set to a min of 10 posts.
http://www.slbdesign.com/wicked/
ANy thoughts as to why this is happening? Thanks
Carl, 12 January, 2010
Nice tutorial. Well done. I just follow the steps, and I've done it. I really expected more difficult.
Thanks
Philip King kingsolutions.org.uk, 13 December, 2009
Hi Brian, Just another small correction, In 'Make sidebar widget-ready' you state, 'Then open index.php and add this before the first <ul> tag in the sidebar DIV:', I think you mean 'after' and not 'before'.
Philip King kingsolutions.org.uk, 13 December, 2009
Hi Brian, very nice tutorial.
Just a correction for your text file.
In the, Add postmetadata, section you state, 'So far your index.php should look like this.' but the text file has a missing closing '>' on line 30 '<div id="box"'.
Keep up the good work.
vince jelenic, 27 November, 2009
just started with WP, and learned more here in 10 minutes - such a simple tutorial is tonic for my heart.
thanks a bunch.
Learnin', 9 October, 2009
Is there a mistake in step 9?
It says:
copy everything from the top down to the end of the "header" div tag in index.php and paste into header.php, single.php and page.php.
But I think you're only supposed to paste it into the header.php file, cause there's already stuff in the single.php and page.php files.
Am I right?
Scott, 29 September, 2009
Hi Brian,
Thanks for this simple and great tutorial.
I have an idea for a VERY simple theme but, what I'd like to be able to do is have only certain pages or posts show up in my header, or footer, and be able to exclude these by id.
Now, I'm not a programmer but I can hack php and I do have my current theme (I didn't build it from scratch) that I added a bit of php code to exclude certain page ids in the footer, and certain page ids (or post ids) in the header. But, you have to manually go to single.php or page.php.
So, I thought it would be great if, for example, when I create a post if there was a say to have a little check box that says "exclude from footer/header" just like on the post/page you see a checkbox for "Allow comments on this post" or "Allow trackbacks and pingbacks on this post".
Is that difficult to add? Basically, is it difficult to add functionality to the admin section inside wordpress?
Thanks!
Julian, 17 September, 2009
Great!
I'm trying to make my own theme now!
Thanks!
Spicy Web Design, 7 September, 2009
Another easy way to create your own WordPress theme is to create a child theme using a parent WordPress theme framework
http://www.spicywebdesign.com/so-you-want-to-create-wordpress-themes-huh-the-remix/
Biju Subhash, 18 July, 2009
great tutorial....
Thank you for sharing... :D
pram, 9 July, 2009
wow... this is great tutorial for a newbie like me :)
very inspirative...
now I'm searching css tutorial :D
Brian Franklin, 3 July, 2009
Debbie: Thanks for the comment, and yes I seemed to have forgotten to mention that. I added a paragraph to divide into template files for single.php and page.php as well.
Thanks ;-)/Brian
forari puturi, 27 June, 2009
Thank for the tutorial. I'll do this soon Its seems to be easy
Nelson Tresballes, 25 June, 2009
Thank for the tutorial. I'll do this soon.
Mohit, 23 June, 2009
One of the simplest tutorials, but still the most effective one. Thanks. You made it all look so easy.
Debbie T, 18 June, 2009
This tutorial is a big help. Thank you. Did I miss something or was there some additional steps/edits to the page.php file? Your finished file shows the 'get header' and 'get footer' tags. I don't see any mention of that in your steps.
Thanks again
Matt, 29 May, 2009
I have tried quite a few online tutorials and bought a few books, but I wishe I would have done this tutorial earlier. It is fantastic! Thank you so much.
blueocto, 11 May, 2009
Just a note, you said that "Then open index.php and add this before the first tag in the sidebar DIV" but it should go AFTER the first .
Otherwise, great tutorial! Nicely broken down in layman's terms :D
nicole, 2 May, 2009
looks like a great tutorial! the index.txt link isn't working, can you fix? thanks so much for the info!
Markus, 6 April, 2009
Dig: Which files are missing?
Dig, 4 April, 2009
Where are the files, nothing??
Good Text
Preeti, 19 March, 2009
Yea, I really need to get on the bandwagon and make a theme. I'm tired of tweaking mine to death.
Brian Franklin, 7 March, 2009
thanks guys, glad you like it. Since the very start I´ve been using Wordpress and only recently took the step from tweaking only to creating own themes. It´s more of a leap than a step really, but a very educating one to say the least.
keep it up!
Kumar, 7 March, 2009
Simple tutorial.... So I can create my own WP theme using this tutorial. I need to convert my blogger blog to Wordpress . Thanks for this tutorial.
Rajeev Edmonds, 7 March, 2009
Great tutorial. I've been developing blogger templates till now. After going reading this post, I'll definitely try my hand on developing WP theme from scratch.
Stumbled :)
James Stratford @JRStratford on Twitter, 7 March, 2009
Nice tutorial that even the newer people will understand and be able to implement.