Html to wordpress conversion step by step

HTML TO WORDPRESS CONVERSION

Html to wordpress conversion step by step

A step-by-step guide for converting your static HTML into a WordPress Theme.

Setup your WordPress environment.

1. Get Ready!

  1. You need to installed WordPress.
  2. You have an HTML/CSS/JS template ready to go.
  3. If you don’t have a template, feel free to use the demo and follow along

html

2. Creating your Theme Style.CSS File

Look at your HTML files. Make a file named “style.css” in the root of your project. In This you can describe your theme details, like theme name, author name and other repleted information.
stylecss
The top of your “style.css” file must include the following commented information:
This is what registers your theme in WP.

3. ScreenShot - Set your theme screenshot

You’ll need a screenshot.png of 300×225 resolution image in the root of your project. The image name should be screenshot.png, and mendetory to place this file in your root directory near your style.css file.

screenshot-shot

4. Create a index.php file or change your .html file to .php

“index.php” this file should be present on your root directory of theme folder.

indexphp

5. Activate the Theme

Upload all of that in your themes folder on your serve under theme folder.

And then go to your admin panel: www.yourdomain.com/wp-admin

In Appearance->themes you should see your theme.

“Activate” it. If there’s a problem and you don’t see your theme, you haven’t followed the steps above correctly, so review and try again.

6. wp_head(); - making Head Dynamic

Put wp_head(); right before the closing tag. Like this:

This tag is used to find ending for Head tag closing for many plug-ins to insert code into your head.

7. wp_footer(); - Making Footer Dynamic

Put wp_footer(); right before the closing tag. Like this:
This tag is used to find ending for footer closing for many plug-ins to insert code into your theme footer.

8. body_class();

Add the body_class(); on the opentag. Like this:
This will be helpful, as it generates lots of class helper classes for CSS styling later on.

9. bloginfo() - Adding/Making Css, Js and images files path

Replace Content with appropriate bloginfo() tags

For example, all of your CSS needs to be prepended with:

…like this:

10. header.php / footer.php

Divide your index.php into header.php and footer.php

Here’s what you’ll do. Take the code from your index.php and refactor it into 3 sections:

Put all the code of your header in header.php file like all css links, header tag, navbar etc. and same put all footer code in footer.php file.

In index.php use this include tag at the top
get_header(); and this one at the bottom get_footer();

This will call header adn footer files code into index file.
header-footer

11. sidebar.php

Simliar to header.php & footer.php you want to remove your HTML sidebar code, and put it in a file named sidebar.php

Then call the sidebar.php file using the snippet:

if your site doesn’t have a sidebar, you don’t need to do this.

The Loop

12. Install The Loop

Put your content inside “The Loop”. This is where the magic happens.
This goes before the area you want to loop:

And this goes after:

Check it out in action:
the-loop-wordpress

13. Loop Specific Template Tags

Some tags are only work inside the loop. For sure you’ll want things like:
This is a great one for adding a quick edit button (only seen by logged in users):

14. Permalinks

Use the_permalink(); to link to other pages in your site
The tag looks like this:
An example use case would be every blog heading’s “href”:

15. functions.php

Create a blank “functions.php” file (or use a previous “functions.php” if you have one from another project)
function.php
Functions.php – this file loads everytime you load a page on your site. It’s like a helper brain that WordPress consults.

By default you don’t need it. And in that case WordPress just goes about its business. But if we’d like to add some commands we can highly customize WordPress.

For beginners without much PHP experience, the functions.php file will be very confusing, as we can only write PHP code in here.

Therefore, I’ve tried to explain best I can how to do the basic necessary customizations. Beyond this, I’d suggest learning more about PHP Functions and WordPress

For now, create it, but keep it blank if you don’t know what to do.

16. Navigation Menu

The navigation setup is similar to the sidebar. First we need to register the menu in functions.php
That setups the menu in your WordPress admin panel And second we print out the navigation in our template where ever you’d like to place your navigation
If you wanted to customize this more?
Let’s say, wrap this in a “nav” container…
Or just leave it blank to remove the container…

17. Sidebar Widgets

Familiarize yourself with the sidebar: Customizing Your Sidebar
The FIRST thing is to Register Your Sidebar by adding this line somewhere in your functions.php file:
And then SECOND put this code in sidebar.php to print out your sidebar


About Vijay Dhanvai

A passionate blogger by heart and mind, I have been working in this field for 7 years now. A WordPress Professional, web developer and designer who intends to guide his readers about Web Design, WordPress, Blogging, Web Development, and more.

Leave a Reply