Converting a downloaded HTML, CSS, and JS template into a dynamic WordPress theme is a process that transforms static web pages into a fully functional and customizable WordPress theme. This involves integrating the template’s design and layout into WordPress’ PHP-based architecture, allowing for dynamic content generation, theme options customization, and seamless integration with WordPress features such as widgets, menus, and plugins. By converting HTML, CSS, and JS templates into WordPress themes, website owners can leverage the power and flexibility of WordPress to manage and update their website content more efficiently while maintaining the desired design and functionality.
Steps to convert any HTML template into WordPress theme
1) Download any free html template that you may like your theme to look like.
Browse from the internet for any HTML, CSS, JS templates on the internet. Here are some free HTML template website I personally suggest HTML Design, HTML.COM, Templatememo,
2) Open the static HTML template in any code editor of your choice.
3) Copy header & footer content of the HTML to header.php & footer.php files that you have created previously
Copy the header part the part that starts with <header> tag to </header> to your header.php file after <body> tag and footer part that starts with <footer> tag to </footer> to your footer.php file before closing </body> tag and before <?php wp_footer( ) ?> comes. If you don’t know how to create header.php & footer.php files in WordPress theme, please refer to this post
4) Copy the remaining (css, images, src, …) necessary folders to your custom theme folder.
Copy all elements of the html template files and folders to your custom theme folder which is located at wp-content/themes/your-custom-theme
5) Load up the styles, and scripts of the template from the template folders
To load up your styles & scripts In your function.php file custom_function within wp_enque_style function, load the custom function link using get_theme_file_uri('/file/uri.css'); instead of calling built in style.css like we used while creating header in here using get_stylesheet_uri();
wp_enqueue_style('any_custom_name', get_theme_file_uri('/build/new.css') );
6) Load online links like fonts, CSS, fontawesome icons and others in functions.php file
If WordPress file you could copy all the links used in header part of the template, directly to your header.php file but that is not efficient way of doing that because, that is strict way of doing that.
Instead, load online links, like fonts, CSS inside functions.php file within the custom_function and inside the uri value, copy the links used in the HTML file =>> Only the link part from the head not the relationship <<=
wp_enqueue_style('custom_fontawesome_name', 'https://only-the-link-here');
Copying the content of the HTML template to WP theme
6) Copy web content & relink images that are used in html template to wp version of file uri.
Copy web content and paste the complete content in your index.php file and relink images that are used in the HTML template to your WordPress version of file link
Using echo get_theme_file_uri('/image/uri.jpg'); will get theme uri (the current folder) & add the image link inside the argument.
7) Load JS files used in the HTML template to your functions.php file.
As loading Style file, we used wp_enqueue_style, for loading JS file, we use wp_enqueue_script function. So, load JS using
wp_enqueue_script('custom_js_name', get_theme_file_uri('/build/index.js'), array('jQuery'), '1.0', true);
wp_enqueue_script function is a bit different than that of style function as it takes some extra arguments additional to handle name & src file uri. here are additional dependencies used in:
wp_enqueue_script('custom_js_name', get_theme_file_uri('build/index.js'), array('jQuery'), '1.0', true);
- Dependencies: if you have JavaScript dependencies like I used
jQuery, you pass them here in an array. - Version: You write the version of your script right here as I used ‘
1.0‘ - In footer: WordPress needs you to specify if you want your script to be loaded in footer before closing
</body>tag (Yes or No :). As I used true, your final argument will be true or false. So, if you say true, this JS will be embedded in yourfooter.phpfile before closing</body>tag which is recommended to select true for smooth performance.
—- Thankyou for Reading —-
