{"id":136811,"date":"2015-02-06T08:00:40","date_gmt":"2015-02-06T13:00:40","guid":{"rendered":"http:\/\/premium.wpmudev.org\/blog\/?p=136811"},"modified":"2022-03-11T00:19:05","modified_gmt":"2022-03-11T00:19:05","slug":"create-full-width-page","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/create-full-width-page\/","title":{"rendered":"Create a Full Width Page for WordPress in a Few Simple Steps"},"content":{"rendered":"<p>WordPress.org has so many themes you&#8217;re bound to find the perfect one for you.<\/p>\n<p>But what if you don&#8217;t?<\/p>\n<p>What if you find a theme that&#8217;s almost perfect but doesn&#8217;t have the kind of full width page template you need for your landing or about page \u2013 or maybe doesn&#8217;t have one at all?<\/p>\n<p>Not to worry, you can easily edit any theme\u00a0to create a new template that&#8217;s perfect for your needs. It just takes a few simple edits and you&#8217;re ready to go.<\/p>\n<p>In today&#8217;s post I&#8217;ll walk you through how to keep your new template mobile-friendly with columns, CSS3 and the Twitter Bootstrap framework if you have a responsive theme. Even if you don&#8217;t, I&#8217;ve got you covered.<\/p>\n<ul>\n<li><a href=\"#start\">Getting Started<\/a><\/li>\n<li><a href=\"#create\">Creating a New Template<\/a><\/li>\n<li><a href=\"#edit\">Edit Your New Template<\/a><\/li>\n<li><a href=\"#bootstrap\">Editing Bootstrap Templates<\/a><\/li>\n<li><a href=\"#css3\">Editing CSS3 Templates<\/a><\/li>\n<li><a href=\"#non-responsive\">Non-Responsive Themes<\/a><\/li>\n<\/ul>\n<h2 id=\"start\">Getting Started<\/h2>\n<p>Make sure you do a full backup of your site before continuing to ensure your site is safe in case anything goes wrong.<\/p>\n<p>This way, you&#8217;ll be able to do a restore and get everything back to the way it was to try again.<\/p>\n<p>There are many tools that can help you do this such as our <a href=\"https:\/\/wpmudev.com\/project\/snapshot\/\" target=\"_blank\" rel=\"noopener\">Snapshot plugin<\/a>, <a href=\"https:\/\/cloud.jetpack.com\/pricing?source=vaultpress.com\" target=\"_blank\">JetPack<\/a> (which includes the formerly stand-alone product, VaultPress), or manually via FTP. Once you have everything backed up, you can continue to the next step.<\/p>\n<h2 id=\"create\">Creating a New Template<\/h2>\n<p>To create a new page layout you\u00a0need to access your theme files and open up and edit\u00a0<em>page.php<\/em>.<\/p>\n<p>If you&#8217;re using cPanel, click the &#8220;Edit&#8221; button at the top of the page, then the &#8220;Edit&#8221; button in the pop up that appears\u00a0\u2013 if you haven&#8217;t already disabled it previously.<\/p>\n<p>Select and copy the entire contents of the file, then close it.<\/p>\n<p>Back in the File Manager, select the &#8220;New File&#8221; button at the very top-left corner and enter a file name in the pop-up that appears, then click the &#8220;Create New File&#8221; button.<\/p>\n<figure id=\"attachment_136867\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-136867 size-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/01\/creating-a-file-in-cPanel.png\" alt=\"A file name has been entered in the &quot;New File&quot; pop up in cPanel with the same file path as the other page templates\" width=\"735\" height=\"210\" \/><figcaption class=\"wp-caption-text\">To keep things neat and tidy, create the new file in the same folder as the other theme templates. You can do this by leaving the &#8220;New file will be created in&#8221; field unchanged.<\/figcaption><\/figure>\n<p>It&#8217;s best to type a name that relates to what you&#8217;re wanting to create. In this case, I entered <em>full-width.php<\/em>, but you can enter what suits you best. Just be sure not to forget the <em>.php<\/em> suffix and make sure the name you enter has no spaces or your template won&#8217;t work.<\/p>\n<p>Find your new file in the list and click on it, followed by the &#8220;Edit&#8221; button at the top of the page. Again, if you haven&#8217;t disabled the pop up that follows, click the &#8220;Edit&#8221; button that appears.<\/p>\n<p>In the editing page, paste the code from the <em>page.php<\/em> file and save the file.<\/p>\n<h2 id=\"edit\">Edit Your New Template<\/h2>\n<p>At the top of your\u00a0<em>full-width.php<\/em> file\u00a0before all the code you need to name your template so WordPress recognizes it properly. Add the following code to make it happen:<\/p>\n<div class=\"gist\" data-gist=\"06bf637f9d887a2f670dd009f5724089\" data-gist-file=\"full-width.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/06bf637f9d887a2f670dd009f5724089.js?file=full-width.php\">Loading gist 06bf637f9d887a2f670dd009f5724089<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>I took out all the other comments mentioning that it&#8217;s the default page in the theme I&#8217;m using since it&#8217;s now unnecessary, but left the header intact. Here&#8217;s what the top of the <em>full-width.php<\/em> file looks like now:<\/p>\n<div class=\"gist\" data-gist=\"1a0096ae3cb5efc94075850a1b7f00b7\" data-gist-file=\"full-width.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/1a0096ae3cb5efc94075850a1b7f00b7.js?file=full-width.php\">Loading gist 1a0096ae3cb5efc94075850a1b7f00b7<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Don&#8217;t worry if your file looks a bit different depending on the theme you&#8217;re using.<\/p>\n<p>Now you need to find the following code, which will be either at the beginning or end of your new template.\u00a0Go ahead and remove it.<\/p>\n<div class=\"gist\" data-gist=\"6f29a496f808e55d22fb8fe5aabb3648\" data-gist-file=\"full-page.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/6f29a496f808e55d22fb8fe5aabb3648.js?file=full-page.php\">Loading gist 6f29a496f808e55d22fb8fe5aabb3648<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>I&#8217;m using\u00a0<a href=\"https:\/\/wordpress.org\/themes\/base-wp\" rel=\"noopener\" target=\"_blank\">Base WP<\/a>\u00a0made from the masterful\u00a0<a href=\"http:\/\/underscores.me\/\" rel=\"noopener\" target=\"_blank\">Underscores theme<\/a>\u00a0to show you what to edit since it makes for a great example.<\/p>\n<p>Since this is a responsive theme that uses columns in its framework we just need to adjust the column width to our desired length. In the original code, there were 12 columns, which I changed to 16 as shown below on the first line of this code snippet:<\/p>\n<div class=\"gist\" data-gist=\"5a1ee34de829a217c0fa76adfa3fe271\" data-gist-file=\"full-width.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/5a1ee34de829a217c0fa76adfa3fe271.js?file=full-width.php\">Loading gist 5a1ee34de829a217c0fa76adfa3fe271<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Save the file and activate the theme for your site. Go to the editing screen of one of your pages and select the &#8220;Full Width&#8221; template that&#8217;s now listed and update the post.<\/p>\n<figure id=\"attachment_136869\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-large wp-image-136869\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/01\/select-full-width-page-template-in-edit-mode-700x200.png\" alt=\"Under page attributes &gt; Template in the page editor, the &quot;Full Width&quot; template is selected.\" width=\"700\" height=\"200\" \/><figcaption class=\"wp-caption-text\">If you don&#8217;t see this option in the drop down list, you haven&#8217;t properly configured the header of your full width template file.<\/figcaption><\/figure>\n<p>When you visit the page, you&#8217;ll see a great-looking full width content area. If it doesn&#8217;t look like the right length to you, go ahead and change the number of columns until it&#8217;s to your liking.<\/p>\n<p>Here&#8217;s what it looks like:<\/p>\n<div class=\"wpdui-pic-full \" style=\"background-image: url(https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/02\/full-width-page-example.png); background-size: cover; background-position: center center; min-height: 270px;\">\n<\/div>\n<p>Testing it out shows that it&#8217;s still fully responsive and everything looks great. If it&#8217;s not to your liking, change the values until it&#8217;s right.<\/p>\n<p>What if your theme doesn&#8217;t include this kind of code? There are similar structures for different types of frameworks. I&#8217;ll show you how to navigate them.<\/p>\n<h2 id=\"bootstrap\">Editing Bootstrap Templates<\/h2>\n<p>With the Bootstrap framework, you&#8217;ll notice lines like <code>&lt;div class=\"col-sm-4\"&gt;<\/code> and similar ones in the page template file.\u00a0In the <code>div<\/code> container, the columns are referenced as <code>col-<\/code> followed by a value. Below is a quick reference to the column sizes.<\/p>\n<ul>\n<li><strong>col-xs-<\/strong>\u00a0\u2014 Extra small devices less than 768 px wide<\/li>\n<li><strong>col-sm-\u00a0<\/strong>\u2014 Small devices and tablets around 768 px wide<\/li>\n<li><strong>col-md-\u00a0<\/strong>\u2014 Medium devices and desktops around 922 px wide<\/li>\n<li><strong>col-lg-<\/strong>\u00a0\u2014 Large devices and desktops around 1200 px wide<\/li>\n<\/ul>\n<p>When you see a <code>div<\/code> container with something similar to the code below,\u00a0you&#8217;re looking at more specific sizing options where the numbers represent how many columns are defined for each size:<\/p>\n<div class=\"gist\" data-gist=\"b1039dae2bcd638cf0d9f4c0abba01e0\" data-gist-file=\"page.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/b1039dae2bcd638cf0d9f4c0abba01e0.js?file=page.php\">Loading gist b1039dae2bcd638cf0d9f4c0abba01e0<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>The total number of columns you use per size and page need to add up to 12\u00a0\u2013 no more, no less. Keep that in mind when you edit these values.<\/p>\n<p>Increasing the number and deleting similar lines right after it will create a one column, full width page. Then all you need to do is just increase the size to make the main content area larger.<\/p>\n<p>You may also need to search your <em>style.css<\/em> file for these same classes to change some extra options, though since the column sizes are predefined this may not be necessary.<\/p>\n<p>Playing around with these values will help you achieve the sizing you prefer. Just be sure to run some tests on multiple devices or by resizing your browser window to make sure it looks great across the board.<\/p>\n<p>If you&#8217;d like more detailed information on Bootstrap coding, you can take a look at W3School&#8217;s article\u00a0<a href=\"http:\/\/www.w3schools.com\/bootstrap\/bootstrap_grid_system.asp\" rel=\"noopener\" target=\"_blank\">Bootstrap Grid System<\/a>.<\/p>\n<h2 id=\"css3\">Editing CSS3 Templates<\/h2>\n<p>Your <em>style.css<\/em> file will end up having similar content as the code below if the column options brought on with CSS version 3 are present in your theme:<\/p>\n<div class=\"gist\" data-gist=\"5f5d4250af1a9597985ab5743d3b7c20\" data-gist-file=\"style.css\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/5f5d4250af1a9597985ab5743d3b7c20.js?file=style.css\">Loading gist 5f5d4250af1a9597985ab5743d3b7c20<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>This code shows that there are four columns to the content ID in the template file across all browsers. Toward the bottom it also shows that each column is 300px in width for a total of 1200px.<\/p>\n<p>Changing these values will help you achieve the full width page you desire, but you should change the IDs to something else to avoid styling conflicts with other templates. The <code>div<\/code> containers in your new template file will need to be edited to reflect the same changes as well.<\/p>\n<p>You also need to pay attention to the margins and floating attributes. In responsive themes, you&#8217;ll notice the margin is set to &#8220;auto&#8221; which allows the browser decide which size of the area around the content box is most appropriate for optimal viewing.<\/p>\n<p>If you see any CSS like the example below, your content area is set to be pushed to the far left and it&#8217;s not centered. If this is the case, replace &#8220;left&#8221; with &#8220;none.&#8221;<\/p>\n<div class=\"gist\" data-gist=\"13d8c93efe753b831ad83b4cd1c5384e\" data-gist-file=\"style.css\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/13d8c93efe753b831ad83b4cd1c5384e.js?file=style.css\">Loading gist 13d8c93efe753b831ad83b4cd1c5384e<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>If this happens a couple times in the file, you&#8217;ll need to clear the floats with the following code. Just be sure to make sure <code>#content<\/code> is replaced with whatever your template calls for the main content area.<\/p>\n<div class=\"gist\" data-gist=\"bc0145042d0b6a505fcb879d6999cd25\" data-gist-file=\"style.css\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/bc0145042d0b6a505fcb879d6999cd25.js?file=style.css\">Loading gist bc0145042d0b6a505fcb879d6999cd25<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>It will likely take a few tries to get right so don&#8217;t be discouraged. Be sure to test your template for responsiveness once you&#8217;re done.<\/p>\n<p>If you run into troubles along the way, you can find many detailed <a href=\"https:\/\/www.w3schools.com\/css\/css_intro.asp\" rel=\"noopener\" target=\"_blank\">articles on CSS3 at w3Schools<\/a>.<\/p>\n<h2 id=\"non-responsive\">Non-Responsive Themes<\/h2>\n<p>If you have decided your site isn&#8217;t going to be viewed on phones and tablets and you have chosen a theme that&#8217;s not responsive you can still make a full width template.<\/p>\n<p>Once you have created your new template file as we covered in the first segment, a few adjustment need to be made to the template and <em>style.css<\/em> file.<\/p>\n<p>Find the main content area in your template file. This is where things get a bit tricky since not all themes name them the same. It may be displayed as <code>&lt;div class=\"content\"&gt;<\/code>. Some themes call it &#8220;container&#8221; or something similar.<\/p>\n<p>Change the name to something else \u2013 just make sure there&#8217;s no spaces. I renamed it to &#8220;full-width&#8221; to make it easily recognizable.<\/p>\n<p>It doesn&#8217;t matter if it&#8217;s an ID or a class as long as it&#8217;s not used elsewhere on the page or in other page templates, unless you want all the areas its repeated to look the same.<\/p>\n<p>Once you&#8217;re done, your new container should look like the code snippet below.<\/p>\n<div class=\"gist\" data-gist=\"62718a1b835519edd2022da492d9b376\" data-gist-file=\"full-width.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/62718a1b835519edd2022da492d9b376.js?file=full-width.php\">Loading gist 62718a1b835519edd2022da492d9b376<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>At the moment, your sidebar will be gone from this template, but you&#8217;ll still be left with blank space where it used to be. In the next step we&#8217;re going to fix it.<\/p>\n<p>Save your full width template file, close it and head back to the file manager in the same folder we went to in the beginning. Find the <em>style.css<\/em> file and click on it, then on &#8220;Edit&#8221; at the top of the page in cPanel. Click the &#8220;Edit&#8221; button in\u00a0the pop up if one appears.<\/p>\n<p>Now we need to find all the instances where the old content area is mentioned in this file. Using your browser&#8217;s page search feature comes in handy here.<\/p>\n<p>Copy each snippet of code where it appears, paste into the file then change its name to be the same as the template file. You want to pay close attention to code that mentions width such as in this example:<\/p>\n<div class=\"gist\" data-gist=\"ef6e5dc8862354fedec1f63fb3ddc56c\" data-gist-file=\"style.css\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/ef6e5dc8862354fedec1f63fb3ddc56c.js?file=style.css\">Loading gist ef6e5dc8862354fedec1f63fb3ddc56c<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Just change <code>.content<\/code>\u00a0to .<code>full-width<\/code>\u00a0for each set you copy and pasted then save the file. Don&#8217;t forget, your original content area may be named differently and may be an ID instead of a class.<\/p>\n<p>Change the width to your desired length and if there is a float, change it to &#8220;none.&#8221; If that doesn&#8217;t seem to look pretty, then clear the float as we covered earlier.<\/p>\n<p>Finally, save your file and take your template for a test run. If you find you&#8217;re having difficulties, check out <a href=\"http:\/\/www.w3schools.com\/css\/css_intro.asp\" rel=\"noopener\" target=\"_blank\">W3School&#8217;s articles on CSS<\/a>.<\/p>\n<h2>Conclusion<\/h2>\n<p>Creating the perfect full page template shouldn&#8217;t be so difficult now, even if you have a responsive theme. It may take some time to get right so be patient. Once you get the hang of it it&#8217;s not too difficult.<\/p>\n<p>If you&#8217;re interested in even more information on creating mobile-friendly sites, check out our post:\u00a0<a href=\"https:\/\/wpmudev.com\/blog\/how-to-build-a-mobile-wordpress-theme-and-why-you-should\/\" target=\"_blank\" rel=\"noopener\">How To Build A Mobile WordPress Theme, And Why You Should<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If your perfect WordPress theme doesn&#8217;t have a full width template, no stress! Easily create your own mobile-friendly template with a few simple edits.<\/p>\n","protected":false},"author":54213,"featured_media":206441,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[9957,4993],"tutorials_categories":[],"class_list":["post-136811","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-full-page","tag-templates"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/136811","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/54213"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=136811"}],"version-history":[{"count":12,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/136811\/revisions"}],"predecessor-version":[{"id":207261,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/136811\/revisions\/207261"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/206441"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=136811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=136811"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=136811"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=136811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}