You can convert HTML to WordPress very easily. As we know, WordPress is built on PHP. So, we usually convert any HTML to PHP by separating the header, footer, and sidebar. Similarly, we can do the same stuff in WordPress. You can convert any HTML template to WordPress and make custom WordPress HTML templates. WordPress supports PHP syntax so you won’t have any problem regarding creating the WordPress themes. If you don’t know how to setup WordPress in localhost. Then, I recommend you to go through the previous post. In that post, I have shown how to install and configure WordPress in localhost.
Prerequisites
For continuing this post, your system must be ready with the following-
- PHP version >=7.3
- MySQL >=5.6 OR Maria DB >= 10.1
- Server – Apache/Nginx
- Any HTML/Bootstrap Template
- VS Code Editor
In this post, I am not going to show you the installation of WordPress because I have already done it. That’s why I am not going to repeat the same process again and again. Now, let’s come to the point.
Create a WordPress Setup to Convert HTML to WordPress
I have already a WordPress project setup and in this project, I will be converting an HTML template to WordPress. If you don’t have any WordPress project setup then go to the above post link. Now, you will need an HTML template. So, you can download any free HTML template. I have downloaded a free HTML/Bootstrap template for the demo purpose.
WordPress has a default theme with the installation. When you will run your application, it will look like this.
How to Create Custom Template in WordPress
Now, we have to put our custom template inside the active theme. So, first of all, check the theme inside the WordPress dashboard.
Check WordPress Active Theme
Before converting HTML to WordPress, let’s understand the themes. In the Dashboard section, you can find active themes of the WordPress website. The themes section is available in the Appearance->Themes as showing below. In WordPress, you can manage themes over here. Basically, the WordPress website runs over a theme. So the layouts depend upon the themes.
Inside the themes, you can find active themes. As shown below, there is an active theme. The active theme basically defines the website is currently running on.
How to Implement Google Autocomplete Address in Laravel 6
As per this active theme of the current project, the layout is showing over there on our demo website.
Delete Theme in WordPress
You can delete the themes by clicking on the theme. Inside the theme description, there is an option to delete the theme. In the below result, you can see the delete button over there. By clicking on the button the selected theme will be deleted.
Drag and Drop File Upload in Laravel 6 Using Dropzone js
Now, I am going to show you to add an HTML template inside the currently active theme. Basically, I will be adding the template and over the template, I will be calling the website pages.
Convert HTML to WordPress
Open the project folder in the VS code editor. Then navigate to the wp-content->themes->twentytwenty. Here, our active theme name is twentytwenty. So just move inside the theme folder. Inside the theme, there will a header, footer and index file. So, I am going to modify the header, footer and index file with our HTML template snippet.
Hence, create a new folder with any name. In my case, I have created a folder for the custom template with the name my-template. Now, paste all the files and folders of the HTML template that you have downloaded.
Now, we will modify the header.php, footer.php and index.php file of the current theme.
Separate Header, Footer and Index File
<?php
/**
* Header file for the Twenty Twenty WordPress default theme.
*
* @package WordPress
* @subpackage Twenty_Twenty
* @since 1.0.0
*/
?><!DOCTYPE html>
<html class="no-js" <?php language_attributes(); ?>>
<head>
<meta charset="utf-8">
<title>My WordPress Demo Website </title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<!-- Favicons -->
<link href="<?php echo get_template_directory_uri();?>/my-template/img/favicon.png" rel="icon">
<link href="<?php echo get_template_directory_uri();?>/my-template/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,700|Roboto:300,400,700&display=swap"
rel="stylesheet">
<!-- Bootstrap CSS File -->
<link href="<?php echo get_template_directory_uri();?>/my-template/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="<?php echo get_template_directory_uri();?>/my-template/vendor/icofont/icofont.min.css" rel="stylesheet">
<link href="<?php echo get_template_directory_uri();?>/my-template/vendor/line-awesome/css/line-awesome.min.css" rel="stylesheet">
<link href="<?php echo get_template_directory_uri();?>/my-template/vendor/aos/aos.css" rel="stylesheet">
<link href="<?php echo get_template_directory_uri();?>/my-template/vendor/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="<?php echo get_template_directory_uri();?>/my-template/css/style.css" rel="stylesheet">
<?php wp_head(); ?>
</head>
<?php
//wp_body_open();
?>
<body>
<div class="site-wrap">
<div class="site-mobile-menu site-navbar-target">
<div class="site-mobile-menu-header">
<div class="site-mobile-menu-close mt-3">
<span class="icofont-close js-menu-toggle"></span>
</div>
</div>
<div class="site-mobile-menu-body"></div>
</div>
<header class="site-navbar js-sticky-header site-navbar-target" role="banner">
<div class="container">
<div class="row align-items-center">
<div class="col-6 col-lg-4">
<h1 class="mb-0 site-logo"><a href="<?php echo site_url();?>" class="mb-0">WordPress Website</a></h1>
</div>
<div class="col-12 col-md-8 d-none d-lg-block">
<nav class="site-navigation position-relative text-right" role="navigation">
<ul class="site-menu main-menu js-clone-nav mr-auto d-none d-lg-block">
<li class="active"><a href="<?php echo site_url();?> " class="nav-link">Home</a></li>
<li><a href="#" class="nav-link">Features</a></li>
<li><a href="#" class="nav-link">Pricing</a></li>
<li class="has-children">
<a href="#" class="nav-link">Blog</a>
<ul class="dropdown">
<li><a href="#" class="nav-link">Blog</a></li>
<li><a href="#" class="nav-link">Blog Sigle</a></li>
</ul>
</li>
<li><a href="#" class="nav-link">Contact</a></li>
</ul>
</nav>
</div>
<div class="col-6 d-inline-block d-lg-none ml-md-0 py-3" style="position: relative; top: 3px;">
<a href="#" class="burger site-menu-toggle js-menu-toggle" data-toggle="collapse"
data-target="#main-navbar">
<span></span>
</a>
</div>
</div>
</div>
</header>The above code is simply an HTML snippet in which I have separated the header file. This file will be common for all the other pages. That’s why I have separated this snippet.
- In WordPress, for including any CSS, JS file from the project folder we use a function.
<?php echo get_template_directory_uri(); ?>- This function returns the base URL of the project directory.
- So, we can include all the required files, libraries by using this function.
- For example, according to this project, the base URL will be
http://localhost/wordpress/custom-template - Similarly, to get the home URL of the current WordPress website, I have used
<?php echo site_url();?>- The above function will return the Home URL of the WordPress website.
<?php
/**
* The main template file
*
* @package WordPress
* @subpackage Twenty_Twenty
* @since 1.0.0
*/
get_header();
?>
<main id="main">
<div class="hero-section">
<div class="wave">
<svg width="100%" height="355px" viewBox="0 0 1920 355" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Apple-TV" transform="translate(0.000000, -402.000000)" fill="#FFFFFF">
<path
d="M0,439.134243 C175.04074,464.89273 327.944386,477.771974 458.710937,477.771974 C654.860765,477.771974 870.645295,442.632362 1205.9828,410.192501 C1429.54114,388.565926 1667.54687,411.092417 1920,477.771974 L1920,757 L1017.15166,757 L0,757 L0,439.134243 Z"
id="Path"></path>
</g>
</g>
</svg>
</div>
<div class="container">
<div class="row align-items-center">
<div class="col-12 hero-text-image">
<div class="row">
<div class="col-lg-7 text-center text-lg-left">
<h1 data-aos="fade-right">Promote Your App with SoftLand</h1>
<p class="mb-5" data-aos="fade-right" data-aos-delay="100">Lorem ipsum dolor sit amet, consectetur
adipisicing elit.</p>
<p data-aos="fade-right" data-aos-delay="200" data-aos-offset="-500"><a href="#"
class="btn btn-outline-white">Get started</a></p>
</div>
<div class="col-lg-5 iphone-wrap">
<img src="<?php echo get_template_directory_uri();?>/my-template/img/phone_1.png" alt="Image" class="phone-1" data-aos="fade-right">
<img src="<?php echo get_template_directory_uri();?>/my-template/img/phone_2.png" alt="Image" class="phone-2" data-aos="fade-right" data-aos-delay="200">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="site-section">
<div class="container">
<div class="row justify-content-center text-center mb-5">
<div class="col-md-5" data-aos="fade-up">
<h2 class="section-heading">Save your time to using SoftLand</h2>
</div>
</div>
<div class="row">
<div class="col-md-4" data-aos="fade-up" data-aos-delay="">
<div class="feature-1 text-center">
<div class="wrap-icon icon-1">
<span class="icon la la-users"></span>
</div>
<h3 class="mb-3">Explore Your Team</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, optio.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="100">
<div class="feature-1 text-center">
<div class="wrap-icon icon-1">
<span class="icon la la-toggle-off"></span>
</div>
<h3 class="mb-3">Digital Whiteboard</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, optio.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="200">
<div class="feature-1 text-center">
<div class="wrap-icon icon-1">
<span class="icon la la-umbrella"></span>
</div>
<h3 class="mb-3">Design To Development</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, optio.</p>
</div>
</div>
</div>
</div>
</div> <!-- .site-section -->
<div class="site-section">
<div class="container">
<div class="row justify-content-center text-center mb-5" data-aos="fade">
<div class="col-md-6 mb-5">
<img src="<?php echo get_template_directory_uri(); ?>/my-template/img/undraw_svg_1.svg" alt="Image" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="step">
<span class="number">01</span>
<h3>Sign Up</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, optio.</p>
</div>
</div>
<div class="col-md-4">
<div class="step">
<span class="number">02</span>
<h3>Create Profile</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, optio.</p>
</div>
</div>
<div class="col-md-4">
<div class="step">
<span class="number">03</span>
<h3>Enjoy the app</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, optio.</p>
</div>
</div>
</div>
</div>
</div> <!-- .site-section -->
<div class="site-section pb-0">
<div class="container">
<div class="row align-items-center">
<div class="col-md-4 mr-auto">
<h2 class="mb-4">Seamlessly Communicate</h2>
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur at reprehenderit optio,
laudantium eius quod, eum maxime molestiae porro omnis. Dolores aspernatur delectus impedit incidunt
dolore mollitia esse natus beatae.</p>
<p><a href="#">Download Now</a></p>
</div>
<div class="col-md-6" data-aos="fade-left">
<img src="<?php echo get_template_directory_uri();?>/my-template/img/undraw_svg_2.svg" alt="Image" class="img-fluid">
</div>
</div>
</div>
</div> <!-- .site-section -->
<div class="site-section">
<div class="container">
<div class="row align-items-center">
<div class="col-md-4 ml-auto order-2">
<h2 class="mb-4">Gather Feedback</h2>
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur at reprehenderit optio,
laudantium eius quod, eum maxime molestiae porro omnis. Dolores aspernatur delectus impedit incidunt
dolore mollitia esse natus beatae.</p>
<p><a href="#">Download Now</a></p>
</div>
<div class="col-md-6" data-aos="fade-right">
<img src="<?php echo get_template_directory_uri();?>/my-template/img/undraw_svg_3.svg" alt="Image" class="img-fluid">
</div>
</div>
</div>
</div> <!-- .site-section -->
<div class="site-section border-top border-bottom">
<div class="container">
<div class="row justify-content-center text-center mb-5">
<div class="col-md-4">
<h2 class="section-heading">Review From Our Users</h2>
</div>
</div>
<div class="row justify-content-center text-center">
<div class="col-md-7">
<div class="owl-carousel testimonial-carousel">
<div class="review text-center">
<p class="stars">
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star muted"></span>
</p>
<h3>Excellent App!</h3>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ea delectus pariatur, numquam
aperiam dolore nam optio dolorem facilis itaque voluptatum recusandae deleniti minus animi,
provident voluptates consectetur maiores quos.</p>
</blockquote>
<p class="review-user">
<img src="<?php echo get_template_directory_uri();?>/my-template/img/person_1.jpg" alt="Image" class="img-fluid rounded-circle mb-3">
<span class="d-block">
<span class="text-black">Jean Doe</span>, — App User
</span>
</p>
</div>
<div class="review text-center">
<p class="stars">
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star muted"></span>
</p>
<h3>This App is easy to use!</h3>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ea delectus pariatur, numquam
aperiam dolore nam optio dolorem facilis itaque voluptatum recusandae deleniti minus animi,
provident voluptates consectetur maiores quos.</p>
</blockquote>
<p class="review-user">
<img src="<?php echo get_template_directory_uri();?>/my-template/img/person_2.jpg" alt="Image" class="img-fluid rounded-circle mb-3">
<span class="d-block">
<span class="text-black">Johan Smith</span>, — App User
</span>
</p>
</div>
<div class="review text-center">
<p class="stars">
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star muted"></span>
</p>
<h3>Awesome functionality!</h3>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ea delectus pariatur, numquam
aperiam dolore nam optio dolorem facilis itaque voluptatum recusandae deleniti minus animi,
provident voluptates consectetur maiores quos.</p>
</blockquote>
<p class="review-user">
<img src="<?php echo get_template_directory_uri();?>/my-template/img/person_3.jpg" alt="Image" class="img-fluid rounded-circle mb-3">
<span class="d-block">
<span class="text-black">Jean Thunberg</span>, — App User
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="site-section cta-section">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 mr-auto text-center text-md-left mb-5 mb-md-0">
<h2>Starts Publishing Your Apps</h2>
</div>
<div class="col-md-5 text-center text-md-right">
<p><a href="#" class="btn"><span class="icofont-brand-apple mr-3"></span>App store</a> <a href="#"
class="btn"><span class="icofont-ui-play mr-3"></span>Google play</a></p>
</div>
</div>
</div>
</div>
</main>
<?php
get_footer();The above snippet is the main content of the HTML template that I have downloaded. At the very top, I have included the header.php file using the get_header() function. This is very similar to the normal PHP. At the bottom, I have included the footer.php file using the get_footer() function.
Here, this is the footer snippet.
<?php
/**
* The template for displaying the footer
*
* Contains the opening of the #site-footer div and all content after.
*
* @package WordPress
* @subpackage Twenty_Twenty
* @since 1.0.0
*/
?>
<footer class="footer" role="contentinfo">
<div class="container">
<div class="row">
<div class="col-md-4 mb-4 mb-md-0">
<h3>About Us</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ea delectus pariatur, numquam aperiam
dolore nam optio dolorem facilis itaque voluptatum recusandae deleniti minus animi.</p>
<p class="social">
<a href="#"><span class="icofont-twitter"></span></a>
<a href="#"><span class="icofont-facebook"></span></a>
<a href="#"><span class="icofont-dribbble"></span></a>
<a href="#"><span class="icofont-behance"></span></a>
</p>
</div>
<div class="col-md-7 ml-auto">
<div class="row site-section pt-0">
<div class="col-md-4 mb-4 mb-md-0">
<h3>Navigation</h3>
<ul class="list-unstyled">
<li><a href="#">Pricing</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="col-md-4 mb-4 mb-md-0">
<h3>Services</h3>
<ul class="list-unstyled">
<li><a href="#">Team</a></li>
<li><a href="#">Collaboration</a></li>
<li><a href="#">Todos</a></li>
<li><a href="#">Events</a></li>
</ul>
</div>
<div class="col-md-4 mb-4 mb-md-0">
<h3>Downloads</h3>
<ul class="list-unstyled">
<li><a href="#">Get from the App Store</a></li>
<li><a href="#">Get from the Play Store</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row justify-content-center text-center">
<div class="col-md-7">
<p class="copyright">© Copyright Programming Fields. All Rights Reserved</p>
<div class="credits">
</div>
</div>
</div>
</div>
</footer>
</div> <!-- .site-wrap -->
<a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>
<!-- Vendor JS Files -->
<script src="<?php echo get_template_directory_uri();?> /my-template/vendor/jquery/jquery.min.js"></script>
<script src="<?php echo get_template_directory_uri();?> /my-template/vendor/jquery/jquery-migrate.min.js"></script>
<script src="<?php echo get_template_directory_uri();?> /my-template/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="<?php echo get_template_directory_uri();?> /my-template/vendor/easing/easing.min.js"></script>
<script src="<?php echo get_template_directory_uri();?> /my-template/vendor/php-email-form/validate.js"></script>
<script src="<?php echo get_template_directory_uri();?> /my-template/vendor/sticky/sticky.js"></script>
<script src="<?php echo get_template_directory_uri();?> /my-template/vendor/aos/aos.js"></script>
<script src="<?php echo get_template_directory_uri();?> /my-template/vendor/owlcarousel/owl.carousel.min.js"></script>
<!-- Template Main JS File -->
<script src="<?php echo get_template_directory_uri();?> /my-template/js/main.js"></script>
<?php wp_footer(); ?>
</body>
</html>The above snippets are ready to run. The header, footer and index file will make a complete webpage for the static website. So, let’s check it.
How to Upload Multiple Images in Laravel 6 with Validation
Conclusion
This post was a basic demonstration for converting a single page HTML template to WordPress. In our upcoming posts, I will show you a complete guide on how you can create a custom template inside WordPress. Also, for the custom blog and many more. So, stay connected with us for more interesting programming tutorials.
Leave a Reply