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
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-a-new-folder.
Copy the CSS, js, Images and fonts folders
- Now open your HTML Theme folder and cut or copy the index file, CSS, images, and js folders from it.
- Paste it to your new WordPress theme folder(That you created previously).
Now open your WordPress admin dashboard and go to Appearance ->Themes->then activate your newly created theme and you will see, as given below.
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
<?php
get_header();
?>// call for footer section
<?php
get_footer();
?>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"/>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>Now we have to configure the java script file.
<script src="<?php echo get_template_directory_uri();?>/js/jquery.min.js"></script>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.
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.
<title>
<?php bloginfo('name');?>
</title>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.
<ul>
<?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;?>
</ul>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.
Read More:-
