Numerous organizations actually depend on basic HTML websites for their online presence. These HTML websites are normally static, implying that you’ll have to alter the code to change even a minor detail on the website. To keep away from that, however, you can convert static html to a wordpress theme. If you know about both HTML and WordPress, then, at that point, this tutorial is beneficial for you. If you are a beginner, have a go at doing this with a fake website on your local host like XAMPP.
Converting HTML Site to WordPress Theme
Step 1: Prerequisites
I trust you, as of now, have WordPress introduced on your localhost like XAMPP (i.e., your PC). If not, we have effectively covered a nitty-gritty guide to assist you with introducing and set up WordPress locally.
Step 2: Create Your Theme Folder
For this tutorial, I’m utilizing XAMPP, and my WordPress site is introduced under the docs envelope. To make a WordPress theme, you need to get to your themes envelope and make another organizer.
Presently, open XAMPP envelope > htdocs > WordPress organizer (for my situation it’s trying) > wp-content > themes.
Step 3: Create PHP Files
The recently made theme envelope is vacant, and you need to make a few records to make it useful. For this, you need to dispatch your code editor (VS Code) and open the whole WordPress theme organizer (for my situation, Farhan-wordpress-theme). Presently make the accompanying fundamental WordPress documents to sort out your theme better.
From your HTML theme (downloaded above), duplicate the resources organizer (CSS, JS, and pictures envelopes) to your new WordPress theme organizer. In the wake of moving to your new WordPress theme organizer, it will resemble this:
Step 5: Activate a New WordPress Theme
Presently, you have added the significant organizers that are needed for any wp theme. Then, open your WordPress site on your program and sign in to your Dashboard. Explore to Appearance> Themes, and you will see your new theme has been added to this part.
This theme looks unfilled. To add the data and standard for the recently made theme, open your style.css document (made prior), glue the accompanying code, and save it (ctrl+s). For the flag, you need to add a picture document to your new theme envelope. The picture size should be 800 by 600, and the picture name should be Screenshot (png design).
When you add the screenshot.png document, invigorate your wp-administrator dashboard, and the picture flag will appear. Presently, you can see the theme data when you click on the flag. Then, just snap on Activate.
Step 6: Convert HTML Code into Header, Index, and Footer
The header, footer, and principle body are set apart with HTML remarks to handily add to your WordPress PHP records and convert the code. Presently duplicate the header code from the index.html of the downloaded theme into the header.php document you made in the WordPress themes organizer. You need to duplicate from <!DOCTYPE html> till </header> and save it. Essentially, Copy over the footer and fundamental body components from index.html into footer.php and index.php individually.
For the footer, duplicate from <footer> (for my situation, there’s a class name characterized in the footer tag, so don’t get baffled) till </html> into the footer.php record and save it. Then, duplicate all the code after the </header> tag and not long before the <footer> to index.php and save it.
- Add WordPress work get_header() at the top and get_footer() toward the finish of the index.php document.
- The get_header() is an inherent capacity that brings in header.php, and comparatively, get_footer() is a capacity that calls footer.php.
- Add the accompanying code at the top of the index.php document and save it.
- To bring in a footer, embed the accompanying code toward the finish of the index.php code and save it.
- Visit your site, and you will see something like this.
Step 7: Configuring CSS
The way that your theme looks peculiar is because the CSS records are not applied to the theme. You have, as of now, duplicated the CSS organizer from the HTML theme to your WordPress theme envelope. Presently, you need to call these CSS records to finish the Appearance of the theme. Remember that the names of your CSS records may differ — so twofold check before directing this interaction. You will discover your CSS templates in the header.php record, so you need to look for “rel=” stylesheet” ” by CTRL+f.
From that point forward, eliminate the Google textual style templates because we needn’t bother with them. Presently, I simply need to enroll the real CSS template for example <link rel=”stylesheet” href=”assets/css/style-starter.css”>. WordPress doesn’t comprehend the customary CSS template structure; that is why I need to enqueue and register the CSS template. Go to the functions.php record and add the accompanying code. The wp_register_style will assist you with enrolling your CSS template.
The get_template_directory_uri() . ‘/href’ is utilized to get the current format directory way. It will link the current way with the particular record. So here, you need to characterize the area of your CSS document (href).
- You can perceive how I characterized the way of that CSS document: get_template_directory_uri() . ‘/resources/css/style-starter.css’.
- Presently, we can eliminate the CSS template connect from the header.php record and supplant it with the accompanying code and save the document.
- The wp_head() is a fundamental WordPress snare that is characterized under the <head> </head> part of header.php.
At the point when you visit your WordPress site, you will see that the CSS records are enqueued to your new WordPress theme, yet at the same time, the plan isn’t all together. It is because you haven’t arranged the JS scripts yet. In the header.php, I have one CSS template, and I enrolled it just in functions.php. Yet, imagine a scenario where you have different templates.
All things considered you need to characterize wp_register_style() for each template. Relax! You can take a model from the following stage, where I have various JS scripts. The cycle is something similar, so it will clear your inquiries and assist you with seeing how you will do that work.
Then, you need to open your functions.php record and glue the accompanying code:
You can see that the code structure is equivalent to what you did before in the CSS setup part. Be that as it may, here, you will utilize wp_register_script rather than style. You register and enqueue every JS document in a similar capacity.
Presently, you can eliminate all the JS script joins (I have five) from the footer.php record, then, at that point, glue the accompanying line of code toward the finish of the code (above </body> tag) and save the document. Presently, open your site on your program, and you will see that the new WordPress theme is turned out great, yet, it has a couple of missing pictures.
Step 9: Configure Images
- This interaction is direct, and here, you need to characterize the way of the pictures.
- To start with, open your index.php document and quest for “<img src=” by “CTRL+f”. This will assist you with tracking down all the picture records that you have. For my situation, I have eight, and here I need the way for every one of them.
- To give away pictures, add the accompanying PHP code inside src labels and save the record.
- Presently, your theme will seem like the HTML theme and get every one of the pictures.
- In any case, it will need WordPress highlights, for example, changing site title and WordPress route menu.
Step 10: Enable Custom Title in WordPress
If you go into the WordPress administrator board and change the website’s title, it won’t influence the title of the webpage. To empower this element, you can utilize WordPress worked in work blog info() with the boundary “name” between the title labels in the header.php record and save the document.
Furthermore, you need to utilize WordPress worked in work blog info() with the boundary “name” between the h1 labels in the header.php document and save the record.
Presently, your theme will get the title that you set in Settings – > General-> Site Title inside the WP-administrator board.
Step 11: Add WordPress Navigation Menu in WordPress
When you visit the WordPress administrator of your site and explore Appearance, you won’t see a possibility for Menu. You need to empower Menu first by adding the accompanying line of code in the functions.php document.
This will empower the Menu usefulness in your theme, yet it needs some setup to oversee menus from your WP dashboard. In the first place, discover where your HTML theme route menu is and afterwards supplant it utilizing WordPress worked in work wp_nav_menu(); In this theme, the header.php contains the route menu.
I trust this article assisted you with seeing how to change over an HTML format or site to a WordPress theme. This is a point by point tutorial where I’ve covered all the steps to convert static html to a wordpress theme.