How To Develop a WordPress Theme Effectively?
- By saif
- 8 November, 2012
- 2 Comments
So, you want to create your own WordPress theme because you are sick of using themes developed by others? Well, this is a good decision and I appreciate it. In this tutorial, I will teach you a simple and easy method to develop a WordPress theme. Keep in mind that this will not be a very high-end theme because at first, it is a good idea to start with a simple step.
You should decide how the theme looks like. In this tutorial, we are going to develop a theme that will contain a header, a content area, a side bar and footer.
We will be required to create the following files in the theme directory where all files related to theme will be saved.
- header.php – Contains code for header section.
- index.php – This file will be for main/ content area of theme and will also interlink other files with each other.
- sidebar.php – It will contain information and coding about the side bar.
- footer.php – All the coding of footer will be saved in this file.
- style.css – This file will be responsible for handling the styling of your theme.
You can use Notepad or any other HTML editor to make those files. If you have purchased a hosting account then you will find the option to make PHP files in your cPanel as well.
Now, let’s start creating each file and fill it with coding.
The header.php file
Following code should be added in this file.
<html> <head> <title>Tutorial theme</title> <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>”> </head> <body> <div id=”wrapper”> <div id=”header”> <h1>HEADER</h1> </div>
This is one of the simplest HTML codes you will find in WordPress themes. This basically defines the functionality of a WordPress theme. You can specify the title of your website in this file and also add some keyword description for the website you are creating.
Just after the title line, there is <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>”>, which tells the WordPress to load style.css file.. The <?php bloginfo(‘stylesheet_url’); ?> is a WordPress function that will actually load the stylesheet file.
After that, a “div” has been added with class wrapper that acts as the main container of the website. By adding class for it, we can modify it using style.css file later.
Then, you can see a label HEADER wrapped in a simple “div” with the help of a class “header”. We will talk about it later in stylesheet file.
The index.php file
<?php get_header(); ?> <div id=”main”> <div id=”content”> <h1>Main Area</h1> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <h1><?php the_title(); ?></h1> <h4>Posted on <?php the_time(‘F jS, Y’) ?></h4> <p><?php the_content(__(‘(more…)’)); ?></p> <hr> <?php endwhile; else: ?> <p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p> <?php endif; ?> </div> <?php get_sidebar(); ?> </div> <div id=”delimiter”></div> <?php get_footer(); ?>
You can see the code is beginning with <?php get_header(); ?> that includes the header.php file and inserted code in main page. An internal WP functions is used to do this. This will be explained in detail later. You can also find the Main Area text in this file to specify which area of screen will show the main content.
Next few lines are pure PHP codes and WordPress functions to check if any posts have been added by using administrative account so they can be displayed on blog.
In next step, we will add a new file that will be sidebar.php. This file be used to display different things like recent posts, archives, categories, pages etc.
An empty division is added after this to separate side bar and main area from footer.
The last line addes is – <?php get_footer(); ?>. It includes footer.php file.
The sidebar.php file
Following code is added in sidebar.php file;
<div id=”sidebar”> <h2><?php _e(‘Categories’); ?></h2> <ul> <?php wp_list_cats(‘sort_column=name&optioncount=1&hierarchical=0′); ?> </ul> <h2><?php _e(‘Archives’); ?></h2> <ul> <?php wp_get_archives(‘type=monthly’); ?> </ul> </div>
Internal WordPress function is used to display categories and archives in this file. These are returned as list items by WordPress function so actual functions are wrapped in unsorted lists (the <ul> tags).
The footer.php file
Add these lines to the footer.php file:
<div id=”footer”> <h1>FOOTER</h1> </div> </div> </body> </html>
With the help of this code, we are simply adding a Footer label. You can alternatively use links or some text to be displayed in footer area.
The style.css file
Add the following lines to the style.css file:
body { text-align: center; } #wrapper { display: block; border: 1px #a2a2a2 solid; width:90%; margin:0px auto; } #header { border: 2px #a2a2a2 solid; } #content { width: 75%; border: 2px #a2a2a2 solid; float: left; } #sidebar { width: 23%; border: 2px #a2a2a2 solid; float: right; } #delimiter { clear: both; } #footer { border: 2px #a2a2a2 solid; } .title {font-size: 11pt; font-family: verdana; font-weight: bold; }
The basic look for your theme is specified by simple.css file. The lines above make the background of your page and also the main parts of your theme. As per the above codes and files, your website should look something like this:
So, this was a simple tutorial for you to learn how to develop a WordPress theme. I know that this was not a really impressive theme design but the reason to create this tutorial was just to give you some idea about how to design a simple WordPress theme.
Very basic wordpress theme tutorial. Still i think it would be useful for the bloggers new to wordpress and does not find enough time to read the wordpress documentation.
I have also developed some wordpress theme that i am sharing with the community. hope your readers will find them useful.
nice tips bro thanks