How to Turn a Static Website Into a WordPress Theme?


Still a number of business owners are running a static HTML website. But when it comes to making changes in the static site, it becomes mandatory for the website owner to have HTML programming knowledge. So, if you lack coding skills you must migrate your static site to a dynamic platform. WordPress is a highly popular dynamic platform and its popularity is not going to abate too soon. You don't have to throw all your HTML and CSS files away when moving to WP platform. Rather you can convert your HTML files to WordPress.

When converting HTML files to Wordpress theme, generally WP default theme named TwentyThirteen is being used. To carry out the conversion you'll need a copy of HTML as well as CSS files for your current site, which will be later converted to WP theme format. There are various choices you get in terms of the program, which is used to make edits in your file. Well, you can choose text-editors such as Notepad and Notepad++ or rather use Dreamweaver instead. For this purpose, you can take up HTML to Wordpress Service.

Here's a step-by-step procedure following which you'll be able to Convert HTML to Wordpress Theme.

Step 1: Creation of Files and Folders

Begin with creating a new folder on your system’s desktop. Next, give a name to the folder. Choosing an easy to remember name won't let you forget where the folder is saved, such as the name of your WPTheme. Once you've named your folder create two files namely style.css and index.php, and add both these files to the newly built folder.

In order to make your WordPress platform recognize the files you've just created, make sure to create a comment block for the style.css file including the information like theme name, URI, a brief description, version, author and author URI.

Later, verify whether the TwentyThirteen theme is set to be your active WP theme or not. Subsequently, in the WP admin panel go to Appearance and then the Editor. Open your style.css file and copy the content from it, and paste it into the newly built style.css file.

Step 2: Create new PHP files

To Convert HTML to Wordpress Theme in the second step you'll need to open WP theme editor, wherein your existing theme will be segregated into different parts – the header, footer, sidebar and main index. You can make use of the same components for building some other WP themed site. For doing so, you'll need to divide the components into different PHP files. Next, all you need to do is to copy of the code of each HTML section and place them in their respective PHP files.

Get logged in your WP admin panel. Open the theme editor followed by the file in which you want to copy the code. For instance, open header.php file of your static website; copy the code and then paste it into the newly crafted header.php file. Follow the same procedure for rest of the files.

Step 3: Use Newly Created PHP files to fetch data

To bring in data from newly crafted PHP files, open the index.php file in your WP theme folder saved on your desktop. Add PHP code to your file top and just after the tag, as show below:



Now you have constructed your own WP theme. But wait! Your theme is developed, but you may find it to be blank. You'll have to add content to it.

Step 4: Add your content

Now you may have to add content in your theme. How will you display the content in your tailor-made WP theme? For this purpose, you require WordPress’ loop function – The Loop.

Installing the loop function, requires copying the following code into your index.php template.



Step 5: Initiate your Theme

To set-up your theme, visit a FTP client and sign in to your website directory.

Go to wp-content>>themes folder.

Upload your new theme folder to this folder. Open your WordPress admin panel, go to Appearance>>themes tab. Your theme will now be visible just click on Activate.

That's it, you are done!

About Author:

Sarah Parker is a developer comes technical writer at Designs2HTML Ltd. She loves to share relevant and useful tutorials on WordPress markup conversions on Twitter to treat technical professionals with required stuffs.

24 comments

wonderful article, people these days are actually looking for content like this. :) good one

Reply

Excellent tutorial article, I reblogged your post on converting a static HTML website/blog to a dynamic Wordpress website/blog on Tumblr.

Reply

The change in the web development field is reflected by the experience web developers, Things like shared here in this blog becomes if hire PHP developer as they know hoe to make best from the given resource.

Reply

Make your website with interactive javascript and jquery. Website development company in Delhi is a best and top most company which provides user friendly website that user can access their functionality easily.

Reply

Given the simplicity of your directions, I had pretty much convinced myself there was no way my journal was going to come out with the same design as the rest of my html-based website… but I was pleasantly surprised. Just wanted to say thanks :)

reputed web design and
web development company Jaipur
.We offers responsive web development, website designing and seo solutions in Jaipur.

Reply

This is a fantastic concept, but i’m skeptical of it’s results….
I’m definitely going to have a play with this and see just how flexible it is.

seo company jaipur

Thanks for the post!

Reply

OMG! That’s totally awesome. Hahaha.

I’ve never thought of something like that being possible, but it makes complete sense.

It’s not going to work on complex sites and it will be glitchy in general I imagine, but it should be able to crudely bash out the theme structure in a usable state, particularly for simple themes. It worked fairly well on my personal blog.
website development company in jaipur

Reply

Definitely converting html website to WordPress needs some valuable inputs where we need to carry on with genuine things. However, the overall procedure is really awesome and effective.

Reply


how to genuine window 7 ultimate 32 bits free , onenote 2007 activation , microsoft office publisher 2007 trial download , windows multipoint 2011 serial or key , windows 7 ultimate sp1 keys , product key of windows 7 professional sp1 , windows 10 activation issues 0xc004c003 , microsoft visio professional 2016 , sCrJ5H

Reply

Thanks for sharing informative article!!! Your article helped me a lot to understand the importance of PHP Training in Chennai to secure lucrative job in web design and development industry.

Reply

In the beginning (of the web) all websites were made with nothing but text and static HTML. Now though, over 20 years later, the web is a much different place. Websites are much more complex. They provide richer and more enjoyable experiences for site creators and visitors alike.
digitalopeners.com

Reply

Well Said, you have furnished the right information that will be useful to anyone at all time. Thanks for sharing your Ideas.
PHP Training in Chennai | PHP Course in Chennai

Reply

Professional Expert level Android Training in chennai, Android App Development
Android Training | Android App Development | Training in chennai

Reply

I like to post here something useful for the freshers and the experienced professionals out well who are looking for an Android App which helps you in developing your own Android App Development and also it provides Android training and placement in Chennai

Reply

I was working on the responsive design and this article provided me the lot of information about designing of website. Using this information i can create the look and feel websites.
PHP Training in Chennai | PHP Course in Chennai

Reply

Post a Comment