Converting A Static Web Template Into an Eye-Catchy WordPress Theme 

Quick Tip: Converting A Static Web Template Into an Eye-Catchy WordPress Theme

WordPress has been the most widely used CMS around the world, powering around 22% of the websites currently. The platform not only works as a blog, but also a dynamic content management system, allowing so many online players to manage their content related matters with ease.

What is that makes this CMS so popular among its peers, is its ability to provide a spectacular collection of themes both free and paid to revamp the look of your website. Plus, WordPress also has an amazing capability to make any static theme work along with it provided with some needed tweaks. Knowing how a particular web template work with WordPress can extend the ability and capability of your website.

Converting a static web template isn’t an uphill battle if you learn some quick and easy tips. So, whether you are starting from the scratch or moving your existing website to WordPress, this tutorial will explain you everything you need to add functionality to your website.

Note: This tutorial is aimed at beginners and I am assuming that you are already familiar with HTML and CSS, and already have the site designed that you want to migrate to WordPress.

Understanding the Tools Needed

Webmasters can either go for Aptana (www.aptana.com) and Cream (cream.sourceforge.net). Aptana is good as it provides better tools and options to edit the template and incorporate the changes as per your need. You can also go for Dreamweaver, but Aptana is comparatively good as it is an open-source software and comes with better features for conversion processes.

Tips To Know Which Template is Reliable

In majority of the cases templates made using CSS and HTML are reliable and provide better results as compared to any other. Most of the free and open-source web templates available for download are developed using these files. Since, people will buy your products with the expectation that quality (such as design and coding) is top notch, and both HTML and CSS are capable of meeting these expectations.

Go an extra step further and spend some time to evaluate the design. A passing W3 validation score is great. Also, there are many templates that contain a link within their page that would directly navigate you to the W3’s validation page.

Several Other Resources to Know

The WordPress Codex is an extremely helpful resource to gain an in-depth understanding of the blogging script. The documentation features a template tags section that helps you understand multiple aspects of blogging and tags you need to add on various parts of your blog including headline, date, comments, links etc. Not to forget about reading the WordPress Loop that gives you knowledge about adding code to your blog post content.

Systematically Arrange the Downloaded Theme Files

Once you finish downloading the theme you want to convert, plan how these files can be arranged systematically. First you need to create a new folder and give it a name of your theme. Inside the same folder, you’ll need to create two files: “index.php” and “style.css”.

After this, start copying and pasting all the content from your CSS file to the new style.css file. This way WordPress would be able to identify your new theme.

Confirm The Design

Here, you need to open the HTML file in Aptana and settle down all the changes you to incorporate into your design. You can decide about the type of fonts, sizes, number of columns and so on. If you want a completely new layout of the template, you can start editing various components of the templates such as images and anything that comes with it.

It’s an important step because only at this point you can plan about the changes you want to done within your template. Otherwise it will become quite cumbersome if you plan about any alterations after this stage.

Prepare Markup of the Template

For creating the markup in Aptana, go to Code View and start highlighting the parts you wish to slice. These sections include, header, footer, content, and sidebar. These 4 sections are actually type of files with names header.php, sidebar.php and footer.php which reside under the theme directory. For header.php file, paste the below mentioned PHP code.

Once you run the code, start copying the PHP code between thetags from your old “index.html” and save the changes.

Now, copy the content taken from the index.html file and paste it to the new index.php file and save the changes. The following procedure will be used for “sidebar.php” and the “footer.php” files too.

Now, you have the original “index.php” file copied to 4 different PHP files. To combine all these files together using PHP, go to your “index.php” file, and insert the following code at the top of the file.

Now, add the below mentioned code at the bottom of the same file:

The code will help WordPress to detect all the four PHP files i.e., header, footer, sidebar and content. Now, we can start editing the different section of the “index.php” file with the help of loop function.

Adding the Loop Function

Loop PHP function in WordPress is used for displaying posts within the database. To add loop function, first create a div that will hold the content inside the “index.php” file” and insert the below mentioned code.

Once you run the above code, WordPress will start displaying your content onto the web page.
You can expand the ability and functionality of your WordPress theme by customizing it and sprucing up its appearance with the help of templates and tag files. You can use them on various sections of the theme such as header, sidebar, footer etc.

Author Bio

A WordPress enthusiast and developer, Amy Brown loves to string up words around this amazing technology. She works for WordPrax Ltd.- WordPress CMS Development Company with a global reach. In case, you have made up your mind on creating a custom plugin, hiring the experts would make for a wise decision.