Newsletter Signup

Convert HTML To WordPress Theme

STATIC WEBSITES

HTML is the build of your website, or layout blocks you could say. Static is a term for directly edited .html files that require endless amounts of man hours to create and manage new sections / or areas. This method was very beneficial, “In the 80’s”… Now days, Websites can be seemlessly integratged within (CMS) Content Management Systems that allow top to bottom control with simple user interfaces. Its time to Convert HTML to WordPress!

DYNAMIC HTML WEBSITES

Dynamic HTML is more of a processed form of HTML, Making it simple to make small changes to effect every page equally within seconds, rather making one change and having to repeat that same edit to countless pages. This process can take the workload from 300% to 30%. Find out how you can convert HTML to WordPress and make your website even more powerful.

WORDPRESS WEBSITES

MediaShrinx chooses WordPress for 90% of our clients. Doing so , our clients can log into the dashboard of thier custom website and manage thier sites themselves. After you have been through the convert HTML to WordPress process, WordPress gives you the abillity to create and manage pages, blog post, slideshows, videos, and more straight out of the box! Thier is unlimted options that can be added to your custom site including custom color changers, Custom font selectors, Layout options and more all wrapped up in a smooth easy to use, dashboard interface.

convert html to wordpress

Want to convert HTML to WordPress yourself?

Mediashrinx will show you how to convert your static HTML website to WordPress. This quick tutorial will assume that you know how to use FTP clients or have a localhost setup to convert HTML to WordPress. You must have APACHE PHP installed on your computer in order to preview your edits on your computer. We use XAMPP for our localhost system and recommend it for others. Again were not going into detail on setup of localhost in this tutorial.

When you convert HTML to WordPress, your converting static HTML into PHP. PHP is a programming language that takes time to learn but makes editing, building, and managing a website a breeze. Understand when you convert to PHP, you will still be using HTML,CSS & JS inside your PHP files. But you can store chunks of HTML inside a single PHP file and call it into other PHP files to re-use areas within your website. For instance on a static HTML website, you have to edit every page in your site if you want to make a change to your header, footer or sidebar. With PHP, you separate your header, footer & sidebar from the pages. Allowing you to edit your header.php file and changes would effect every page in your website. So enough about PHP, Let’s convert HTML to WordPress!

We like to work in stages to ensure we organize our files. At this point we need to have our copied HTML files inside a new site folder within HTDOCS if using XAMPP, or a sub domain if using a remote server. Inside that folder you will may have an Index.html or home.html and other pages like about.html, services.html, etc. Great!

Because every developer writes code a little different, we provided a Free HTML template that is simple to work with. This free html template is not for use however feel free to use for whatever. We are using the free html template to cover this tutorial. You can download the template to follow along or implement these changes to your own template.

Requirements to convert HTML to WordPress yourself.

So first rule is do not start editing your live or main version of your current site. ALWAYS create a backup of your HTML site that your about to convert. Create a new site folder and place all your HTML files inside. You need the following tools to get started.

Converting your html to PHP for WordPress

The first step is to change the extension on your index.html to index.php. Whoa… That is all it takes to turn a HTML document to a PHP file?Yes, however it didn’t really help us much yet but just wait. Let’s start with separating your header, footer, and sidebar from the index file.

Let start by selecting the entire header area from first line down to the end of the header wrap div. Now we need to create a new file called header.php. Open your header file then cut and paste the header html from your index file into it your header.php and save. Example below.

converting-html-to-wordpress
index-without-header1
wordpress header template php

Do the same cut and paste action to the Sidebar. Grab the beginning of the sidebar div to the the end of the sidebar. Now do the same for your footer. Your index should be almost empty with nothing but content area.

link-your-php-template-files

Once you have the Header, Sidebar & Footer to you site separated, you need to include them into your Index file. See below how we include php files. Be Sure to do the header at the top too!

link-your-php-template-files

AFTER CONVERTING HTML TO PHP

Now that we have turned our static html pages into PHP files we can move further into WordPress Core features that are required in each and every WordPress Theme. Hope your learning how we convert HTML to WordPress. Now this part is easier if you have your developer version of WordPress installed and ready.

WordPress Header Requirements

To convert HTML to WordPress there is two PHP tags that need to be added. WordPress generates css,js,meta tag & more that need to be in the Header & Footer. The header requires:

Header Snippet:

Footer Snippet:

header-snippet1footer-snippet1

How to setup WordPress

