Create our own wordpress template

16 June 2009 3 Comments

One main problem that blogger would be faced is to define layout for its blog, thanks to Wordpress for its easy to customize blog platform, so we can solve this problem. Well, actually easiest way is by find free template on the net by googling “Free Wordpress Template” and tons of site that provide free template will be shown. But for ariefdarmawan.net, I would like to define my own template.

Step 1 – Define layout

Okay, how could we design something if we don’t really know what we want, so put this as first task that we should do. Simple question as below may help to describe it:

- Do we want a custom header?

- Do we want a custom footer?

- How many column we want on body section and what are their purpose?

- What widgets we want to add? And how it should looks

Once all of those question get answered, then we can compile them into a complete layout, mine is as you may see below, only simple header, footer, and 3 columns on body section, one is for banner, one for all post related widget and for sure for the post content itself.

wordpress-template-screeshoot

Step 2 – Create theme folder

We need to create new folder to store all of our template resources, in my case I give it name adanet

Step 3 - Create files

Under folder we have created on step 2, we need to store some files that will define how our blog will looks like. There could be lots of file but mandatory files are only 2, they are:

Index.php

Define main structure of our blog layout, easiest way is by copying from existing file. Classic template of standard Wordpress installation would be helpfull , so we copy this file into our new theme forlder and change per our preference, mine will be as below

<?php
get_header();
?>

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

<!— this section I delete because is too long –>

<?php endif; ?>

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

<?php get_footer(); ?>

Style.css

Sets of stylesheet definition we would like to use on our blog, this file also provide meta data to identify the theme, like name, author, description, etc

/*
Theme Name: Arief Darmawan on Internet – Clean Version
Theme URI: http://ariefdarmawan.net
Description: Default clean version of Wordpress template for ariefdarmawan.net
Version: 0.7
Author: Arief Darmawan
Tags: 3 columns, widget

No description
*/

body, td, input, select
{
font-family:verdana;
font-size:11px;
}

.HeaderTop
{
background-color:#000;height:90px;width:100%;
background-image:url(background.jpg);
background-repeat: no-repeat;
}

There are also some nice to have files for good practice as below:

Header.php, define our header

Footer.php, define our footer

Function.php, this file define how many sidebar (widget placeholder) that we would like to have

Screenshoot.png, screen shoot of theme final output

So, on ariefdarmawan.net case, as it just simple layout, files that we need to prepare are: index.php, header.php, footer.php and style.css

Step 4 - Modify style.css file

Style.Css play very important role on Wordpress theme development, it is used to place meta-data information on our themes, and also for sure sets of style that we would like to used. We may create our own class style based on how we manage our layout on .php files, but there are some layers that we need to setup (optionally) as they would be declared automatically by Wordpress system. Those are:

- #meta

- #feedback

- #respond

- #comments

We may use help from bugzilla or MSIE Internet Developer Toolbar to get standard layer id generated from WordPress and modify that layer style within our style.css

bugzilla

From screen above, we know that layer name that to be used for respond a reply for a post is called as “respond”, and we may write a style on style.css as below

#respond
{
padding-bottom:5px;
}

#respond textarea{
padding:2px;
width:530px;border:solid 1px black;
font-family:tahoma;font-size:11px;}

#respond a
{
text-decoration:none;
color:maroon;
}

#respond a:hover
{
text-decoration:underline;
}

That just a sample, we may use more code to reflect our creativity to enhance our template view

Step 5 - Deploy theme

Final chapter is to deploy theme, to do so, just copy whole theme folder to <wp-installation-directory>/wp-content/themes directory and user wp-admin to activate the theme