How to Make a Full Width Sales Page For Your WordPress Theme

Now days most of the Professional WordPress theme has a built in Full Width page template. however some of the most beautiful commercial themes doesn't have a Full width page template built in.  A Full Width Page is one that has no sidebars and all the width of the page is just content. Full width page has many applications. You might not wish to show sidebars on your contact page for instance or you may want to use it to build your Sales page . Well, lets see some better applications of Full-Width Pages.

Making a Full width Sales Page – Traditional and professional sales pages don’t have sidebars (you should have seen those pages with lots of customer feedback and that pages where you have to scroll miles and miles to see the end?). Removing Sidebar makes it look better.

Full width Search Result Pages for Google Custom Search Engine – If you ever wanted to choose to display results of Google CSE on your own pages; the script Google give you can insert ads on the right of the searches just as we see on Google. A full width page can make way for the ads.

Okay, lets covert a WordPress page to a full width Sales page :-

This tutorial is for making Full Width on any WordPress Theme
As an example, I have Converted this page to a full width page – This the is a free WordPress theme called Goodtheme Lead
Step 1 – Make a Page Template
Pages in WordPress are defined by page.php in the theme. Make a copy of page.php and rename it as fullwidth.php. It doesn’t matter what you name it, it can be yourname.php instead.

Now add the following to the start of the code in fullwidth.php :

/*
Template Name: Full Width
*/
?>

Here we just have defined a custom page template.

Step 2 – Rip Off the Sidebars
Sidebars are included in the page template using this :

Delete it from fullwidth.php. In most themes it should be towards the end of the code. Sidebars are gone.

Step 3 – Define a Full Width Style
Open up style.css and find where the style of the content area is defined. Usually its called #content. In our example theme, the style is defined as:

#content
{
margin: 5px 35px 0;
font-size: 1.2em;
width: 575px;
float: left;
display: inline;
}

You can see that in line three the width of the content area is defined as 575 px. Copy paste all the above said code and define a new ID #contentwide as:

#contentwide
{
margin: 5px 35px 0;
font-size: 1.2em;
width: 850px;
float: left;
display: inline;
}

The only change being the width in line three as 850px. The value 850 px was found by trial and error.

Step 4 – Add the style to the Page
If you try making a full width page after step 3, you will get a page with no sidebar, but the sidebar area is blank. Why? The page still uses the style in the content ID. Open up fullwidth.php again and change the id content to contentwide in the code.

That’s it, upload fullwidth.php and style.css to the theme folder.

How to Actually Create a Full Width Page?
Open a New Page Editor. Write in some content. From the right sidebar of the page editor, from the section called Attributes, select Template as Full Width.

View the original article here

Sales Theme Width WordPress 22:33