Setting up WordPress is simple. You need to download the Free CMS  first. Once downloaded, Open your site folder that we have been working in. Create a new folder and name it anything without spaces. Example, MyNewTheme or Awesometheme…. the more original the better. Place all the PHP file that we are working on inside that folder. We don’t want those files getting mixed up with the WordPress files. Now your site folder should only have a folder inside with your PHP files inside. If all looks good, we need to extract the files from the downloaded WordPress zip and place those inside the main site folder… if correct you will have 4 folders and many files in your main website folder.

[YourThemeFolder] (with PHP files we have been editing)

[wp-admin][wp-content][wp-includes]

Plus all other files.

If that’s how your folder looks, we need to go ahead and move your theme folder inside your WordPress. Located inside the wp-content folder, look for the themes folder. place your theme folder inside.. not just the files in the folder but the folder itself.

Next you need to create a MySQL database either inside localhost or on your hosting providers control panel. Name it, make sure you have a user with “All Privileges “. Once completed, open a browser tab to the sites address. Yours should be either localhost/sitefolder or yourdomain.com for example. You will get a prompt for your WordPress setup if copied over correctly. It ask you for database values to connect automatically to the MySQL database you just created.  If your MySql info is correct it will ask you a few settings for your WordPress and say “All Right Sparky!” if everything was done correct.

Setup your style.css file

WordPress also requires a comment with details about the template to be added to your style.css. Its rather simple. Just add the following comment:

/*
Theme Name: Your ThemeName
Theme URI: http://www.Mediashrinx.com
Author: Mediashrinx
Author URI: http://mediashrinx.com/
Version: 1.0
Description: A custom WordPress theme built.
License: GNU General Public License v2 or later
*/

You can change these values to match your development info.

Activate your WordPress Theme

At this point of convert HTML to WordPress, your WordPress theme can now be activated. Access your WordPress site at yourdomain.com/wp-admin … login with the username and password you created at installation. Once logged into the dashboard you will look in the WordPress menu on the right and click the “Appearance” tab. That will direct you to the themes page where you can select and activate your template. You haven’t created a thumbnail for your theme but you will see the title of it. If you active your theme and everything loads smoothly, Perfect!  If not, look back through you files. The two requirements are index.php and style.css.

Now we have our theme activated, let preview it!

correct-wordpress-header1

CSS not showing in WordPress?

Chances are your webpage loaded but didn’t load any CSS due to URL structure of WordPress. Let’s fix that!

Your URL needs to always be controlled by using WordPress PHP functions during converting HTML to WordPress.

Please add “echo” before bloginfo();

Example.

footer-snippet1

Include Header,Sidebar & Footer the WordPress way?

WordPress has core PHP functions that handle many typical jobs. The header, sidebar & footer has built in functions to include them on the page.

get_header();

get_sidebar();

get_footer();

Just replace the includes we created originally.

Perfect Starting point for WordPress Theme!

Now time to register the page title and content from the WordPress backend. In order to do so, we need to add a simple PHP tag to the page title. Then a PHP loop or the “WordPress loop” in order to pull the text and page content.

wordpress-index-page-template1
WordPress Theme Development

Duplicate your WordPress Index

To convert HTML to WordPress for your site, all pages need to work! Duplicate your index.php and save a copy named page.php & single.php. You also need to as the comment to tell WordPress what template.

This picture is what your page.php should look like.

WordPress Theme Development

WordPress Nav Menus

Convert HTML to WordPress but we have to use the WordPress Menu Functionality. This image shows how to replace the menu in your header.php.

This picture is what your header.php should look like.

WordPress Functions File

WordPress is built to look for “functions.php”. Create a new PHP file in your theme folder named functions. Below is the functions you can place into your functions.php to register the main navigation.

register-wordpress-menu2

Connect Your WordPress Logo Correctly

Open up your header and lets add the URL function to fix link and even add image.

correct-wordpress-header1

Above you will see I also made edits to display page title at the top and URL to home page as the logo link. Plus changed other functions by adding “echo” before the function.

Beyond Convert HTML to WordPress

This tutorial is to show how much work goes into basic convert HTML to WordPress. Now we have created a super basic WordPress Theme using a simple HTML template. After this point your on your own to convert HTML to WordPress. If you feel like you can go further than this on your own, enjoy! If you feel like you would rather have us convert your website to WordPress, contact us to converting HTML to WordPress.

We can convert a website within 4 to 10 business days and have all WordPress key features ready to use.

Hope You enjoyed this Tutorial.

2016-11-09T22:57:06+00:00

About the Author: