Developing a Wordpress Theme

form-c0e2ec3f76 fivestar_form_no

Bottom of Form

Wordpress is one of the most successful blogging platform which we too are currently on.
From the past few articles we have been giving out a few cool wordpress themes for
download. Instead of coming up with some more themes, we decided to write a tutorial on
how to develop a wordpress theme which we are sure will help a lot of you to design as you
wish and bring them out into wordpress. We are not too advanced wordpress developers but
still we are sure the below tutorial will help you successfully develop a wordpress theme.
Below you will learn to convert your xHTML CSS site into a Compact Wordpress Theme
(final output is same as the normal theme but here code is shorter and easier to understand).

Initial Steps
• The first step is to come up with a design for your theme... Keep in mind that the
navigation almost everywhere in your site is going to be in form of a list, so make
sure you have atleast one long sidebar to stuff all your widgets.
• As usual convert your design into a xHTML & CSS standard site. Put the images in
an images folder. (we can't explain this too...)
• Wordpress runs of PHP so, from the below step you will have to start working on a
server environment (Apache...) & on your local system its going to be localhost.
• Download wordpress from http://wordpress.org and extract the files in to your
localhost.
• Create the database (part of the installation) Learn here
http://wordpress.org/docs/installation/5-minute/
• Create a new folder under localhost-dir\wordpress\wp-content\themes\ and give it
your theme name (without space)
• Drop all your xHTML, CSS & files into this folder.

Theming Steps
• Files to create under your theme folder
○ header.php
○ index.php
○ sidebar.php
○ footer.php
○ comments.php
○ style.css - your theme css master file
 • You will be splitting your xHTML code into the above files.
• Open your xHTML theme file and follow the steps below:
.
header.php
• The content starts from the DOCTYPE definition and goes till where ever you think
the real content (like the articles...) start. This file will have the start/end of HEAD,
start of BODY and maybe your Horizontal site navigation too...
• The includes in the header (Javascript/CSS) shouldn't ever have absolute URLs.
• <?php bloginfo('stylesheet_directory'); ?> is used to return your theme URL like
http:\\localhost\wordpress\wp-content\themes\yourtheme. Eg.
http:\\localhost\wordpress\wp-content\themes\yourtheme\javascript\slider.js
• TITLE Tag
○ <title><?php bloginfo('name'); ?> <!-- returns the title of your wordpress
blog --><?php if ( is_single() ) { ?> <!-- condition to check if single page
(below line will show on the Title only if you enter an inner page) -->- Blog
Archive<?php } ?> <!-- end of condition --><?php wp_title(); ?> <!-- Title of
the article - will show only if in inner page --></title>
• Standard HEAD includes for wordpress (add all of these within your HEAD Tag)
○ <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php
bloginfo('rss2_url'); ?>" /><link rel="alternate" type="text/xml" title="RSS .
92" href="<?php bloginfo('rss_url'); ?>" /><link rel="alternate"
type="application/atom+xml" title="Atom 0.3" href="<?php
bloginfo('atom_url'); ?>" /><link rel="pingback" href="<?php
bloginfo('pingback_url'); ?>" />
• If you need your logo linking to the home (if your logo is in an anchor tag)
○ <?php bloginfo('url'); ?> will link to the homepage of your blog.
• Coming to your Navigation, you don't need dynamic links form wordpress, not your
static xHTML links. The xHTML standard of Naviagtion is UL > LI > A. The below
code will generate the main navigation - which are actually your pages.
○ <ul><li class=" <?php if ( is_home() or is_archive() or is_single() or
is_paged() or is_search() or (function_exists('is_tag') and is_tag()) ) { ?
>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?
php echo get_settings('home'); ?>"><?php _e('Home'); ?></a></li> <!-- this
will return only the homepahe link and assigns class="current_page_item" to
the highlighted page --><?php
wp_list_pages('sort_column=id&depth=1&title_li='); ?> <!-- returns all
the menu links except for the homepage --></ul>
• Hurray... you have completed the header.php
.
sidebar.php
(not the widget way, you manually place the php to generate stuff on your sidebar here)
• As I have mentioned in the initial steps, you would have created a DIV for the sidebar
which either floats to the left or right of your page.
 • Take the whole sidebar DIV and place the xHTML into this file. Eg. <div
id="sidebar"> ..... </div>
• Almost everything in the sidebar will be in list format because its vertical. While
designing your theme and developing the xHTML you would have have some sort of
division between the different sidebar widgets or snippets. Below we will discuss a
few PHP interesting PHP snippets to generate your sidebar content. (place these
snippets into each DIV which you would created to separate the widgets. Eg. <div
class="sidebar_snippet"> ... your PHP snippet ...</div>).
• Categories
○ <ul><?php
wp_list_cats('sort_column=name&optioncount=0&hierarchical=0'); ?
></ul>
○ optioncount=1 will show the number of posts under each category next to the
category name.
○ hierarchical=1 will show the sub category under each category
• Archives
○ <ul><?php wp_get_archives('type=monthly'); ?></ul>
• Recent Posts
○ <?php$today = current_time('mysql', 1);if ( $recentposts = $wpdb-
>get_results("SELECT ID, post_title FROM $wpdb->posts WHERE
post_status = 'publish' AND post_date_gmt < '$today' ORDER BY
post_date DESC LIMIT 5")):?> <ul><?php foreach ($recentposts as
$post) { if ($post->post_title == '') $post->post_title = sprintf(__('Post #
%s'), $post->ID);echo "<li><a href='".get_permalink($post->ID)."'>";
the_title(); echo '</a></li>'; }?></ul><?php endif; ?>
○ LIMIT 5 will return five recent articles in the list. Change the number to your
need.
• Search
○ <form method="get" id="searchform" action="<?php
bloginfo('home'); ?>/"><input alt="search" type="text" value="<?php echo
wp_specialchars($s, 1); ?>" name="s" id="s" /></form>
• More
○ Find them at the online wordpress documentation or the forums.
• Again Hurray... you have completed the sidebar.php
.
footer.php
• This file will only contain the footer content which is common for every page like the
copyright...
• Eg. <div id="footer"> ... Copyright stuff ... </div>
• Good... we have completed the footer too. One for file and you will be done...
.
index.php
 • This is the parent file for your whole theme. This file is the one which will load up
when your theme is chosen. The index.php is contains the main body content (the
articles... comments.... pager.... titles....) and the inclusions of the other files you
created above.
• Follow the same order as we go below or you will mess up the layout. Basically you
will be including each file now.
• Header Include
○ <?php get_header(); ?> <!-- includes the header.php file -->
• Your Body Main Body Content - The LOOP (maybe placed into a DIV to split the
articles with other content)
○ This PHP LOOP is the most important aspect of wordpress articles. Your
inner body content will be placed inside this loop so that the content is
repeatedly generated for every post/page on your site.
○ <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <!-- the
LOOP --> <div class="post" id="post-<?php the_ID(); ?>"> <!-- assigning
post ID (dynamic) to every post so that you can control every single post -->
<div class="date"><?php the_time('M', '', ''); ?> <?php the_time('d', '', '');
?></div> <!-- article published date & month --><h1 class="posttitle"><a
href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?
></a></h1> <!-- the article title - linked so you can click and get into the
article --><?php comments_popup_link(__('( 0 ) Comments'), __('( 1 )
Comment'), __('( % ) Comments')); ?> <!-- number shows the number of
comments on that particular aticle --> <div class="storycontent"><?php
the_content(__('more...')); ?></div> <!-- the content of the article --></div><?
php comments_template(); ?> <!-- will inclued the comments.php file
(displayed only when inside an article) - see below for the file--><?php
endwhile; else: ?> <!-- end of the LOOP --> <p><?php _e('Sorry, no posts
matched your criteria.'); ?></p> <!-- if LOOP fails, this text will be displayed
--> <?php endif; ?> <!-- end if the LOOP fails -->
• Pagenation
○ <?php posts_nav_link(' ', __('« Previous Page'), __('Next Page »')); ?> <!--
returns Next and Previous anchor tags -->
• Extras (can be used anywhere in the above loop)
○ <?php edit_post_link(__('Edit This')); ?> <!-- returns a link which opens the
wp-admin editor for that article -->
○ <a href="<?php trackback_url(true); ?>"
rel="trackback">Trackback</a></span> <!-- returns an anchor tag for the
trackback URL -->
○ <?php the_category(',') ?> <!-- returns the list of categories (anchored) under
which that particular article is posted -->
.
comments.php
• The comments.php contains the list of comments and the comment form for each
article/page. This is a bit longer to explain so we are giving out our standart
 comments.php which we usually use for all our wordpress themes. Please download
the file below and place it in your theme folder.
Download
.
Extras
• Tip: To have more control over your theme, you can place all the PHP snippets in
DIVs and style each using your CSS. Same applies to the comments.php too,
IDs/Classes are already assigned to almost everything. You just need to get the
ID/Class names and style them in your CSS.
.

Success
You have successfully converted your design into a Wordpress theme. Now, go ahead and
upload it into your sites wp-admin and start of publishing your content trough wp-admin
(wp-admin is the admin console of Wordpress where you manage your sites content and
options). Sure from our side that this whole dev process can be done within 30 - 40
minutes. How about you ? We hope that this (bit) long tutorial has been of some use to you.
Feel free to question trough comments (and report if we had made a mistake above). Please
do support us how ever you feel to (we have seen many of our content being stolen and there
is nothing we could do...)
Updates
• Our Way of Highlighting a Page with custom content
Replace the_content(__('more...')); With
if($_SERVER['REQUEST_URI']=="/pagename/"){
include_once(TEMPLATEPATH ."/custom.php"); }else{ the_content(__('more...')); } ?
> Create a new page (will show up on your standard wp navigation) in the wp-admin and
give some junk content into it. Now as above, you will replace the php snippet in your
index.php. pagename is the same name of the page you just created in wp-admin.
custom.php is a custom php file you will create in your theme folder with any content (can
include wordpress php content too...) which will show up in your content area instead of the
junk content you added to your custom page in wp-admin. This is how the sitemap section
on our site works. By this way you can have more control over your custom content and
highlight the page in the wordpress navigation too. You can also have multiple pages like
this by adding the else if in the above snippet.