{"id":2134,"date":"2020-01-05T18:06:18","date_gmt":"2020-01-05T18:06:18","guid":{"rendered":"https:\/\/www.programmingfields.com\/?p=2134"},"modified":"2026-05-02T06:32:33","modified_gmt":"2026-05-02T06:32:33","slug":"convert-html-template-to-wordpress","status":"publish","type":"post","link":"https:\/\/programmingfields.com\/convert-html-template-to-wordpress\/","title":{"rendered":"How to Convert HTML Template to WordPress"},"content":{"rendered":"\n<p>You can <strong>convert HTML to WordPress<\/strong> very easily. As we know, WordPress is built on PHP. So, we usually convert any HTML to PHP by separating the header, footer, and sidebar. Similarly, we can do the same stuff in WordPress. You can convert any <strong>HTML template to WordPress<\/strong> and make custom WordPress HTML templates. WordPress supports PHP syntax so you won&#8217;t have any problem regarding creating the WordPress themes. If you don&#8217;t know how to setup WordPress in localhost. Then, I recommend you to go through the previous post. In that post, I have shown how to <a rel=\"noreferrer noopener\" aria-label=\"install and configure WordPress in localhost. (opens in a new tab)\" href=\"https:\/\/www.programmingfields.com\/download-and-install-wordpress-in-localhost\/\" target=\"_blank\">install and configure WordPress in localhost.<\/a>  <\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/programmingfields.com\/convert-html-template-to-wordpress\/#Prerequisites\" >Prerequisites<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/programmingfields.com\/convert-html-template-to-wordpress\/#Create_a_WordPress_Setup_to_Convert_HTML_to_WordPress\" >Create a WordPress Setup to Convert HTML to WordPress<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/programmingfields.com\/convert-html-template-to-wordpress\/#Check_WordPress_Active_Theme\" >Check WordPress Active Theme<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/programmingfields.com\/convert-html-template-to-wordpress\/#Delete_Theme_in_WordPress\" >Delete Theme in WordPress<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/programmingfields.com\/convert-html-template-to-wordpress\/#Convert_HTML_to_WordPress\" >Convert HTML to WordPress<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/programmingfields.com\/convert-html-template-to-wordpress\/#Separate_Header_Footer_and_Index_File\" >Separate Header, Footer and Index File<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/programmingfields.com\/convert-html-template-to-wordpress\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Prerequisites\"><\/span>Prerequisites<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For continuing this post, your system must be ready with the following-<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>PHP version &gt;=7.3<\/strong><\/li>\n\n\n\n<li><strong>MySQL &gt;=5.6 OR<\/strong>&nbsp;<strong>Maria DB &gt;= 10.1<\/strong><\/li>\n\n\n\n<li><strong>Server \u2013 Apache\/Nginx<\/strong><\/li>\n\n\n\n<li><strong>Any HTML\/Bootstrap Template<\/strong><\/li>\n\n\n\n<li><strong>VS Code Editor<\/strong><\/li>\n<\/ul>\n\n\n\n<p>In this post, I am not going to show you the installation of WordPress because I have already done it. That&#8217;s why I am not going to repeat the same process again and again. Now, let&#8217;s come to the point.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_a_WordPress_Setup_to_Convert_HTML_to_WordPress\"><\/span>Create a WordPress Setup to Convert HTML to WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>I have already a WordPress project setup and in this project, I will be converting an <strong>HTML template to WordPress<\/strong>. If you don&#8217;t have any WordPress project setup then go to the above post link. Now, you will need an HTML template. So, you can download any free HTML template. I have downloaded a free HTML\/Bootstrap template for the demo purpose.<\/p>\n\n\n\n<p>WordPress has a default theme with the installation. When you will run your application, it will look like this.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"1024\" src=\"https:\/\/i0.wp.com\/www.programmingfields.com\/wp-content\/uploads\/2020\/01\/1.-Default-Template-in-WordPress-1000x1024.png?resize=1000%2C1024&#038;ssl=1\" alt=\"WordPress default template\" class=\"wp-image-2143\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/01\/1.-Default-Template-in-WordPress.png?resize=1000%2C1024&amp;ssl=1 1000w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/01\/1.-Default-Template-in-WordPress.png?resize=293%2C300&amp;ssl=1 293w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/01\/1.-Default-Template-in-WordPress.png?resize=768%2C787&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/01\/1.-Default-Template-in-WordPress.png?w=1366&amp;ssl=1 1366w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\"><strong>WordPress Default Template<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"> <a href=\"https:\/\/programmingfields.com\/create-custom-template-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">How to Create Custom Template in WordPress<\/a> <\/p>\n\n\n\n<p>Now, we have to put our custom template inside the active theme. So, first of all, check the theme inside the WordPress dashboard.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Check_WordPress_Active_Theme\"><\/span>Check WordPress Active Theme<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Before converting HTML to WordPress, let&#8217;s understand the themes. In the Dashboard section, you can find active themes of the WordPress website. The themes section is available in the <strong>Appearance-&gt;Themes<\/strong> as showing below. In WordPress, you can manage themes over here. Basically, the WordPress website runs over a theme. So the layouts depend upon the themes.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1366\" height=\"705\" src=\"https:\/\/i0.wp.com\/www.programmingfields.com\/wp-content\/uploads\/2020\/01\/WordPress-Customize-theme-1.png?resize=1366%2C705&#038;ssl=1\" alt=\"WordPress Appearance Themes\" class=\"wp-image-2148\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/01\/WordPress-Customize-theme-1.png?w=1366&amp;ssl=1 1366w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/01\/WordPress-Customize-theme-1.png?resize=300%2C155&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/01\/WordPress-Customize-theme-1.png?resize=1024%2C528&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/01\/WordPress-Customize-theme-1.png?resize=768%2C396&amp;ssl=1 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\"><strong>WordPress Themes<\/strong> <strong>Section<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p>Inside the themes, you can find active themes. As shown below, there is an active theme. The active theme basically defines the website is currently running on.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.programmingfields.com\/wp-content\/uploads\/2020\/01\/WordPress-List-of-Themes.png?resize=580%2C309&#038;ssl=1\" alt=\"Active Theme in WordPress\" class=\"wp-image-2149\" width=\"580\" height=\"309\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/01\/WordPress-List-of-Themes.png?w=1366&amp;ssl=1 1366w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/01\/WordPress-List-of-Themes.png?resize=300%2C160&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/01\/WordPress-List-of-Themes.png?resize=1024%2C546&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/01\/WordPress-List-of-Themes.png?resize=768%2C409&amp;ssl=1 768w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><figcaption class=\"wp-element-caption\"><strong>Active Theme in WordPress<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"> <a href=\"https:\/\/programmingfields.com\/google-autocomplete-address-in-laravel-6\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">How to Implement Google Autocomplete Address in Laravel 6<\/a> <\/p>\n\n\n\n<p>As per this active theme of the current project, the layout is showing over there on our demo website.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"1024\" src=\"https:\/\/i0.wp.com\/www.programmingfields.com\/wp-content\/uploads\/2020\/01\/1.-Default-Template-in-WordPress-1000x1024.png?resize=1000%2C1024&#038;ssl=1\" alt=\"WordPress default template - HTML To WordPress\" class=\"wp-image-2143\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/01\/1.-Default-Template-in-WordPress.png?resize=1000%2C1024&amp;ssl=1 1000w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/01\/1.-Default-Template-in-WordPress.png?resize=293%2C300&amp;ssl=1 293w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/01\/1.-Default-Template-in-WordPress.png?resize=768%2C787&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/01\/1.-Default-Template-in-WordPress.png?w=1366&amp;ssl=1 1366w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\"><strong>Default Active Theme <\/strong><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Delete_Theme_in_WordPress\"><\/span>Delete Theme in WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>You can delete the themes by clicking on the theme. Inside the theme description, there is an option to delete the theme. In the below result, you can see the delete button over there. By clicking on the button the selected theme will be deleted.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1365\" height=\"709\" src=\"https:\/\/i0.wp.com\/www.programmingfields.com\/wp-content\/uploads\/2020\/01\/WordPress-Delete-Theme.png?resize=1365%2C709&#038;ssl=1\" alt=\"Delete theme in WordPress and convert html to wordpress\" class=\"wp-image-2150\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/01\/WordPress-Delete-Theme.png?w=1365&amp;ssl=1 1365w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/01\/WordPress-Delete-Theme.png?resize=300%2C156&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/01\/WordPress-Delete-Theme.png?resize=1024%2C532&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/01\/WordPress-Delete-Theme.png?resize=768%2C399&amp;ssl=1 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\"><strong>Delete Theme in WordPress<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"> <a href=\"https:\/\/programmingfields.com\/drag-and-drop-file-upload-in-laravel-6\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Drag and Drop File Upload in Laravel 6 Using Dropzone js<\/a> <\/p>\n\n\n\n<p>Now, I am going to show you to add an HTML template inside the currently active theme. Basically, I will be adding the template and over the template, I will be calling the website pages.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Convert_HTML_to_WordPress\"><\/span>Convert HTML to WordPress <span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Open the project folder in the VS code editor. Then navigate to the wp-<strong>content-&gt;themes-&gt;twentytwenty<\/strong>. Here, our active theme name is twentytwenty. So just move inside the theme folder. Inside the theme, there will a header, footer and index file. So, I am going to modify the header, footer and index file with our HTML template snippet.<\/p>\n\n\n\n<p>Hence, create a new folder with any name. In my case, I have created a folder for the custom template with the name my-template. Now, paste all the files and folders of the HTML template that you have downloaded.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"394\" height=\"492\" src=\"https:\/\/i0.wp.com\/www.programmingfields.com\/wp-content\/uploads\/2020\/01\/HTML-template.jpg?resize=394%2C492&#038;ssl=1\" alt=\"HTML to WordPress template\" class=\"wp-image-2157\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/01\/HTML-template.jpg?w=394&amp;ssl=1 394w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/01\/HTML-template.jpg?resize=240%2C300&amp;ssl=1 240w\" sizes=\"auto, (max-width: 394px) 100vw, 394px\" \/><figcaption class=\"wp-element-caption\"><strong>HTML Template inside WordPress Theme Folder<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p>Now, we will modify the <strong>header.php<\/strong>, <strong>footer.php <\/strong>and <strong>index.php<\/strong> file of the current theme.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Separate_Header_Footer_and_Index_File\"><\/span>Separate Header, Footer and Index File <span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<pre title=\"header.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n\/**\n * Header file for the Twenty Twenty WordPress default theme.\n *\n * @package WordPress\n * @subpackage Twenty_Twenty\n * @since 1.0.0\n *\/\n\n?&gt;&lt;!DOCTYPE html&gt;\n\n&lt;html class=\"no-js\" &lt;?php language_attributes(); ?&gt;&gt;\n\t&lt;head&gt;\n\n\t&lt;meta charset=\"utf-8\"&gt;\n\t\t&lt;title&gt;My WordPress Demo Website &lt;\/title&gt;\n\t\t&lt;meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\"&gt;\n\t\t&lt;meta content=\"\" name=\"keywords\"&gt;\n\t\t&lt;meta content=\"\" name=\"description\"&gt;\n\n\t\t&lt;!-- Favicons --&gt;\n\t\t&lt;link href=\"&lt;?php echo get_template_directory_uri();?&gt;\/my-template\/img\/favicon.png\" rel=\"icon\"&gt;\n\t\t&lt;link href=\"&lt;?php echo get_template_directory_uri();?&gt;\/my-template\/img\/apple-touch-icon.png\" rel=\"apple-touch-icon\"&gt;\n\n\t\t&lt;!-- Google Fonts --&gt;\n\t\t&lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Poppins:300,400,700|Roboto:300,400,700&amp;display=swap\"\n\t\t\trel=\"stylesheet\"&gt;\n\n\t\t&lt;!-- Bootstrap CSS File --&gt;\n\t\t&lt;link href=\"&lt;?php echo get_template_directory_uri();?&gt;\/my-template\/vendor\/bootstrap\/css\/bootstrap.min.css\" rel=\"stylesheet\"&gt;\n\n\t\t&lt;!-- Vendor CSS Files --&gt;\n\t\t&lt;link href=\"&lt;?php echo get_template_directory_uri();?&gt;\/my-template\/vendor\/icofont\/icofont.min.css\" rel=\"stylesheet\"&gt;\n\t\t&lt;link href=\"&lt;?php echo get_template_directory_uri();?&gt;\/my-template\/vendor\/line-awesome\/css\/line-awesome.min.css\" rel=\"stylesheet\"&gt;\n\t\t&lt;link href=\"&lt;?php echo get_template_directory_uri();?&gt;\/my-template\/vendor\/aos\/aos.css\" rel=\"stylesheet\"&gt;\n\t\t&lt;link href=\"&lt;?php echo get_template_directory_uri();?&gt;\/my-template\/vendor\/owlcarousel\/assets\/owl.carousel.min.css\" rel=\"stylesheet\"&gt;\n\n\t\t&lt;!-- Template Main CSS File --&gt;\n\t\t&lt;link href=\"&lt;?php echo get_template_directory_uri();?&gt;\/my-template\/css\/style.css\" rel=\"stylesheet\"&gt;\n\n\t\t&lt;?php wp_head(); ?&gt;\n\t&lt;\/head&gt;\n\n\t&lt;?php\n\t\t\/\/wp_body_open();\n\t?&gt;\t\n&lt;body&gt;\n\n&lt;div class=\"site-wrap\"&gt;\n  &lt;div class=\"site-mobile-menu site-navbar-target\"&gt;\n\t&lt;div class=\"site-mobile-menu-header\"&gt;\n\t  &lt;div class=\"site-mobile-menu-close mt-3\"&gt;\n\t\t&lt;span class=\"icofont-close js-menu-toggle\"&gt;&lt;\/span&gt;\n\t  &lt;\/div&gt;\n\t&lt;\/div&gt;\n\t&lt;div class=\"site-mobile-menu-body\"&gt;&lt;\/div&gt;\n  &lt;\/div&gt;\n\n  &lt;header class=\"site-navbar js-sticky-header site-navbar-target\" role=\"banner\"&gt;\n\t&lt;div class=\"container\"&gt;\n\t  &lt;div class=\"row align-items-center\"&gt;\n\n\t\t&lt;div class=\"col-6 col-lg-4\"&gt;\n\t\t  &lt;h1 class=\"mb-0 site-logo\"&gt;&lt;a href=\"&lt;?php echo site_url();?&gt;\" class=\"mb-0\"&gt;WordPress Website&lt;\/a&gt;&lt;\/h1&gt;\n\t\t&lt;\/div&gt;\n\n\t\t&lt;div class=\"col-12 col-md-8 d-none d-lg-block\"&gt;\n\t\t  &lt;nav class=\"site-navigation position-relative text-right\" role=\"navigation\"&gt;\n\n\t\t\t&lt;ul class=\"site-menu main-menu js-clone-nav mr-auto d-none d-lg-block\"&gt;\n\t\t\t  &lt;li class=\"active\"&gt;&lt;a href=\"&lt;?php echo site_url();?&gt; \" class=\"nav-link\"&gt;Home&lt;\/a&gt;&lt;\/li&gt;\n\t\t\t  &lt;li&gt;&lt;a href=\"#\" class=\"nav-link\"&gt;Features&lt;\/a&gt;&lt;\/li&gt;\n\t\t\t  &lt;li&gt;&lt;a href=\"#\" class=\"nav-link\"&gt;Pricing&lt;\/a&gt;&lt;\/li&gt;\n\n\t\t\t  &lt;li class=\"has-children\"&gt;\n\t\t\t\t&lt;a href=\"#\" class=\"nav-link\"&gt;Blog&lt;\/a&gt;\n\t\t\t\t&lt;ul class=\"dropdown\"&gt;\n\t\t\t\t  &lt;li&gt;&lt;a href=\"#\" class=\"nav-link\"&gt;Blog&lt;\/a&gt;&lt;\/li&gt;\n\t\t\t\t  &lt;li&gt;&lt;a href=\"#\" class=\"nav-link\"&gt;Blog Sigle&lt;\/a&gt;&lt;\/li&gt;\n\t\t\t\t&lt;\/ul&gt;\n\t\t\t  &lt;\/li&gt;\n\t\t\t  &lt;li&gt;&lt;a href=\"#\" class=\"nav-link\"&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\n\t\t\t&lt;\/ul&gt;\n\t\t  &lt;\/nav&gt;\n\t\t&lt;\/div&gt;\n\n\t\t&lt;div class=\"col-6 d-inline-block d-lg-none ml-md-0 py-3\" style=\"position: relative; top: 3px;\"&gt;\n\t\t  &lt;a href=\"#\" class=\"burger site-menu-toggle js-menu-toggle\" data-toggle=\"collapse\"\n\t\t\tdata-target=\"#main-navbar\"&gt;\n\t\t\t&lt;span&gt;&lt;\/span&gt;\n\t\t  &lt;\/a&gt;\n\t\t&lt;\/div&gt;\n\t  &lt;\/div&gt;\n\t&lt;\/div&gt;\n  &lt;\/header&gt;<\/code><\/pre>\n\n\n\n<p>The above code is simply an HTML snippet in which I have separated the header file. This file will be common for all the other pages. That&#8217;s why I have separated this snippet.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In WordPress, for including any CSS, JS file from the project folder we use a function. <\/li>\n<\/ul>\n\n\n\n<pre title=\"Root Directory Access\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php echo get_template_directory_uri(); ?&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>This function returns the base URL of the project directory. <\/li>\n\n\n\n<li>So, we can include all the required files, libraries by using this function. <\/li>\n\n\n\n<li>For example, according to this project, the base URL will be <code>http:\/\/localhost\/wordpress\/custom-template<\/code><\/li>\n\n\n\n<li>Similarly, to get the home URL of the current WordPress website, I have used <\/li>\n<\/ul>\n\n\n\n<pre title=\"Home URL\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php echo site_url();?&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The above function will return the Home URL of the WordPress website.<\/li>\n<\/ul>\n\n\n\n<pre title=\"index.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n\/**\n * The main template file\n *\n * @package WordPress\n * @subpackage Twenty_Twenty\n * @since 1.0.0\n *\/\nget_header();\n?&gt;\n&lt;main id=\"main\"&gt;\n      &lt;div class=\"hero-section\"&gt;\n        &lt;div class=\"wave\"&gt;\n          &lt;svg width=\"100%\" height=\"355px\" viewBox=\"0 0 1920 355\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n            xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"&gt;\n            &lt;g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"&gt;\n              &lt;g id=\"Apple-TV\" transform=\"translate(0.000000, -402.000000)\" fill=\"#FFFFFF\"&gt;\n                &lt;path\n                  d=\"M0,439.134243 C175.04074,464.89273 327.944386,477.771974 458.710937,477.771974 C654.860765,477.771974 870.645295,442.632362 1205.9828,410.192501 C1429.54114,388.565926 1667.54687,411.092417 1920,477.771974 L1920,757 L1017.15166,757 L0,757 L0,439.134243 Z\"\n                  id=\"Path\"&gt;&lt;\/path&gt;\n              &lt;\/g&gt;\n            &lt;\/g&gt;\n          &lt;\/svg&gt;\n        &lt;\/div&gt;\n\n        &lt;div class=\"container\"&gt;\n          &lt;div class=\"row align-items-center\"&gt;\n            &lt;div class=\"col-12 hero-text-image\"&gt;\n              &lt;div class=\"row\"&gt;\n                &lt;div class=\"col-lg-7 text-center text-lg-left\"&gt;\n                  &lt;h1 data-aos=\"fade-right\"&gt;Promote Your App with SoftLand&lt;\/h1&gt;\n                  &lt;p class=\"mb-5\" data-aos=\"fade-right\" data-aos-delay=\"100\"&gt;Lorem ipsum dolor sit amet, consectetur\n                    adipisicing elit.&lt;\/p&gt;\n                  &lt;p data-aos=\"fade-right\" data-aos-delay=\"200\" data-aos-offset=\"-500\"&gt;&lt;a href=\"#\"\n                      class=\"btn btn-outline-white\"&gt;Get started&lt;\/a&gt;&lt;\/p&gt;\n                &lt;\/div&gt;\n                &lt;div class=\"col-lg-5 iphone-wrap\"&gt;\n                  &lt;img src=\"&lt;?php echo get_template_directory_uri();?&gt;\/my-template\/img\/phone_1.png\" alt=\"Image\" class=\"phone-1\" data-aos=\"fade-right\"&gt;\n                  &lt;img src=\"&lt;?php echo get_template_directory_uri();?&gt;\/my-template\/img\/phone_2.png\" alt=\"Image\" class=\"phone-2\" data-aos=\"fade-right\" data-aos-delay=\"200\"&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n\n      &lt;div class=\"site-section\"&gt;\n        &lt;div class=\"container\"&gt;\n          &lt;div class=\"row justify-content-center text-center mb-5\"&gt;\n            &lt;div class=\"col-md-5\" data-aos=\"fade-up\"&gt;\n              &lt;h2 class=\"section-heading\"&gt;Save your time to using SoftLand&lt;\/h2&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n\n          &lt;div class=\"row\"&gt;\n            &lt;div class=\"col-md-4\" data-aos=\"fade-up\" data-aos-delay=\"\"&gt;\n              &lt;div class=\"feature-1 text-center\"&gt;\n                &lt;div class=\"wrap-icon icon-1\"&gt;\n                  &lt;span class=\"icon la la-users\"&gt;&lt;\/span&gt;\n                &lt;\/div&gt;\n                &lt;h3 class=\"mb-3\"&gt;Explore Your Team&lt;\/h3&gt;\n                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, optio.&lt;\/p&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;div class=\"col-md-4\" data-aos=\"fade-up\" data-aos-delay=\"100\"&gt;\n              &lt;div class=\"feature-1 text-center\"&gt;\n                &lt;div class=\"wrap-icon icon-1\"&gt;\n                  &lt;span class=\"icon la la-toggle-off\"&gt;&lt;\/span&gt;\n                &lt;\/div&gt;\n                &lt;h3 class=\"mb-3\"&gt;Digital Whiteboard&lt;\/h3&gt;\n                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, optio.&lt;\/p&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;div class=\"col-md-4\" data-aos=\"fade-up\" data-aos-delay=\"200\"&gt;\n              &lt;div class=\"feature-1 text-center\"&gt;\n                &lt;div class=\"wrap-icon icon-1\"&gt;\n                  &lt;span class=\"icon la la-umbrella\"&gt;&lt;\/span&gt;\n                &lt;\/div&gt;\n                &lt;h3 class=\"mb-3\"&gt;Design To Development&lt;\/h3&gt;\n                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, optio.&lt;\/p&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n\n        &lt;\/div&gt;\n      &lt;\/div&gt; &lt;!-- .site-section --&gt;\n\n      &lt;div class=\"site-section\"&gt;\n        &lt;div class=\"container\"&gt;\n          &lt;div class=\"row justify-content-center text-center mb-5\" data-aos=\"fade\"&gt;\n            &lt;div class=\"col-md-6 mb-5\"&gt;\n              &lt;img src=\"&lt;?php echo get_template_directory_uri(); ?&gt;\/my-template\/img\/undraw_svg_1.svg\" alt=\"Image\" class=\"img-fluid\"&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n\n          &lt;div class=\"row\"&gt;\n            &lt;div class=\"col-md-4\"&gt;\n              &lt;div class=\"step\"&gt;\n                &lt;span class=\"number\"&gt;01&lt;\/span&gt;\n                &lt;h3&gt;Sign Up&lt;\/h3&gt;\n                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, optio.&lt;\/p&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;div class=\"col-md-4\"&gt;\n              &lt;div class=\"step\"&gt;\n                &lt;span class=\"number\"&gt;02&lt;\/span&gt;\n                &lt;h3&gt;Create Profile&lt;\/h3&gt;\n                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, optio.&lt;\/p&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;div class=\"col-md-4\"&gt;\n              &lt;div class=\"step\"&gt;\n                &lt;span class=\"number\"&gt;03&lt;\/span&gt;\n                &lt;h3&gt;Enjoy the app&lt;\/h3&gt;\n                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, optio.&lt;\/p&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt; &lt;!-- .site-section --&gt;\n\n      &lt;div class=\"site-section pb-0\"&gt;\n        &lt;div class=\"container\"&gt;\n          &lt;div class=\"row align-items-center\"&gt;\n            &lt;div class=\"col-md-4 mr-auto\"&gt;\n              &lt;h2 class=\"mb-4\"&gt;Seamlessly Communicate&lt;\/h2&gt;\n              &lt;p class=\"mb-4\"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur at reprehenderit optio,\n                laudantium eius quod, eum maxime molestiae porro omnis. Dolores aspernatur delectus impedit incidunt\n                dolore mollitia esse natus beatae.&lt;\/p&gt;\n              &lt;p&gt;&lt;a href=\"#\"&gt;Download Now&lt;\/a&gt;&lt;\/p&gt;\n            &lt;\/div&gt;\n            &lt;div class=\"col-md-6\" data-aos=\"fade-left\"&gt;\n              &lt;img src=\"&lt;?php echo get_template_directory_uri();?&gt;\/my-template\/img\/undraw_svg_2.svg\" alt=\"Image\" class=\"img-fluid\"&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt; &lt;!-- .site-section --&gt;\n\n      &lt;div class=\"site-section\"&gt;\n        &lt;div class=\"container\"&gt;\n          &lt;div class=\"row align-items-center\"&gt;\n            &lt;div class=\"col-md-4 ml-auto order-2\"&gt;\n              &lt;h2 class=\"mb-4\"&gt;Gather Feedback&lt;\/h2&gt;\n              &lt;p class=\"mb-4\"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur at reprehenderit optio,\n                laudantium eius quod, eum maxime molestiae porro omnis. Dolores aspernatur delectus impedit incidunt\n                dolore mollitia esse natus beatae.&lt;\/p&gt;\n              &lt;p&gt;&lt;a href=\"#\"&gt;Download Now&lt;\/a&gt;&lt;\/p&gt;\n            &lt;\/div&gt;\n            &lt;div class=\"col-md-6\" data-aos=\"fade-right\"&gt;\n              &lt;img src=\"&lt;?php echo get_template_directory_uri();?&gt;\/my-template\/img\/undraw_svg_3.svg\" alt=\"Image\" class=\"img-fluid\"&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt; &lt;!-- .site-section --&gt;\n\n      &lt;div class=\"site-section border-top border-bottom\"&gt;\n        &lt;div class=\"container\"&gt;\n          &lt;div class=\"row justify-content-center text-center mb-5\"&gt;\n            &lt;div class=\"col-md-4\"&gt;\n              &lt;h2 class=\"section-heading\"&gt;Review From Our Users&lt;\/h2&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=\"row justify-content-center text-center\"&gt;\n            &lt;div class=\"col-md-7\"&gt;\n              &lt;div class=\"owl-carousel testimonial-carousel\"&gt;\n                &lt;div class=\"review text-center\"&gt;\n                  &lt;p class=\"stars\"&gt;\n                    &lt;span class=\"icofont-star\"&gt;&lt;\/span&gt;\n                    &lt;span class=\"icofont-star\"&gt;&lt;\/span&gt;\n                    &lt;span class=\"icofont-star\"&gt;&lt;\/span&gt;\n                    &lt;span class=\"icofont-star\"&gt;&lt;\/span&gt;\n                    &lt;span class=\"icofont-star muted\"&gt;&lt;\/span&gt;\n                  &lt;\/p&gt;\n                  &lt;h3&gt;Excellent App!&lt;\/h3&gt;\n                  &lt;blockquote&gt;\n                    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ea delectus pariatur, numquam\n                      aperiam dolore nam optio dolorem facilis itaque voluptatum recusandae deleniti minus animi,\n                      provident voluptates consectetur maiores quos.&lt;\/p&gt;\n                  &lt;\/blockquote&gt;\n\n                  &lt;p class=\"review-user\"&gt;\n                    &lt;img src=\"&lt;?php echo get_template_directory_uri();?&gt;\/my-template\/img\/person_1.jpg\" alt=\"Image\" class=\"img-fluid rounded-circle mb-3\"&gt;\n                    &lt;span class=\"d-block\"&gt;\n                      &lt;span class=\"text-black\"&gt;Jean Doe&lt;\/span&gt;, \u2014 App User\n                    &lt;\/span&gt;\n                  &lt;\/p&gt;\n                &lt;\/div&gt;\n\n                &lt;div class=\"review text-center\"&gt;\n                  &lt;p class=\"stars\"&gt;\n                    &lt;span class=\"icofont-star\"&gt;&lt;\/span&gt;\n                    &lt;span class=\"icofont-star\"&gt;&lt;\/span&gt;\n                    &lt;span class=\"icofont-star\"&gt;&lt;\/span&gt;\n                    &lt;span class=\"icofont-star\"&gt;&lt;\/span&gt;\n                    &lt;span class=\"icofont-star muted\"&gt;&lt;\/span&gt;\n                  &lt;\/p&gt;\n                  &lt;h3&gt;This App is easy to use!&lt;\/h3&gt;\n                  &lt;blockquote&gt;\n                    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ea delectus pariatur, numquam\n                      aperiam dolore nam optio dolorem facilis itaque voluptatum recusandae deleniti minus animi,\n                      provident voluptates consectetur maiores quos.&lt;\/p&gt;\n                  &lt;\/blockquote&gt;\n\n                  &lt;p class=\"review-user\"&gt;\n                    &lt;img src=\"&lt;?php echo get_template_directory_uri();?&gt;\/my-template\/img\/person_2.jpg\" alt=\"Image\" class=\"img-fluid rounded-circle mb-3\"&gt;\n                    &lt;span class=\"d-block\"&gt;\n                      &lt;span class=\"text-black\"&gt;Johan Smith&lt;\/span&gt;, \u2014 App User\n                    &lt;\/span&gt;\n                  &lt;\/p&gt;\n                &lt;\/div&gt;\n\n                &lt;div class=\"review text-center\"&gt;\n                  &lt;p class=\"stars\"&gt;\n                    &lt;span class=\"icofont-star\"&gt;&lt;\/span&gt;\n                    &lt;span class=\"icofont-star\"&gt;&lt;\/span&gt;\n                    &lt;span class=\"icofont-star\"&gt;&lt;\/span&gt;\n                    &lt;span class=\"icofont-star\"&gt;&lt;\/span&gt;\n                    &lt;span class=\"icofont-star muted\"&gt;&lt;\/span&gt;\n                  &lt;\/p&gt;\n                  &lt;h3&gt;Awesome functionality!&lt;\/h3&gt;\n                  &lt;blockquote&gt;\n                    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ea delectus pariatur, numquam\n                      aperiam dolore nam optio dolorem facilis itaque voluptatum recusandae deleniti minus animi,\n                      provident voluptates consectetur maiores quos.&lt;\/p&gt;\n                  &lt;\/blockquote&gt;\n\n                  &lt;p class=\"review-user\"&gt;\n                    &lt;img src=\"&lt;?php echo get_template_directory_uri();?&gt;\/my-template\/img\/person_3.jpg\" alt=\"Image\" class=\"img-fluid rounded-circle mb-3\"&gt;\n                    &lt;span class=\"d-block\"&gt;\n                      &lt;span class=\"text-black\"&gt;Jean Thunberg&lt;\/span&gt;, \u2014 App User\n                    &lt;\/span&gt;\n                  &lt;\/p&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n\n      &lt;div class=\"site-section cta-section\"&gt;\n        &lt;div class=\"container\"&gt;\n          &lt;div class=\"row align-items-center\"&gt;\n            &lt;div class=\"col-md-6 mr-auto text-center text-md-left mb-5 mb-md-0\"&gt;\n              &lt;h2&gt;Starts Publishing Your Apps&lt;\/h2&gt;\n            &lt;\/div&gt;\n            &lt;div class=\"col-md-5 text-center text-md-right\"&gt;\n              &lt;p&gt;&lt;a href=\"#\" class=\"btn\"&gt;&lt;span class=\"icofont-brand-apple mr-3\"&gt;&lt;\/span&gt;App store&lt;\/a&gt; &lt;a href=\"#\"\n                  class=\"btn\"&gt;&lt;span class=\"icofont-ui-play mr-3\"&gt;&lt;\/span&gt;Google play&lt;\/a&gt;&lt;\/p&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/main&gt;\n&lt;?php\nget_footer();<\/code><\/pre>\n\n\n\n<p>The above snippet is the main content of the HTML template that I have downloaded. At the very top, I have included the<strong> header.php<\/strong> file using the <strong>get_header() <\/strong>function. This is very similar to the normal PHP. At the bottom, I have included the footer.php file using the <strong>get_footer()<\/strong> function.<\/p>\n\n\n\n<p>Here, this is the footer snippet.<\/p>\n\n\n\n<pre title=\"footer.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n\/**\n * The template for displaying the footer\n *\n * Contains the opening of the #site-footer div and all content after.\n *\n * @package WordPress\n * @subpackage Twenty_Twenty\n * @since 1.0.0\n *\/\n\n?&gt;\n&lt;footer class=\"footer\" role=\"contentinfo\"&gt;\n      &lt;div class=\"container\"&gt;\n        &lt;div class=\"row\"&gt;\n          &lt;div class=\"col-md-4 mb-4 mb-md-0\"&gt;\n            &lt;h3&gt;About Us&lt;\/h3&gt;\n            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ea delectus pariatur, numquam aperiam\n              dolore nam optio dolorem facilis itaque voluptatum recusandae deleniti minus animi.&lt;\/p&gt;\n            &lt;p class=\"social\"&gt;\n              &lt;a href=\"#\"&gt;&lt;span class=\"icofont-twitter\"&gt;&lt;\/span&gt;&lt;\/a&gt;\n              &lt;a href=\"#\"&gt;&lt;span class=\"icofont-facebook\"&gt;&lt;\/span&gt;&lt;\/a&gt;\n              &lt;a href=\"#\"&gt;&lt;span class=\"icofont-dribbble\"&gt;&lt;\/span&gt;&lt;\/a&gt;\n              &lt;a href=\"#\"&gt;&lt;span class=\"icofont-behance\"&gt;&lt;\/span&gt;&lt;\/a&gt;\n            &lt;\/p&gt;\n          &lt;\/div&gt;\n          &lt;div class=\"col-md-7 ml-auto\"&gt;\n            &lt;div class=\"row site-section pt-0\"&gt;\n              &lt;div class=\"col-md-4 mb-4 mb-md-0\"&gt;\n                &lt;h3&gt;Navigation&lt;\/h3&gt;\n                &lt;ul class=\"list-unstyled\"&gt;\n                  &lt;li&gt;&lt;a href=\"#\"&gt;Pricing&lt;\/a&gt;&lt;\/li&gt;\n                  &lt;li&gt;&lt;a href=\"#\"&gt;Features&lt;\/a&gt;&lt;\/li&gt;\n                  &lt;li&gt;&lt;a href=\"#\"&gt;Blog&lt;\/a&gt;&lt;\/li&gt;\n                  &lt;li&gt;&lt;a href=\"#\"&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\n                &lt;\/ul&gt;\n              &lt;\/div&gt;\n              &lt;div class=\"col-md-4 mb-4 mb-md-0\"&gt;\n                &lt;h3&gt;Services&lt;\/h3&gt;\n                &lt;ul class=\"list-unstyled\"&gt;\n                  &lt;li&gt;&lt;a href=\"#\"&gt;Team&lt;\/a&gt;&lt;\/li&gt;\n                  &lt;li&gt;&lt;a href=\"#\"&gt;Collaboration&lt;\/a&gt;&lt;\/li&gt;\n                  &lt;li&gt;&lt;a href=\"#\"&gt;Todos&lt;\/a&gt;&lt;\/li&gt;\n                  &lt;li&gt;&lt;a href=\"#\"&gt;Events&lt;\/a&gt;&lt;\/li&gt;\n                &lt;\/ul&gt;\n              &lt;\/div&gt;\n              &lt;div class=\"col-md-4 mb-4 mb-md-0\"&gt;\n                &lt;h3&gt;Downloads&lt;\/h3&gt;\n                &lt;ul class=\"list-unstyled\"&gt;\n                  &lt;li&gt;&lt;a href=\"#\"&gt;Get from the App Store&lt;\/a&gt;&lt;\/li&gt;\n                  &lt;li&gt;&lt;a href=\"#\"&gt;Get from the Play Store&lt;\/a&gt;&lt;\/li&gt;\n                &lt;\/ul&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n\n        &lt;div class=\"row justify-content-center text-center\"&gt;\n          &lt;div class=\"col-md-7\"&gt;\n            &lt;p class=\"copyright\"&gt;\u00a9 Copyright Programming Fields. All Rights Reserved&lt;\/p&gt;\n            &lt;div class=\"credits\"&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n\n      &lt;\/div&gt;\n    &lt;\/footer&gt;\n  &lt;\/div&gt; &lt;!-- .site-wrap --&gt;\n\n  &lt;a href=\"#\" class=\"back-to-top\"&gt;&lt;i class=\"icofont-simple-up\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n\n  &lt;!-- Vendor JS Files --&gt;\n  &lt;script src=\"&lt;?php echo get_template_directory_uri();?&gt; \/my-template\/vendor\/jquery\/jquery.min.js\"&gt;&lt;\/script&gt;\n  &lt;script src=\"&lt;?php echo get_template_directory_uri();?&gt; \/my-template\/vendor\/jquery\/jquery-migrate.min.js\"&gt;&lt;\/script&gt;\n  &lt;script src=\"&lt;?php echo get_template_directory_uri();?&gt; \/my-template\/vendor\/bootstrap\/js\/bootstrap.min.js\"&gt;&lt;\/script&gt;\n  &lt;script src=\"&lt;?php echo get_template_directory_uri();?&gt; \/my-template\/vendor\/easing\/easing.min.js\"&gt;&lt;\/script&gt;\n  &lt;script src=\"&lt;?php echo get_template_directory_uri();?&gt; \/my-template\/vendor\/php-email-form\/validate.js\"&gt;&lt;\/script&gt;\n  &lt;script src=\"&lt;?php echo get_template_directory_uri();?&gt; \/my-template\/vendor\/sticky\/sticky.js\"&gt;&lt;\/script&gt;\n  &lt;script src=\"&lt;?php echo get_template_directory_uri();?&gt; \/my-template\/vendor\/aos\/aos.js\"&gt;&lt;\/script&gt;\n  &lt;script src=\"&lt;?php echo get_template_directory_uri();?&gt; \/my-template\/vendor\/owlcarousel\/owl.carousel.min.js\"&gt;&lt;\/script&gt;\n\n  &lt;!-- Template Main JS File --&gt;\n  &lt;script src=\"&lt;?php echo get_template_directory_uri();?&gt; \/my-template\/js\/main.js\"&gt;&lt;\/script&gt;\n\n\t&lt;?php wp_footer(); ?&gt;\n\n\t&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>The above snippets are ready to run. The header, footer and index file will make a complete webpage for the static website. So, let&#8217;s check it.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1366\" height=\"5136\" src=\"https:\/\/i0.wp.com\/www.programmingfields.com\/wp-content\/uploads\/2020\/01\/Homepage.png?resize=1366%2C5136&#038;ssl=1\" alt=\"HTML to WordPress Homepage\" class=\"wp-image-2169\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/01\/Homepage.png?w=1366&amp;ssl=1 1366w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/01\/Homepage.png?resize=80%2C300&amp;ssl=1 80w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/01\/Homepage.png?resize=272%2C1024&amp;ssl=1 272w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/01\/Homepage.png?resize=768%2C2888&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/01\/Homepage.png?resize=545%2C2048&amp;ssl=1 545w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\"><strong>Homepage Result &#8211; WordPress<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"> <a href=\"https:\/\/programmingfields.com\/upload-multiple-images-in-laravel-6\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">How to Upload Multiple Images in Laravel 6 with Validation<\/a> <\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>This post was a basic demonstration for converting a single page <strong>HTML template to WordPress<\/strong>. In our upcoming posts, I will show you a complete guide on how you can create a custom template inside WordPress. Also, for the custom blog and many more. So, stay connected with us for more interesting programming tutorials.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You can convert HTML to WordPress very easily. As we know, WordPress is built on PHP. So, we usually convert any HTML to PHP by separating the header, footer, and sidebar. Similarly, we can do the same stuff in WordPress. You can convert any HTML template to WordPress and make custom WordPress HTML templates. WordPress [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":2171,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1016],"tags":[1107,1108,1068,1069,1109],"yst_prominent_words":[1080,1099,1201,1094,1102,1104,1100,1101,1103,396,1085,1105,1081,1086,1098,1202,493,1083],"class_list":{"0":"post-2134","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-wordpress","8":"tag-html-to-wordpress","9":"tag-wordpress-custom-template","10":"tag-wordpress-free-download","11":"tag-wordpress-install","12":"tag-wordpress-template","13":"entry"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/01\/Convert-HTML-to-WordPress.png?fit=560%2C315&ssl=1","jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/2134","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/comments?post=2134"}],"version-history":[{"count":3,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/2134\/revisions"}],"predecessor-version":[{"id":8920,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/2134\/revisions\/8920"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media\/2171"}],"wp:attachment":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media?parent=2134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/categories?post=2134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/tags?post=2134"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/yst_prominent_words?post=2134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}