WordPress Custom Page Template with No Sidebars

by · 49 comments

email

When building a WordPress Website for your business, one of the common things people want to do is to provide a home page that does not look like a blog. The Expand2Web SmallBiz theme automatically provides this for you – a page that tells visitors about your business and provides a clear call to action.

But what if you are using a different theme, or you are using the SmallBiz theme but want to completely customize the page? Or what if you want a home page that does not use the WordPress sidebars?

Well, WordPress custom page templates allow you to do this. I’ve shown how to do this in a previous post and video. But when you do this, all of your content for the page needs to be coded in HTML and included in the PHP file you create for your custom page template.

Wait, there is an even better way…

What if you want the customization that a custom page template provides, but you still want to use the WordPress visual editor to change the content on your page?

Here’s how you do it. You can create a custom page template, but inside the page template you need to include a few extra WordPress functions. This allows you create a page anywhere on your website and then edit the content of the page using the WordPress visual editor!

Here’s the code for the WordPress Custom Page Template

Here’s the code you use for the custom page template. Just copy this code and save it in a file called no-sidebar.php and put it in the /wp-content/themes/smallbiz directory.

<?php
/*
Template Name: No Sidebar
*/
?>

<?php get_header(); ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div style="width:850px !important;">

<?php the_content('

Read the rest of this page »</p>'); ?> <?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?> <?php endwhile; else: ?> <p><?php _e('Sorry, no posts matched your criteria.'); ?></p> <?php endif; ?> </div> </div> <?php get_footer(); ?>

Once you’ve created this file, you can go into WordPress and create your Page, and select No Sidebar as the page template. You will get a page that has the layout and look and feel of your website, without the sidebar. And best of all you can edit the content using the visual editor in WordPress!

This custom page template is included in my SmallBiz WordPress Theme, so if you are using that you don’t have to do any of this code.

Note: If you are using a theme other than the SmallBiz theme, this code can still work. You might have to remove the two <div> elements at the end, however.

If you enjoyed this article, get email updates (it's free).

See my disclosure about advertising and affiliate links

{ 46 comments… read them below or add one }

Dannah October 25, 2009 at 7:22 pm

Hey GREAT info, Quick question without the side bar how would you put an awebber form like a pop up in the page if you dont have the form on the side bar? Can you do that with a static page minus the side bar? thanks!

Reply

Don Campbell October 25, 2009 at 7:37 pm

Hi Dannah,
The Aweber form is just a chunk of JavaScript code that you include on the page, so you don’t need the sidebar for that. Most themes have a place to put code like the Google Analytics snippet on every page of your site, you can just use that or put it in your footer.php.
-Don

Reply

Roger November 5, 2009 at 5:59 am

Don, I am using the Chiropractic theme and it does not have the no-sidebar template. I followed you directions and used the code you supplied, and it worked! Thanks a ton. This was very helpful to be able to create a page without the side bar.

Along that same line, could I change the contact template so it does not show the side bar by editing the contact template and adding the no-sidebar code at the end? I would be interested in knowing.

Thanks.

Reply

Luke L November 14, 2009 at 11:28 pm

Great post! I love having a blog as my primary site but it’s nice to be able to customise it to give ‘pages’ the look of actual webpages.
Cheers

Reply

JA December 7, 2009 at 7:14 pm

Really nice but a little confusing for me. I am newbie in wp. My question is though; Can I create a site in photoshop, code it in dreamweaver and then paste in the code between the code you provided above? Is this clear?… kind of confuse…

Reply

Don Campbell December 7, 2009 at 9:25 pm

@JA, Well, no it doesn’t work that way. If you want to design the website from scratch and entirely change the look and feel you would need to create a new WordPress template. What I’m showing here is how to change the page layout within an existing template.

Reply

nathan December 30, 2009 at 3:29 am

Hello Don,
Ive been searching for a couple of days now and I just found your site (via Vimeo) Fantastic tuts! I was specifically looking how to modify existing pages and still be editable within wordpress. Looks like you have answered my questions.

I still have one more doubt though. I would like to be able to add 3 colums within the page template, at the bottom of the article. Would I need to create the divs in the code? Many thanks don.

Reply

Norm January 16, 2010 at 4:47 pm

Thanks for the great info!

I had a related question about doing a custom page in this way. I want the custom page to be just like every other page except to receive specific post categories under the static content. That is, static content created in WP editor followed by posts of a specific category. I know it can be done but I haven’t had any luck finding the information I need to do it.

Reply

smck112 January 26, 2010 at 1:15 pm

Do you have a tutorial for a template like JA asked about? Or do you know where I can find a turorial like that? Where I can create a new WordPress template from a website I made in Dreamweaver.

Love smck112

Reply

Mike February 22, 2010 at 10:47 am

This is really great thanks! I just couldn’t get the code right myself. Hopefully I might even make some money with this: Abandon the Cube Travel Gear

Reply

Noa June 11, 2010 at 1:39 pm

Very nice, thanks.
A quick question: My menu is at the bottem of the page, not at the top. When I apply your code, the menu also disappears. How do I fix it so that the menu stays and only the sidebar disappears?

Reply

Don Campbell June 11, 2010 at 5:15 pm

@Noa – It’s hard to say without looking at your site. What theme are you using, and what is your website URL?

Reply

Noa June 12, 2010 at 12:16 am

@Don – the site isn’t ready yet. It’s: http://www.nafrtiti.com
that will be the main page. Since the menu bar disappeared, it’s not linked to the rest of the site. To view the rest go to: http://www.nafrtiti.com/myblog
I’m currently changing the template to Hebrew, so the site is a mixture of both right now. But you’ll manage to navigate, I’m sure.

Reply

Alba June 15, 2010 at 9:55 am

Hi Don,
This is great! Thank you.
Question: I created simple custom page, but now I’m not able to use any widgets. Is there a way to enable widgets so they appear on a side bar?

Reply

Elizabeth Cusulas June 28, 2010 at 6:56 pm

Hi Don,

I found that php code for no-sidebar was already installed with my theme so good to go there. Did a new page with no sidebar. Great so far. But when I completed the SmallBiz Theme options when I initially loaded the theme, it automatically generated a home page and I don’t know how to get rid of that so I can use the no-sidebar version of the home page I created. The auto-generated one is not listed in the “pages”. How do I replace what the theme auto-generated with my new home page? If I name my new page “Home”, I just get two tabs that say “home” and I have BOTH. Help!

Reply

Thomas June 29, 2010 at 2:56 am

Elizabeth:
You can watch this video http://www.expand2web.com/blog/video-wordpress-home-page/ at about 3:30 minutes Don will show the steps.

Here are the steps:
1) Create your new Hompage in Wordpress using Pages -> Add New
2) Visit the Smallbiz Options Panel and “Omit: the new Page from the Nav Menu
3) In the left dashboard sidebar click “Reading” under the Settings tab
4) Set “Front page displays” to “A static page” and select your Home page from the drop down menu. It is important to leave the “Posts page” setting on default which is blank or -Select-

