Html to wordpress conversion step by step

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

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.

The top of your “style.css” file must include the following commented information:
This is what registers your theme in WP.

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.

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

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.

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.

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.

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.

Replace Content with appropriate bloginfo() tags

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

…like this:

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.

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.

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:

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):

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”:

Create a blank “functions.php” file (or use a previous “functions.php” if you have one from another project)

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.

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…

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