FahmidasClassroom

Learn by easy steps

You Are Here

Theme3
CMS

Convert HTML Template to WordPress Theme – Part1

4 Comments

This tutorial will help you convert any html template to wordpress theme. You can download any free template and follow this tutorial to  convert it into wordpress theme.

Steps:

1. Download the theme that you want to convert. Here, I have used a responsive hairsal free HTML template. You can download the theme from the following location.

https://colorlib.com/wp/template/hairsal/

2. Create a folder in wordpress theme folder. The folder name is name of your new theme. Here, I keep the name of the theme, saloon.

3. Create screenshot image of your theme and save screenshot.png file in the theme folder.

4. Create necessary PHP files.

     index.php
     style.css
     functions.php
     header.php
     footer.php

5. Copy css, js, images and other required folders from template to theme folder.

6. Open the index.html file from html template and identify the header, body content and footer section. Copy header part into header.php file , footer part into footer.php file and body content into index.php file.

7. Add the following code at the beginning of index.php file

<?php
get_header();
?>

8. Add the following code at the end of index.php file.

<?php
get_footer() ;
?>


9. Visit your WordPress admin dashboard. Navigate to Appearance > Theme and activate your newly created theme.

10. Make link with your css files.

<link rel="stylesheet" href="<?php echo get_template_directory_uri().'/fonts/icomoon/style.css'; ?>">
<link rel="stylesheet" href="<?php echo get_template_directory_uri().'css/bootstrap.min.css'; ?>">
<link rel="stylesheet" href="<?php echo get_template_directory_uri().'css/magnific-popup.css'; ?>">
<link rel="stylesheet" href="<?php echo get_template_directory_uri().'css/jquery-ui.css'; ?>">
<link rel="stylesheet" href="<?php echo get_template_directory_uri().'css/owl.carousel.min.css';?>">
<link rel="stylesheet" href="<?php echo get_template_directory_uri().'css/owl.theme.default.min.css';?>">
<link rel="stylesheet" href="<?php echo get_template_directory_uri().'css/bootstrap-datepicker.css'; ?>">
<link rel="stylesheet" href="<?php echo get_template_directory_uri().'fonts/flaticon/font/flaticon.css';?>">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/mediaelementplayer.min.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri().'css/aos.css';?>">
<link rel="stylesheet" href="<?php echo get_template_directory_uri().'css/style.css';?>">

11. Make link with javascript files.

<script src="<?php echo get_template_directory_uri().'/js/jquery-3.3.1.min.js';?>"></script>
<script src="<?php echo get_template_directory_uri().'/js/jquery-migrate-3.0.1.min.js';?>"></script>
<script src="<?php echo get_template_directory_uri().'/js/jquery-ui.js';?>"></script>
<script src="<?php echo get_template_directory_uri().'/js/popper.min.js';?>"></script>
<script src="<?php echo get_template_directory_uri().'/js/bootstrap.min.js';?>"></script>
<script src="<?php echo get_template_directory_uri().'/js/owl.carousel.min.js';?>"></script>
<script src="<?php echo get_template_directory_uri().'/js/jquery.stellar.min.js';?>"></script>
<script src="<?php echo get_template_directory_uri().'/js/jquery.countdown.min.js';?>"></script>
<script src="<?php echo get_template_directory_uri().'/js/jquery.magnific-popup.min.js';?>"></script>
<script src="<?php echo get_template_directory_uri().'/js/bootstrap-datepicker.min.js';?>"></script>
<script src="<?php echo get_template_directory_uri().'/js/aos.js';?>"></script>
<script src="<?php echo get_template_directory_uri().'/js/main.js';?>"></script>

12. Make the image link by using the following method

get_template_directory_uri()

13. Enable custom title in wordpress

<?php bloginfo( 'name' ); ?>

14. Reload the theme

The full steps are shown in the following video tutorial.