Page template for iCompany without a grey bar

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:

• Step 1: Create a new page template based on page.php
• Step 2: Modify the new page template
• The finished code

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:

• iCompany/iCar or iRealEstate theme (version 1.6.2 used for this example) installed on WordPress
• ability to use the WordPress theme editor: WordPress codex on Editing Files
• ability to upload a file to your WordPress theme folder

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
  /*
  Template Name: Page tabber only
  */
  ?>
  <?php get_header(); ?>
  
  <!-- <?php echo basename( __FILE__ ); ?> -->
  

• 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).

  <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>

• Change the div containers content and inner:
  

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

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

• Remove the inclusion of the r_sidebar_page.php file

The finished code

Your entire page template now should look like this:

<?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(); ?>

And that should be it.