October 27, 2020

Project Due

Share Your Thoughts

HOW TO CONVERT ANY HTML5 TEMPLATE INTO AN AWESOME WORDPRESS THEME

4 min read

Millions of users are choosing WordPress as their web development platform. Along with new users, many existing website owners are migrating to this platform. However, you may not find the perfect theme that suits your requirements. In such situations, it is a good option to code an HTML 5 template and convert it into a wordpress theme. Explained below is the process to convert HTML to WordPress.

Find a Template or Build Your Own

Any HTML template can be converted into a WordPress theme. However, you should try to find a template that closely matches the basic functionality of WordPress, such as posts, pages, a sidebar, a header, and a footer. While selecting a template or making your own, you will have to analyze how it would look in WordPress. Different templates require a different amounts of time to make the conversion.

HTML5 Template into a WordPress Theme

Once you have selected an HTML5 template that contains a directory which has an index.html file and subdirectories for CSS and Javascript, it’s time to start the conversion. You need to copy the whole theme directory into the wp-content/themes/ directory of your WordPress platform. To activate the theme you will first need to rename index.html as index.php and add a style.css file. The theme is now ready for activation. In the WordPress admin area go Appearance> Themes and activate it.

Since all your theme’s CSS and JavaScript resources are located in your theme directory, your HTML template is not able to find them because of which appearance of the site is very poor at this stage.

Properly Enqueue Scripts and Styles

To rectify this you will have to first enqueue CSS and Javascript resources before adding them in a WordPress theme and this requires a functions.php file in your root directory. You need to build a function that enqueues all the scripts and resources and then hook the function into your WordPress theme with the help of wp_enqueue_scripts hook. Now add the function and the hook to the functions.php file.

WordPress can now recognize the resources, but to make it operational on your live website you will have to add two hooks, namely ‘wp_head and’‘wp_footer’ to theme’s functions.php file.

Template Partials

It is that part of a theme that is only utilized when referenced by a template file. Almost all WordPress themes break the content into the header.php file so that it can be used on different pages and posts. Usually, three template partials are created-header.php, footer.php, and sidebar.php. You have to create separate files for each of them in the theme’s root directory. header.php file contains all the information that you want to display at the top. After creating the file you need to copy all the header codes from the index.php to header.php and then delete the codes from index.php and replace it with get_header (). The same process is used for creating sidebar.php and footer.php.

Loop

It is a function that queries the site database to generate the content displayed on different pages. You need to have two different versions of the loop. One for the blog page that contains post title, metadata, image, and a post description, and the second version for pages and posts with full content. You can further refine the loop by making different versions for individual posts, pages, etc.

Replace Template File Content with WordPress Functions

Each HTML template requires different steps for replacement with WordPress functions. You have to negotiate each template file one by one-header, index, sidebar, and footer- and replace the static HTML content with the right WordPress functions. Start with header.php and proceed to the next file only when you have completed the replacement. If you have any confusion regarding which function to use, you can either copy from a well-coded WordPress theme or locate the most appropriate function by searching for the same on Google.

Also Read:  programming assignment help

Header Menu

Adding a header menu is a bit complicated and involves two steps. First, you have to create a header location by adding a function to functions.phpby ‘usingregister_nav_menus’ and then insert the menu in header.php. The menu can be generated through the ‘wp_nav_menu’. You have to make sure that the classes and ids used by the HTML template are copied exactly so that the template’s CSS is applicable.

Widget Areas

Next, you have to create widget areas for the header, footer, and sidebar. It can be done by first registering the widget in functions.php through the ‘register_ sidebar’ option and then use the’ dynamic_ sidebar’ to place the widget at your preferred location. The custom function that contains the ‘register_sidebar’ is hooked to WordPress by the’ widget_init’ hook. The process explained above should help you convert HTML to WordPress. To convert site to WordPress you will have to carefully follow each and ever

Leave a Reply

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