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:

<?php get_header(); ?> This is my first PHP code </body>tag. <?php get_sidebar(); ?> <?php get_footer(); ?>

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.

<?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <div id=”post-<?php the_ID(); ?> ” <?php post_class(); ?>> <div> <div> <?php the_time( ‘M j y’ ); ?></div> <h2> <a href=”<?php the_permalink(); ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2> <div> <?php the_author(); ?></div> </div> <!–end post header–> <div> <?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> <div> <?php comments_popup_link( ‘Leave a Comment’, ’1 Comment’, ‘% Comments’ ); ?></div> </div> <!–end post footer–> </div> <!–end post–> <?php endwhile; /* rewind or continue if all posts have been fetched */ ?> <div> <div> <?php next_posts_link( ‘Older Entries’ ); ?></div> <div> <?php previous_posts_link( ‘Newer Entries’ ); ?></div> </div> <!–end navigation–> <?php else : ?> <?php endif; ?>

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.

Read more