How to Convert HTML Template to WordPress Custom Theme

When you create custom theme in WordPress, you have to convert HTML template into WordPress custom theme. We will now see how to convert HTML file in WordPress.

If you do not know how to set up custom theme in WordPress, then you can see my blog

How to Create Custom Theme in WordPress

Now activate your custom theme

Now you will see everything empty in the website because there is nothing in index.php file.

First of all you have to create a HTML template which you want to convert WordPress theme, but I have taken a custom HTML template and we will work on it. If you want HTML template then you can download and convert it into WordPress theme.

Download HTML Template

Now we will change the extension of all the files from html to php. And now copy all the files and paste them where htdocs/wordpress/wp-content/themes

Now you refresh your website, you will see your design but your website will not call CSS, js and image file.
For that we will use function. Both functions do the same thing. mentioned below

<?php echo get_template_directory_uri(); ?>
<?php bloginfo('template_directory'); ?>


Now where we cannot find the path location, we will fetch the path location by doing one of two actions. example is given below

<!-- CSS style path location -->
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/assets/css/style.css">

<!-- JS style path location -->
<script src=" <?php echo get_template_directory_uri(); ?>/assets/js/custom.js"></script>

<!-- Images style path location -->
<img src=" <?php echo get_template_directory_uri(); ?>/assets/images/banner-item-01.jpg" alt="">

Now you refresh your website by changing the path of index.php file everywhere. You will see your website proper.


Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *