KodeGod.com

How to add full width page template in wordpress | Adding custom wordpress page template

While developing a website or a blog using WordPress you might have noticed that your chosen theme does not quit support full width page template option or you want to add a custom page template for your particular page may be having a jquery slider on it or a big Google Map or you want a different page template for your photo gallery. Most common is that you want to remove the slider from certain pages.

This article will show you how you can possibly achieve this by simply adding custom page template that solves your problem. You need a at least some basic skill of HTML and PHP for this. Lets start with it.

Goto “/wp-content/themese/your-theme/” folder. Here “your-theme” is theme that you are currently using for your blog.

Look for “page.php”

Make a copy of this file and name it as “full-page-width-page.php” or “my-custome-page.php” whichever you like. for this exampke i will consider the name as “full-page-width-page.php”.

Open this file and add following code at the beginning.


<?php
/*
Template Name: Wide Page
*/
?>

This will name your template as “My Wide Page Template”, and this can be seen at the “Template” drop down box under “Page Attributes” while you add a WordPress page.

Once this is done look for following tag and change the class name to your full width content class. You are usually required to add width or change page background, this totally depends on CSS of your theme.

<div id="content-wrapper">
.
.
.

Below is the class that i will be using, you can name it anything as long as it does not conflict any existing classes.

<div id="wide-content-wrapper">
.
.
.

Once you are done with the changes upload save the css file and upload “full-page-width-page.php” file that we created. Now try to add a new page via your WordPress admin panel or you can even open an existing page where you do not want the sidebar.

Change the page template to “My Wide Page Template” and save the page. Try viewing that page and you must have got the page with no side bar.

I hope you like this article and it helps you. In case you have any questions you can post your comments. Thanks for reading .