How to Code a WordPress 3.0 Theme from Scratch

How to Code a WordPress 3.0 Theme from Scratch

With the release of WordPress 3.0 came the implementation of many new features to the popular content management system. In this tutorial we are going to show you exactly how to code a WordPress 3.0 theme from the ground up to take advantage of all of these new features, as well as create a blogging-ready, minimal theme.

How to Code a WordPress 3.0 Theme from Scratch

Setting Up the Work Station

To get started with this tutorial we should set up a server on our computer using either XAMPP or WAMP (usually if working on a PC), or MAMP if you are working on a Mac. All of these tools allow for a local testing environment for WordPress and can make it so that you don’t have to constantly transfer files through FTP while working on a project.

In terms of code editing I would highly suggest Notepad++. With syntax highlighting, and an easy and clean user interface for coding, I would have to say it is my personal favorite (plus, you can’t beat free), but Notepad or Notepad 2 also work as well.

Getting the Necessary Folders and Files Ready

In the folder containing your WordPress installation, go to wp-content/themes/ and create a folder named “New 3.0 Theme”. This is where we will hold all of our files during this tutorial. Now create the following files and folders:

Getting the Necessary Folders and Files Ready

/images
style.css
header.php
index.php
single.php
footer.php
archive.php
page.php
sidebar.php
functions.php

Step 1 – Style.css

The style.css will contain all of the elements that style our WordPress template. First though. we will use it to declare the name of our template as well as the author name and link, and description and version. Now remember when creating a WordPress theme, the style.css is one of the two files required to make the theme work, and the other, which we will be creating later, is the index.php.

/*
Theme Name: New WP 3.0
Theme URI: http://www.onextrapixel.com
Description: A clean and minimal theme that is completely compatible with WordPress 3.0
Author: Keenan Payne
Author URI: http://slackrmedia.com
Version: 1.0
*/

All of this information can be changed at anytime, but it is important that it is all contained within the comments so that it doesn’t affect any of the definitions created.

Now we will create some basic definitions that we will later implement in some of the template’s PHP files.

body{	
	font-family: Arial, Helvetica, Georgia, Sans-serif;
	font-size: 12px;
	background: #d9d9d9;
	color: #000000;
}

a:link, a:visited{
	text-decoration: none; 
	color: #000000;
}

a:hover{
	color: #5f5f5f;
}

h1 {
	font-size: 54px;
}

h3 {
	font-size: 24px;
}

#wrapper{
	margin: 0 auto;
	width: 750px;
	text-align: left;
	background: #fff;
	padding: 20px;
	
}

#header{
	width: 750px;
	height: 100px;
}

#blog{
	float: left;
	width: 520px;
	padding: 0 10px 10px 10px;
}

.sidebar{
	float: left;
	width: 200px;
	margin: 0 0 0 10px;
	font-size: 14px;
	list-style: none;
}

#footer{
	clear: both;
	text-align: center;
	height: 50px;
	background: #ccc;
	padding: 10px;
}

The tag is just used to declare the specifications for fonts used on the website, as well as the background color (this can be changed to your own liking). We then declare the style attributes for links as well as some of the headers that we will be using throughout our theme.

The #wrapper is going to be the full size of the web page, with #header obviously being the header, and #blog containing just the recent blog posts on the site. Lastly we have .sidebar and #footer which will both just contain the basic definitions for those given areas, which we will get into more depth about later.

Step 2 – Header.php

Next we will create the header.php, which at the moment will contain our website logo, as well as our custom navigation.

Step 2 – Header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title ( '|', true,'right' ); ?></title>

<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

<?php
	/* 
	 * 	Add this to support sites with sites with threaded comments enabled.
	 */
	if ( is_singular() && get_option( 'thread_comments' ) )
		wp_enqueue_script( 'comment-reply' );

	wp_head();
	
	wp_get_archives('type=monthly&format=link');
?>
</head>
<body>

<div id="wrapper">
	<div id="header">
		<h1><a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a></h1>
	</div>

All of this code doesn’t really need to be explained in much depth, but just remember that the above code should be in the header.php of all of your themes. First we declare the doctype, as well as use the standard that will be used to show the name of your website as you type it in your WordPress settings, and then your style.css and the PHP code that will enable WordPress 3.0’s threaded comments.

Step 3 – Adding Custom Navigation

Now that we have coded up our header.php with our basic information and our blog’s name, we can add our custom navigation menu, a feature that was introduced in WordPress 3.0. Before we actually add the code to our header.php though, we have to first open up the functions.php, and add the necessary code to enable the custom menus.

<?php

//Add support for WordPress 3.0's custom menus
add_action( 'init', 'register_my_menu' );

//Register area for custom menu
function register_my_menu() {
	register_nav_menu( 'primary-menu', __( 'Primary Menu' ) );
}

?>

As you can see via the commented sections of the code, the first part, with add_action is used to add support for custom menus, and next we register a custom menu and name it “Primary Menu”. Now, we will move on to implementing the menu into our theme.

To do this, we will have to add this line of code below at the end of our header.php document.

<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu_class' => 'nav', 'theme_location' => 'primary-menu' ) ); ?>

Now on to understanding exactly what this means. The primary function that is being used is wp_nav_menu, with sort_column, container_class, and theme_location as the arguments being used. What sort_column does is makes sure that the order you pick in your WordPress dashboard is followed. container_class will allow for you to choose the CSS class that you have created to be used to style your menu. Lastly, theme_location just assigns the menu to wherever we choose, which at the moment happens to be primary-menu.

Step 4 – Styling the Navigation

We have our custom header navigation up and running, but at the moment it just looks like a boring old list of links that unfortunately, are aesthetically unappealing. To fix this, we will create a class called nav in our style.css.

Step 4 – Styling the Navigation

.nav{
	width:750px;
	background: #000;
	display:block;
	float:left;
	position:relative;
}

.nav ul{
	list-style:none;
}

.nav li{
	float:left;
	position:relative;
}

As you can see in our .nav we have made some basic declarations, such as the width of the navigation, background, where it will align, as well as the display value. Next we style the basic unordered list by just making sure that no bullets are shown with our links. For our list we float the items to the left, as well as position it relative.

Now we will finish the styling of our navigation by adding styles to the links and dropdown menus.

.nav a{
	display:block;
	text-decoration:none;
	color:#fff;
	padding:0 15px 10px 0;
	font-size:13px; 
	font-weight:bold;
}

.nav ul ul{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	float:left;
	z-index:99999;
	background: #212121;
}

.nav ul ul ul{
	top: 30%;
	left:100%;
	background: #343434;
}

.nav ul ul a{
	height:auto;
	line-height:1em;
	padding:10px;
	width:130px;
}

.nav li:hover > a,.nav ul ul:hover > a{
	color:#ccc;
}

.nav ul li:hover > ul{
	display:block;
}

As you can see we start by styling our links for the menu, and now we get into styling our drop-down menus. In .nav ul ul we set the position to absolute, and put the top property to 100%, so that it is directly beneath it’s parent link. We also changed the background to make the drop-down link stand out a little bit, as well as set our z-index to 99999 so that no matter what’s below it or in the menu’s way, it will always stay on top of all other elements.

For that third drop-down menu, we have changed the background color again just slightly so that it stands out, as well as made left 100% so that it is all the way right of our first drop-down, and set the top to 30% so that it is still attached to that second drop-down, but is separated from the entire menu.

Lastly we style the links for our drop-down menus, as well as the what our navigation will look like when a user hovers over a given link and its drop-down.

Step 5 – Index.php

The index.php will be the home page of our website, and will contain code to include our header, footer, and sidebar, which I will explain below, as well as the code to include the most recent posts from our blog and take advantage of WordPress 3.0’s post thumbnails feature.

