If you enjoyed this post, read more at : WebLoggerz.com

If you are running your own website or blog, then you might be aware of the WordPress and its Theme kind of stuff. If you don’t know then read this blog and things will be clear to you. When you wish to set a website or blog for yourself, then you look for creating the website tools. WordPress is the big name in website making and maintenance. It provides you built in themes that you can choose and incorporate within your piece of work.

These themes are simple CSS and HTML codes assembled together to present the things as you see today. There are more than thousands of themes available which are absolutely free and easy to use.

The main limitation with the readily available things is that you have to use it as it is. If you wish to look for any other specific feature, then you have to drop this particular feature and choose some other. Now just think how these themes are written? Can these be modified to look the way we want?

The answer to all your previous answers is yes all of these have been prepared by the developers who have written the code for these themes. If you wish them to look more concrete and particular, then you simply need to change the code. Moreover after changing the codes protect your website with TrendMicro as this will shield it against identity theft and other Internet threats.

In today’s article, we are taking this initiative to make you learn how you can yourself create your own custom themes for WordPress. Later on these themes can be included to any of your website or blog package. Now let’s talk about what sort of benefits you will actually get when you code your own theme from scratch.

1. You Get your Choice of Things

When you code your own theme, you have the option of including the things that you require and you can skip the rest of stuff which are many a time useless. When you use already build themes, then you have noticed that they put extra emphasis on look and feel of the theme and it is entirely empty page. But on your website it will contain a whole lot of text and images which needs to be properly managed; hence getting only the necessary content will help you avoid irrelevant stuff.

2. Debugging is Easy

When you code things, you are very much aware of what each line means and how to track any defect if it is not responding as per your expectation. Then you can quickly figure out the particular lines and alter them accordingly.

3. Easy Learning

You start small and put every single thing in place. Using this methodology you get to know more about theme designing and it’s a gradual process which will surely help you when you will be working on similar themes.

When you see the complete code of an already built theme, you might get frustrated seeing those page long codes. Seeing and understanding someone other’s code is also one of the daunting tasks because we are not aware of the workflow he has used. So when you start it yourself, you put short and small things together to make it completely significant and purposeful code. Also, when you gradually go step-by-step process, you do not need to get baffled with the length or number of coding lines.

Now first get to know, what all is contained within the name WordPress theme. If you have got a chance to download a pre-built theme, then you will observe it as a folder package containing 12 files which are just .php files for various sections of our webpage. It contains separate .php file for the header, index, sidebar, footer, archive, comments, search, style, functions, etc. All these .php files hold a schema which decides what should be placed where on the page. Before we start coding stuff, let us learn some trick.

First start with a static website which you can easily prepare using the CSS and HTML together. Then we will be writing the code for converting this website into the standalone theme. Same way prepare a theme’s folder and make default .php files for each section as mentioned above. Now we will write extra code for each .php file.

Cascaded Style Sheet

All the themes detail will be contained in a stylesheet or CSS so write this code at the beginning of style.css sheet. You need to change the values according to your info.

/*
Theme Name: Responsive
Theme URL: http://www.blog.abc.com
Version: 1
Description: Responsive WordPress theme
Author: Marry Harris
Author URL: http://www.blog.abc.com
*/

Header.php

Now open your file-header.php file and copy the head section code from the basic HTML file. Here we will be adding the WordPress template tags. For displaying the page’s title the tag is bsg_title(); blog info(‘name’) will place the blog name, blog info(‘stylesheet_url’) is used for calling the stylesheet.

Index.php

When we are done with the header, now we have to structure the body main for which we will be copying the body content within the index.php file.

The top two tags get_sidebar(); and get_header() will call the sidebar.php and header.php and grab the necessary data. The main loop then searches for the content within the body, if it is present then populates here.

Sidebar.php

Sidebars are used to contain list or thumbnails of the important stuff. This sidebar.php file is being called from the index.php as we have seen earlier.

Here the sidebar is wrapping three things together an i.e., logo, pages list, and categories.

Footer.php

Php file for the footer is the simplest among all is it contains bsg_footer() tag only. You can use the footer to display either the most popular posts or comments.

Archive.php

The archive is used to display a list of posts which can be set in different categories whether with the date associated or the author or the topic category. For the archive, we have archive.php file. It is almost similar to the index.php except the tag at the top which gives the page title.

Comments.php

Your comments section is the important stuff because it includes the posts from the readers and you can easily get to know if anything is going wrong with the help of their comments and you can improve further. You can use the single comments file for all your future themes.

Customized Background

After the implementation of WordPress 3.00 version, you have the privilege of changing the background color or image in WordPress. For this, you just need to write this simple line of code:

add_custom_background();

So this is the entire package and you have completed your first WordPress theme starting from the scratch. Now you have got the fair idea of what all it takes to make an entire working of WordPress theme from scratch. Since you are not a beginner now hence you can play with more coding stuff and modify your existing code to include the things which you actually require as per you appearance in the website.

Hope you have understood this tutorial and find it quite useful so we can hope for some of the great WordPress themes to be coming out from your talent. Enjoy coding, happy learning!

The post How To Code a WordPress Theme From Scratch appeared first on Webloggerz.