Having an HTML-based website is still relevant till today and is not a bad choice if you do know how to code.
HTML is a really powerful markup language and is the building block of every website on the world wide web today but it is a different story when you need to update content.
On a large website, if you need to add a new blog post or update even the slightest information on the hero or footer, you have to go through a bunch of HTML and CSS files or one big index.html file to find the HTML tag or element rendering these content to make your changes.
But it can be easier with content management systems.
With WordPress, you can convert your HTML website to a WordPress theme which allows you to update certain elements on your website without needing to write any code. WordPress offers many plugins and widgets to extend exciting features.
In this article, we will cover how to convert your HTML-based website to a WordPress.
Let’s get started!
Overview of WordPress Themes and their Structure
A WordPress theme’s core components include a number of PHP source files (often referred to as template files), stylesheets, and localization information, as well as optional JavaScript files and graphics.
We explain which components of a WordPress theme you should be aware of, the roles they play, and how the various fundamental pieces interact.
Template files
All WordPress themes work with template files. A WordPress theme won’t be functional if there are no files like the index.php or style.css files.
Various kinds of template files are found in WordPress theme projects that represent different contents and make most of the function of the website.
Some of these template files include:
- styles.css: which contains a description of the website, author, version, and link to your license if available.
This can also act as the main file for your custom website design. - index.php: This is another mandatory file needed in a WordPress theme.
While in more complicated themes different aspects are defined in separate template files like header.php, footer.php, or sidebar.php, in simpler themes index.php frequently comprises the majority of the complete source code, including the HTML root directory, header, footer, sidebar, and navigation.
This is done so that the index.php file can only serve the purpose of the fundamental framework. - header.php: When header.php is used in WordPress, this template file typically contains important details about a website, such as a doctype, the opening HTML tag and the head element (including meta tags), links to stylesheets and scripts, and more.
Additionally, the header is typically opened before the body tag. The header.php file allows for outsourcing of the theme’s visible header, which includes the navigation. - footer.php: A companion to header.php is the footer.php file. The website’s viewable footer area can be found here.
The body tag and the HTML tag are both closed in the footer.php file. - page.php: WordPress themes are designed to display blog content chronologically using page.php.
Many website owners also offer particular content as static webpages, such as “about me” sections or contact information, in addition to dynamic content.
By generating unique pages that are independent of the layout and design of other template files, such as index.php or single.php, WordPress page.php enables this. - 404.php: You can use the template file with the same name to generate a 404 error page for your WordPress blog.
You may add a WordPress search bar to your website to allow users to look for the specific information they require.
WordPress Tags
These are special tags used within WordPress themes to load template files.
We will be using some of these include tags in upcoming sections of this article.
Some of these tags include:
get_header()
get_footer()
get_sidebar()
WordPress hooks
Template hooks, commonly referred to as “action hooks,” are interfaces that link themes with specific plugins or functionality of weblog software. The WordPress core already includes the majority of these interfaces.
This is how a theme developer or user can declare an action prior to the output beginning or following the conclusion of a database call.
For instance, relevant data can be incorporated into the sidebar, footer, or header.
We have talked about the overview and structure of WordPress themes and what they comprise. In the next section, we will start building our project. Let’s delve in.
Downloading the HTML Template
We will be using a free template from freehtml5 for this project. You can choose your own HTML template while following the tutorial.
After downloading the HTML template, extract it as they are usually .zip files.
Proceed to open it with any integrated development environment (IDE). You can run the code and see what the website should look like.
If you are using VS code as your IDE, you can install the live server extension.
You can immediately view the website and also see changes when you edit your code immediately.
Create your Theme Folder
There are various ways to install and develop WordPress locally. For this tutorial, I will be using the stack method which is Xampp and WordPress.
If you do not have WordPress and Xampp already installed, check out how to install WordPress on Xampp.
To create a theme folder, we need to access our WordPress folder and it is stored in the /htdocs of our xamppfiles folder.
So go to htdocs > wordpress > wp-content. You can now create your themes folder inside the wp-content folder.
Inside the themes folder, there you can create your project for any website you want. The name of my project folder is intelivita.
Inside this folder, you can start creating the standard files needed to run a WordPress theme.
- front-page.php
- styles.css
- footer.php
- header.php
- page.php
- function.php
- 404.php
- index.php
- search.php
We won’t be using some of the files but they need to be there. It is just a standard or a requirement.
Adding our Template Section to PHP files
Go to your style.css file. This file will hold meta data about your theme.
You can add the following or add more as you need.
/*
Theme Name: Blog theme
Theme URI: https://wordpress.org/themes/intelivita/
Author: Tuhin Bhatt
*/
Next go to your WordPress admin dashboard to activate your custom theme.
On the navigation pane, click the Appearance button and click on Themes like the picture below:
Next, you need to activate your theme if it is not activated. See the image below:
My theme is already active but your theme should have a different text on the marked button which says “Activate Theme”.
Next, click Pages on the navigation pane and add a new page called Home. See the image below:
Next, go to your Settings page on the navigation pane and click Reading from the dropdown. See the image below:
Next, click choose the static page as the option and choose your homepage from the drop-down as Home. Home is the new page you created previously.
Click the save button at the bottom of the page and you are ready to go.
Next, under the Settings Page, click Permalinks from the dropdown.
Under the permalink structure, select Post name and click the save button at the bottom of your page. See the image below:
Next step, In your header.php file, add the following code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Author</title>
</head>
<body>
<!-- Navigation -->
<nav class="site-navigation">
<div class="site-navigation-inner site-container">
<img src="<?php bloginfo('template_url'); ?>/images/site-logo.png" alt="site logo">
<div class="main-navigation">
<ul class="main-navigation__ul">
<li><a href="#">Homepage</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
</ul>
</div>
<div id="myBtn" class="burger-container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>
</div>
</nav>
We will be adding the script tags and stylesheets inline since it is not a big project.
There are many other ways aside from using the function.php file.
Inside your header file, add the following line of code to your head tag:
<link href="<?php bloginfo('template_url'); ?>/css/style.css" rel="stylesheet" />
<link href="<?php bloginfo('template_url'); ?>/css/slick.css" rel="stylesheet" />
<script src="<?php bloginfo('template_url'); ?>/js/jquery.min.js">>/script>
The bloginfo('template_url) allows us to link or add our style sheets and jquery files to our theme.
If you check the index.html file, another section where scripts are added to your website is at the footer.
Usually, this is where your main JavaScript files are loaded.
Inside your footer.php, add the following HTML code:
<!-- Footer -->
<footer class="site-footer">
<div class="site-container">
<div class="footer-inner">
<div class="footer-info">
<div class="footer-info__left">
<img src="<?php bloginfo('template_url'); ?>/images/footer-img.jpg" alt="about me image">
<p>Read more about me</p>
</div>
<div class="footer-info__right">
<h5>Get In Touch</h5>
<p class="footer-phone">Phone: +1 306 450 7119</p>
<p>Email : sales@intelivita.com</p>
<div class="social-icons">
<a href="#" target="_blank" rel="noopener"><img src="<?php bloginfo('template_url'); ?>/images/social-twitter.png" alt="social icon"></a>
<a href="#" target="_blank" rel="noopener"><img src="<?php bloginfo('template_url'); ?>/images/social-pinterest.png" alt="social icon"></a>
<a href="#" target="_blank" rel="noopener"><img src="<?php bloginfo('template_url'); ?>/images/social-youtube.png" alt="social icon"></a>
<a href="#" target="_blank" rel="noopener"><img src="<?php bloginfo('template_url'); ?>/images/social-twitter.png" alt="social icon"></a>
</div>
</div>
</div>
<div class="footer-contact-form">
<h5>Contact Form</h5>
<form class="contact-form">
<div class="contact-form__input">
<input type="text" name="name" placeholder="Name">
<input type="email" name="email" placeholder="Email">
</div>
<textarea></textarea>
<input type="submit" name="submit" value="Submit" class="submit-button">
</form>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="site-container footer-bottom-inner">
<p>(c) 2019 Author | Design by <a href="https://freehtml5.co/" target="_blank" rel="noopener">freehtml5.co</a> | All rights Reserved.</p>
<div class="footer-bottom__img">
<img src="<?php bloginfo('template_url'); ?>/images/footer-mastercard.png" alt="footer image">
<img src="<?php bloginfo('template_url'); ?>/images/footer-paypal.png" alt="footer image">
<img src="<?php bloginfo('template_url'); ?>/images/footer-visa.png" alt="footer image">
<img src="<?php bloginfo('template_url'); ?>/images/footer-fedex.png" alt="footer image">
<img src="<?php bloginfo('template_url'); ?>/images/footer-dhl.png" alt="footer image">
</div>
</div>
</div>
</footer>
<!-- Footer end -->
</body>
</html>
After your footer tag, add the following code:
<script src="<?php bloginfo('template_url'); ?>/js/slick.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/main.js"></script>
We have successfully added our scripts to our application. The stylesheets get to load first before the JS files.
That is why the <script> tag for JS is at the footer.
Add other sections
Recall that we have only added code to the style.css, header.php, and footer.php. We also have a few left which include the front-page.php.
Add the following code to your front-page.php file:
<?php get_header();?>
<!-- Top banner -->
<section class="fh5co-top-banner">
<div class="top-banner__inner site-container">
<div class="top-banner__image">
<img src="<?php bloginfo('template_url'); ?>/images/top-banner-author.jpg" alt="author image">
</div>
<div class="top-banner__text">
<div class="top-banner__text-up">
<span class="brand-span">Author</span>
<h2 class="top-banner__h2">Smith</h2>
</div>
<div class="top-banner__text-down">
<h2 class="top-banner__h2">James</h2>
<span class="brand-span">Author, Writer, Traveler</span>
</div>
<p>One Man. One Mission. Can He Go Beyond?One Man. One Mission. Can He Go Beyond?</p>
<a href="#" class="brand-button">Read bio > </a>
</div>
</div>
</section>
<!-- Top banner end -->
<!-- About me -->
<section class="fh5co-about-me">
<div class="about-me-inner site-container">
<article class="portfolio-wrapper">
<div class="portfolio__img">
<img src="<?php bloginfo('template_url'); ?>/images/about-me.jpg" class="about-me__profile" alt="about me profile picture">
</div>
<div class="portfolio__bottom">
<div class="portfolio__name">
<span>J</span>
<h2 class="universal-h2">hone Smith</h2>
</div>
<p>Jhone Smith is a short story author, novelist, and award-winning poet.</p>
</div>
</article>
<div class="about-me__text">
<div class="about-me-slider">
<div class="about-me-single-slide">
<h2 class="universal-h2 universal-h2-bckg">About me</h2>
<p><span>H</span> e has work appearing or forthcoming in over a dozen venues, including Buzzy Mag, The Spirit of Poe, and the British Fantasy Society journal Dark Horizons. He is also CEO of a company, specializing in custom book publishing and social media marketing services, have created a community for authors to learn and connect.He has work appearing or forthcoming in over a dozen venues, including Buzzy Mag, The Spirit of Poe, and have created a community for authors to learn and connect.</p>
<h4>Author</h4>
<p class="p-white">See me</p>
</div>
<div class="about-me-single-slide">
<h2 class="universal-h2 universal-h2-bckg">About me 2</h2>
<p><span>H</span> e has work appearing or forthcoming in over a dozen venues, including Buzzy Mag, The Spirit of Poe, and the British Fantasy Society journal Dark Horizons. He is also CEO of a company, specializing in custom book publishing and social media marketing services, have created a community for authors to learn and connect.He has work appearing or forthcoming in over a dozen venues, including Buzzy Mag, The Spirit of Poe, and have created a community for authors to learn and connect.</p>
<h4>Author</h4>
<p class="p-white">See me</p>
</div>
</div>
</div>
</div>
<div class="about-me-bckg"></div>
</section>
<!-- About me end -->
<!-- Books and CD -->
<section class="fh5co-books">
<div class="site-container">
<h2 class="universal-h2 universal-h2-bckg">New Books And CD</h2>
<div class="books">
<div class="single-book">
<a href="#" class="single-book__img">
<img src="<?php bloginfo('template_url'); ?>/images/books-1.jpg" alt="single book and cd">
<div class="single-book_download">
<img src="<?php bloginfo('template_url'); ?>/images/download.svg" alt="book image">
</div>
</a>
<h4 class="single-book__title">Olivani</h4>
<span class="single-book__price">$15.00</span>
<!-- star rating -->
<div class="rating">
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
</div>
<!-- star rating end -->
</div>
<div class="single-book">
<a href="#" class="single-book__img">
<img src="<?php bloginfo('template_url'); ?>/images/books-2.jpg" alt="single book and cd">
<div class="single-book_download">
<img src="<?php bloginfo('template_url'); ?>
<img src="<?php bloginfo('template_url'); ?>/images/download.svg" alt="book image">
</div>
</a>
<h4 class="single-book__title">Molleon's Life</h4>
<span class="single-book__price">$22.00</span>
<!-- star rating -->
<div class="rating">
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
</div>
<!-- star rating end -->
</div>
<div class="single-book">
<a href="#" class="single-book__img">
<img src="<?php bloginfo('template_url'); ?>/images/books-3.jpg" alt="single book and cd">
<div class="single-book_download">
<img src="<?php bloginfo('template_url'); ?>/images/download.svg" alt="book image">
</div>
</a>
<h4 class="single-book__title">Love is Love</h4>
<span class="single-book__price">$25.00</span>
</div>
<div class="single-book">
<a href="#" class="single-book__img">
<img src="<?php bloginfo('template_url'); ?>/images/books-4.jpg" alt="single book and cd">
<div class="single-book_download">
<img src="<?php bloginfo('template_url'); ?>/images/download.svg" alt="book image">
</div>
</a>
<h4 class="single-book__title">Give Me Also</h4>
<span class="single-book__price">$30.00</span>
</div>
</div>
<div class="books-brand-button">
<a href="#" class="brand-button">View more</a>
</div>
</div>
</section>
<!-- Books and CD end -->
<!-- Counter -->
<div class="fh5co-counter counters">
<div class="counter-inner site-container">
<div class="single-count">
<span class="count" data-count="50">0</span>
<div class="single-count__text">
<img src="<?php bloginfo('template_url'); ?>/images/counter-1.png" alt="counter icon">
<p>Books</p>
</div>
</div>
<div class="single-count">
<span class="count" data-count="600">0</span>
<div class="single-count__text">
<img src="<?php bloginfo('template_url'); ?>/images/counter-2.png" alt="counter icon">
<p>Pages</p>
</div>
</div>
<div class="single-count">
<span class="count" data-count="2000">0</span>
<div class="single-count__text">
<img src="<?php bloginfo('template_url'); ?>/images/counter-3.png" alt="counter icon">
<p>Sales</p>
</div>
</div>
<div class="single-count">
<span class="count" data-count="125">0</span>
<div class="single-count__text">
<img src="<?php bloginfo('template_url'); ?>/images/counter-4.png" alt="counter icon">
<p>Awards</p>
</div>
</div>
</div>
</div>
</section>
<!-- Counter end -->
<!-- Blog -->
<section class="fh5co-blog">
<div class="site-container">
<h2 class="universal-h2 universal-h2-bckg">My Blog</h2>
<div class="blog-slider blog-inner">
<div class="single-blog">
<div class="single-blog__img">
<img src="<?php bloginfo('template_url'); ?>/images/blog1.jpg" alt="blog image">
</div>
<div class="single-blog__text">
<h4>The Journey Under the Waves</h4>
<span>On August 28, 2015</span>
<p>Quisque vel sapi nec lacus adipis cing bibendum nullam porta lites laoreet aliquam.velitest, tempus a ullamcorper et, lacinia mattis mi. Cras arcu nulla, blandit id cursus et, ultricies eu leo.</p>
</div>
</div>
<div class="single-blog">
<div class="single-blog__img">
<img src="<?php bloginfo('template_url'); ?>/images/blog2.jpg" alt="blog image">
</div>
<div class="single-blog__text">
<h4>The Journey Under the Waves</h4>
<span>On August 28, 2015</span>
<p>Quisque vel sapi nec lacus adipis cing bibendum nullam porta lites laoreet aliquam.velitest, tempus a ullamcorper et, lacinia mattis mi. Cras arcu nulla, blandit id cursus et, ultricies eu leo.</p>
</div>
</div>
<div class="single-blog">
<div class="single-blog__img">
<img src="<?php bloginfo('template_url'); ?>/images/blog2.jpg" alt="blog image">
</div>
<div class="single-blog__text">
<h4>The Journey Under the Waves</h4>
<span>On August 28, 2015</span>
<p>Quisque vel sapi nec lacus adipis cing bibendum nullam porta lites laoreet aliquam.velitest, tempus a ullamcorper et, lacinia mattis mi. Cras arcu nulla, blandit id cursus et, ultricies eu leo.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Blog end -->
<!-- Quotes -->
<section class="fh5co-quotes">
<div class="site-container">
<div class="about-me-slider">
<div>
<h2 class="universal-h2 universal-h2-bckg">What People Are Saying</h2>
<p>"Pudding croissant cake candy canes fruitcake sweet roll pastry gummies sugar plum. Tart pastry danish soufflé donut bear claw chocolate cake marshmallow chupa chups. Jelly danish gummi bears cake donut powder chocolate cake. Bonbon soufflé lollipop biscuit dragée jelly-o. Wafer pastry pudding tiramisu chocolate bar croissant cake. Pie caramels gummies danish."</p>
<img src="<?php bloginfo('template_url'); ?>/images/quotes.svg" alt="quotes svg">
<h4>David Dixon</h4>
<p>Reader</p>
</div>
<div>
<h2 class="universal-h2 universal-h2-bckg">What People Are Saying 2</h2>
<p>"Pudding croissant cake candy canes fruitcake sweet roll pastry gummies sugar plum. Tart pastry danish soufflé donut bear claw chocolate cake marshmallow chupa chups. Jelly danish gummi bears cake donut powder chocolate cake. Bonbon soufflé lollipop biscuit dragée jelly-o. Wafer pastry pudding tiramisu chocolate bar croissant cake. Pie caramels gummies danish."</p>
<img src="<?php bloginfo('template_url'); ?>/images/quotes.svg" alt="quotes svg">
<h4>David Dixon</h4>
<p>Reader</p>
</div>
</div>
</div>
</section>
<!-- Quotes end -->
<!-- Social -->
<section class="fh5co-social">
<div class="site-container">
<div class="social">
<h5>Follow me!!</h5>
<div class="social-icons">
<a href="#" target="_blank" rel="noopener"><img src="<?php bloginfo('template_url'); ?>/images/social-twitter.png" alt="social icon"></a>
<a href="#" target="_blank" rel="noopener"><img src="<?php bloginfo('template_url'); ?>/images/social-pinterest.png" alt="social icon"></a>
<a href="#" target="_blank" rel="noopener"><img src="<?php bloginfo('template_url'); ?>/images/social-youtube.png" alt="social icon"></a>
<a href="#" target="_blank" rel="noopener"><img src="<?php bloginfo('template_url'); ?>/images/social-twitter.png" alt="social icon"></a>
</div>
<h5>Share it!</h5>
</div>
</div>
</section>
<!-- Social end -->
Loading Images
If you used a different HTML template, when trying to run your theme, you might have encountered some broken images.
To load those images like it is on the original HTML template, add the following hook in your image tag:
<?php bloginfo('template_url'); ?>
It should look like this in the image tag:
<img src="<?php bloginfo('template_url'); ?>/images/footer-mastercard.png" alt="footer image">
If you followed through properly, your website should up and running properly.
Making Fields Editable
What makes WordPress really amazing is the fact that you can pick a theme and change its content to fit your brand.
The next step is to make some of our fields editable. So anyone who decides to download our theme can edit its content.
To make this possible, we will be using a plugin called Advanced custom fields (ACF).
This plugin will allow us to dynamically add content to our WordPress theme using its provided hooks. Make sure to install and activate the plugin.
After installing the plugin, you should see it on the navigation pane. See the image below:
Now that our plugin is created, let us start creating dynamic fields in the next section.
Creating fields for dynamic content
In this section, we will be setting up the ACF plugin for dynamic content in our WordPress theme.
Click the ACF button on the navigation pane and click Field group from the dropdown.
After clicking the Field group from the dropdown, we should see a new page like below:
Step 1: At the top right of the ACF page, is a Field Group Title textbox.
Give a title to the Front page or name it according to your requirement.
Step 2: Go to the fields section just immediately after the Title field.
Choose a field type called Group.
Step 3: Give a name called Hero to the Field Label.
The Field name would automatically be generated.
Step 4: You should see another section called sub fields.
This is where we will create fields for our hero.
For our website hero, we will be creating four fields to demonstrate how to use the ACF plugin.
We will be creating fields with a type of Text.
- Small text
- First name
- Last name
- Hobby tag
After selecting the type as Text, give a name to your label. I’ll name my field small text for this article.
If you click on the field name, the name is auto-generated or you can call it what you prefer.
Please repeat this step for the other fields.
Once you finish creating the Subfields, click the Save Changes button at the top of your page.
Go back to your Admin dashboard, click on Pages, and click the Home page you created. You should see the new fields you created have been added to your Home page.
See the image below:
Adding ACF PHP Hooks to our HTML code
ACF has comprehensive documentation that covers all the provided hooks for every field type and in different scenarios like conditional hooks, expressions, etc.
In the last section, we created our fields and added them to our Home page.
Now we have to add the PHP hooks to our code.
get_field($selector, [$post_id], [$format_value]);
Let’s define the parameters:
$selector: The selector is a String parameter that picks the field name or field key.
In our case, our field key is “hero”. This parameter is required.[$post_id]: This is the post id where the value of the field is saved.
This parameter is optional.[$format_value]: Whether to apply formatting logic.
Defaults to true. This is an optional parameter.
This function returns a field value which in our case, is the value of the field, small_text.
Adding get_field hook
Now that we understand the definition of the hook, we can use it.
Go to your front-page.php file where we have our Hero section.
At the very top, add the following code:
<?php
$value = get_field( "hero" );
?>
Go to the tag that has our texts and add the following code:
<?php echo $value["small_text"];?>
<section class="fh5co-top-banner">
<div class="top-banner__inner site-container">
<div class="top-banner__image">
<img src="<?php bloginfo('template_url'); ?>/images/top-banner-author.jpg" alt="author image">
</div>
<div class="top-banner__text">
<div class="top-banner__text-up">
<span class="brand-span"><?php echo $value["small_text"];?></span>
<h2 class="top-banner__h2"><?php echo $value["first_name"];?></h2>
</div>
<div class="top-banner__text-down">
<h2 class="top-banner__h2">Smith</h2>
<span class="brand-span">Author, Writer, Traveler</span>
</div>
<p>One Man. One Mission. Can He Go Beyond?One Man. One Mission. Can He Go Beyond?</p>
<a href="#" class="brand-button">Read bio > </a>
</div>
</div>
</section>
<!-- Top banner end -->
If implemented properly, we should have our dynamic content setup successfully. See the Gif below:
Conclusion
Congratulations on completing this tutorial.
We hope we have helped you understand how to use convert your HTML template to a WordPress theme.
This tutorial covers different steps and explanations of every PHP hook we used to set up our WordPress theme.
Looking for Experts to Build your Theme?
Converting your HTML website into a WordPress theme will save the stress of updating content.
You do not need to write extra code to add a blog post to your website or change the call-to-action text of color.
With your website as a WordPress theme, writing content is seamless.
If you want to create a custom WordPress site or theme, you can reach out to our WordPress development experts.
