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.
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.
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!
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:
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)
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 URI: http://mediashrinx.com/
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!
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();
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.
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.
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 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.
Connect Your WordPress Logo Correctly
Open up your header and lets add the URL function to fix link and even add image.
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.