Dezinerfolio

Developing a Wordpress Theme

Your rating: None Average: 4.4 (162 votes)

Wordpress

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
  • 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.

Trackback URL for this post:

http://www.dezinerfolio.com/trackback/151