WordPress Theme Folder

If you don’t have full width page template supported by your theme on WordPress blog, you may create your own full width template without any plugins.Full Width page template will showing only content without sidebar. All you have to do is create new page and remove sidebar content from that page template, so when you create new page or edit existing page i your WordPress blog, you just have to choose which page you want to get appeared, without sidebar or with sidebar. That’s it. Here is the brief tutorial on this how you can make it possible.

1. Creating new page template file in your WordPress theme folder

WordPress Theme Folder

To create new page template file, log in to your WordPress hosting account and go to your WordPress theme folder. By default, all themes on WordPress installation are located at following path.

/public_html/wp-content/themes/

Locate theme folder and there, choose create new file option. Name that file full-width-page.php as shown in image. Now edit that file from your file manager. Right click on that page and edit that code of that page.

Now open page.php file and copy entire coding available there. This page file is default page template for all your WordPress blog page. Paste it in full-width-page.php .

Edit WordPress Page Template File

Now at the top of that new page add the following code. This will name your page template as full width.

<?php
 /*
 Template Name: Full Width
 */
 ?>

The above code should be added at the top so all code for full-width-page.php  will be look a like as shown in image below.

Name new wordpress Page Template

2. Removing Sidebar From WordPress Page template:

Removing WordPress page sidebar

Next step is removing sidebar from WordPress page template. To remove sidebar from full width page template, check for the following code from your newly created full width page template and remove it.

<?php get_sidebar() ?>

This code will fetch sidebar for your WordPress template and showing it on all your WordPress pages.If you remove that code, your page will not fetch sidebar for your pages and hence full width page will be shown to users without sidebar.

3. Creating div id for full width page template:

Next step is creating div id for your full width page template. Main reason of giving div id to it is because we can style this page in CSS as per our requirement.Check both the image above for your reference.

Replacing Div id For Full Width WordPress Template

Search for div id on your full width page template. div id would more likely to look like

<div id=”content”>

Change the name “content” to something unique and identifiable like “content-fullwidth.”So it would be look like

<div id=”content-fullwidth”>

Now save the template file and you have done for template page.

4. Stylify Your Full Width Page Template File :

Now next page is stylify your newly created full width page template.You can modify it by playing with your CSS coding.Go to your theme style sheet in your WordPress dashboard admin area (Appearance > Editor > Stylesheet – style.css) and search for the section that controls the content area of your blog.

Generally it would be under content section. You can press ctrl + F to and search “#content” without quote. Copy that code and paste it again below that code.

Define a Full Width Style in WordPress blog

Now replace #content with our created div name. We have created  <div id=”content-fullwidth”>, so # content will be #content-fullwidth . If you have given any other name to your div id, you can rename that css with that name.

Now set the width of #content-fullwidth to something wider than there is. Set is according to your need for full page width. That page will not have any sidebar.

Create a Full Width Page in WordPress

Now when you create new page in your WordPress blog, you will see that full width setting under page attributes section. You can choose full width while publishing the page whenever you want to make any page full width. You can also edit existing page and make those page as full width page.

See also : Online WordPress theme generator

1 COMMENT

Comments are closed.