<?php get_header(); ?>

	<div id="blog">
		<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
		
		<div class="post">
		<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
		
			<div class="entry">	
				<?php the_post_thumbnail(); ?>
				<?php the_content(); ?>

				<p class="postmetadata">
				<?php _e('Filed under&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php  the_author(); ?><br />
				<?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> <?php edit_post_link('Edit', ' &#124; ', ''); ?>
				</p>

			</div>
		</div>
<?php endwhile; ?>
		
		<div class="navigation">
		<?php posts_nav_link(); ?>
		</div>
		
		<?php endif; ?>
	</div>
<?php get_sidebar(); ?>	
<?php get_footer(); ?>

These lines of code are used to output all of the information in the header.php, sidebar.php, and footer.php wherever you place them in your theme files.

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Other than that, the code here is pretty simple to understand. After we call the header.php, we use our #blog that we created just a little bit ago, and we call the loop that will be used to bring up the latest posts on our WordPress blog. After that we wrap the title of our posts in

, which we also styled earlier.

The one piece of code here that shows how we’re going to be taking advantage of WordPress 3.0’s post-thumbnail feature is the . As it stands, this code won’t do anything, until we activate the feature in our functions.php which we will do in the next step.

Step 6 – Enabling Post Thumbnails

We have added our code to show the post thumbnails on the homepage, but at the moment nothing happens as we have not actually enabled the feature to work. Now open up the functions.php that we worked on before, and the below code should be added after your menu navigation code.

Step 6 – Enabling Post Thumbnails

// Enable post thumbnails
add_theme_support('post-thumbnails');
set_post_thumbnail_size(520, 250, true);

The code above is pretty self-explanatory as it spells out almost exactly what it does. The second line will add the support for post thumbnails in our theme, while the third line defines the exact dimensions of our thumbnail, which for this article, will be set at 520 pixels for width, and 250 pixels for height.

Step 7 – Sidebar.php

The sidebar.php is, as you guessed, the file that will display all of the information we want in the sidebar. Since we have already included the file in our index.php, all we have to do is put the code in this file and our sidebar will show up on the homepage.

<div class="sidebar">
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>

<?php endif; ?>
</div>

Yup, that will be all of the code that’s added to our sidebar.php to make it functional. We call the div that we created in our style.css, and the code below will make it so that we can add widgets to our sidebar in the order and way we want them via the WordPress backend. However, like many features, we have to modify our functions.php file first to make this feature work properly.

//Some simple code for our widget-enabled sidebar
if ( function_exists('register_sidebar') )
    register_sidebar();

The code just tells WordPress to register a sidebar which we called in our sidebar.php. WordPress can handle multiple sidebars pretty easily if you want more than one, but for the sake of keeping this already-long tutorial relatively short, we’ll let Google answer the question on how to do that for you.

Step 8 – Single.php

The single.php is what will be used for a single post page, and most of the code should look pretty similar since we’ve already coded up our index.php. Really the only thing that’s different is that we have added in our comments-template div, and the code to include the comments.php.

<?php get_header(); ?>

	<div id="blog">
		<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
		
		<div class="post">
		<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
			<div class="entry">	
				<?php the_post_thumbnail(); ?>
				<?php the_content(); ?>

				<p class="postmetadata">
				<?php _e('Filed under&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php  the_author(); ?><br />
				<?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> <?php edit_post_link('Edit', ' &#124; ', ''); ?>
				</p>

			</div>

			<div class="comments-template">
				<?php comments_template(); ?>
			</div>
	</div>

<?php endwhile; ?>
	
	<div class="navigation">	
		<?php previous_post_link('< %link') ?> <?php next_post_link(' %link >') ?>
	</div>

<?php endif; ?>
</div>

<?php get_sidebar(); ?>	
<?php get_footer(); ?>

Step 9 – Comments.php

With the release of WordPress 3.0 has meant the standardizing of comments forms throughout all WordPress themes making it easier for theme authors to and plugin developers since the comments form can be modified via hooks.

Step 9 – Comments.php

Below will be the code you will want to put in your comments.php file in your theme template.

<?php comment_form(); ?> 

This will display a comments form that looks well on our theme, but if you would like to learn more about customization of the comment form, you might want to check out WordPress 3.0 Theme Tip the Comment Form.

Step 10 – Page.php

When you create a page in WordPress, a different file is used to display the content of what you typed into the page, and that is page.php. The code will look almost completely identical to what we typed up in our single.php, except since it is a page we are going to omit the comments template, and change the post navigation slightly to handle a page instead of a post. Other than that, the code will be exactly the same.

<?php get_header(); ?>

	<div id="blog">
		<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
		
		<div class="post">
		<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>


			<div class="entry">
			<?php the_content(); ?>

				<p class="postmetadata">
				<?php _e('Filed under&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php  the_author(); ?><br />
				<?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> <?php edit_post_link('Edit', ' &#124; ', ''); ?>
				</p>

			</div>

		</div>
		
<?php endwhile; ?>

	<div class="navigation">
		<?php posts_nav_link(); ?>
	</div>

<?php endif; ?>
</div>

<?php get_sidebar(); ?>	
<?php get_footer(); ?>

Step 11 – Category.php

The category.php will serve as the file that, whenever a user looks at a specific post category, time for posts, or specific author, will be the file that serves up the information to display posts. As with our page.php, most of the code here is going to be the exact same as the single.php we created before, except for a chunk right at the beginning.

Step 11 – Category.php

<?php get_header(); ?>

	<div id="blog">
		<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
		
	<?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
 	  <?php /* If this is a category archive */ if (is_category()) { ?>
		<h2>Archive for the &#8216;<?php single_cat_title(); ?>&#8217; Category:</h2>
 	  <?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
		<h2>Posts Tagged &#8216;<?php single_tag_title(); ?>&#8217;</h2>
 	  <?php /* If this is a daily archive */ } elseif (is_day()) { ?>
		<h2>Archive for <?php the_time('F jS, Y'); ?>:</h2>
 	  <?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
		<h2>Archive for <?php the_time('F, Y'); ?>:</h2>
 	  <?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
		<h2>Archive for <?php the_time('Y'); ?>:</h2>
	  <?php /* If this is an author archive */ } elseif (is_author()) { ?>
		<h2>Author Archive</h2>
 	  <?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
		<h2>Blog Archives</h2>
 	<?php } ?>
		
		<div class="post">
		<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

			<div class="entry">
			<?php the_content(); ?>

				<p class="postmetadata">
				<?php _e('Filed under&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php  the_author(); ?><br />
				<?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> <?php edit_post_link('Edit', ' &#124; ', ''); ?>
				</p>

			</div>

		</div>
		
<?php endwhile; ?>

	<div class="navigation">
		<?php posts_nav_link(); ?>
	</div>

<?php endif; ?>

</div>

<?php get_sidebar(); ?>	
<?php get_footer(); ?>

This piece of code right here will be the only thing that is added, and we have included it right after our WordPress loop.

<?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
 	  <?php /* If this is a category archive */ if (is_category()) { ?>
		<h2>Archive for the &#8216;<?php single_cat_title(); ?>&#8217; Category:</h2>
 	  <?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
		<h2>Posts Tagged &#8216;<?php single_tag_title(); ?>&#8217;</h2>
 	  <?php /* If this is a daily archive */ } elseif (is_day()) { ?>
		<h2>Archive for <?php the_time('F jS, Y'); ?>:</h2>
 	  <?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
		<h2>Archive for <?php the_time('F, Y'); ?>:</h2>
 	  <?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
		<h2>Archive for <?php the_time('Y'); ?>:</h2>
	  <?php /* If this is an author archive */ } elseif (is_author()) { ?>
		<h2>Author Archive</h2>
 	  <?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
		<h2>Blog Archives</h2>
 	<?php } ?>

What this does is use a bunch of if/elseif statements in PHP to show what we are currently browsing on our blog. So if we’re looking at a specific category called “Test Category 1”, it will show in the h2 heading “Archive for the ‘Test Category 1’ Category:” before all posts, and it will do this for certain dates, authors, and so on.

Step 12 – Custom Backgrounds, Feed Links

As described before, one feature that has been implemented in WordPress 3.0 is the ability to create or modify the background of your site, be it an image or basic color, just through the WordPress backend. All we need for this feature to work fully? This one little line of code:

Step 12 – Custom Backgrounds, Feed Links

//Code for custom background support
add_custom_background();

And like that, custom backgrounds are now enabled. Next, we are going to be adding some equally simple code to make it so that relevant feed links are available everywhere on the site. Be it the standard feed, comments, tags, categories, all of these will be added to the header without any extra code.

Let’s add the following code to our functions.php, to make this feature work as it should.

//Enable post and comments RSS feed links to head
add_theme_support( 'automatic-feed-links' );

Step 13 – Footer.php

To finish off our work here, we are going to create our footer.php file, which too will use the #footer that we declared in our style.css, and will just contain some basic copyright information as well as a link to the stories and comments RSS feed at the bottom.

<div id="footer">
	<p>
	<strong>Copyright 2011 <?php bloginfo('name'); ?> | All Rights Reserved.</strong> </a> 
	Designed by <a href="http://slackrmedia.com">SlackrMedia</a>
	</p>
	<p><a href="<?php bloginfo('rss2_url'); ?>">Latest Stories RSS</a> | <a href="<?php comments_rss_link('comment feed'); ?>">Comments RSS</a></p>
	</div>
</div>

</body>
</html>

Step 14 – Other Features?

Here are a couple of features that aren’t necessary by any means but could be of use to those that are interested and could prove to be quiet useful. First, how to enable the multisite feature for WordPress 3.0 so you can run multiple blogs from a single WordPress install. Again, we’re going to add this code to our functions.php.

Step 14 – Other features?

//Enable multisite feature (WordPress 3.0)
define('WP_ALLOW_MULTISITE', true); 

You can also download all the files for this tutorial.

[tut download=”http://cdn.onextrapixel.com/wp-content/uploads/2011/03/wordPress-3.0-theme.zip”]

Conclusion

So that does it for our tutorial. By this point you have successfully coded a WordPress 3.0 theme from scratch that takes advantage of the most popular features and is minimal enough so that it could be modified into something a bit more graphically impressive. What else could you do with this theme?

Well now that you have all of your basic options and styles set up you can modify the theme even further and add another sidebar to the theme, or perhaps even use How to Create a Better WordPress Options Panel to create just that, an admin panel for your new theme.

Keenan Payne is a full time student and a freelance web designer in his spare time. Besides writing and web design, he loves to skateboard and snowboard, and has been doing both for 11 and 6 years respectively, although some would say it's getting progressively harder for him to step away from his work and wander outside.

Comments

  1. / Reply

    Woww!!

    Classic!! Very clean and ultimate tutorial.

    Thanks

    1. / Reply

      @ Ankur- Exactly the same what i have come to say………….. Thanks for the share!

  2. / Reply

    Thank you so much. This is exactly what I need. Not being a php programmer a good bit of cut-n-paste to start with is ideal for me!

    This gives me the confidence to get out from the never-quite-right standard templates and do just exactly what I want on my site.

    Thanks!

    1. / Reply

      Excuse my ignorance, but enabling widgets and plugins – how does that work?

      Thanks

    2. / Reply

      It’s everything what i need to make own theme, just like Drew Clarke Say… not being a php programmer.
      I Love This.

  3. / Reply

    wow..amazing and complete tutorial..I have search this before..thanks!

  4. / Reply

    HI,

    Thanks. Few month ago, I developed my own theme starting from an existing one.
    Then I tried to simplify and optimize mine.

    With your tutorial, I see now some solution of some problem I got.

    • Stacey,
    • March 8, 2011
    / Reply

    Great timing! I was just looking to code my own theme, and this looks like a clean and easy to follow tutorial. Can’t wait to try it out, thanks!

  5. / Reply

    nice job dude =D love it

  6. / Reply

    Perfect and optimized easy tutorial. I will code my theme soon!

  7. / Reply

    Fantastic – thanks for the easy to follow tutorial on how to do this.

  8. / Reply

    Thank you guys for all of the nice comments! I’m glad my tutorial could help out some of you, and if you have any questions, don’t hesitate to ask in the comments!

      • Brad,
      • October 20, 2012
      / Reply

      I am just starting out into the PHP and Word Press world. I’m really liking this tutorial, but I can’t get it to run on the Wamp server. I’m following along with the tutorial and your talking like I should be able to see what I’m doing… I’m just editing text files. When I run index.php on the Wamp Server it gives me errors:
      Fatal error: Call to undefined function get_header() in C:\Program Files (x86)\wamp\www\bradix_flow\index.php on line 1

      I’ve copied exactly what you have. Why is it doing this to me?

        • Brad,
        • October 20, 2012
        / Reply

        Oops, posted too soon. I figured it out… Um, I’m a noob! Ha! Thanks for the tutorial!

  9. / Reply

    Whoa! Very easy to follow and covers the main aspects of coding a WordPress 3 theme together. This is fantastic!

    • Dee,
    • March 9, 2011
    / Reply

    I don’t code at all, but im going to steal some code from my existing templates and follow your guide to create a theme, just to say i created one!

  10. / Reply

    Gracias maestro! :)

  11. / Reply

    Awesome tutorial. Thanks a lot.

  12. / Reply

    this is the easiest wordpress theme tutorial to follow i ever seen..must try

  13. / Reply

    nice one! will try one soon

  14. / Reply

    Thanks Keenan for this tut. Very clear and useful! I’m about to build my new theme from scratch, so your tut will help me a lot…

    • Faisal Alim,
    • March 9, 2011
    / Reply

    Great tutorial…

    I was practicing theme since few days and was getting confused with all those functions and files. your tutorial just landed on time and safe my time. thanks again.

    just one more thing, in step 9 where u r adding background

    “//Code for custom background support
    add_custom_background();”

    isn’t mention where to put this piece of code.

    I just thought that everything is going in `functions.php`file, maybe these goes there and WAA LAA it worked.

    thanks again.

      • Faisal Alim,
      • March 9, 2011
      / Reply

      Sorry me bad! its NOT step 9, its actually “Step 12 – Custom Backgrounds, Feed Links”

    1. / Reply

      You will want to put that in your functions.php file, sorry I didn’t include that in the tutorial. :)

    • Raul,
    • March 9, 2011
    / Reply

    Great tutorial. Very useful. THX!

    • Michael,
    • March 9, 2011
    / Reply

    Wow! Exactly what I’ve been looking for since the release of WordPress 3.0 :-) Can’t wait to get home and give this tutorial a try!

    Awesome.

  15. / Reply

    That’s a great start for any wordpress developer. Nice work. Now let’s make the theme more advanced in a next tutorial. :)
    Keep up the good work.

    • John,
    • March 10, 2011
    / Reply

    For the comments template, there’s a much easier way than all that nasty code that’s necessary to handle the comments form: comment_form();

    read more about it here: http://ottopress.com/2010/wordpress-3-0-theme-tip-the-comment-form/

    1. / Reply

      Hey thanks a lot for the recommendation, that does look a lot better, and I’ll be sure to implement that into future themes and tutorials!

    2. / Reply

      I’m having a problem with this little code snippet though – while the one line of code does indeed display a comment form, I cannot for the life of me figure out how to display the comments themselves. Any suggestions, John? Here’s the site in question:

      http://dev.ethanbeyer.com/2012/02/just-call-me-tom/

      It says there are two comments, but I don’t know how to display them.

  16. / Reply

    This is very insightful, I will definitely be coming back to review this article. I am learning a lot about WordPress development and am always eager to learn more. Keep ’em coming!

    • AKo,
    • March 10, 2011
    / Reply

    What would be average price range a developer would ask to develop WP theme .

    1. / Reply

      It would really depend on what kind of theme you would like and just the specifications of everything. If you would want a simple blog theme, prices could be a lot cheaper than that of a complex magazine or CMS-esque theme with fancy javascript effects and the like.

      I would say the most common price ranges (that I’ve encountered and done) are around $500-$1,200

    • Steven,
    • March 10, 2011
    / Reply

    I can’t get my navigation to show up. Does this work with WordPress 3.1?

      • Faisal Alim,
      • March 12, 2011
      / Reply

      instead of author’s original code (which is below)

      ‘menu_order’, ‘container_class’ => ‘nav’, ‘theme_location’ => ‘primary-menu’ ) ); ?>

      replace it with below code
      ‘menu_order’, ‘menu_class’ => ‘nav’, ‘theme_location’ => ‘primary-menu’)); ?>

      it will work in wp 3.1

      1. / Reply

        Hey thanks a lot for that. The container_class was working on my local server for some reason but yeah, what Faisal Alim said should work perfectly.

        • ColinG,
        • May 20, 2011
        / Reply

        Where?

          • ColinG,
          • May 20, 2011
          / Reply

          got it – in the header

  17. / Reply

    This is an awesome overview into the best functions in WP3. I would love to see some extended WP tutorials from you in the future. Hopefully, you could highlight some key features and awesome implementations of them, such as featured posts.

  18. / Reply

    Thanks
    also thanks for useful tweets on Twitter.

    • christoff,
    • March 10, 2011
    / Reply

    Do I put the wordpress folder in the root of the MAMP folder or in my sites (osx) folder?

    Thanks

    1. / Reply

      I haven’t personally used MAMP before, but I have used WAMP and in the root folder of WAMP there is a WWW folder, and you would want to put that WordPress folder in that.

  19. / Reply

    I wouldn’t name the them folder with spaces. I’d call it instead: “New_3.0_Theme”.

    That’s so you avoid paths get screwed up. With spaces will become something like this: “New%3.0%Theme” if you ever need to get absolute path.

  20. / Reply

    Great! Thank you so much!

    • Davd,
    • March 11, 2011
    / Reply

    Wow, that is a complete tut! I wish I had it when I started wordpressing!

  21. / Reply

    Hi,

    Good Article, very thorough. Im currently tring to make my own and article was very big help to me.
    I undrestand that WordPress theme industry is grown large and standarts are high, but i really enjoy classical and simple WP themes. And their usually more SEO to.

    • Dave,
    • March 12, 2011
    / Reply

    Excellent tutorial, I don’t think I’ll ever build one from scratch but its handy to reference some of the above for altering existing WordPress themes.
    Must have taken ages to write this… Good work!

    • z0r,
    • March 12, 2011
    / Reply

    Wait, the comments.php are done with an old-style technique. Is it 3.0 total or just some sections?

    1. / Reply

      Hey, thanks for your comment, and I’m making changes to the comments.php to make that WordPress 3.0 compatible and with that will mean that everything is done so that it’s completely 3.0 compatible.

        • ColinG,
        • May 20, 2011
        / Reply

        Hi, thanks so much for this.

        But the comments. They don’t seem to work. I make a comment, OK it in the admin and they’re nowhere to be seen. (probably me being daft)

          • sudo,
          • January 13, 2012
          / Reply

          I’ve the same problem … I followed the tutorial step by step but I can’t see the comment list … please help me :)

            • sudo,
            • January 13, 2012
            /

            Aaaaah! Resolved!

            Copy the code underneath ‘Usage’ into comments.php:
            http://codex.wordpress.org/Function_Reference/wp_list_comments

  22. / Reply

    This is a nice article..
    Its very easy to understand ..
    And this article is using to learn something about it..
    c#, dot.net, php tutorial
    Thanks a lot..!

    • Reno,
    • March 13, 2011
    / Reply

    Thanks for the great step by step tutorial. I have one question, does it also work to make a wordpress 3.1 theme? I still confuse about the template development differ form wp 3.0 and wp 3.1.

    1. / Reply

      This theme is completely compatible with WordPress 3.0 and 3.1, there aren’t many (if any) major discrepancies between the two versions in terms of developing themes.

    • Andrea,
    • March 14, 2011
    / Reply

    Hi Keenan, first of all, thanks for your guide.
    With the latest update, the thing, I can’t see the comments.
    thanks again for your advice

      • Andrea,
      • March 14, 2011
      / Reply

      I meant the function comment_form

    1. / Reply

      Is your WordPress site upgraded to the latest version? If so the comment_form function should be working perfectly since it was introduced in 3.0

        • Andrea,
        • March 15, 2011
        / Reply

        I have no problem with the comment form. I can see it properly.
        But I can’t see the comments. After the sentence “What do you think?” nothing appears.
        View image: http://img218.imageshack.us/i/66946998.png/
        Anyway, I use a local install of XAMPP with PHP 5.3.1, Apache 2.2.14 and WordPress 3.1

        Thanks again for your help

          • Annie,
          • March 24, 2011
          / Reply

          Copy the code underneath ‘Usage’ into comments.php:
          http://codex.wordpress.org/Function_Reference/wp_list_comments

            • sudo,
            • January 13, 2012
            /

            WOW!!! I love you

    • Michael,
    • March 16, 2011
    / Reply

    Hi. Great tut. But I have a problem in Chrome with is code:

    Because of this it create a space down to: <a href = "/”> but not in Firefox.

    I can not understand how PHP code can create spaces?

    1. / Reply

      I’m not entirely sure what you mean in your question unfortunately. Is something in the tutorial not working due to spaces in the code?

    • Annie,
    • March 27, 2011
    / Reply

    Thanks for this tutorial, it is very helpful :)!

    But how do I get the wrapper to be at the very top of the page? Setting margins to 0 didn’t seem to work. I had to give it a negative top margin.

    And one more question – how can I get a link to Home in the navigation bar?

    Thank you!

      • Lee,
      • January 17, 2012
      / Reply

      I’ve had this same problem too! Except it seems that sometimes that space above is 64 pixels, then another minute its 36 pixels. I’m not sure what to do!

        • Ethan,
        • February 26, 2012
        / Reply

        I’ve been having this problem as well, and I cannot find an answer for it. I am not sure why #wrapper hovers below the top of the browser.

          • Sally,
          • March 19, 2012
          / Reply

          add this to body{ … }

          margin: 0px;
          padding: 0px;

      • Ethan,
      • February 26, 2012
      / Reply

      @Annie,

      If you create a new page in wordpress, give it this title:

      <a href="http://yourhomesite.net">Home</a>

    • Omega,
    • April 3, 2011
    / Reply

    This is a great resource for someone looking to get the basics right for worpress coding. Keenan, it would be great if you can also talk about SEO elements for the theme.

    • Essin,
    • April 15, 2011
    / Reply

    This is handsdown one of the easiest to follow WP theme tutorials. I have one question though: in the standard TwentyTen theme, there is the option to set a header image trough the backend. Is it possible to add this to the theme with a few lines or is it a complex thing to do?

  23. / Reply

    The way its illustrated is superb…easily understandable …….thxn for such complex thing to make easy…

    • Karen,
    • April 26, 2011
    / Reply

    In regards to the comments. I had to change the name of the php to comment.php rather than comments.php to get my comments to show.

    1. / Reply

      @Karen

      that is because wordpress engine is looking for comments.php file and if it cannot find it in your wordpress theme location it uses the default one in: wp-includes/theme-compat/comments.php

      here is the link to codex: http://codex.wordpress.org/Include_Tags#The_Comments_Template

  24. / Reply

    Thank you very much for this tutorial. Due to it I now understand and feel comfortable with the basics of WordPress. At this point I’m raring to move through the next phase and start learning some more advanced stuff. Thank you again!

    • Ardid,
    • May 3, 2011
    / Reply

    Hello
    Im’ very thankfull about this tutorial. It really help me a lot to solve a great amount of problems I had working with wordpress.
    However, the category.php seems to be working wrong. It shows the articles on the category, but repeats always the same title for all the articles.
    Can you help me with this?
    Thanks again.

    1. / Reply

      I had this same problem and deleted

      which solved the title repeat issue. I don’t utilize the_date() function, so I’m not sure how it affects that.

      1. / Reply

        Sorry, I should have known it would pull out copy/pasted code. The line I deleted was the post = posts[0] hack

  25. / Reply

    These are great WordPress resources – I actually just started digging into a really really solid book on WordPress 3.0. It’s got some really nice code samples, and is written by a few pro WordPress developers (including some from Envato). I’m actually giving away 2 copies of the e-book on my site – check out the details about the e-book and the giveaway here – I think you’ll dig it : http://bit.ly/lq20Ff

    • Alo,
    • May 13, 2011
    / Reply

    Curious about where the dates for each post went? Each test post I make does not display the date it was submitted.

    Any ideas/solutions?

    thanks! and keep up the great work! truly helpful tut.

    • Michael,
    • May 15, 2011
    / Reply

    Title in header.php should actually be:

      • Michael,
      • May 15, 2011
      / Reply

      it should be the next to last example on http://codex.wordpress.org/Function_Reference/wp_title

        • Michael,
        • May 15, 2011
        / Reply

        there’s also a superfluous closing anchor in line 3 of your footer.php

    • Emma,
    • May 18, 2011
    / Reply

    Hi – excuse me if im reading a book for previous wp versions, but in my book, i”m told to include (without the spaces – those are included to ensure my bit of php code shows up in comments)

    Can i ask why this is not in header.php?

    also — is this still a valid thing to use? or is there an easier way now with wp 3.0?

      • Emma,
      • May 18, 2011
      / Reply

      arghh..

      the first bit of code after “im told to include..” was:

      php wp_head();

      and the second piece of code i put in before “– is this still a valid thing to use?” was:

      php wp_enqueue_script(‘jquery’);

      ive stripped out the php tags from either side so hopefully they will show up in comment this time..

    • Emma,
    • May 20, 2011
    / Reply

    awesome tut :) yesterday, i did not know how to make a wp theme. thanks to your tutorial, i have now built 3 test ones!! :)

    can i ask – is the link you posted at the end of this tut (http://net.tutsplus.com/tutorials/wordpress/how-to-create-a-better-wordpress-options-panel/) valid as a good beginner tutorial for “cms-ifying” wordpress 3.0?? i ask because it lists 2.9 as the version it refers to, and i am tearing my hair out trying to find a ‘from the ground up’ beginners’ reference on adding custom stuff to the admin panel in order to enhance my themes to be a bit more custom and cms like..

      • Emma,
      • May 20, 2011
      / Reply

      (the reason im tearing my hair out and not finding one is im searching for 3.0 tuts specifically.. if someone can correct me here and tell me the methodology for creating cms like features is no different from say ver 2.9, please do!)

    1. / Reply

      No problem, glad you enjoyed the tutorial :) Yeah, that tutorial works perfectly with WordPress 3.0 and it is an excellent first step in, as you stated, “cms-ifying” your theme. Once you understand the options and code behind the admin panel you can truly make a dynamic and usable theme.

        • Emma,
        • May 20, 2011
        / Reply

        Thanks so much Keenan. You’re shared on FB, bookmarked in delicious, and are the reason i’ve subscribed to oneextrapixel – truly cant get over how easy you made this all to me, i NEVER learn anything within the space of 2 hours.. but i learned this!! thanks so much .moving on to your recommended admin panel tutorial you linked to now :)

  26. / Reply

    Hi:

    Thank you for this very helpful tutorial!

    I just started doing my own themes last Fall and at that time I used WordPress 2.8 Theme Design as a guide, which was great. But apparently the way comments were handled is out of date. I’m doing a new theme — can you tell me specifically what steps are needed to enable comments to work? What templates are needed? What code is needed in the functions.php (if any)? I’m (like so many) an HTML/CSS person, not a php programmer. I’ve come a long way but there’s always holes in my understanding when something new comes up…

    This is my understanding. The loop needs to contain the appropriate code to generate the blog functionality. I specify this because I’m using WP for it’s CMS functionality and don’t have blogs as the home pages – I have “static” homepages and blogs are part of some of, but not the primary purposes of, the sites I’ve built.

    So step 1 is to include blog stuff in the loop in the index.php template. I’ve done that successfully and that’s what your sample code includes. So right now I have a site with the capability for the client to create and post blog posts. It’s getting the commenting functionality to work that I’m struggling with.

    Where I am getting lost is in understanding the relationship between the index.php template, the comments.php template, the single.php template, and what goes in the functions.php (if anything) that relates to the comments. (And the category.php.)

    I am using the single.php as the template for the full blog entries. What I’m gathering from your example is that this template also contains a loop, the same loop as the index.php, with some additional code for the comments to work, right? So am I right in assuming that to get comments to work I MUST have a single.php template with the appropriate loop?

    Then, you have the comments.php with one line of code. Is that literally all that appears on a comments.php template? Does it go above, below, between something? Is it something I must have?

    What happens if I don’t have a category.php template? Must I have one?

    Could you nutshell the steps that relate specifically to getting comments to work in the new 3.0 way?

    Thanks, thanks, thanks!

  27. / Reply

    Follow-up to last comment: I figured stuff out. Downloading your sample files answered some questions (yes, the comments.php has one line of code) and I’ve gotten things working.

    Thanks again for a very helpful tutorial!

    • ColinG,
    • May 25, 2011
    / Reply

    up to date tutorial, but read the comments to iron a few things out

    http://net.tutsplus.com/tutorials/wordpress/how-to-create-a-better-wordpress-options-panel/

      • ColinG,
      • May 25, 2011
      / Reply

      Sorry, got a bit confused. This *IS* the up to date one! Doh!

    • Erwin,
    • June 2, 2011
    / Reply

    Is it correct that with this very beautifull startingpoint for wordpresstheme there aint revisions for pages? I’m very happy with this blanc template, but this is a function that I’m missing.

    Is there a way way to solve this?

    • emma,
    • June 6, 2011
    / Reply

    hi – sorry if i missed something but i wanted to ask, now that i have built the theme via your tutorial, im moving onto more tutorials, this one about custom taxonomies. ive come to a step where the following code needs to be inserted:

    printf( __( ‘Posts classified under: %s’, ‘twentyten’ ), ” . $term_name . ” );

    im finding it hard to figure what to put instead of twentyten (the theme this guy was working on for the tutorial)

    can you point out at what step in your tut do we define what replaces twentyten here?

      • emma,
      • June 6, 2011
      / Reply

      sorry

      printf( __( ‘Posts classified under: %s’, ‘twentyten’ ), ” . $term_name . ” );

      is

      printf( __( ‘Posts classified under: %s’, ‘twentyten’ ), ‘ . $term_name . ” );

        • emma,
        • June 6, 2011
        / Reply

        ahh it stripped my code again sorry :) the important part of that line is where it says ‘twentyten’ anyway i guess

        • Emma,
        • June 13, 2011
        / Reply

        Hi does anyone have a clue about this?

    1. / Reply

      The double underscore function (__) is a hook for translators. ‘twentyten’ is the textdomain for your theme. In your functions.php file you should have a line like:

      ‘load_theme_textdomain(‘my_theme’);’

      or:

      ‘load_plugin_textdomain( ‘my_theme’, false, $plugin_dir );’

      In themes, the former us the correct usage. You should replace ‘twentyten’ with the what you have in the ‘my_theme’ slot.

      You can get more info on this at http://codex.wordpress.org/I18n_for_WordPress_Developers.

  28. / Reply

    Great tut, I’ve just plus one’d this post!

    • ifliandry,
    • June 12, 2011
    / Reply

    Thanks …
    Really GREAT TUTORIAL ..

    • fermk090,
    • June 12, 2011
    / Reply

    Well, i have WordPress 3.1.3 im my computer and i did all this tutorial.but was i supose to have a sidebar in the end of this tutorial?
    Because i end up with this :

    http://imageshack.us/photo/my-images/844/finales.png/

    I am asking that also because in the middle of the tutorial i took a look at the template activated and it showed a search bar and categories in the sidebar and in the end i got nothing in the sidebar,is it right?

  29. / Reply

    Hey Keenan,
    Awesome tutorial its helped me understand this so much better now.

    As proof I’ve found it a springboard, I’ve hit an interesting snag. When I change the #header to

    #header {
    background: url(“./images/header.jpg”)
    no-repeat top center; }
    #headerimg {
    margin: 7px 9px 0px;
    height: 200px;
    width: 760px; }

    header.php now has:

    <a href="”>

    I have a HUGE lump of white space above the image. The height and width are right in style.css its almost as if its padding the top (which I’ve checked by changing #wrapper’s padding to 0), totally stumped!!

    Anyhow, this really is a fantastic tutorial. It must have taken days to write so thank you for investing your time helping noobs like me get a grip on this.

    E

  30. / Reply

    This tutorial is really what I need … just thanks for this great tutorial that helps me to start design my own theme… Thanks

  31. / Reply

    This tutorial is really what I need … just thanks for this great tutorial that helps me to start designing my own theme… Thanks

  32. / Reply

    Great tutorial and starting point for themes. It can be a little overwhelming at first.

    • Carla,
    • July 11, 2011
    / Reply

    I am receiving the following error:

    Parse error: syntax error, unexpected T_STRING in /home/content/60/6703160/html/wordtbc/wp-content/themes/tbc/functions.php on line 4

    Here is my functions file:

    • Carla,
    • July 11, 2011
    / Reply

    Sorry the editor stripped my code:

    “”

      • Carla,
      • July 11, 2011
      / Reply

      UGH!!!! Here goes again:

      //Add support for WordPress 3.0’s custom menus
      add_action( ‘init’, ‘register_my_menu’ );
       
      //Register area for custom menu
      function register_my_menu() {
          register_nav_menu( ‘primary-menu’, __( ‘Primary Menu’ ) );
      }
       
      //Some simple code for our widget-enabled sidebar
      if ( function_exists(‘register_sidebar’) )
          register_sidebar();

      //Code for custom background support
      add_custom_background();

      //Enable post and comments RSS feed links to head
      add_theme_support( ‘automatic-feed-links’ );

  33. / Reply

    Thanks so much for your work. I have looked at a number of start from scratch tutorials and yours was just what I needed.

    You should be nominated for whatever WordPress call their awards.

    Best in the Starter Category.

    • Aliki,
    • July 26, 2011
    / Reply

    thank you so much for the wonderful tutorial, it was really helpful in order to understand the basics!

    • skxc,
    • July 30, 2011
    / Reply

    The category.php doesn’t work properly for categories which are parents.

  34. / Reply

    It was totaly cool . i want to try it by myself and i hope it’s helpful.

    • Ronnie,
    • August 3, 2011
    / Reply

    I was looking for a tutorial to get started, this was excellent! Thanks

  35. / Reply

    Awesome tutorial for creating wordpress theme

  36. / Reply

    Nice tutorial, but I have a problem, I’ve made my theme using this tutorial, but Javascript doesn’t seem to work, and doesn’t seem to be my problem, because I’ve downloaded the theme already made, I uploaded it and still doesn’t work. You can check my website to see what i mean( syntax highlighter doesn’t work and the pool doesn’t work), what can I do?
    Thanks for help, and sorry for my bad english.

  37. / Reply

    Cool!!!

    loads of thanks and blessings for this wonderful aide ……

  38. / Reply

    Hi
    Nice tutorial-I’ll study it a little more..
    Perhaps do another one with HTML5/CSS3 coding…
    Thanks

    • mika,
    • August 22, 2011
    / Reply

    Nice tutorial, it is just I couldn’t figure out how to not have duplicated home.

    didn’t help.

    Thanks for the support.

    Mika

    • ajay,
    • August 29, 2011
    / Reply

    Hi,

    Nice tutorial!!!!!!!

    I have got all the area except sidebar.
    Please let me know what’s wrong with that.

    Thank you!

  39. / Reply

    Thanks for the great tutorial, now to find out more about the API because that sort of got left out here. I guess this tutorial was to just show the basics of the pages rather than each pre developed function.

    • Maikel,
    • September 8, 2011
    / Reply

    Great work man! Will check out your blog more often.

  40. / Reply

    This was a great tutorial! It made me realize that writing your own WordPress theme isn’t that hard after all!

  41. / Reply

    Well it appears there is some sort of problem with the background of the nav class, I am using WP 3.2x and the menu comes up with a black bar (with the menu selections) but it extends outside of the container div with a little block.

    So basically the black background for my menu looks like this – :::::::::::::::::::::::::::::::::= when it should look like this – ::::::::::::::::::::::::::::

    Now when I used it in the header, because it was vague on exact location of where to put the code, I placed the code at the very bottom in a (Code for nav)

    Is that right in the first place? I have no idea!

    1. / Reply

      Sorry let me explain that better because it knocked out my html on the last comment. I used a div class=nav and contained the code you have for the header for the nav menu within it. The black background for the menu has a tail going over the right side of the container div.

  42. / Reply

    wOw..awesome tutorial… Very helpful for beginner. thanks for posting.

    • Akis Vergis,
    • October 16, 2011
    / Reply

    Very good tutorial. Congratulations

  43. / Reply

    Why not use get_template_part to avoid code duplication?

    _e(‘Filed under:’) – This is provided if the localization through PO-files.
    And so it is possible and Filed under:

    • Hel,
    • October 24, 2011
    / Reply

    Sorry let me explain that better because it knocked out my html on the last comment. I used a div class. Well it appears there is some sort of problem with the background of the nav class, I am using WP 3.2x and the menu comes up with a black bar. I like this post thanks

    • Edith,
    • October 31, 2011
    / Reply

    This is an excellent tutorial. I don’t know anything about website design but I feel that I could really do something after reading this!

  44. / Reply

    Stellar post, excellent information.
    I’ve gotten my html/css framework set around this information and I’m ready to launch once I add some content.

    • Gleb,
    • November 5, 2011
    / Reply

    Excellent guide, thanks for posting this. I’ve been trying to make my own theme and as a result haven’t worked on my website for months because I was tired of the crappy theme. I only have one question if anyone can help – I changed the size of the page to 900 instead of 750, and as a result I have this extra chunk about 150 pixels wide to the right of the sidebar. Does anyone know how to fix this? It’s not letting me “push” or put anything into that area so it looks like I just have an empty space to the right of the sidebar.

    • kiddo,
    • November 8, 2011
    / Reply

    Great tutorial!!! was wondering if there is a quick hack to getting timestamps to show on the index page for each entry?

    did I miss that somewhere in the tutorial? Any help with the timestamp matter would be great :)

  45. / Reply

    Why is wp_get_archives used in the head. Is this for SEO, or some other reason? Thanks for the great tutorial.

  46. / Reply

    OMG!!! This is perfection compared to the crap I read before. Man, you should start selling it, make an ebook from it. Thanks for sharing. God bless you.

  47. / Reply

    Perfect. Now I can modify the child template I purchase from one wordpress child theme vendor 2 months ago.

  48. / Reply

    thanks sir i was seeing for such kind of articles., as i want to move my site http://www.digitspark.com ,from blogger to wordpress. And your post have guided us well.

  49. / Reply

    thanks sir i was seeing for such kind of articles., as i want to move my site from blogger to wordpress. And your post have guided us well.

  50. / Reply

    Such an Awesome tutorial what i have seen till now….

    • Tim,
    • November 28, 2011
    / Reply

    Great tutorial! This is so informative! OMFG! Go koya cyrus santonil!

  51. / Reply

    Excellent tutorial on making wordpress themes.
    I was unaware that making wordpress theme multi-install on blogs is so easy
    A question. Multi-Install does mean that any number of domains can be hosted on that single wordpress installation?

    • Ian,
    • December 15, 2011
    / Reply

    Hi, thanks for the tutorial!

    I have a question. When I install other themes I get the “home” link in the default nav menu even though there is no custom menu created yet. But using this basic theme, it shows “sample page” as the default nav link.

    So I’m guessing that somewhere in the theme, probably in the functions.php or the header, there is a parameter to tell it what the default home page link text should be.

    I’m gonna go research it but thought that might be good to post here if anyone has the answer already.

    lol and side note, this won’t work if you name your functions.php file funtions (funshuns) :-) smh, silly me.

      • Ian,
      • December 15, 2011
      / Reply

      Actually it’s not easy to find an answer. Everything I find in google is about making static home pages and using the wp-admin to make menus. So I appreciate if someone sheds light on how theme devs are making the default link text “Home” instead of “Sample page”.

      Thanks again for the awesome tutorial

      • Ian,
      • December 15, 2011
      / Reply

      well, I can’t seem to find the answer to this question as all my searches find info on creating static pages or custom menus.

      Also when I add a custom menu and change the link text to “home” that way, it messes up the css somehow. there is an extra div on the left in the header that is pushing the nav menu over to the right but only after I add a custom menu through the wp-admin page.

      Also, I just realized the footer is inside the sidebar at the top of it for some reason. even though I call it after calling the sidebar just like in the code above.

      Will this tutorial not work right in 3.2.1?

  52. / Reply

    no words its just amazing………….!

    • Me,
    • December 18, 2011
    / Reply

    Awesome! Thanks, buddy, this great and simple template was just what I was looking for.

  53. / Reply

    great article for building a simple theme from scratch! some more depper informations about the wordpress template hierarchy would be great to (for example) add some pages without the sidebar or something like that. but for just starting – great!

    • nouri,
    • December 26, 2011
    / Reply

    Thank you! You know how to explain things :)

    • goni,
    • January 6, 2012
    / Reply

    Pages are not showing in sidebar and no custom menu is showing in top rather i am getting pages in top in wordpress 3.3.1

      • Joanna,
      • January 27, 2012
      / Reply

      I had the same problem, add <body > in your header.php

        • Joanna,
        • January 27, 2012
        / Reply

        ahh code didn’t paste….add body_class(‘ ‘); in your body tags with php syntax.

    • goni,
    • January 6, 2012
    / Reply

    Best tutorial i got ever on web on wp-theme development .

    • Lee,
    • January 17, 2012
    / Reply

    Thank you for this theme! I had a question though. What is setting the top margin of the theme? The margin is set to 0, but there is still significant space up top. I can set a negative value, but I see that the value of the top space changes… Sometimes its 64 pixels, then sometimes its 36 pixels. setting anegative value won’t work with this happening. Can anyone offer some help?

    • Prodyot,
    • January 25, 2012
    / Reply

    Great tut.
    Thanks.

    • rahul raj,
    • January 30, 2012
    / Reply

    nice tutorial!!!!

    • JA,
    • February 1, 2012
    / Reply

    Hi! Great article – very easy to follow, must reading for anyone who wants to start creating their own wordpress themes.

    I downloaded the tutorial files, and I do have one question regarding the index.php file. There are some classes assigned to the div and p tags that I cannot find defined in the style.css file. I’ve listed them below:

    Am I missing something?

    Thanks!

      • JA,
      • February 1, 2012
      / Reply

      The classes didn’t show up in my last post… here they are:

      For the div tag – post, entry, and navigation, for the p tag – postmetadata

  54. / Reply

    The above site are use full to me to can any one can tell me to to apply my own css to our web site

  55. / Reply

    Very nice tutorial. surely it helps all!:)

    • Hardik I. Patel,
    • February 9, 2012
    / Reply

    Its really nice.

    Thanks.

    • john,
    • February 10, 2012
    / Reply

    awesome tutorial.thank u so much man..

    • john,
    • February 10, 2012
    / Reply

    awesome dude..u did a great job

    • hitech,
    • February 15, 2012
    / Reply

    hi Keenan Payne,this is very gud tutorial but the problem is that when we create and wp-theme we just use these
    codes is it or anything else we do.

    • Lersz,
    • February 16, 2012
    / Reply

    In the category.php, I think the loop should start below that if/elseif-chunk. Now it prints “Archive for … ” or something for every post the loop finds. And because the $post = $posts[0] part is at the beginning of the loop, the post gets constantly reseted resulting in the loop printing out the exact same post (which is the first one) as many times as there are different posts found by the loop.

      • Lersz,
      • February 16, 2012
      / Reply

      I’ll take some of that back, apparently it’s only the title in the post that stays the same. I also advise no one to take my post too seriously as I’m a noob.

    • Kelly,
    • February 23, 2012
    / Reply

    Wow, what a wonderful WP tutorial, this is the best and most complete tutorial I’ve seen so far.

  56. / Reply

    Awesome tutorial.
    Thanks so much man you did a great job.

  57. / Reply

    Hello Keenan.

    Nice article, very well written. Kudos!!

    For a new developer, to start from scratch is a difficult task and to follow the defined standards and codes is utmost important.

    In my case as a developer, I prefer to use opensource theme-frameworks. I am using rtPanel theme framework (http://rtpanel.com) and its awesome. Its a perfect fit for developer, in terms of standard codes, provided hook, actions and filters and much more. The best part is they offer free technical support for users.

    I would recommend you to play with this one, and I bet you will just love it.

    Cheers!

  58. / Reply

    Hi Keenan, this is a superb tutorial and has just inspired me to create a WordPress theme rather than simply tweak one. So thanks for an amazing post, it’s bang on the money.

    Cheers
    Phill

  59. / Reply

    Hi Keenan Payne,
    Many thanks for your tut on wordpress 3.0, i use wordpress only to post blogs from now i’ll try myself to make a wordpress theme..
    Many thanks.

  60. / Reply

    I’ve just found this tutorial. It looks great. I’m gonna take a look this.
    Thank you very much for sharing this great tutorial.

    • Gerald,
    • March 8, 2012
    / Reply

    Thanks for the nice tutorial.

    Just one addition if you want to make your theme show the Admin Bar (wpadminbar): There should be a call to wp_footer() from footer.php in Step 13. Just insert this code before :

  61. / Reply

    wow that is great and very detailed lesson wordpress is great and flexible and easy to use by anyone, plugins bring any cms out their has and even better

    • Jefferson,
    • March 16, 2012
    / Reply

    Great tutorial! It really helps knowing this stuff, you can better manipulate the design and get the exact look and feel that you’re looking for. In choose the easy way though – I design my theme in Lubith first and then change here and then a few lines of code. It really saves me a lot of time and effort.

  62. / Reply

    what you have said in this article has deeply impressed me and i wish you can write more about this subject.

  63. / Reply

    Thanks for the guide, it really helped me in understanding all the coding behind wordpress themes.
    I’ve always wanted to code one.
    Followed your steps, but I had a T_String error. :-( I must have copied something wrongly somewhere, along the lines.
    Downloaded your files instead. :-( Wished I could have use mine though.

    Great guide!
    Bookmarking it.

    • Michele,
    • March 30, 2012
    / Reply

    Thanks!! Straight to the point code. Love clean code.

    • daliandi,
    • March 30, 2012
    / Reply

    thanks a lot , that’s what exactly I need ! thanks again :)

    • Bob,
    • April 3, 2012
    / Reply

    Very easy. I just have to point out the php files that you mentioned that you do not include in your screenshot at the first part. Aside from that, it is a nice working example. Thank you

  64. / Reply

    Hi Finally i found you!!!!!
    such a great tutorial! this is the best and most complete tutorial I’ve seen so far. thanks!!
    some tips:
    ####################################################################
    – if you want to use the Custom Background you have to change in header.php the tag with
    <body >

    ####################################################################
    – if you want the Custom Header in the admin panel :
    – copy the “header” folder from twentyeleven folder

    – put this code in functions.php

    	/* custom header */
    define('HEADER_TEXTCOLOR', 'ffffff');
    define('HEADER_IMAGE_WIDTH', 960); // this is mine . Use width and height appropriate for your theme!!!!!!!!
    define('HEADER_IMAGE_HEIGHT', 288);
    
    // gets included in the site header
    function header_style() {
        ?><style type="text/css">
            #header {
                background:#fff;
            }
        </style><?php
    }
    // gets included in the admin header
    function admin_header_style() {
        ?><style type="text/css">
            #headimg {
                width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
                height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
                background: no-repeat;
            }
        </style><?php
    }
    add_custom_image_header('header_style', 'admin_header_style');
    
    
    // Default custom headers packaged with the theme. %s is a placeholder for the theme template directory URI.
    	register_default_headers( array(
    		'wheel' => array(
    			'url' => '%s/images/headers/wheel.jpg',
    			'thumbnail_url' => '%s/images/headers/wheel-thumbnail.jpg',
    			/* translators: header image description */
    			'description' => __( 'Wheel', 'nextart01' )
    		),
    		'shore' => array(
    			'url' => '%s/images/headers/shore.jpg',
    			'thumbnail_url' => '%s/images/headers/shore-thumbnail.jpg',
    			/* translators: header image description */
    			'description' => __( 'Shore', 'nextart01' )
    		),
    		'trolley' => array(
    			'url' => '%s/images/headers/trolley.jpg',
    			'thumbnail_url' => '%s/images/headers/trolley-thumbnail.jpg',
    			/* translators: header image description */
    			'description' => __( 'Trolley', 'nextart01' )
    		),
    		'pine-cone' => array(
    			'url' => '%s/images/headers/pine-cone.jpg',
    			'thumbnail_url' => '%s/images/headers/pine-cone-thumbnail.jpg',
    			/* translators: header image description */
    			'description' => __( 'Pine Cone', 'nextart01' )
    		),
    		'chessboard' => array(
    			'url' => '%s/images/headers/chessboard.jpg',
    			'thumbnail_url' => '%s/images/headers/chessboard-thumbnail.jpg',
    			/* translators: header image description */
    			'description' => __( 'Chessboard', 'nextart01' )
    		),
    		'lanterns' => array(
    			'url' => '%s/images/headers/lanterns.jpg',
    			'thumbnail_url' => '%s/images/headers/lanterns-thumbnail.jpg',
    			/* translators: header image description */
    			'description' => __( 'Lanterns', 'nextart01' )
    		),
    		'willow' => array(
    			'url' => '%s/images/headers/willow.jpg',
    			'thumbnail_url' => '%s/images/headers/willow-thumbnail.jpg',
    			/* translators: header image description */
    			'description' => __( 'Willow', 'nextart01' )
    		),
    		'hanoi' => array(
    			'url' => '%s/images/headers/hanoi.jpg',
    			'thumbnail_url' => '%s/images/headers/hanoi-thumbnail.jpg',
    			/* translators: header image description */
    			'description' => __( 'Hanoi Plant', 'nextart01' )
    		)
    	) );
    

    PS: change in //Default custom headers packaged “nextart01” with your theme folder name.

    put this one in header.php after

    <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
    

    ######################################################################

    only one question : what about searchform?

    thanks again!!!
    bye from Italy
    Maurizio

    1. / Reply
      the tag <body> with <body <?php body_class(); ?>>

      copy the “header” folder from twentyeleven folder to your theme folder

      1. / Reply

        if you want to show post tags put in index.php, single.php,page.php, category.php, this code

        <?php if ( function_exists('wp_tag_cloud') ) : ?>
                <?php the_tags('<span class="tags">Tags: ', ', ' , '</span>'); ?>
                <?php endif; ?>
        

        after

        <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?>
        

        bye

        1. / Reply

          if you want to highlight the current menu

          in style.ccs put

          .current-menu-item > a,
          .current-menu-ancestor > a,
          .current_page_item > a,
          .current_page_ancestor > a {
              background:#ff0000 ;
              font-weight: bold;
          } 
          

          bye …again

    • islam,
    • April 12, 2012
    / Reply

    thanks alot , that exactly i need for wordpress .

    • islam,
    • April 12, 2012
    / Reply

    Wooow very good job

    • Pat,
    • April 14, 2012
    / Reply

    Anyone else get “No Sidebars Defined” “The theme you are currently using isn’t widget-aware, meaning that it has no sidebars that you are able to change.”

    Know how to fix this?

    Thanks

  65. They are very helpful for me. I want to create my own design. Thanks a lot!

  66. / Reply

    Finally getting back to customizing WP themes and this was a huge help. Thank you very much!

  67. / Reply

    For Step 12, regarding Custom Backgrounds, as of WordPress 3.3.x, the tag in header.php needs to be changed to <body > in order for Custom Backgrounds to work.

    • Freaky,
    • June 9, 2012
    / Reply

    Wooooooow!. Really Good tutorial!.

  68. / Reply

    thanks a lot that is what exactly I need

  69. / Reply

    Very helpful guide :) this is definitely something I wish to master

  70. / Reply

    Thank you very much , you are the best ;)

  71. / Reply

    Hey Keenan,

    Great shot!! Really simple example of creating a clean and basic WordPress 3.0 theme from scratch. I gave it a try and it worked like charm.

    Thanks man!!

    Keep up the good work!!

    Cheers :)

  72. / Reply

    Thank you Keenan Payne.
    Excuse me my english is pure.These are only Sentences that i can say without incorrect words.
    be happy

  73. / Reply

    Two thumbs up for this tutorial! Very helpful to WP users and future WP users to create their own wordpress theme.

  74. / Reply

    Take care
    have two left feet this hit the nail on the head
    bone appetite fargo

    Sincerely yours,

    • Cza,
    • August 3, 2012
    / Reply

    I followed your advice for the comments.php (placing only but ended up getting a blank page after submitting each comment. What’s wrong with my code?

    • John,
    • August 10, 2012
    / Reply

    Cool tutorial, Thanks for the help! :D

  75. / Reply

    A very detailed and well written article…Thanks for sharing.

    • Xdas,
    • August 23, 2012
    / Reply

    missing a bit of css to make the nav work correctly, just add this to the end of the nav css

    .nav li:hover > ul{ display:block; }

    • Rebca,
    • August 30, 2012
    / Reply

    I can’t get any jquery sliders to work with my custom theme. The slides just display as a list bleeding over the site. I have tried 3 different plugins, and tried displaying them in the header and also just in a post.

  76. / Reply

    Thanks for the tutorial. I thought it was a very good starting point for learning WordPress themes before I jump into some more advanced stuff.

    • Turk,
    • September 14, 2012
    / Reply

    Thanks for this article but without any coding skills, it’s hard. I prefer to buy a profesionnal theme.

    • anand,
    • September 15, 2012
    / Reply

    this tutorial is amazing Thank you very much!

    • raj,
    • October 1, 2012
    / Reply

    Hi very useful 3.0 Scratch theme, is it any new version (3.4) scratch?

    Thanks

  77. / Reply

    Thank You, That’s what I need now !

    this is simple tutorials but this can help us more !

    thanks again.

  78. / Reply

    This is a nice and simple guide on how to create a theme from scratch. Thanks for sharing.

    • rein,
    • October 26, 2012
    / Reply

    Thank you so so so MUCH!
    This tutorial help me very much that I can’t even express it by just a single comment!!

    • Sandhiya,
    • October 31, 2012
    / Reply

    This post is really helpful for me to create a theme as i wish. But, I don’t know how to create a image slider. Can you help me to create a image slider?

    Thanks

    • Mubasher,
    • November 4, 2012
    / Reply

    Thannks Mr

    really its a nice tutorial for developers
    it gave me confidence for developing my themes

    • Mahesh,
    • November 8, 2012
    / Reply

    Sir i understand theme very good explanation, but i did not understand how to give a include links, like i want to add slideshow from outside how can i add that in theme/mytheme/ folder and how to add that to template??

    • Mahesh,
    • November 8, 2012
    / Reply

    i want a urgent reply please kindly help me, how can i call my jpg images to theme, and also i want to use slideshow in this theme please help me as soon as possible….

    example: <link rel="stylesheet" type="text/css" media="all" href="” />

    why its not add this way –

    im waiting for your response.

      • JF,
      • November 13, 2012
      / Reply

      Google is your friend… you’re looking for a slideshow plugin.

      As far as the JPEG ‘s is concerned you’ll need to give a bit more information of the usage (static, dynamic …). Maybe the Media library and HTML editor could work for you (again here google is your friend)

  79. / Reply

    Very nicely done!

    • noob,
    • November 18, 2012
    / Reply

    Hi All, set up everything and am having an issue.
    Menu displays incorrectly – displays first 2 levels all the time instead of just level 1. Third level stays hidden until mouse over:

    e.g.
    +++++++++++++++++++++++++++++
    Home Page (level 1)
    About ME (level 2)
    +++++++++++++++++++++++++++++

    instead of just:
    ++++++++++++++++++++++++++++++
    Home Page (level 1)
    ++++++++++++++++++++++++++++++

    WP 3.4

    Anyone have any ideas?

    • Aset,
    • November 18, 2012
    / Reply

    For some reason this doesn’t work on WordPress 3.4.2. Can someone explain me why?

      • mer1,
      • November 20, 2012
      / Reply

      i could help you if you want :) , what doesn’t work ?

    • CoMo,
    • November 26, 2012
    / Reply

    Can you make video tutorial to with channel! This is awesome…

    Thank you!

    • Jane,
    • December 4, 2012
    / Reply

    I’m less than a novice – no development experience at all. I honestly think I can follow this. I know others have asked about this too, but I want to create a theme with a slideshow. I know it’s a plug-in but can you please recommend one? I know not all plug-ins are created equal and being a non-developer I wouldn’t know a unicorn from a snail at this point. Can you help with this?

  80. / Reply

    This tutorial is highly useful for both Newbies and Experts :)

    • wld,
    • December 24, 2012
    / Reply

    First of all i would like to thank you for sharing such important info to all learners out there. I have been reading tuts for improving my skills on developing WP themes but finding difficult in getting an easy and clear lessons and tips, but the way you have described is superb. Wish you all the best and keep posting.

    • Shanice,
    • January 20, 2013
    / Reply

    This is by far thee best tutorial about creating a WP theme from scratch! It’s so easy to follow. Thanks so much!

    • Akash,
    • January 20, 2013
    / Reply

    How to control the number of posts that will be shown on homepage, for example, I want to show only 3 recent posts.. one use is that it wont shift the sidebar far below when in mobile view. Thanks in advance. Do let me know how to control it.

  81. / Reply

    Thanks, do you have a tutorial on how to build framework?

    • Slava,
    • February 18, 2013
    / Reply

    Sorry, I put “web design” in name field. Didn`t try to drop any links… Just genuinely wanted to thank you for this tutorial. It is soooo much helpful to me!!

    • Kinya,
    • February 26, 2013
    / Reply

    Thank you Keenan, this is awesome – you’re a rockstar instructor!

    • Kapil,
    • February 27, 2013
    / Reply

    Thanks for this great tutorial, it will helps us for development wordpress theme.

    • subash,
    • March 2, 2013
    / Reply

    Tnx Keenan..

    • subash,
    • March 2, 2013
    / Reply

    thank you Keenan… Its very nice

  82. / Reply

    Thanks!! Was very very useful when creating my own WP theme. The most relevant tut I could find on the web I think.

    One question tho.
    Will there be a WP 3.5 tut, or is there a point to do one. How much has it changed since?

    • dimitrisleon,
    • March 15, 2013
    / Reply

    For sure this is one of the most straightforward, comprehensive & useful tutorials (along with 2 or 3 more out there..). Really helped a lot! Just one question: you did not create an archives.php file. Is it necessary to have one though? And, if yes, how does it differ from index.php? Thanks again for this precious knowledge, especially for “starters”. Cheers!

    • jack,
    • March 21, 2013
    / Reply

    nice guide, i think that you should know the basic of working with php if you want to code a wordpress theme.

  83. / Reply

    COMMENTS are not working dude!!!
    The #comments link doesn’t show approved comments!

    • Guest,
    • April 19, 2013
    / Reply

    for those wondering why your custom background feature is not working.

    In your header.php replace your “” tag with: <body ">”

    • Joe Citzen,
    • April 19, 2013
    / Reply

    Great Stuff Kiddo….at 56, am just dipping my toes into WP & definitely need some hand holding. Thanks for providing!

  84. / Reply

    First I wanted to thank you guys for some great freebies themes but most importantly the various topics from creating a plugin, seo or working with themes. Keep up the great work.
    I am complete newbie in trying to create my own theme and probably should write how I have driven myself crazy. From bootstrap and foundation had to learn html, css than I finally got the full layout bringing it over to wordpress is complete difference story.
    I just really wanted to say thanks, keep the fresh content coming because that sometimes is the hard part tutorial or how to from 2008 not sure how relevant they are today

    • the hobbbit,
    • June 13, 2013
    / Reply

    “Getting the Necessary Folders and Files ReadyThis is where we will hold
    all of our files during this tutorial. Now create the following files
    and folders:”
    do you create these new files and folders on cpanel or on my computer?

    • Alexa,
    • July 29, 2013
    / Reply

    Hello there this is a great tutorial but I am wondering, is there something that is supposed to go inside that functions.php file to make your comments.php work? I am not seeing my comments with just that one code for the comments.php. Thanks.

    • Deon Blaauw,
    • September 24, 2013
    / Reply

    Nice tutorial and surely very helpful. BUT Im struggling with my 2nd layer menu. it always shows, whether i hover over the parent or not. have tried changing the css but to no avail. someone???

    1. / Reply

      Yeap, there seems to be an CSS issue with the child items in the menu.

    • Martijn De Geus,
    • October 16, 2013
    / Reply

    Hi! Thank you for this great tutorial! Building a WP theme is made easy by your blog. But do you have any idea what I have to change to make it work with Woocommerce (especially its widgets)?

  85. / Reply

    This is exactly what I was looking for. I hate to run on top of frameworks. Now I can do my own wordpress theme :)

    • Methew Costner,
    • October 15, 2014
    / Reply

    Thanks for sharing your knowledge with viewers. It’s an interesting article. I use to make WordPress themes, but without writing code. I have never learned programming languages, but I am going through learning process. I got to know about TemplateToaster about a month back, since then I am making themes for my acquaint ones with this software. Because of TemplateToaster, I love theme making. Though I am still interested in learning programming, I am not going to drop TemplateToaster if become learned.

    • Bouri,
    • June 14, 2015
    / Reply

    Thanks. You are the best :)

Leave a Reply

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

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.