Reply

Elizabeth Cusulas July 5, 2010 at 11:30 am

Thanks Thomas! I followed your steps and it works – much appreciated!

Reply

Gloria July 14, 2010 at 3:23 pm

Hi Don,

Do I have to download Wordpress 3.o first from Wordpress.org in order to custom the page w/o side bars? I am working on a blog from Wordpress.com. Would this work for the blog I created on Wordpress.com?

Thanks much for your help!

Reply

Don Campbell July 18, 2010 at 5:10 pm

@Gloria – Unfortunately you can’t do this with WordPress.com site. You would have to download WordPress 3.0 from WordPress.org.

Reply

Aron Davis October 4, 2010 at 7:38 am

Hey again,

I looked at this one too earlier, but is there any way that you can essentially make the template a blank page AND display only the text/images from your posts inside a custom html page?

Thanks!

-Aron

Reply

maly October 6, 2010 at 3:24 am

got a quick question how do you keep the headline and just remove the sidebar only

Reply

Caesar November 2, 2010 at 8:00 pm

Hi Don, i used the custom no-sidebar php on my custom theme, however
my theme has a 3 column layout with 2 sidebars one on the left and one on the right, the code you gave only got rid of the sidebar on the left, and pushed everything i had in that sidebar over to my other sidebar which is on the left hand side of the page. I also tried taking out the 2 div’s at the end of the code made it worse, my text jumbled along with content. Looks like the code may need some altering for my specific theme, any ideas or suggestions would be appreciated. I left my site for you to take a look at

Reply

Caesar November 2, 2010 at 8:19 pm

hey don, nevermind, I found wp had a one column layout template which will work fine, was sitting right under my nose !

Reply

Murfin November 4, 2010 at 4:37 pm

Don,
I have been trying to remove my sidebar from my theme by talking to the designer on a forum to no avail. I got excited when I ran across your site. I installed your code, but didn’t see the ‘no sidebar’ template on the right. Am I looking in the correct place or have I done something wrong?

Reply

Don Campbell November 5, 2010 at 8:52 am

@Caesar – great, I’m glad you got it working!
@Murfin, it should show up if you’ve put it in your theme directory. I don’t have enough info to tell what could be the problem…

Reply

Murfin November 5, 2010 at 4:02 pm

Don,
I think I discovered what I did wrong. I didn’t save it to a file called ‘no-sidebar’. Forgive me, but I’m new to WP and I’m not sure how to save the code to a file.

Reply

ethan February 9, 2011 at 7:53 pm

Hey, I like the videos, helped a bit…was wondering though…is there a way to erase content on most of the page and add a NEW sidebar different from that of the other pages? If so, how can you do this? thank you.

my website is http://www.beginnercreations.com
if you want to swap links let me know!

Reply

Georgy June 1, 2011 at 8:11 am

