Dump the Sidebar Go Wide

Another IDX Solution

I wrote a couple of months ago about IDX Iframes Don’t have to break your theme In that post we learned how you can use a lightbox effect to open an IDX solution with your blog in the background.   For those of us using lightbox plugins it is simple.   But if you aren’t using a lot of photos on you site you might not have a lightbox plugin already installed.

There are some that simply won’t like the look of the lightbox effect.   I don’t know why anyone would prefer to have the theme broken but . . .

Today, let’s talk about another solution.

Create your own Page Template

There are a lot of tutorial on how to create a page template.   I’m only going to talk about it briefly here.   I’ve found them pretty easy to create and setup on several of my blogs.   One specifically for the IDX Solution which would fit if I didn’t have the sidebar on the page.

Easy enough, create a Page Template that didn’t include the sidebar.

Since almost every theme has a page.php file you have the base for your blog template already coded for you.

But before I could begin I needed to know what the various elements on the page were named.

Enter Firebug

I love firebug.   I have it installed on both Firefox and Flock.   It lets me look at any blog from the front and see what the various elements of the theme   are called.   Not only that I can edit those elements on the fly and see on screen what those edits will look like when made.   Did I mention I love firebug?

Once I’ve made a few notes I open the page.php in Notepad and begin making my changes.

First I have to give the page template a name.

<?php
/*
Template Name: Put Your Name Here ex. IDX or Full-Width
*/
?>

I paste the code above at the very top of the file before the header is called and give it a name.

Next I find the element name for the post area and usually add the W or Wide at the end.   Ex.   #post-area   becomes #post-areaW.   This is because the CSS style.css file will have to have this new element added for the full width in order for the template to work properly.

Next I find the code where the sidebar is called and delete it.   Finally I save the file with a new name something creative like page-wide.php

Time to Edit the CSS

Next and last stop, edit the style.css file.   Find the element you changed as in our example #post-area.   Copy the section of code and right below it past it back in and change the name to #post-areaW.   In that new code I find   the width: 580px;   and change this to width: 1000px; (or whatever width you want this area to be.

Add a New Page

After I’ve done an FTP of my new page-wide.php file to the theme directory I Add a Page and in the navigation find where I can select a page template.   There is my Page-Wide in the list.   I select it and add some test text, save, preview.   If it doesn’t look like I want it to I firebug the preview and figure out what additional changes need to be made.

That’s all there is to it.

Aren’t you glad I didn’t turn this into a Page Template Tutorial.

Can I do this for a Post?

Yes, well, maybe.

Next time Lab Rats

Comments

  1. I will check it out, thanks for the insight.
    Aloha,
    Keahi
    .-= Keahi Pelayo´s last blog ..Millionaires Abound In Hawaii! =-.

  2. But don’t you want your sidebar there for your contact information?
    .-= Brandon´s last blog ..Join us for our next FREE seminar! =-.

  3. Brandon,

    It would be used for only a single page, for example IDX. But I’ve recently moved my contact information to the header on two of my business blogs for that very reason. Now I can go full width any time I want and still have contact information on screen.

  4. Ah, that makes sense.

  5. Nice post Dave. The website project we (you and I) are involved with can use a wide page at times. Btw, the project is where it was at when we left it a few months ago. All the content is transferred, edited, and de-spammed but Colleen and I have been extremely busy with clients. Probably a good problem to have,- being to busy with clients to work on the websites that service them!
    .-= Joe´s last blog ..Kennewick Real Estate Listings =-.

  6. Joe,

    I’ve been in Irvine California for a few days and when I got back it was time to dig out. A few shovel fulls yet to go but didn’t want to forget to get back to you.

    1. Great that you have been busy. Hoping the same will happen soon here.
    2. Yes, getting a custom page to dump the sidebar for the IDX can seem daunting if not impossible so I thought it was time to show how simple it really is with a few minutes time and a little code.
    3. Hope the clients keep coming and those website keep bringing them to you both.

    Dave

  7. I like your idea about putting the contact info to the header. Great idea! Thanks for the good advice, as usual!

  8. I’ve been able to create a few different page templates, but the sidebar is what I can’t figure out. Do you know an easy way to create different sidebars so I can show one sidebar with Pagetemplate X and the other with Pagetemplate Y?

  9. Jayson,

    This is different than going without a sidebar. But to answer your question there are a couple of ways to do it, one is easy, and one is hard. Hard way, create two hard coded sidebar.php files and call the one you want inside your page template.

    The easy way, use Max Chirkov’s Simple Sidebar Navigation plugin. With this you don’t even need a custom page template. You simply add sidebar widgets to your widget panel and tell them on what pages/post you want them to appear or not appear.

    Using this in theory you can have 20 widgets in your sidebar but tell 10 of them to only appear on the page you want and exclude the other 10 from that page. And there you have a custom sidebar what that one page. You can mix and match these to create an infinite number of sidebar combinations.

  10. Dave,

    Thank you! I’ll give the easy way a shot; if that doesn’t work for some weird reason, I’ll continue tinkering with the hard way. I truly appreciate your quick responses (to all of my questions overtime).