Wordpress :: build your custom theme

In my previous post I have explained how to install wordpress and it’s basic use. I have given an initial idea about plug-in and template system of wordpress.

Now I am going to explain you how one can build his/her own custom theme and install it through admin panel of wordress provided he/she must have basic knowledge in html/css.  If he/she is completely new to HTML/CSS I would like to him/her to go through this tutorial to have some knowledge on HTML/CSS .

Wordpress theme is nothing but a bunch of PHP files, CSS files, images and optionally javascript files which are bundled together inside a folder. Each php file may consist php code (server side scripting which are responsible for functionalities) along with html code (html is the markup language which is responsible for creating place holder for content, image etc). Similarly each css file consists style definition for html elements like paragraph i.e. p, heading i.e. h1, h2 etc. So all these files & images work together to provide a certain look & feel to the front-end of the website.

By default wordpress comes up with two default themes i.e. ‘twentyten’ & ‘twentyeleven’ respectively. One needs to go through these folders thoroughly before going for creating his/her own custom theme.

Below are some tips which may help you in creating your own custom theme:

• You must keep your template (html/css) ready which you are going to integrate into your custom theme.
• Copy one of the default themes for ex. ‘twentyten’ from themes folder of wordpress package (path wordpress/wp-content/themes )  and paste it in some local place of your computer and rename it like ‘mynewtheme’.
• Replace the css file i.e. style.css within your theme folder ‘mynewtheme’ with the css file of your template and images folder with the images folder of your template respectively. This means now in your theme folder ‘mynewtheme’ you have your css file and images folder as of your new template.
• You notice there are some files like header.php, footer.php, sidebar.php, index.php, page.php within ‘mynewtheme’ folder and those are the files which are mostly required to build your custom theme. Open all these mentioned files in an html editor like DreamWeaver.
• Copy the html of header section from the template (which you want to be in header section of your web page) and put it into header.php file. This means replace the code of header.php with the copied code from the template which is meant for header section. Within head tag you will find elements like link, script etc where you need to do some adjustment. Basically link element is used to link to an external style sheet i.e. link rel="stylesheet" type="text/css" href="style.css" /. Here what you have to do is to append a php snippet with the path of css file so that it will point to the absolute path of the css file of the theme. So replace the link rel="stylesheet" type="text/css" href="style.css" / with link rel="stylesheet" type="text/css" href="bloginfo(‘template_url’); /style.css" /. Do the similar changes with the element of script. If your script element is something like script type="text/javascript" src=”example.js”  then change it to script type="text/javascript" src=”bloginfo(‘template_url’); /example.js” . Before the /head add this piece of php snippet i.e. wp_head();  . This is all about tweaking of header.php file. Now save this file.
• Copy the code of footer section from template and put it into footer.php within theme folder ‘mynewtheme’.
• Similarly copy the code of sidebar section (if there is any for sidebar of the webpage ) and put it into the footer.php file within new theme folder ‘mynewtheme’.
• In index.php file you will notice such code snippets like get_header();  , get_footer();  etc. Here get_header() is the function which includes header.php file into index.php file. Similarly get_footer() includes the footer.php and get_sidebar() includes the sidebar.php . You need to place those code snippets as per you need your code for header , footer & sidebar segments should be included to index.php file.

I think this is all about working with your custom theme folder. Now upload the entire folder into the themes folder of wordpress, activate it through admin panel and enjoy the theming.