{"id":21116,"date":"2021-03-06T17:00:57","date_gmt":"2021-03-06T16:00:57","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=21116"},"modified":"2021-03-04T20:16:36","modified_gmt":"2021-03-04T19:16:36","slug":"create-wordpress-custom-page-template","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/create-wordpress-custom-page-template\/","title":{"rendered":"How to Create a Custom Page Template in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Page templates are one of the most important tools for website creation. They allow us to alter the design and even the functionality of a certain page. With a WordPress custom page template, you can add additional sidebars, place widget areas above or below the page content, have sections for custom post types like portfolios within your pages, and more. In a word, you can create a blank canvas template and design all parts of your page from scratch.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, creating custom page templates in WordPress does require some programming skills. That is why many are dissuaded from it and choose to use third-party page builder plugins for creating pages. But, we believe that WordPress custom page templates aren\u2019t that hard to create and hope that you will think the same after reading this article. Moreover, the knowledge of creating a custom page template can come in handy in cases where page builders aren\u2019t enough to achieve the desired page layout, so this opens additional room for customizing your entire site.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">How to create a custom page template in WordPress<\/h2>\n<p>[\/vc_column_text][vc_column_text]Once you\u2019ve understood why custom page templates are useful, we can dive into how to create them using custom code. We will explain more about the structure of those templates, mention some potential uses, as well as show several examples to illustrate the points we made.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Understanding page templates<\/h3>\n<p>[\/vc_column_text][vc_column_text]In general, page templates serve to display various kinds of dynamic content on your website page. But, custom page templates are at the top of the <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-template-hierarchy\/#single-page\">Template Hierarchy<\/a> when it comes to displaying that content on a single page. Meaning, WordPress will check whether a custom page template is selected on a given page and use it over any existing page template file that your theme may have. The hierarchy for single pages in WordPress goes like this:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">custom template file<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">page-{slug}.php<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">page-{id}.php<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">page.php<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">singular.php<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">index.php<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As you can see above, custom templates are the only files that don\u2019t need to follow a specific naming rule to be acknowledged as template files. Let us discuss why this is the case.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>A custom page template has<\/strong> two distinct parts\u2014<strong>a template header<\/strong>, which registers the template, <strong>and the code<\/strong> that creates the content of the page, which is displayed when that page template is selected. The template header is a simple comment that specifies the template name. Other than that, it can have additional information like the theme name or description, for example.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The comment starts with the label <strong>Template Name<\/strong>: after which the name of the template is written. Additionally, the custom template should start with the opening PHP tag &lt;?php, while the closing PHP tag could come right after the comment, later in the file, or not at all, depending on the structure of the remaining code.<\/p>\n<p><!--?php, while the closing PHP tag could come right after the comment, later in the file, or not at all, depending on the structure of the remaining code.&lt;br ?-->[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Example:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;?php \/* Template Name: My Custom Template *\/ ?&gt;<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Using the above-mentioned template header, you can register a custom page template with the name <em>My Custom Template<\/em>. Generally, when naming a custom page template, you should strive to make the name easy to understand. This is because <strong>the name you give your template is the one that will be displayed as an option in the Page Attributes dropdown<\/strong> on a single page. As such, the name of the template should be straightforward and clear to anyone using it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Page-Attributes.jpg\" class=\"attachment-full size-full\" alt=\"Page Attributes\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Page-Attributes.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Page-Attributes-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Page-Attributes-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Page-Attributes-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Additionally, since the WordPress 4.7 update, you can <strong>create custom templates for other post types<\/strong>. To do so, you need to <strong>specify which post type(s) the template is being created for<\/strong>. This is done by adding the label <strong>Template Post Type<\/strong>: followed by a list of post types that you want this template to be available for.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To clarify further, here\u2019s an example of a template header for the <strong>Full Width Template<\/strong> taken from <a href=\"https:\/\/wordpress.org\/themes\/twentytwenty\/\" target=\"_blank\" rel=\"noopener\">the Twenty Twenty theme<\/a>. The template is made for both pages and posts, meaning it can be selected from the Page Attributes section on pages, as well as from the Post Attributes section on posts.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;?php\r\n\/**\r\n* Template Name: Full Width Template\r\n* Template Post Type: post, page\r\n*\r\n* @package WordPress\r\n* @subpackage Twenty_Twenty\r\n* @since Twenty Twenty 1.0\r\n*\/<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With this information, you should be ready to start making your own template headers. So, in the following sections, we can focus on the page templates themselves.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>In terms of the code that goes below the template<\/strong> header and creates the page content, <strong>there are a lot of things that you can include<\/strong>. For example, content inserted in the editor, sidebars, various widget areas, content related to a custom post type, additional content based on a conditional statement that needs to be met, etc.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The possibilities for creating distinct custom page templates are near endless and depend only on what you need and your programming skills. One way of starting to create that code is to take your theme\u2019s existing page templates and copy and paste them into a new file where you can edit their code. Alternatively, we made several examples of page templates for this article that you can use. We will cover them in the following section.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, there are additional things we must discuss before delving into those examples. In the end, when you\u2019re done creating the code, <strong>the final steps include saving the file as a .php file and then uploading it in the correct place within your theme<\/strong>. As we mentioned before, custom page templates don\u2019t need to be named a certain way to be interpreted as template files. However, this also means you <strong>can\u2019t name them using any of the reserved words<\/strong>\u2014<em>page, singular, index<\/em>\u2014<strong>or name them using the prefix <em>page<\/em><\/strong>&#8211; as WordPress will interpret them as specialized templates, intended for one page only. We suggest naming the files the same as the templates so that you can keep track of those files more easily.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After naming the custom page template file, you will need to upload it to the server <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-use-ftp\/\">via FTP<\/a>. WordPress recognizes the following spots as valid for uploading a custom template file: <strong>active parent theme directory, active child theme directory, or a subdirectory in either of those two locations.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Examples<\/h3>\n<p>[\/vc_column_text][vc_column_text]Now that you understand more of the details behind custom page templates, we can delve into the examples we made for this article. You can use them as a guideline for creating your page templates or modify them to your liking.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Depending on the template, some additional CSS code might be needed to adjust your page template stylization. We will also show you the CSS we used in the cases we found it needed to be added. However, we should note that this CSS shouldn\u2019t be applied to all websites. In general, CSS is tailor-made on a case-by-case basis since it needs to fit a particular site. As such, you should strive to create your own CSS codes, if you need to further stylize the page. With that being said, let us begin.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>No sidebar page template<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The following code represents a template called <strong>No Sidebar Page Template<\/strong>. This is a rather simple template. It uses the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_header\/\" target=\"_blank\" rel=\"noopener\">get_header()<\/a> and <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_footer\/\" target=\"_blank\" rel=\"noopener\">get_footer()<\/a> function that loads the existing header and footer template files from the theme you are currently using. As for the main page content, by using <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/the_content\/\" target=\"_blank\" rel=\"noopener\">the_content()<\/a> function within a WordPress Loop, you are making sure that what was inserted in the editor is displayed on the page. Apart from that, the page will have a comment section below, as long as there are existing comments made on that page or if comments are allowed on that page. Essentially, what separates this page template from the ones that are commonly used is that we have <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-remove-sidebar-in-wordpress\">removed any sidebars<\/a>, hence the template name.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;?php\r\n\/*\r\nTemplate Name: No Sidebar Page Template\r\n*\/\r\nget_header();\r\n?&gt;\r\n&lt;main id=\"main-content\" class=\"custom-grid\"&gt;\r\n&lt;div class=\"custom-grid-inner\"&gt;\r\n&lt;?php if ( have_posts() ) {\r\nwhile ( have_posts() ) : the_post();\r\n\r\nthe_content();\r\n\r\nif ( comments_open() || get_comments_number() ) {\r\ncomments_template();\r\n}\r\nendwhile; \/\/ End of the loop.\r\n} ?&gt;\r\n&lt;\/div&gt;\r\n&lt;\/main&gt;\r\n&lt;?php\r\nget_footer();<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Since this is a very simple template, we didn\u2019t need any additional CSS to stylize it. Thanks to the CSS classes that were used in the theme\u2019s header and footer templates, the page was sufficiently stylized all by itself. Below, you can see an example of how a page with this page template assigned to it could look. In this case, the template was used with <a href=\"https:\/\/qodeinteractive.com\/wordpress-theme\/lekker-portfolio-wordpress-theme\/\" target=\"_blank\" rel=\"noopener\">the Lekker theme<\/a>, and it shows that theme\u2019s style.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"525\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/No-Sidebar-Page-Template.jpg\" class=\"attachment-full size-full\" alt=\"No Sidebar Page Template\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/No-Sidebar-Page-Template.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/No-Sidebar-Page-Template-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/No-Sidebar-Page-Template-768x416.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/No-Sidebar-Page-Template-620x336.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Blank page template<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This code represents a page template called <strong>Blank Page Template<\/strong>. Unlike the other page templates we created for the article, this one doesn\u2019t load the header and footer templates of your current theme. More precisely, it represents a template for a page that doesn\u2019t have a header or footer. Such pages are often used as landing or maintenance pages.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As this template doesn\u2019t rely on loading previously created template files, you would need to add the whole HTML structure of the page, created through a mix of HTML and PHP code. The bulk of the code we created is within the &lt;head&gt; and &lt;body&gt; tags, with only the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/language_attributes\/\" target=\"_blank\" rel=\"noopener\">language_attributes()<\/a> being used within the &lt;html&gt; tag.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Inside the <a href=\"https:\/\/www.w3schools.com\/html\/html_head.asp\" target=\"_blank\" rel=\"noopener\">&lt;head&gt;<\/a> tag, we added the metadata on encoding for pages and feeds using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/bloginfo\/\" target=\"_blank\" rel=\"noopener\">bloginfo(<\/a>) function. We also added the metadata for responsiveness\u2014the site will adapt based on the width of your device; it is loaded at an initial zoom of 100%, but it can be zoomed in and out freely. This is done by setting the user-scalable parameter to yes, instead of no which is present on numerous themes. Finally, we enabled the profile that inserts richer metadata on the site. After that, we added a part regarding <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-pingbacks-and-trackbacks\/\">pingbacks and trackbacks<\/a>. Even though this is primarily useful for posts, we decided to include it as it could be handy if you decide to make this template available for both pages and posts. Finally, we used the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_head\/\" target=\"_blank\" rel=\"noopener\">wp_head()<\/a> function, which prints scripts or data on the front end before the closing &lt;\/head&gt; tag.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <a href=\"https:\/\/www.w3schools.com\/tags\/tag_body.asp\" target=\"_blank\" rel=\"noopener\">&lt;body&gt;<\/a> tag contains the classes that are printed thanks to the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/body_class\/\" target=\"_blank\" rel=\"noopener\">body_class()<\/a> function, and which can be later used for creating targeted CSS code. Apart from that, we added the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Global_attributes\/itemscope\" target=\"_blank\" rel=\"noopener\">itemscope<\/a> and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Global_attributes\/itemtype\" target=\"_blank\" rel=\"noopener\">itemtype<\/a> variables and the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_body_open\/\" target=\"_blank\" rel=\"noopener\">wp_body_open()<\/a> function that allows users to add scripts directly inside the body tag, as of the WordPress 5.2 update. Additionally, the main content of the page is found within the body tag. And that content is rather simple, it only contains what has been added directly through the editor thanks to the use of the function <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/the_content\/\" target=\"_blank\" rel=\"noopener\">the_content()<\/a>. Finally, we used the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_footer\/\" target=\"_blank\" rel=\"noopener\">wp_footer()<\/a> function, which prints scripts or data on the frontend before the closing &lt;\/body&gt; tag.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;?php\r\n\/*\r\nTemplate Name: Blank Page Template\r\n*\/\r\n?&gt;\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html &lt;?php language_attributes(); ?&gt;&gt;\r\n&lt;head&gt;\r\n&lt;meta charset=\"&lt;?php bloginfo( 'charset' ); ?&gt;\"&gt;\r\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, user-scalable=yes\"&gt;\r\n&lt;link rel=\"profile\" href=\"https:\/\/gmpg.org\/xfn\/11\"&gt;\r\n\r\n&lt;?php if ( is_singular() &amp;&amp; pings_open( get_queried_object() ) ) { ?&gt;\r\n&lt;link rel=\"pingback\" href=\"&lt;?php bloginfo( 'pingback_url' ); ?&gt;\"&gt;\r\n&lt;?php } ?&gt;\r\n\r\n&lt;?php wp_head(); ?&gt;\r\n&lt;\/head&gt;\r\n&lt;body &lt;?php body_class(); ?&gt; itemscope itemtype=\"https:\/\/schema.org\/WebPage\"&gt;\r\n&lt;?php\r\n\/\/ Hook to include default WordPress hook after body tag open\r\nif ( function_exists( 'wp_body_open' ) ) {\r\nwp_body_open();\r\n}\r\n?&gt;\r\n&lt;div id=\"page-wrapper\" class=\"custom-page-wrapper\"&gt;\r\n&lt;div id=\"page-wrapper-inner\" class=\"custom-page-wrapper-inner\"&gt;\r\n&lt;main id=\"page-content\" class=\"custom-grid\"&gt;\r\n&lt;div class=\"custom-grid-inner\"&gt;\r\n&lt;?php if ( have_posts() ) {\r\nwhile ( have_posts() ) : the_post(); \r\nthe_content();\r\nendwhile; \/\/ End of the loop.\r\n} ?&gt;\r\n&lt;\/div&gt;\r\n&lt;\/main&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;?php wp_footer(); ?&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this case, we only needed a small amount of CSS to adjust the stylization of the page. This is what we ended up using:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">#page-wrapper {\r\npadding: 50px 0 40px;\r\n}\r\n.custom-page-wrapper-inner {\r\npadding: 0 10px;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text] Here\u2019s an example of a page with this template, after adding the above-mentioned CSS.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"522\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Blank-Page-Template.jpg\" class=\"attachment-full size-full\" alt=\"Blank Page Template\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Blank-Page-Template.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Blank-Page-Template-300x162.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Blank-Page-Template-768x414.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Blank-Page-Template-620x334.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Content Bottom page template<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This code represents a page template called <strong>Content Bottom Template<\/strong>. Similar to our first example, this template loads the appropriate header and footer template files of your current theme using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_header\/\" target=\"_blank\" rel=\"noopener\">get_header()<\/a> and <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_footer\/\" target=\"_blank\" rel=\"noopener\">get_footer()<\/a> functions.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As for the main page content, it is divided into two parts. The first part contains what was inserted in the page editor, followed by a section we called <em>Content Bottom<\/em>, that gave this template its name. This section displays what was inserted in a <a href=\"https:\/\/qodeinteractive.com\/magazine\/add-widget-area-to-wordpress\/\">custom widget area<\/a> whose ID is <em>new-widget-area<\/em>. Thanks to the use of the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/dynamic_sidebar\/\" target=\"_blank\" rel=\"noopener\">dynamic_sidebar()<\/a> and <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/is_active_sidebar\/\" target=\"_blank\" rel=\"noopener\">is_active_sidebar()<\/a> functions, the <em>Content Bottom<\/em> section is shown only if the widget area, which has new-widget-area as its ID, was registered and if it isn\u2019t empty.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Appearance-Widgets.jpg\" class=\"attachment-full size-full\" alt=\"Appearance Widgets\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Appearance-Widgets.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Appearance-Widgets-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Appearance-Widgets-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Appearance-Widgets-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/New-Widget-Area.jpg\" class=\"attachment-full size-full\" alt=\"New Widget Area\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/New-Widget-Area.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/New-Widget-Area-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/New-Widget-Area-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/New-Widget-Area-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, as with our first example, the comment section is shown only if there were previously posted comments on that page or if commenting was allowed. As for the second part, it simply loads the sidebar template of your current theme, using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_sidebar\/\" target=\"_blank\" rel=\"noopener\">get_sidebar()<\/a> function.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;?php\r\n\/*\r\nTemplate Name: Content Bottom Template\r\n*\/\r\nget_header();\r\n?&gt;\r\n&lt;main id=\"main-content\" class=\"custom-grid\"&gt;\r\n&lt;div class=\"custom-grid-inner\"&gt;\r\n&lt;div class=\"main-section\"&gt;\r\n&lt;?php if ( have_posts() ) {\r\nwhile ( have_posts() ) : the_post();\r\n\r\nthe_content();\r\n\r\nif ( is_active_sidebar( 'new-widget-area' ) ) { ?&gt;\r\n&lt;div class=\"content-bottom\"&gt;\r\n&lt;?php dynamic_sidebar( 'new-widget-area' ); ?&gt;\r\n&lt;\/div&gt;\r\n&lt;?php }\r\nif ( comments_open() || get_comments_number() ) {\r\ncomments_template();\r\n}\r\nendwhile; \/\/ End of the loop.\r\n} ?&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"main-sidebar\"&gt;\r\n&lt;?php get_sidebar(); ?&gt;\r\n&lt;\/div&gt; \r\n&lt;\/div&gt;\r\n&lt;\/main&gt;\r\n&lt;?php\r\nget_footer();<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Although the page will have two distinct parts thanks to this template\u2014the main section and the sidebar\u2014all content will be displayed in succession. Meaning, each section will fall below the one before it, which is not the layout we want to achieve. So, we needed to stylize this template further, and we used the CSS shown below to do that.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This CSS makes the main section take up three-quarters of the page, while the sidebar occupies the remaining one-quarter of screen sizes greater than or equal to 1025px. We included some padding on both sides of the two parts of the page to visually separate them. Also, we added a small margin above and below the content bottom section, for similar reasons.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">@media only screen and (min-width: 1025px){\r\n.main-section {\r\nwidth: 75%;\r\n}\r\n.main-sidebar {\r\nwidth: 25%;\r\n}\r\n}\r\n.main-section, .main-sidebar {\r\nfloat: left;\r\npadding: 0px 15px;\r\n}\r\n.content-bottom {\r\nmargin: 30px 0;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here\u2019s how a page with the Content Bottom Template and added CSS would look like on the Lekker theme.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"522\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Content-Bottom-Output.jpg\" class=\"attachment-full size-full\" alt=\"Content Bottom Output\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Content-Bottom-Output.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Content-Bottom-Output-300x162.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Content-Bottom-Output-768x414.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Content-Bottom-Output-620x334.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]Creating a WordPress custom page template will open a whole new world of customization options for you. Depending on your coding knowledge and comfort level, the possibilities can be numberless. Therefore, it comes down to carefully deciding on the page layout you wish to have and adding the appropriate code for all the sections you wish to include.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Page templates can be summed up as having two parts\u2014the header and the code that creates the page content. We hope that our examples have given you an idea of what those two should look like. Use that information as a guideline and improve on the code we provided and start making your own custom post type templates.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Learn how to make a WordPress custom page template and enjoy making something from scratch and getting every detail just right for your site.<\/p>\n","protected":false},"author":11229,"featured_media":21153,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[21,73,4,13],"class_list":["post-21116","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-php","tag-templates","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/21116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/11229"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=21116"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/21116\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/21153"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=21116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=21116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=21116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}