So it is almost time to welcome the delightful festivals – Thanksgiving Day, Black Friday, and Cyber Monday....
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 –
'fetch' – to run PHP out and retrieves a
'stick'. In order to know, how exactly it works, you have to open your WordPress installation and click on
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:
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:
In this code,
<pre style="margin: 0; line-height: 125%"> 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
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.
Lastly, you have to enclose this information within block comments
How to Set Up CSS?
Ensure you have an active TwentyTwelve theme. After that, you have to navigate
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
(header.php), Main Index Template
(index.php) and Footer
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
<div> 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
<?php…?> 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
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.
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.
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
'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.