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.
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:
/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.
<!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.
.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:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php the_author(); ?><br />
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?>
</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
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.
// 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:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php the_author(); ?><br />
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?>
</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.
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:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php the_author(); ?><br />
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?>
</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.
<?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 ‘<?php single_cat_title(); ?>’ Category:</h2>
<?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
<h2>Posts Tagged ‘<?php single_tag_title(); ?>’</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:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php the_author(); ?><br />
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?>
</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 ‘<?php single_cat_title(); ?>’ Category:</h2>
<?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
<h2>Posts Tagged ‘<?php single_tag_title(); ?>’</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:
//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.
//Enable multisite feature (WordPress 3.0)
define('WP_ALLOW_MULTISITE', true);
You can also download all the files for this tutorial.
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.
Woww!!
Classic!! Very clean and ultimate tutorial.
Thanks
@ Ankur- Exactly the same what i have come to say.............. Thanks for the share!
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!
Excuse my ignorance, but enabling widgets and plugins - how does that work?
Thanks
wow..amazing and complete tutorial..I have search this before..thanks!
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.
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!
nice job dude =D love it
Perfect and optimized easy tutorial. I will code my theme soon!
Fantastic - thanks for the easy to follow tutorial on how to do this.
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!
Whoa! Very easy to follow and covers the main aspects of coding a WordPress 3 theme together. This is fantastic!
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!
Gracias maestro! :)
Awesome tutorial. Thanks a lot.
this is the easiest wordpress theme tutorial to follow i ever seen..must try
nice one! will try one soon
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...
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.
Sorry me bad! its NOT step 9, its actually "Step 12 – Custom Backgrounds, Feed Links"
You will want to put that in your functions.php file, sorry I didn't include that in the tutorial. :)
Great tutorial. Very useful. THX!
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.
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.
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/
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!
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!
What would be average price range a developer would ask to develop WP theme .
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
I can't get my navigation to show up. Does this work with WordPress 3.1?
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
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.
Where?
got it - in the header
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.
Thanks
also thanks for useful tweets on Twitter.
Do I put the wordpress folder in the root of the MAMP folder or in my sites (osx) folder?
Thanks
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.
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.
Great! Thank you so much!
Wow, that is a complete tut! I wish I had it when I started wordpressing!
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.
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!
Wait, the comments.php are done with an old-style technique. Is it 3.0 total or just some sections?
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.
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)
I've the same problem ... I followed the tutorial step by step but I can't see the comment list ... please help me :)
Aaaaah! Resolved!
Copy the code underneath 'Usage' into comments.php:
http://codex.wordpress.org/Function_Reference/wp_list_comments
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..!
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.
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.
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
I meant the function comment_form
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
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
Copy the code underneath 'Usage' into comments.php:
http://codex.wordpress.org/Function_Reference/wp_list_comments
WOW!!! I love you
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?
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?
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!
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!
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.
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?
The way its illustrated is superb...easily understandable .......thxn for such complex thing to make easy...
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.
@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
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!
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.
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.
Sorry, I should have known it would pull out copy/pasted code. The line I deleted was the post = posts[0] hack
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
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.
Title in header.php should actually be:
it should be the next to last example on http://codex.wordpress.org/Function_Reference/wp_title
there's also a superfluous closing anchor in line 3 of your footer.php
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?
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..
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..
(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!)
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.
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 :)
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!
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!
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/
Sorry, got a bit confused. This *IS* the up to date one! Doh!
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?
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?
sorry
printf( __( 'Posts classified under: %s', 'twentyten' ), '' . $term_name . '' );
is
printf( __( 'Posts classified under: %s', 'twentyten' ), ' . $term_name . '' );
ahh it stripped my code again sorry :) the important part of that line is where it says 'twentyten' anyway i guess
Hi does anyone have a clue about this?
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.
Great tut, I've just plus one'd this post!
Thanks ...
Really GREAT TUTORIAL ..
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?
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
This tutorial is really what I need ... just thanks for this great tutorial that helps me to start design my own theme... Thanks
This tutorial is really what I need ... just thanks for this great tutorial that helps me to start designing my own theme... Thanks
Great tutorial and starting point for themes. It can be a little overwhelming at first.
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:
Sorry the editor stripped my code:
""
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' );
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.
thank you so much for the wonderful tutorial, it was really helpful in order to understand the basics!
The category.php doesn't work properly for categories which are parents.
It was totaly cool . i want to try it by myself and i hope it's helpful.
I was looking for a tutorial to get started, this was excellent! Thanks
Awesome tutorial for creating wordpress theme
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.
Cool!!!
loads of thanks and blessings for this wonderful aide ......
Hi
Nice tutorial-I'll study it a little more..
Perhaps do another one with HTML5/CSS3 coding...
Thanks
Nice tutorial, it is just I couldn't figure out how to not have duplicated home.
didn't help.
Thanks for the support.
Mika
Hi,
Nice tutorial!!!!!!!
I have got all the area except sidebar.
Please let me know what's wrong with that.
Thank you!
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.
Great work man! Will check out your blog more often.
This was a great tutorial! It made me realize that writing your own WordPress theme isn't that hard after all!
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!
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.
wOw..awesome tutorial... Very helpful for beginner. thanks for posting.
Very good tutorial. Congratulations
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:
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
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!
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.
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.
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 :)
Why is wp_get_archives used in the head. Is this for SEO, or some other reason? Thanks for the great tutorial.
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.
Perfect. Now I can modify the child template I purchase from one wordpress child theme vendor 2 months ago.
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.
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.
Such an Awesome tutorial what i have seen till now....
Great tutorial! This is so informative! OMFG! Go koya cyrus santonil!
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?
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.
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
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?
no words its just amazing.............!
Awesome! Thanks, buddy, this great and simple template was just what I was looking for.
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!
Thank you! You know how to explain things :)
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
I had the same problem, add <body > in your header.php
ahh code didn't paste....add body_class(' '); in your body tags with php syntax.
Best tutorial i got ever on web on wp-theme development .
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?
Great tut.
Thanks.
nice tutorial!!!!
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!
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
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
Very nice tutorial. surely it helps all!:)
Its really nice.
Thanks.
awesome tutorial.thank u so much man..
awesome dude..u did a great job
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.
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.
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.
D00d you saved my life. thank you!
Thank you very much!