Here are the instructions to create a landing page without sidebar and (optionally) the footer blocks (about and navigation) for iThemes‘ bSocial theme.

Follow these steps carefully and you will have a page with header, a white page, and footer credits only.

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.

Prerequisites:

  • bSocial theme (version 1.1.0 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 file page.php to create a new page template. Name the file page_no_sidebar.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
  • Change div container inner to inner_wide
  • Change div container content to content_wide
  • Comment out the inclusion of the sidebar.php file
  • Comment out the horizontal line with the shadow

Your page template should look like this:

[php] <?php
/*
Template Name: Page with No Sidebar
*/
?>
<?php get_header(); global $wp_theme_options; ?>
<div id="inner_wide" class="clearfix">
<div id="content_wide">
<!–page.php–>

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

<?php edit_post_link(‘(Edit)’, ”, ”); ?>

<?php //comments_template(); // include comments template ?>

<?php endwhile; // end of one post ?>
<?php else : // do not delete ?>
<h3><?php _e("Page not Found"); ?></h3>
<?php _e("We’re sorry, but the page you’re looking for isn’t here."); ?>

<?php _e("Try searching for the page you are looking for or using the navigation in the header or sidebar"); ?>

<?php endif; // do not delete ?></div>
<!–include sidebar–>
<?php // get_template_file(‘sidebar.php’); ?></div>
<!– <hr class="shadow" /> –>

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

Step 3: Add styling to the stylesheet

We need to add styling for the wide content areas. The vertical line that borders the current content left and right is contained in an image. We will take out that image so that leaves us with a plain white area spanning the entire site width.

Add the following code to the end of your stylesheet style.css:

[css] /*********************************************
Additional Styling for page without sidebars
*********************************************/

#content_wide {
float: left;
margin: 0px;
padding: 25px 50px;
width: 90%;
display: block;
border: 0px solid black;
}

#inner_wide {
background: #fff;
}

#content_wide h1 {
font-family: "Arial Black", Arial, Helvetica, Sans-Serif;
font-size: 14px;
line-height: 46px;
text-transform: uppercase;
margin: 0px 0px 10px 0px;
padding: 0px 15px;
color: #FFF;
background: #000 url(images/filmstrip.gif) repeat-x;
}
[/css]

Step 4: Modify footer.php to take out the bottom blocks

If you wish to take out the footer blocks with the “About” and “Navigation” area as well, you should add a condition to the code to make sure this code will only be included IF the page template is not the one you’ve created here. This will ensure that the footer will be displayed as intended on all other pages.

It is vital that you use the exact same name as you did in the first step, so in this case page_no_sidebars.php.

In order to achieve this, we use conditional tags, in this case, the is_page_template? condition.

Your footer code should look like this.

[php] <?php global $wp_theme_options; ?>

<?php if (!is_page_template(‘page_no_sidebar.php’) ) { ?>

<div id="bottom" class="clearfix">
<?php if(is_home()) : ?>
<div id="video">
<h3>Video of the Week</h3>
<div class="videowrap">
<?php echo stripslashes($wp_theme_options[‘feature_video’]); ?>
</div>
</div>
<?php else : ?>
<div id="about">
<h3>About</h3>
<?php echo stripslashes(nl2br(nls2p($wp_theme_options[‘about’]))); ?>
</div>
<?php endif; ?>

<div id="nav" class="clearfix">
<h3>Navigation</h3>
<div id="navwrap" class="clearfix">
<div id="navcats">
<ul>
<?php if($wp_theme_options[‘include_pages’][‘0’] == ‘home’) { ?>
<li><a href="<?php echo get_settings(‘home’); ?>"><?php _e("Home"); ?></a></li>
<?php } ?>
<?php //Lists pages, only pages selected in theme options ?>
<?php if($wp_theme_options[‘include_pages’]) $include = implode(",", $wp_theme_options[‘include_pages’]); ?>
<?php $my_pages = "title_li=&depth=1&sort_column=menu_order&include=".$include; wp_list_pages($my_pages); ?>
</ul>
<ul>
<?php //Lists categories, only categories selected in theme options ?>
<?php if($wp_theme_options[‘include_cats’]) $include = implode(",", $wp_theme_options[‘include_cats’]); ?>
<?php $my_cats = "title_li=&number=7&hide_empty=0&hierarchical=0&orderby=ID&include=".$include; wp_list_categories($my_cats); ?>
</ul>
</div>

<div id="navsocial">
<?php
$Social = array( ‘twitter_url’=>$wp_theme_options[‘twitter_url’], ‘technorati_url’=>$wp_theme_options[‘technorati_url’], ‘facebook_url’=>$wp_theme_options[‘facebook_url’], ‘feedburner_url’=>$wp_theme_options[‘feedburner_url’], ‘youtube_url’=>$wp_theme_options[‘youtube_url’], ‘delicious_url’=>$wp_theme_options[‘delicious_url’], ‘myspace_url’=>$wp_theme_options[‘myspace_url’], ‘digg_url’=>$wp_theme_options[‘digg_url’], ‘flickr_url’=>$wp_theme_options[‘flickr_url’], ‘stumble_url’=>$wp_theme_options[‘stumble_url’], ‘netvibes_url’=>$wp_theme_options[‘netvibes_url’], ‘newsvine_url’=>$wp_theme_options[‘newsvine_url’]);
$i = 1; foreach((array)$Social as $label=>$social) {
if($social && $i <= 10) {
echo ‘<a href="’.$social.’" target="_blank"><img src="’.get_bloginfo(‘template_directory’).’/images/social/’.$label.’.gif" alt="" /></a>’."\n"; $i++;
} } ?>
</div>
</div>
</div>
</div>

<?php } ?>

<div id="footer">
<!–footer.php–>
© <?php print date(‘Y’); ?> <?php bloginfo(‘name’); ?> :: <?php _e("Powered by"); ?> <a href="http://wordpress.org/">WordPress</a> :: <a href="http://churchtheme.com/bchurch/">bChurch Theme</a>.

<!–necessary–>
<?php wp_footer(); ?>
</div>

</div><!–end #wrap–>
</div><!–end #container–>
</body>
</html>
[/php]

Leave a Reply