Wow this site is great – you’re a great teacher. But I’m still not sure wordpress can do what I want. I really want to build the look of every page, not just the cover page. I want to throw out all of the wordpress templates and upload images and turn them into links on each page.

See: http://www.oktheater.org/

But if building the custom page means doing everything through code, which I can’t do – do I need to just buy dreamweaver or front page or something like that?

Reply

Don Campbell June 1, 2011 at 7:34 pm

Georgy,
When you build a page template, you can create many pages with that template. When you create a new Page in WordPress, you can choose which page template to use for it. In this way, you can create a pretty diverse looking site once you get your page templates set up.

Reply

Jeff November 15, 2011 at 8:12 am

Don,
I really loved your tutorial! I have used it on a page already and it worked just fine! Like Georgy above though I’m having a problem assigning each page its own unique template, unlike Georgy though ;-) I have already created all my custom templates . I ftp’d the templates into the same folder as the first one but it does not appear in the drop down menu for selecting the template to use. I would appreciate some help/ direction.
Thanks

Reply

Don Campbell November 15, 2011 at 9:47 am

Jeff, did you give each page template a different name in the comment section at the very top of the template?

Reply

Jeff November 16, 2011 at 1:37 am

Aaaah! How dumb of me; sorry for bothering you with such trivial problem. It now works perfectly!

Thanks again and great tutorial!!!

Antonio June 29, 2011 at 11:25 am

Oh, man. Thanks so much for this post! You saved my life. Thank you!

Reply

Viky July 14, 2011 at 11:16 pm

Hi Don,

The video was very helpful. I really want to create a template for my WP site. However I dont have that directory path you had mentioned. I just went to the WP.com, created a new blog with my own domain name, and then used the dashboard there to make it look like a webpage. I do not host it on my machine, WP does that for me with an amount in return.

I do not have the ample infrastructure to put my portal at my end and run it. Can I still have the WP editor to edit my stuff? Like the directory you mentioned? Or is this possible only if I host it myself?

Thanks in Advance.
Viky

Reply

Don Campbell November 15, 2011 at 9:16 am

Viky,
You can’t do this with WordPress.com blogs, only with self-hosted blogs (WordPress.org.)

Reply

Denean July 28, 2011 at 7:39 pm

Hi,
I tried adding the code to the Voidy theme but my content ended up way over to the left of the page. Is there a way to fix this?

Reply

krishna August 5, 2011 at 6:03 am

this is not working on WP 3.2.1 /twenty eleven kindly help

Reply

Don Campbell November 15, 2011 at 9:15 am

Hi krishna, can you give me some details on what isn’t working?

Reply

Dan November 15, 2011 at 8:09 pm

Hi Don,

I’ve been searching for a tut on creating a custom page template for twenty eleven. I’m a noob, but I think the reason this doesn’t work is because the file structure and functions are different than twenty ten. I’d love to know how to make a static no side bar page template like you do here for twenty eleven.
Thanks-Dan

Reply

Don Campbell November 15, 2011 at 8:36 pm

Hi Dan,
There’s nothing I’m doing here that should be dependent on the theme. I’ll take a look at it again with 2011 and see if I can find what you may be running into .

Reply

Dan November 16, 2011 at 2:09 pm

Well, I’ve been going through a tutorial on Lynda about creating custom page templates. The course uses twenty ten while I’ve been using twenty eleven. I ran into a problem b/c some files are named differently.

I will give it a shot this weekend and report back as to what exactly the problem was as it’s been a week or so.

Thanks for the quick reply,
Dan

Marguerite Inscoe November 16, 2011 at 7:20 am

Hi,
I love the custom page template concept. I’d like one custom page to show the first top sidebar, and another page to show only the second top sidebar.

Here’s how the sidebars are described in my theme.

THEME_NS)
),

‘top’ => array(
‘name’ => __(‘First Top Widget Area’,THEME_NS),
‘id’ => ‘first-top-widget-area’,
‘description’ => __(“This sidebar is displayed above the main content.”, THEME_NS)
),

‘top2′ => array(
‘name’ => __(‘Second Top Widget Area’,THEME_NS),
‘id’ => ‘second-top-widget-area’,
‘description’ => __(“This sidebar is displayed above the main content.”,

What do I type in my custom page to say “don’t get the other top sidebar”?

Right now this command gets both sidebars.

Thanks.

Reply

Tissy Joseph November 18, 2011 at 1:41 pm

Sir, Thank you so much! Oh.. I spent so much time looking for this and you saved me!!! Thanks again! Tissy

Reply

Beeo November 19, 2011 at 2:00 pm

Very useful – thanks a lot :)
Beeo

Reply

aziz November 28, 2011 at 1:18 am

realy i had probelm with how make page home but now im happy :-)
thank a lot for ur value topic.

Reply

harry December 1, 2011 at 8:44 am

I got it. You are my hero~~ Thanks a lot!

Reply

Leave a Comment

{ 3 trackbacks }

Previous post:

Next post: