8.7 C
New York
Sunday, August 9, 2020
No menu items!
Home Fun With Programming Create a Stunning WordPress Theme from HTML Template Easily

Create a Stunning WordPress Theme from HTML Template Easily

Hii! friends! Today, In this tutorial, I am going to tell you how to create a WordPress theme from Html Template. How can we convert the HTML theme to WordPress Theme? WordPress provides the flexibility of HTML element and also to customize the elements.

WordPress is a collection of templates. Which creates the design, Layout, or functionality of site/blog. We can design a WordPress theme for personal or professional use.

If you want to design a theme for any kind of website blog or any CMS, then you should have basic knowledge of HTML, CSS. If you do not have at all, there is no need to worry as you can easily learn basic usage in a week.

Before creating a WordPress theme you have required a WordPress installed on your laptop or computer.

Creating a WordPress Theme from the HTML theme

WordPress Theme.
how to create a WordPress theme from Html Template. WordPress provides the flexibility of HTML element and also to customize the elements.

Create A New Folder

So, first of all, create a new folder inside the WP-Content -> Themes. and name your theme(folder) according to you.

Create WordPress Theme From HTML Template

Copy the CSS, js, Images and fonts folders

  • Now open your HTML Theme folder and cut or copy index file, CSS, images, and js folders from it.
  • Paste it to your new WordPress theme folder(That you created previously).
Create WordPress Theme From HTML Template

Now open your WordPress admin dashboard and go to Appearance ->Themes->then activate your newly created theme and you will see, as given below.

Create WordPress Theme From HTML Template

You can see that no images are shown here and also theme is not in proper look, so we have to configure CSS files that are used in this HTML Template after then you can complete the look of the theme. We will do it later.

Separate the header and footer file

If in your template, header, footer are not separate then, you can separate them by following below steps.

  • For this create a new file and save it as a header.php
  • Then cut the header section from the index file and paste it into the header.php file and save it.
  • In this way, also separate a footer section as well.
  • After that, you can call them in the index file. like this:
// call for header section


// call for footer section

Create WordPress Theme From HTML Template

Configuring CSS, js, and Images

So open your index file and write PHP code get_template_directory_url() this code is used to get the current template directory path. like this:

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri();/css/bootstrap.min.css"/>
PHP code. for creating wordpress theme from html template

Also do it everywhere, where image file or any other file is called. like…

<div class="test-img"><img src=" <?php echo get_template_directory_uri();?>/images/team-img-02.jpg"/></div>
PHP code lines-img. for creating wordpress theme from html template

Now we have to configure the java script file.

<script src="<?php echo get_template_directory_uri();?>/js/jquery.min.js"></script>
PHP code lines. for creating wordpress theme from html template

Now, your theme will look similar to the Html template. but there are some WordPress features that are not included. such as Title, customize the menu, and showing the latest blog.

WordPress theme.

Set Custom Title

We have to use the WordPress built-in function bloginfo() to change the website title. it is between the title tags in the header.php file.

    <?php bloginfo('name');?>
PHP code. for creating wordpress theme from html template

Custom Navigation Menu

  • If you want to add custom navigation in your WordPress Theme, so you have to add the following line of code in function.php file.
  • After that find the navigation menu in your HTML theme and replace with WordPress built-in function wp_nav_menu();
// To enable the menu option - in function.php
<?php add_theme_support('menus');?>

//find the navigation code in your theme and replace with this lines of code.
<? php wp_nav_menu(array('sort_column'=>'menu order', 'container_class'=>'menu-header'));?>

This code shows the flexibility of your HTML theme and WordPress theme.

Display the Latest Post on The Home Page

You also display the latest post on the homepage. You must have seen that many WordPress themes show the latest post on their Home Page.

This below code is for displaying the latest post on the home page.

<?php $the_query = new WP_Query( 'showposts=2' ); ?>
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<li><?php echo substr(strip_tags($post->post_content), 0, 100);?></li>
<?php endwhile;?>

In this way, You can create a WordPress theme from the Html template. WordPress provides lots of flexibility and through this, you can add more features in your theme.

You can also convert your HTML site/template to WordPress theme by using some online websites like HTML to WordPress Converter, htmltowordpress.io, importintoblog.com, and many other websites have that provide this type of facility.

I hope you like this post(how to Create a WordPress Theme From HTML Template) and it is helpful to you.

Article By:- Priya Chauhan

Read More:-



Please enter your comment!
Please enter your name here

Stay Connected

- Advertisment -

Most Popular

How To Delete Facebook Account permanently?

Today we will know about one problem, which people keep talking about, today we will know how to delete Facebook account. With...

Best Tricks For Play & Win Ludo

Ludo King Game has now become the world's popular game. Everyone, children, old and young, likes to play this game.

Serverless Computing – The Next Level of Server Architecture

In this article, we are going to explain the term Serverless computing. What it is and much more so let's start.

Encrypt/Lock Your Pendrive with Password without any Software

How can you secure your pen drive without any software, you just have to follow some steps. After following these, you will...

Recent Comments