How to Convert HTML to WordPress Theme Effectively?

commas-left

Are you looking for the tutorial that shows how to create a simple WordPress theme?

In this post, we have mentioned step-wise guide that helps you to learn how to create a WordPress theme from an existing HTML file with an ease.

commas-right

Html to WordPress

Are you searching for the tutorial of converting HTML into WordPress theme? Your search is over now as we have mentioned step-wise tutorial that helps to convert a static HTML website to WordPress theme.

WordPress, the most popular blogging platform, is used by 70 million websites globally. Being a versatile, WordPress is capable to handle themes / templates. One can have an ability to convert WordPress theme from an existing HTML file using his/her basic knowledge of HTML as well as CSS.

WordPress is based on MySQL, the database backend and PHP, a server side scripting language. The entire content is stored in a MySQL database that called on by passing a PHP function. You can consider PHP as your favorite dog and your content is to be pile of tennis balls.

You just only have to give a command –

1
'fetch'

– to run PHP out and retrieves a

1
'stick'

. In order to know, how exactly it works, you have to open your WordPress installation and click on

1
Appearance

>>

1
Editor

, and just look at your theme’s Main Index Template (index.php) file.

You will be see some code enclosed within PHP tags that call header like:

<?php get_header() ?>

Such PHP tag tells WP to recover all the content for the website header. Now, if you are opening Header.php, you will get a link to the website stylesheet:

<link rel=stylesheettype=text/cssmedia=allhref=<?php bloginfo(stylesheet_url); ?>/>

In this code,

1
&#60;pre style="margin: 0; line-height: 125%"&#62;

is an integral WordPress function that helps to directs PHP to recover the blog’s default stylesheet, which is stored as Style.css in the root directory.

The stylesheet helps to know how to control your website looks and feels. We are considering HTML as the skeletal system of the website while CSS as the muscle and fat and clothes that make it complete. Using that way, we are creating a unique theme from scratch.

One can have to use WordPress’ default TwentyTwelve theme to develop WordPress theme. For that, a copy of the HTML is needed to convert into WordPress. Notepad will be used for editing the file; alternatively, one can also use other text editor like NotePad++ or even a web editor like Dreamweaver.

It’s time to Laying the Foundation: Files and Folders

Firstly, you have to create a new folder on your desktop and named as ‘MyWPTheme’ or whatever you want to. After that, you have to create two blank text files in the folder with named as

1
style.css

and

1
index.php.

Note: You have to save as ‘All Files’ in Notepad.

The primary CSS file for the theme. Index.php is style.css which is similar to Index.html that used in HTML pages. This will also include the code of the main content of the page. You have to add below given information with a comment block in the style.css file to help WordPress identify your theme.

Theme Name:
Theme URI:
Description:
Version:
Author:

Lastly, you have to enclose this information within block comments

1
(/*…*/)

How to Set Up CSS?

Ensure you have an active TwentyTwelve theme. After that, you have to navigate

1
Appearance

>>

1
Editor

in your WordPress admin panel and open the style.css file. In next step, you have to copy the file to the style.css file that you have created in the theme folder on your desktop. It will be edited later as it will serve you the style foundation for our WordPress theme.

Setting up PHP Files

While you are opening the WordPress theme editor, you will find each theme is divided into separate elements like Sidebar

1
(sidebar.php)

, Header

1
(header.php)

, Main Index Template

1
(index.php)

and Footer

1
(footer.php)

.

It is one of the basic structures of WordPress theme that followed by this theme as well. First of all, you have to divide your HTML code into a header, sidebar, content area and footer. One can already have used

1
&#60;div&#62

tags to divide these sections in your HTML code.

In next step, you have to create three extra files, i.e. header.php, sidebar.php and footer.php in the theme folder. Now, it’s time to copy the content of each of the HTML sections into their respective PHP files, i.e. Sidebar into sidebar.php, Header section goes into header.php, Main Content into index.php, etc.

Now, you have to login into your WordPress admin panel and open the theme editor. Further, you have to open header.php file and copy all the PHP code (i.e. code within the

1
&#60?php…?&#62

tags) and paste it into header.php file BEFORE the HTML.

Do same process for sidebar.php, index.php, and footer.php. Copy the PHP code from the TwentyTwelve theme and paste it into respective PHP files in your theme directory. Ensure to paste it before the HTML.

It is considered as the barebones structure of the WordPress theme that can be called on individual elements in our index.php file for developing an entire page.

Fetching Page Elements

To fetch the page elements, you have to open the index.php file that already created in your theme folder. Now, you have to add the below given code to the top of the file after the

1
&#60;body&#62;

tag.

<?php get_header(); ?>

A built-in WordPress function is used by this code to fetch and display all the code from the header.php file. Same code will be used to get content for the sidebar and footer.

Now, you have to add below given code to the bottom of your index.php page before the tag.

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Your first WordPress theme is ready!

However, this theme is a blank page at the moment and you have to add content in it by using WordPress’ famous ‘loop’ function.

How to Content in WordPress Theme?

A string of code, which is better known as ‘The Loop’ is used by WordPress that helps to pull content from a database and display it within a theme. You are free to start blogging in your shiny new WordPress theme after installing the loop function.

You have to add the below given code into your index.php file to use the loop. You have to ensure to add code in the that you are using to hold all your main content.

<?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; ?>

Note: If you don’t understand this code then ensure to copy the code as-is in your main content div.

It’s time to copy and display content from a database from a fully functional WordPress theme. Just you have to do is to activate the theme. For that, you have to open your favorite FTP client and log in to your website directory.

Now, navigate to wp-content >> themes folder. After completing uploading task, you have to login in your WordPress admin panel and open Appearance >> Themes tab.

You will see your theme here. Lastly you have to click on

1
'Activate'

to see your first custom WordPress theme!

This is one of the simplest guides to convert your HTML site in to WordPress theme. If you have more idea about conversion, then share with us through comment section.

Those, who are looking to convert HTML site to WordPress and searching for professional developers, can have PerceptionSystem the best option. Perception System is one of the leading web development companies, serving WordPress development service through expert’s hands. for more info Visit Perception System’s Officiel Website Here

If you’re interested in converting PSD file into html, we also have a guide on Converting PSD Files into HTML.

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA

*