The process of turning a basic web template into a WordPress theme is rather daunting, and requires a little bit attention and some slice-and-dice routines. But, as a reward, you will get a great WordPress theme you always wanted.
So be patient and follow the next steps:
The first step is to open the website’s index file, typically named something like home.htm or index.htm, and decide how you are going to use your web template. This file contains <head> and <body> tags, and looks like a standard XHTML document. There will be a clearly denoted header, content body, footer and navigation area within the body tag.
Firstly, you should focus on WordPress header.php file. It includes keywords and displays the navigation, masthead, as well as page title and other above-the-fold information. Also, the file announces its programming language and file format. In brief, the page header starts at the DTD document tag, and ends in the place, where the code passes the body tag. All you need to do is copy this part and paste it into a newly created text file. Then, save that file as header.php.
WordPress requires you to put certain information into the page header. The important thing is that WordPress software can dynamically modify title information. Don’t forget that your header is used on every WordPress page, so a static <title> tag will not be a wise solution. Instead, replace it with something similar to this:
<title><?php bloginfo( ‘name’ ); ?> ); ?></title>
The actual name of the blog will be displayed first in the title, as it is defined within the WordPress Dashboard. Then it will display such information as the currently-selected category, the entry title or page name, as well as the “>” character between page name and page title. It will look like “Your Site> Your Page”. This can be modified either by changing the “>” character in wp_title, or by rearranging the two tags.
By adding the wp_head tag, you will add the essential information about your website. It can be any RSS feeds, which are relevant to the page or its current WordPress version. Just paste the following:
<?php wp_head(); ?>
Finally, the header must include the current theme stylesheet, and define a pingback URL. Thus, the code below should also be placed within the <head> tag:
<link rel=”stylesheet” href=”” type=”text/css” media=”screen” />
<link rel=”pingback” href=”” />
Now rename the theme stylesheet file to stylesheet.css, since it is essential for placing it within a WordPress theme folder. Then, go to the bottom of the theme index page to edit the footer.
Using your text editor, create a blank new file and name it footer.php. Paste everything that is placed below the main content area (the sidebar, body and other similar stuff) into this file. So it will contain </body> and </html> tags, theme author credits and basic copyright information. Also, you can change the information in the footer to add your own copyright information or site’s name.
In addition, add wp_footer to this file. For instance:
<?php wp_footer(); ?>
Then, save the file and close it. Now you can place it along with the renamed stylesheet.css and header.php files in the folder with the theme.
So your theme folder now contains a stylesheet, header and a footer. Congratulations, it was the hardest part of turning a template into a full-fledged theme. The remaining two steps simply involve bringing the standard WordPress Loop into the main content area, as well as creating a sidebar. It is essential to make your tags, categories, entries and archives visible to the visitors.
Things are pretty simple for the sidebar. Just like what you’ve done with the header and footer, locate the current code of the sidebar (WITHOUT <div> tags) and cut it out. Using a plain-text editing program, create a new sidebar.php file (as mentioned above) and paste this information into it. Modify the XHTML content of this sidebar the way you need, and paste the following code in order to let WordPress widgets to be placed within this content area:
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : endif; ?>
Save the file. Then go to the main index file of the theme. It should be turned into the index.php file of the WordPress theme. Also, it should be saved as page.php, single.php, archive.php, and category.php. The index.php template can simply be used to provide its basic functions and forms, since, generally, these templates have a uniform appearance and provide the same information.
Firstly, using a standard WordPress variable, add the newly created WordPress sidebar file. To do so, simply paste the following short variable to dynamically call sidebar.php file:
<?php get_sidebar(); ?>
Now the sidebar is called and included on every WordPress page. The only thing you have to do is to include the standard WordPress Loop into the template to make its elements visible to users. In a standard form, the WordPress Loop looks like the example below:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2 class=”title”></h2>
Posted on by
<span class=”the-content”>
<?php the_content(); ?>
</span>
<p>Posted in <?php the_category(‘; ‘); ?></p>
<?php endwhile; else: ?>
<p><?php _e(‘Sorry, there’s nothing for you here!.’); ?></p>
<?php endif; ?>
You can easily change the Loop information by using a large number of WordPress variables. The example above will display the entry title, author, date, categories and content, as well as an error message if a user clicks on a non-existent post.
The index file has now been saved as an archive page category, dynamic content page, single entry page, so it is complete and ready to be used as a WordPress theme. This file, as well as the header and footer, are subjects to the pre-defined information in the stylesheet file of the theme. Several things left to do.
First, create a comment template for the default appearance of comments submitted by users on each entry. This file is included in WordPress themes by default, but sometimes it is missing. Open the files of the downloaded theme and find a comments template. If it is there, simply paste the WordPress comment variables into the template within the Comment Loop. If it is not there, you should create it yourself.
You can always find a standard comment template online, and simply add it within the main content area of the page.
And finally, upload and test your theme. It should have no bugs. Don’t forget that your coding may be inaccurate in some places since your theme is not native to WordPress. Be sure that everything works as it should. If it does, your job is done. Congratulations! The downloaded template has been successfully turned into a unique and stunning WordPress theme.
