How To Convert A Simple Template Into A WordPress Theme

How To Convert a Simple Template Into a WordPress Theme

WordPress is no longer touted just a basic blogging platform, and has rather grown into a bigger and fully developed content management system that can be used for building websites of all types and sizes. What’s best about this CMS, is the endless customization possibilities and user-friendly interface it provide to users, thereby helping you establish yourself as an epitome of your online brand.

When it comes to converting a template to a WordPress theme, many users (especially novice developers) often had to face challenges when finding a simple and basic tutorial that could help them guide in the right direction. Even if they find one, they are hardly understandable to those who are new to the workings of WordPress. Keeping this thing in mind, and assuming that you have some basic knowledge of HTML and CSS, I have tried to bring to you step-by-step instructions that are easy to understand and implement in order to convert a template into a WordPress theme.

Note: Before you precede any further, do make certain that you’ve installed WordPress on your device. You can download it from WordPress.org for free.

Step 1: Creating Folder and Files

First off, you will need to create a new folder for your template and save it within your default WordPress theme folder (i.e. wp-content/themes/default). Make sure that your folder has the same name as that of your installed WP theme. And the, create two new files named: style.css and index.php. These are the two most important files that you will require for WP theme.

Next, simply copy and paste your template’s CSS file code into your newly style.css file, and at the top add the below mentioned code:

[php]
/*
Theme Name: My Theme
Theme URI: Your Theme’s URI
Description: A brief description.
Version: 1.0
Author: User
Author URI: Your website address.
*/
[/php]

You can change the fields within the above section as per you own requirement. The aforementioned comments help WordPress identify your theme and its related data.

Step 2: Break Your Template’s Index File According to WordPress Theme Structure

This is the most important step of this tutorial, as it helps in creating a WordPress themed site from your template. Since, WordPress depends on PHP to call all the parts of your content from the database as well as files, it is important that your existing HTML file is chopped up as per WordPress theme’s file structure.

Put it simply, you simply need to break your index.html file into index.php, header.php, sidebar.php, footer.php and other essential WordPress theme files. You should place these files within your theme directory.

Step 3: Adding Functionality

In order to make the new WP theme files functional, you will have to copy and paste your original HTML files into their respective theme files. For instance, open your header.php file and then open up your template’s HTML file. Next, copy the code of your original HTML file and paste it in your new header.php file below the <head> section.

You will need to perform the same process for rest of the newly created files (like sidebar.php, index.php, footer.php).

Step 4: Putting The Files Back to Parent (index.php) File

The index.php file is the most important theme’s template file – which WordPress looks into to find web pages that cannot be found elsewhere. So, once your original HTML file is chopped up into different WordPress files (like header.php, sidebar.php, etc.), you will have to put all these files back in index.php, which requires writing a few lines of code. Open the new index.php file, and add the following line at the top of the file:

[php]
<?php get_header(); ?>
[/php]

Next, add the below two lines to the extreme bottom of your index.php file:

[php]
<?php get_sidebar(); ?>
<?php get_footer(); ?>
[/php]

The above three lines tells WordPress to fetch and showcase contents of your “header.php”, “sidebar.php”, and “footer.php” files in your index.php file.

Step 5: Using The Loop

So, once you have finished working with your index.php file, the last thing you will have to take care of is adding your original content into your newly-built files. For this purpose, WordPress uses a PHP function called “The Loop”. This function is used for calling and displaying your posts (that are saved in the database). So, you will have to access your database to get the code, and then simply paste it into your new theme’s index.php file (you can paste the code inside any div that is used for holding your content).

[php]

<?php if ( have_posts() ) : ?>

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

<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

</div><!–end post header–>

<?php if ( function_exists( ‘add_theme_support’ ) ) the_post_thumbnail(); ?>

<?php the_content(); ?>

<?php edit_post_link(); ?>

<?php wp_link_pages(); ?>

</div><!–end entry–>

</div><!–end post footer–>

</div><!–end post–>

<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>

</div><!–end navigation–>

<?php else : ?>

<?php endif; ?>
[/php]

WordPress use loop to show your posts content as well as comments on your site.

Final Words

Once you’ve performed all the aforementioned steps, all you’re left with is uploading your WordPress theme folder to /wp-content/themes/. A word of caution, since the theme you are converting into a WP theme isn’t your native theme, it may contain bugs or incorrect codes, and thus it is very important that the theme is thoroughly tested.

After this, get logged-in into your WordPress install and activate your theme. I hope that reading this tutorial will help you clear up your basics, thereby helping you convert your templates to WordPress successfully.

Click to rate this post!

[Total: 0 Average: 0]

Share It