Apr 3 2008

Simple steps to create a wordpress theme

Wordpress Theme Development

Wordpress theme is merely a folder which is to be placed in wp-content folder of wordpress hierarchy .

The basic files needed in that theme folder is index.php and style.css

In this style.css the following lines are very essential.
/*

Theme Name: Theme Namet

Theme URI: http://www.sajithmr.com/

Description: Details of your theme

Author: Author name

Author URI: http://www.sajithmr.com/

This theme was designed and built by Sajith

The CSS, XHTML and design is released under GPL

http://www.opensource.org/licenses/gpl-license.php

*/
Design your theme (static page) and put this as index.php in theme folder. Go to wordpress admin panel and set the current theme as the theme you created now. Then you can see the static design created by you.

Next step is make each part dynamic. For example if you want to make your blog title dynamic , replace your static code with

<?php wp_title(); ?>

Make your style sheet path also dynamic by : <link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_url’); ?>” type=”text/css” media=”screen” />

Like this , there is a lot of built in dynamic functions in wordpress.I will give you some links at the end of this post .

Another , very special , feature of wordpress theme is its hierarchy. You can sub divide the index.php files into a lot of sub files. See the below picture

Wordpress theme hierarchy

(Click on the picture to see full size)

This picture shows the control flow whenever a particular url request arrives. For example you can write all the code for footer in footer.php and can include this file in your index.php file as

<?php get_footer(); ?>

Some important wordpress dynamic functions:

Function for showing posts:

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<?php the_content(’Read More »’); ?>

<?php break;?>

<?php endwhile; ?>
<?php endif; ?>

See this link for further development: http://codex.wordpress.org/Theme_Development

Wordpress Theme Development Wordpress Theme Development

Some useful functions:

<?php wp_list_categories(’title_li=’); ?> /* Listing categories */

<?php edit_post_link(’Edit this entry.’,”,”); ?> /* Post edit link*/

<?php the_category() ?> /* Shows current category*/

<?php wp_list_pages(’sort_column=menu_order&depth=1&title_li=’);?> /* Page Links*/

<?php wp_head(); ?> /* Head information */

<?php wp_loginout(); ?> /* Login / logout links*/

<?php the_permalink() ?> /* Get the permalink */

<?php the_excerpt(); ?> /* Get the short description of a post*/

<?php posts_nav_link(’ — ‘, __(’« Older Posts’), __(’Newer Posts »’)); ?> /*Page navigation*/

8 Comments on this post

Trackbacks

  1. Create Wordpress Magazine Style Theme easy! | TheAnand wrote:

    [...] With this you can have even your old html page as the homepage! Or better, rename it to php and put in codes to show recent posts, recent comments or even posts from your sub domain blog as I did with my TheAnand home. Hope this helps! If you are looknig for a way to learn what a wordpress theme is all about check this heirarchy by Sajith. He has a excellent post to help you get started with creating a wordpress theme. [...]

    November 1st, 2008 at 9:00 pm
  1. My Tech Shelf Admin said:

    Is there any editing tool available for creating word press themes?

    May 26th, 2008 at 10:38 pm
  2. Sajith M.R said:

    Normal html / php editor will do. Since wordpress is only configuration based content manager, the design is upto the designer with his html and style sheet skill.

    Thanks
    Sajith

    May 28th, 2008 at 12:28 am
  3. RaidaGabtiz said:

    i want to share my free wordpress theme here.

    Preview:
    http://www.elegantthemes.com/preview/eVid/

    Download:
    http://www.sendspace.com/file/6uv0n2

    November 18th, 2008 at 9:00 am
  4. Gouranga Kundu said:

    You send sexy hot women picture in my mail ID

    November 29th, 2008 at 5:08 pm
  5. baloch said:

    i want more.

    December 15th, 2008 at 12:44 pm
  6. khan said:

    hi,
    i need sexy picture,i saw ur picture there is not too good if u have then send me

    March 15th, 2009 at 4:31 pm
  7. deha rajkhowa said:

    hi…………… sexy. plz give me a 2222222222222222222 long kissssssssssssss.

    May 23rd, 2009 at 11:34 pm

LEAVE A COMMENT

Subscribe Form

Subscribe to Blog

Recent Comments

  • Sajith M.R: Press shift and enter key for a new line in chat
  • Borellus: Nice little function there, I think I may try to use it at some point.
  • Abhishek: Can we have newline characters…. i want something like this Line 1 Line 2 Line 3
  • Joanne Cox: Thanks for sharing this; your input is appreciated and has made me change my opinion slightly. About the...
  • Saboor: hi i also want to implement a chatting like Gmail or FaceBook , please, email me the source code on...

Recent Posts