As requested in this post on the iThemes support forum, here are the instructions to create a page template for the iCompany Theme series by iThemes (these instructions will most likely work for iCar and iRealEstate as well). This template will not have the grey bar and the featured area, and the main content will expand to the right until the right tabber sidebar.

In the following steps we will:

Note, this code is provided “as is” by me, not officially endorsed or supported by iThemes. Furthermore, I do NOT vouch for support for IE6. I have tested this code in IE7, IE8, Firefox, Google Chrome Safari and Opera. If it works in IE6, that’s great, if it doesn’t: bad luck.

All modifications in one file

This time, I have decided to keep all required modifications within the page template. Although some will argue that CSS code has no place inside the main page code (and will actually generate a validation warning), it will make upgrading the theme a lot easier. If you do not want the code inside the page template, you will need to modify the stylesheet style.css AND the header file header.php. On request, I can add instructions to do so at a later stage.

By keeping all code in one file, there is no risk of overwriting your modifications during a theme upgrade, nor do you have to re-apply the modifications after such an upgrade.

Prerequisites:

Step 1: Create a new page template

Use the base code from the page.php file to create a new page template. Name the file page_tabber_only.php and upload/save the file in your theme folder.

More: WordPress codex on Page templates

Step 2: Modify the new page template

Apply the following changes:

  • Add the header info to indicate this is a page template
    [php] <?php
    /*
    Template Name: Page tabber only
    */
    ?>
    <?php get_header(); ?>

    <!– <?php echo basename( __FILE__ ); ?> –>
    [/php]

  • Add the required CSS code

    This will ensure that the grey sidebar will not show by using another background image, and that the content will span the available width (700px).

    [php]<style type="text/css" media="screen">
    /*********************************************
    css for page_tabber_only page template
    *********************************************/
    #container {
    background: url(<?php bloginfo(‘stylesheet_directory’); ?>/images/container-bg.gif) top center repeat-y;
    }

    #inner_tabber_only {
    display: block;
    float: left;
    width: 100%;
    margin: 0px; padding: 10px 15px;
    }
    </style>[/php]

  • Change the div containers content and inner:

    remove the inner class from the content div, and replace the inner div with inner_tabber_only.

    [php]<div id="content" class="clearfix">

    <div id="inner_tabber_only">[/php]

  • Remove the inclusion of the r_sidebar_page.php file

The finished code

Your entire page template now should look like this:

[php] <?php
/*
Template Name: Page tabber only
*/
?>
<?php get_header(); ?>

<!– <?php echo basename( __FILE__ ); ?> –>

<style type="text/css" media="screen">
/*********************************************
css for page_tabber_only page template
*********************************************/
#container {
background: url(<?php bloginfo(‘stylesheet_directory’); ?>/images/container-bg.gif) top center repeat-y;
}

#inner_tabber_only {
display: block;
float: left;
width: 100%;
margin: 0px; padding: 10px 15px;
}
</style>

<div id="content" class="clearfix">

<div id="inner_tabber_only">

<?php if (have_posts()) : while (have_posts()) : the_post(); // the loop ?>

<!–post title–>
<h1 id="post-<?php the_ID(); ?>"><?php the_title(); ?></h1>

<!–post text with the read more link–>
<?php the_content(); ?>

<!–for paginate posts–>
<?php link_pages(‘<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>

<?php //comments_template(); // uncomment this if you want to include comments template ?>

<?php endwhile; // end of one post ?>
<?php else : // do not delete ?>

<h3>Page Not Found</h3>
<p>We’re sorry, but the page you are looking for isn’t here.</p>
<p>Try searching for the page you are looking for or using the navigation in the header or sidebar</p>

<?php endif; // do not delete ?>

</div>

</div>

<?php include(TEMPLATEPATH."/tabber.php"); ?>

<!–include footer–>
<?php get_footer(); ?>
[/php]

And that should be it.

15 comments

  1. Malita

    Cheers, shout and a victory dance – thank you thank you thank you – will be making donation – yayyessyayyes!!!

  2. David

    Great stuff, I was also looking for this. Well done, and really well presented.

  3. AdrianaL

    Thanks for this code… it is GREAT…I have Internet Esplorer 7 and it works like a charmbut when I access the same site with my other computer (which has Internet Explorer 8), although the text is expandedto over where the sidebar used to be, it still shows the gray bar behind the text… any ideas?thanks again

  4. vanweerd

    Have you cleared the browser cache? The code provided works in all major browsers, I haven't tested on IE6 though.

  5. jason83

    Hi I have a problem with my jtabber it wont align to the far right, can anyone suggest what to do ?

  6. vanweerd

    Hi, can you add a link to your site? And if you have followed the instructions step by step, it should (!) be ok. So let's have a look.

  7. vanweerd

    Hi, can you add a link to your site? And if you have followed the instructions step by step, it should (!) be ok. So let's have a look.

  8. Amy

    Thanks for this code… it is GREAT…I have Internet Esplorer 7 and it works like a charmbut when I access the same site with my other computer (which has Internet Explorer 8), although the text is expandedto over where the sidebar used to be, it still shows the gray bar behind the text… any ideas?thanks again

  9. Alan

    Hi, I created the page as per your instructions but still see the grey bar..what am I missing? please help

    Thanks
    Alan.

    1. Ronald

      Alan,

      you must have missed a step, the instructions are pretty waterproof. Can you recheck, or add a link to a page where you are using this page template?

  10. Angela

    Hi! Is there any way for you to do a tutorial on editing the stylesheet style.css and the header file header.php when you get time? I’d appreciate it!

  11. Angela

    actually, false alarm on the style. and header. tutorial BUT I followed the instructions exactly and is there any way to have the text stop spilling over into the sidebar?

  12. Steve

    Am I missing something here?

    I did 100% of the instructions, and now I have the page_tabber_only.php, which I uploaded into the same directory as my page.php. Now what?

    Am I supposed to see a new theme? change something else to get page_tabber_only.php active and not use page.php?

    Yea, I’m missing something here…please advise.

    Thank you.

Leave a Reply