ICompany FAQ and Tips and Tricks

From IThemes Codex
(Difference between revisions)
Jump to: navigation, search
(How to create a page template without sidebars)
 
(One intermediate revision by one user not shown)
Line 3: Line 3:
  
 
Name it whatever you want, let's say that  
 
Name it whatever you want, let's say that  
<pre class="brush:php">
+
<pre class="brush:php;">
 
<?php
 
<?php
 
/*
 
/*

Latest revision as of 07:04, January 30, 2013

Contents

How to create a page template without sidebars

First, create a new page template (http://codex.wordpress.org/Pages#Page_Templates)

Name it whatever you want, let's say that

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

makes sense. Copy the contents of the page.php file in your template, leaving the code described above intact.

Your template should now look like this:

<?php
/*
Template Name: Page no Sidebar
*/
?>
<?php get_header(); ?>

<div id="content_wide" class="inner clearfix">

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

<!--include footer-->
<?php get_footer(); ?>

What you see is the standard page template with the following modifications (makes better sense if you look at the standard page.php file):

  1. the header to indicate this is a template
  2. changed <div id="content" class="inner clearfix"> to <div id="content_wide" class="inner clearfix">
  3. removed <div id="inner"> (AND the corresponding </div> !!)
  4. removed the include of the sidebar and the tabber area

Finally, the content_wide is a new element that needs to be added to your style.css file. To do so, you can copy the CSS styling for content and the content img and change like this:

/*********************************************
 Content Wide Styling for my page template
*********************************************/
#content_wide {
   	background: #ffffff;
   	width: 980px;
	float: left;
	margin: 0px;
        padding: 0px 10px;
	display: block;
}

/* The following may cause alignment issues and may be taken out: */

#content_wide img {
	float: left;
	margin: 0px 10px 5px 0px;
}

Then add this code to the end of your style.css. Why at the end? That is where you eventually will find all your own custom css coding. Easier to trace should you wish to upgrade your theme and re-apply your own modifications.

Now go into your Write Page panel, and select the "Page No Sidebar" template.

How to create a page template with only one sidebar

First of all, it is recommended to use a child theme, so that future updates to the iCompany theme won't overwrite modifications and additions. Also, the child themes include additional functionality, see also: iCompany Child Themes

Add body classes

You can skip this step when using one of the child themes. To be able to target and style pages that use this template, we need to make sure that the pages using this template can be identified.

To accomplish that, we need to change code in the header file, header.php.

find the <body> tag and replace it with <body <?php if (function_exists('body_class')) body_class(); ?>>

Create a new page template

See also http://codex.wordpress.org/Pages#Page_Templates

Name the template whatever you want, let's say that

<?php
/*
Template Name: Page One Sidebar only
*/
?>

makes sense. Copy the contents below into the page template.

<?php
/*
Template Name: Page One Sidebar only
*/
?>
<?php get_header(); ?>

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

<div id="content" class="inner clearfix">
<div id="inner">
		
	<?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>

<!--include sidebar-->
<?php get_template_file("r_sidebar_page.php"); ?>

<?php // get_template_file("tabber.php"); ?>

<!--include footer-->
<?php get_footer(); ?>

Changes in this template compared to the original page.php template are:

  1. the header to indicate this is a template
  2. moved the inclusion of <?php get_template_file("r_sidebar_page.php"); ?> outside the inner div container
  3. commented out the inclusion of the tabber sidebar by add two // <?php // get_template_file("tabber.php"); ?>

Save the file in your (Child) theme folder as page_sidebar_only.php

Add the styling

Add the following code at the end of the (child) themes stylesheet style.css:

.page-template-page_sidebar_only-php #container {
    background: url(images/container-bg-sidebar2.gif) repeat-y scroll center top transparent;
}

.page-template-page_sidebar_only-php #inner,
.page-template-page_sidebar_only-php #content {
    width: 580px;
}

.page-template-page_sidebar_only-php #r_sidebar {
    width: 390px;
}

Note that the widths are arbitrary, as long as you make sure that the total width of content and sidebar doesn't exceed 980px.

Create the background image

To create a grey background for the sidebar, you need to duplicate the container-bg-sidebar.gif image in the (child) themes /images/ folder, e.g. name it container-bg-sidebar2.gif (see line 2 of the above css code. This is a 1 px high image that is repeated vertically. Using an image editor, you should make sure that the area where the sidebar appears is grey.

Use the template

Go into your Write Page panel, and select the "Page One Sidebar only" template.


Back to the main iCompany page

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox