{"id":2292,"date":"2020-02-08T09:44:30","date_gmt":"2020-02-08T09:44:30","guid":{"rendered":"https:\/\/programmingfields.com\/?p=2292"},"modified":"2026-05-02T06:31:30","modified_gmt":"2026-05-02T06:31:30","slug":"create-custom-template-in-wordpress","status":"publish","type":"post","link":"https:\/\/programmingfields.com\/create-custom-template-in-wordpress\/","title":{"rendered":"How to Create Custom Template in WordPress"},"content":{"rendered":"\n<p>In WordPress, you can create your own custom template. This custom template can be used as the main template inside your pre-installed theme. The architecture of WordPress is very easy to understand. WordPress allows us to customize any pre-built theme or by using any theme you can create any custom template page. As I had shown you in my previous WordPress post, we had already learned to <a rel=\"noreferrer noopener\" aria-label=\"convert the HTML template into WordPress (opens in a new tab)\" href=\"https:\/\/programmingfields.com\/convert-html-template-to-wordpress\/\" target=\"_blank\">convert the HTML template into WordPress<\/a>. So, in this post, I will be showing you how you can create your own <strong>WordPress custom template<\/strong>. if you are an absolute beginner in WordPress then I recommend you to go through my previous post first. So, that you will have much understanding of WordPress themes and it&#8217;s customization. <\/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\/create-custom-template-in-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\/create-custom-template-in-wordpress\/#WordPress_Custom_Template\" >WordPress Custom Template<\/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\/create-custom-template-in-wordpress\/#WordPress_File_Structure\" >WordPress File Structure<\/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\/create-custom-template-in-wordpress\/#WordPress_Themes\" >WordPress Themes<\/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\/create-custom-template-in-wordpress\/#Create_a_Custom_Template_in_WordPress\" >Create a Custom Template in WordPress<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/programmingfields.com\/create-custom-template-in-wordpress\/#Assign_Custom_Template_Design_PostPage\" >Assign Custom Template Design Post\/Page<\/a><\/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\/create-custom-template-in-wordpress\/#Create_Homepage_Template_Using_Custom_Template\" >Create Homepage Template Using Custom Template<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/programmingfields.com\/create-custom-template-in-wordpress\/#Create_a_Blank_Page_in_WordPress\" >Create a Blank Page in WordPress<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/programmingfields.com\/create-custom-template-in-wordpress\/#Unlink_CSS_of_Default_WordPress_Themes\" >Unlink CSS of Default WordPress Themes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/programmingfields.com\/create-custom-template-in-wordpress\/#Make_Homepage_to_Custom_Page\" >Make Homepage to Custom Page<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/programmingfields.com\/create-custom-template-in-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>Before continuing to this WordPress post, your system must be ready with the below tools.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>PHP version &gt;=7.3<\/strong><\/li><li><strong>MySQL &gt;=5.6 OR<\/strong>&nbsp;<strong>Maria DB &gt;= 10.1<\/strong><\/li><li><strong>Server \u2013 Apache\/Nginx<\/strong><\/li><li><strong>VS Code Editor (Optional)<\/strong><\/li><\/ul>\n\n\n\n<p>You can use any editor as per your usability.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"WordPress_Custom_Template\"><\/span>WordPress Custom Template<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>I am assuming you have a fresh WordPress setup and configured in your system. If you don&#8217;t know how to install WordPress in the localhost then please go to the <a rel=\"noreferrer noopener\" aria-label=\"WordPress installation post  (opens in a new tab)\" href=\"https:\/\/programmingfields.com\/download-and-install-wordpress-in-localhost\/\" target=\"_blank\">WordPress installation post<\/a>. So, I have an already setup of WordPress in which, I will be creating the custom template for WordPress.<\/p>\n\n\n\n<p>But before moving to the custom template, let&#8217;s dive into the themes and templates in WordPress. So, here I have the default template which is installed with WordPress installation. You can select any other theme inside the WordPress dashboard by navigating <strong>Appearance-&gt;Themes<\/strong>.<\/p>\n\n\n\n<p>Here, I have run my application and the default theme is showing below.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1346\" height=\"592\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/1.-Default-theme.jpg?resize=1346%2C592&#038;ssl=1\" alt=\"WordPress Default Theme\" class=\"wp-image-2307\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/1.-Default-theme.jpg?w=1346&amp;ssl=1 1346w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/1.-Default-theme.jpg?resize=300%2C132&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/1.-Default-theme.jpg?resize=1024%2C450&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/1.-Default-theme.jpg?resize=768%2C338&amp;ssl=1 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption><strong>WordPress Default Theme<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\"> <a href=\"https:\/\/programmingfields.com\/laravel-6-rest-api-with-passport-auth\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">RESTful APIs in Laravel 6 with Passport Authentication<\/a> <\/p>\n\n\n\n<p>In the Dashboard section under the<strong> Appearance-&gt;Themes,<\/strong> you will see the default activated theme. You can delete the rest themes from the theme section. So, that we&#8217;ll have only one theme activated in the theme list. Inside that particular theme, I will be creating a custom template.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"WordPress_File_Structure\"><\/span>WordPress File Structure<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Open the project inside the VS code editor or any other that you like most. Now, we&#8217;ll understand some basic architecture of WordPress. So, you will be aware of the file structure of WordPress.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"470\" height=\"552\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/2.-WordPress-Structure.jpg?resize=470%2C552&#038;ssl=1\" alt=\"WordPress Theme structure\" class=\"wp-image-2310\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/2.-WordPress-Structure.jpg?w=470&amp;ssl=1 470w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/2.-WordPress-Structure.jpg?resize=255%2C300&amp;ssl=1 255w\" sizes=\"auto, (max-width: 470px) 100vw, 470px\" \/><figcaption><strong>WordPress File Structure<\/strong><\/figcaption><\/figure><\/div>\n\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<ul class=\"wp-block-list\"><li>Inside WordPress, the first folder is<strong> wp-admin<\/strong>. This file is related to the admin dashboard, in which you are already logged in. All the files related to the admin dashboard will be residing inside this folder.<\/li><li><strong>wp-content<\/strong> &#8211; This folder contains the front-end related files, themes, and plugins. You can find the installed themes and plugins here.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/3.-wp-content.jpg?resize=470%2C530&#038;ssl=1\" alt=\"wp-content\" class=\"wp-image-2312\" width=\"470\" height=\"530\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/3.-wp-content.jpg?w=470&amp;ssl=1 470w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/3.-wp-content.jpg?resize=266%2C300&amp;ssl=1 266w\" sizes=\"auto, (max-width: 470px) 100vw, 470px\" \/><figcaption><strong>WordPress wp-content<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>I will be moving to the plugins in the upcoming posts. So, for this post, let&#8217;s move to the <strong>themes <\/strong>section.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"WordPress_Themes\"><\/span>WordPress Themes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Inside the wp-content navigate to the themes folder. The default active theme is <strong>twentytwenty <\/strong>here. Inside this theme, you can see the files like assets (CSS, js, and images), header, footer, and other required files.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"485\" height=\"541\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/5.-Twenty-Twenty-Theme.jpg?resize=485%2C541&#038;ssl=1\" alt=\"create custom template\" class=\"wp-image-2318\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/5.-Twenty-Twenty-Theme.jpg?w=485&amp;ssl=1 485w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/5.-Twenty-Twenty-Theme.jpg?resize=269%2C300&amp;ssl=1 269w\" sizes=\"auto, (max-width: 485px) 100vw, 485px\" \/><figcaption><strong>WordPress Theme Structure<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\"> <a href=\"https:\/\/programmingfields.com\/resize-image-in-laravel-6-before-upload\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">How to Resize Image in Laravel 6 Before Upload<\/a> <\/p>\n\n\n\n<p>WordPress themes contain the header, footer, sidebar, widgets, post single, taxonomy, archive, and several other files. These all are the necessary file on which WordPress platform works. We&#8217;ll see all these in our upcoming sections.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_a_Custom_Template_in_WordPress\"><\/span>Create a Custom Template in WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Inside the theme folder (<strong>twentytwenty<\/strong>) just create a new folder. I have created the folder with the name <strong>custom-template<\/strong>.<\/p>\n\n\n\n<p>Now, create a new file inside the folder. In my case, the file name is <strong>blog-template.php<\/strong>. Now paste the below code which has paired in the comment.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n\n\/**\n * Template Name: Blog \n * Template Post Type: post, page \n * \n *\/\n\n?&gt;<\/code><\/pre>\n\n\n\n<p>In the above snippet, I have defined the template name and post type. WordPress will understand this commented code to a theme. Because it is defined as Template Name. Similarly, this custom template can be used for the post and page.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1078\" height=\"597\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/6.-Custom-Template.jpg?resize=1078%2C597&#038;ssl=1\" alt=\"Custom Template - WordPress\" class=\"wp-image-2320\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/6.-Custom-Template.jpg?w=1078&amp;ssl=1 1078w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/6.-Custom-Template.jpg?resize=300%2C166&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/6.-Custom-Template.jpg?resize=1024%2C567&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/6.-Custom-Template.jpg?resize=768%2C425&amp;ssl=1 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption>Custom Template &#8211; WordPress<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\"> <a href=\"https:\/\/programmingfields.com\/ajax-in-laravel-6-with-todo-application\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">How to Use AJAX in Laravel 6 with ToDo Application<\/a> <\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Assign_Custom_Template_Design_PostPage\"><\/span>Assign Custom Template Design Post\/Page<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>At this time, I haven&#8217;t designed the custom template. Before designing the layout, I want to show the template selection from the post\/page section. So, just move to the dashboard section. Now, inside the Posts section, just create a new post or simply open the default post titled Hello World.<\/p>\n\n\n\n<p>On the right side at the bottom section, you will see the <strong>Post Attribute <\/strong>feature. This is available in the post. If you will open the page or will create any new page, then you will see the <strong>Page Attribute <\/strong>there.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"308\" height=\"557\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/7.-Post-Attributes.jpg?resize=308%2C557&#038;ssl=1\" alt=\"WordPress Post Default Template\" class=\"wp-image-2326\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/7.-Post-Attributes.jpg?w=308&amp;ssl=1 308w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/7.-Post-Attributes.jpg?resize=166%2C300&amp;ssl=1 166w\" sizes=\"auto, (max-width: 308px) 100vw, 308px\" \/><figcaption><strong>Post Default Template<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>Now, when you click on the <strong>Post Attribute-&gt;Templates<\/strong> then inside the dropdown list, you will see the Blog template that we have created above.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"368\" height=\"549\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/2020-02-05_01h08_43.png?resize=368%2C549&#038;ssl=1\" alt=\"\" class=\"wp-image-2328\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/2020-02-05_01h08_43.png?w=368&amp;ssl=1 368w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/2020-02-05_01h08_43.png?resize=201%2C300&amp;ssl=1 201w\" sizes=\"auto, (max-width: 368px) 100vw, 368px\" \/><figcaption><strong>Select Template Page For Post<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>Now, select it to default template for the blog post.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1192\" height=\"620\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/9.-Make-Default-Template.png?resize=1192%2C620&#038;ssl=1\" alt=\"Make Default Template\" class=\"wp-image-2329\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/9.-Make-Default-Template.png?w=1192&amp;ssl=1 1192w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/9.-Make-Default-Template.png?resize=300%2C156&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/9.-Make-Default-Template.png?resize=1024%2C533&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/9.-Make-Default-Template.png?resize=768%2C399&amp;ssl=1 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption><strong>Make Default Template<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\"> <a href=\"https:\/\/programmingfields.com\/upload-files-and-images-in-laravel-6\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">How to Upload Files and Images in Laravel 6 with Validation<\/a> <\/p>\n\n\n\n<p>Now, publish the post and just open it in the browser. As a result, you will see a blank post. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"966\" height=\"378\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/8.-Blank-Post.jpg?resize=966%2C378&#038;ssl=1\" alt=\"\" class=\"wp-image-2334\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/8.-Blank-Post.jpg?w=966&amp;ssl=1 966w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/8.-Blank-Post.jpg?resize=300%2C117&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/8.-Blank-Post.jpg?resize=768%2C301&amp;ssl=1 768w\" sizes=\"auto, (max-width: 966px) 100vw, 966px\" \/><\/figure><\/div>\n\n\n\n<p> This is happening actually, we haven&#8217;t data in our custom template. That&#8217;s why it is showing a blank post. No matter, what content the post has. It will depend upon only the template that has assigned.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_Homepage_Template_Using_Custom_Template\"><\/span>Create Homepage Template Using Custom Template<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Hence, I am going to create a template for the homepage. Then I will make it the default page for home. So, just proceed further.<\/p>\n\n\n\n<p>Therefore, first of all, download a free bootstrap template if you don&#8217;t want to create your own template. Paste the <strong>CSS<\/strong>, <strong>js <\/strong>and <strong>images <\/strong>files inside the themes-&gt;twentytwenty-&gt;assets folder. Now, navigate to <strong>wp-content-&gt;themes-&gt;twentytwenty-&gt;header.php<\/strong> and paste the below code there.<\/p>\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\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;My Blog&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>Similarly, in the <strong>footer.php <\/strong>file paste the code of the footer section.<\/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 * @link https:\/\/developer.wordpress.org\/themes\/basics\/template-files\/#template-partials\n *\n * @package WordPress\n * @subpackage Twenty_Twenty\n * @since 1.0.0\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>Now, we have the header and footer Hence, now we need the main content, so for that, we will create a custom template file. Therefore, inside the custom-template folder create a new file. Put the name <strong>homepage.php<\/strong>. Enter the template name and the main content snippet as showing below.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n\n\/**\n * Template Name: Homepage \n *  \n *\/\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\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        &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();\n?&gt;\n<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-center\"> <a href=\"https:\/\/programmingfields.com\/laravel-6-crud-application\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Laravel 6 CRUD Application For Beginners<\/a> <\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_a_Blank_Page_in_WordPress\"><\/span>Create a Blank Page in WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Once, you are done with the above steps, now, simply create a blank page in the WordPress dashboard section. This page will be assigned to the WordPress custom template that we have created in the above step. Inside the page attributes, you will see the template name. So, just select the <strong>Homepage <\/strong>template from the list. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1168\" height=\"614\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/Homepage-Template.png?resize=1168%2C614&#038;ssl=1\" alt=\"custom template homepage\" class=\"wp-image-2343\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/Homepage-Template.png?w=1168&amp;ssl=1 1168w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/Homepage-Template.png?resize=300%2C158&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/Homepage-Template.png?resize=1024%2C538&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/Homepage-Template.png?resize=768%2C404&amp;ssl=1 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption><strong>Create WordPress Blank Page<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>Then publish the page. Now, you have the homepage with WordPress custom template design. To see the result, just open it in the browser.<\/p>\n\n\n\n<p>In my case, this is the URL.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">http:\/\/localhost\/wordpress\/wordpress-custom-template\/homepage\/<\/code><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1366\" height=\"5477\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/My-WordPress-Demo-Website.png?resize=1366%2C5477&#038;ssl=1\" alt=\"custom template result wordpress\" class=\"wp-image-2348\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/My-WordPress-Demo-Website.png?w=1366&amp;ssl=1 1366w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/My-WordPress-Demo-Website.png?resize=75%2C300&amp;ssl=1 75w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/My-WordPress-Demo-Website.png?resize=768%2C3079&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/My-WordPress-Demo-Website.png?resize=383%2C1536&amp;ssl=1 383w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/My-WordPress-Demo-Website.png?resize=511%2C2048&amp;ssl=1 511w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption><strong>Homepage &#8211; WordPress Custom Template<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>In the above result, you can see the WordPress custom template design has been called to the homepage. But one more thing to notice here, in every anchor tag there is a default underline. This is actually happening with the CSS. Actually, the problem is the default WordPress theme that we are using to create a custom template has somewhere linked with its own CSS file. So, sometimes it overlaps both the CSS (custom template CSS and theme CSS). Hence, we have to unlink the default CSS of WordPress theme.<\/p>\n\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<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Unlink_CSS_of_Default_WordPress_Themes\"><\/span>Unlink CSS of Default WordPress Themes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>To break the link of default CSS and JS file in the WordPress theme, just navigate to the <strong>functions.php<\/strong> file inside the theme folder.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"358\" height=\"394\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/theme-function.png?resize=358%2C394&#038;ssl=1\" alt=\"WordPress theme functions.php file\" class=\"wp-image-2359\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/theme-function.png?w=358&amp;ssl=1 358w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/theme-function.png?resize=273%2C300&amp;ssl=1 273w\" sizes=\"auto, (max-width: 358px) 100vw, 358px\" \/><figcaption><strong>WordPress Theme &#8211; functions.php<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>You will have the entire code of that particular theme which is installed. Simply find out the <strong>wp_enqueue_style()<\/strong>. The function is used to call the CSS file inside the theme. So, we don&#8217;t need the default CSS if we are creating the custom template in the WordPress themes. See the result.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1094\" height=\"325\" src=\"https:\/\/i2.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/Un-link-CSS-from-function.png?fit=1024%2C304&amp;ssl=1\" alt=\"WordPress Theme functions - CSS and JS\" class=\"wp-image-2360\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/Un-link-CSS-from-function.png?w=1094&amp;ssl=1 1094w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/Un-link-CSS-from-function.png?resize=300%2C89&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/Un-link-CSS-from-function.png?resize=1024%2C304&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/Un-link-CSS-from-function.png?resize=768%2C228&amp;ssl=1 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption><strong>WordPress Theme functions &#8211; CSS and JS<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\"> <a href=\"https:\/\/programmingfields.com\/how-to-implement-pagination-in-laravel-6\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">How to Implement Pagination in Laravel 6 with Example<\/a> <\/p>\n\n\n\n<p>Now, comment or delete the line there. Here is the snippet after commenting the <strong>wp_enqueue_style()<\/strong>.<\/p>\n\n\n\n<pre title=\"functions.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">function twentytwenty_register_styles() {\n\n\t$theme_version = wp_get_theme()-&gt;get( 'Version' );\n\n\t\/\/ wp_enqueue_style( 'twentytwenty-style', get_stylesheet_uri(), array(), $theme_version );\n\twp_style_add_data( 'twentytwenty-style', 'rtl', 'replace' );\n\n\t\/\/ Add output of Customizer settings as inline style.\n\twp_add_inline_style( 'twentytwenty-style', twentytwenty_get_customizer_css( 'front-end' ) );\n\n\t\/\/ Add print CSS.\n\t\/\/ wp_enqueue_style( 'twentytwenty-print-style', get_template_directory_uri() . '\/print.css', null, $theme_version, 'print' );\n}<\/code><\/pre>\n\n\n\n<p>Now, save and refresh the homepage which is already running in your browser. In the below result, you can see the template page is showing perfectly. Now, in the anchor tags, there is no underline property of the CSS.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1366\" height=\"5136\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/My-WordPress-Demo-Website-result.png?resize=1366%2C5136&#038;ssl=1\" alt=\"WordPress Custom Template - Homepage result\" class=\"wp-image-2364\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/My-WordPress-Demo-Website-result.png?w=1366&amp;ssl=1 1366w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/My-WordPress-Demo-Website-result.png?resize=80%2C300&amp;ssl=1 80w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/My-WordPress-Demo-Website-result.png?resize=272%2C1024&amp;ssl=1 272w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/My-WordPress-Demo-Website-result.png?resize=768%2C2888&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/My-WordPress-Demo-Website-result.png?resize=545%2C2048&amp;ssl=1 545w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption><strong>WordPress Custom Template &#8211; Homepage result<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Make_Homepage_to_Custom_Page\"><\/span>Make Homepage to Custom Page<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In the URL you have noticed that after the project directory name the page name is showing.<\/p>\n\n\n\n<pre title=\"Homepage URL\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">http:\/\/localhost\/wordpress\/wordpress-custom-template\/homepage\/<\/code><\/pre>\n\n\n\n<p>We will have to remove the page name for the homepage. Actually, the homepage will be the index page for this WordPress project. So, we will have to make it the default index page. For this, you will have to navigate to the <strong>Settings-&gt;Reading<\/strong>.<\/p>\n\n\n\n<p>You will see an option for <strong>Your homepage displays<\/strong>. The default is the <strong>latest posts<\/strong>. If you are creating a blog then it is perfect to make all the latest posts on the homepage. But what, if you are creating any informative website or custom website apart from the blog. Or in some cases of the blog, if you don&#8217;t want to show the blog page to the homepage then, in that case, you will have to create a separate page.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1125\" height=\"657\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/Default-Page-in-WordPress.png?resize=1125%2C657&#038;ssl=1\" alt=\"\" class=\"wp-image-2369\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/Default-Page-in-WordPress.png?w=1125&amp;ssl=1 1125w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/Default-Page-in-WordPress.png?resize=300%2C175&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/Default-Page-in-WordPress.png?resize=1024%2C598&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/Default-Page-in-WordPress.png?resize=768%2C449&amp;ssl=1 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption><strong>Static Page For Homepage<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>So, in the settings, just click on <strong>A static page <\/strong>for the homepage. Then from the dropdown list, just select the page that you want to make the Homepage. Hence, we have only a single page that we have created here. So, just make it to the homepage. Then save the settings open the website.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1022\" height=\"542\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/Homepage-Default-Page.png?resize=1022%2C542&#038;ssl=1\" alt=\"\" class=\"wp-image-2370\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/Homepage-Default-Page.png?w=1022&amp;ssl=1 1022w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/Homepage-Default-Page.png?resize=300%2C159&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/Homepage-Default-Page.png?resize=768%2C407&amp;ssl=1 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption><strong>Static Page For Homepage<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<pre title=\"Homepage URL\" class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">http:\/\/localhost\/wordpress\/wordpress-custom-template\/<\/code><\/pre>\n\n\n\n<p>Now, the homepage can be called without giving the page name. Because now, it is our index page of the website. Hence, the index page doesn&#8217;t require the name it self.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1366\" height=\"723\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/Remove-Page-Name-From-Homepage-URL.png?resize=1366%2C723&#038;ssl=1\" alt=\"Homepage - WordPress Custom Template\" class=\"wp-image-2371\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/Remove-Page-Name-From-Homepage-URL.png?w=1366&amp;ssl=1 1366w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/Remove-Page-Name-From-Homepage-URL.png?resize=300%2C159&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/Remove-Page-Name-From-Homepage-URL.png?resize=1024%2C542&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/Remove-Page-Name-From-Homepage-URL.png?resize=768%2C406&amp;ssl=1 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption><strong>Homepage &#8211; Removed Page Name From URL<\/strong><\/figcaption><\/figure><\/div>\n\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<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>Through this post, I have tried to make a clear understanding of the <strong>WordPress themes, WordPress file structures, WordPress Custom template<\/strong>. We have learned how to integrate the HTML template to WordPress. Also, we have learned to create the WordPress custom template. In the custom template, we have put the custom CSS and JS for making it more pretty as per the themes. So, I hope guys you will understand the basic idea behind creating any basic WordPress website with your own custom template. If you will have any queries regarding this post then kindly share your query by putting a comment in the comment section. In the next post, we&#8217;ll be learning <a href=\"https:\/\/programmingfields.com\/how-to-create-a-custom-blog-in-wordpress\/\">how to create a custom blog in WordPress<\/a>. So stay updated with us.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In WordPress, you can create your own custom template. This custom template can be used as the main template inside your pre-installed theme. The architecture of WordPress is very easy to understand. WordPress allows us to customize any pre-built theme or by using any theme you can create any custom template page [&#8230;]<\/p>\n","protected":false},"author":5,"featured_media":2375,"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":[1200,1198,1066,1109,1199],"yst_prominent_words":[1182,1195,1191,1192,1187,909,1099,1188,1193,1196,457,1197,104,105,1176,1086,1165,1164,1189,1092],"class_list":{"0":"post-2292","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-wordpress","8":"tag-custom-template-in-wordpress","9":"tag-wordpress-custom-theme","10":"tag-wordpress-download-and-install","11":"tag-wordpress-template","12":"tag-wordpress-themes","13":"entry"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2020\/02\/Custom-Template-in-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\/2292","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=2292"}],"version-history":[{"count":1,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/2292\/revisions"}],"predecessor-version":[{"id":8827,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/2292\/revisions\/8827"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media\/2375"}],"wp:attachment":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media?parent=2292"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/categories?post=2292"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/tags?post=2292"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/yst_prominent_words?post=2292"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}