ICompany FAQ and Tips and Tricks - Revision history

Ronald: /* How to create a page template without sidebars */

2013-01-30T12:04:54Z

How to create a page template without sidebars

Ronald: /* How to create a page template without sidebars */

2013-01-30T12:01:51Z

How to create a page template without sidebars

Ronald at 16:50, September 14, 2012

2012-09-14T16:50:54Z

Ronald at 16:49, September 14, 2012

2012-09-14T16:49:55Z

Ronald: /* How to create a page template without sidebars */

2011-06-29T20:52:35Z

How to create a page template without sidebars

Ronald: /* How to create a page template without sidebars */

2011-03-09T08:24:18Z

How to create a page template without sidebars

Ronald at 22:48, January 6, 2011

2011-01-06T22:48:18Z

Ronald at 22:46, January 6, 2011

2011-01-06T22:46:28Z

Ronald at 22:45, January 6, 2011

2011-01-06T22:45:55Z

Ronald at 22:44, January 6, 2011

2011-01-06T22:44:44Z

@@ Line 3: / Line 3: @@
 Name it whatever you want, let's say that
-<pre class="brush:php; gutter: false">
+<pre class="brush:php;">
 <?php
 /*

@@ Line 3: / Line 3: @@
 Name it whatever you want, let's say that
-<pre class="brush:php">
+<pre class="brush:php; gutter: false">
 <?php
 /*

@@ Line 189: / Line 189: @@
 ===Use the template===
-Now go into your Write Page panel, and select the "Page No Sidebar" template.
+Go into your Write Page panel, and select the "Page One Sidebar only" template.
 ----

← Older revision		Revision as of 16:49, September 14, 2012
Line 82:		Line 82:
	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.		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: [http://ithemes.com/codex/page/ICompany_Child_Themes 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 <code><body></code> tag and replace it with <code><body <?php if (function_exists('body_class')) body_class(); ?>></code>
		+
		+	===Create a new page template===
		+	See also http://codex.wordpress.org/Pages#Page_Templates
		+
		+	Name the template whatever you want, let's say that
		+
		+	<pre class="brush:php">
		+	<?php
		+	/*
		+	Template Name: Page One Sidebar only
		+	*/
		+	?>
		+	</pre>
		+
		+	makes sense. Copy the contents below into the page template.
		+
		+	<pre class="brush:php;">
		+	<?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(); ?>
		+	</pre>
		+
		+	Changes in this template compared to the original page.php template are:
		+
		+	# the header to indicate this is a template
		+	# moved the inclusion of <code><?php get_template_file("r_sidebar_page.php"); ?></code> outside the <code>inner</code> div container
		+	# commented out the inclusion of the tabber sidebar by add two // <code><?php // get_template_file("tabber.php"); ?></code>
		+
		+	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:
		+
		+	<pre class="brush: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;
		+	}</pre>
		+
		+	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 <code>container-bg-sidebar.gif</code> image in the (child) themes /images/ folder, e.g. name it <code>container-bg-sidebar2.gif</code> (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===
	Now go into your Write Page panel, and select the "Page No Sidebar" template.		Now go into your Write Page panel, and select the "Page No Sidebar" template.

@@ Line 66: / Line 66: @@
 #content_wide {
     	background: #ffffff;
 	float: left;
 	margin: 0px;

@@ Line 8: / Line 8: @@
 Template Name: Page No Sidebar
 */
+?>
 </pre>
 makes sense. Copy the contents of the page.php file in your template, leaving the code described above intact.

@@ Line 13: / Line 13: @@
 Your template should now look like this:
-<pre class="brush:php; highlight: [8]">
+<pre class="brush:php;">
 <?php
 /*
@@ Line 53: / Line 53: @@
 What you see is the standard page template with the following modifications (makes better sense if you look at the standard page.php file):
-#. The header to indicate this is a template
+# the header to indicate this is a template
-#. Changed <code>&lt;div id="content" class="inner clearfix"></code> to <code>&lt;div id="content_wide" class="inner clearfix"></code>
+# changed <code>&lt;div id="content" class="inner clearfix"></code> to <code>&lt;div id="content_wide" class="inner clearfix"></code>
-#. removed <code>&lt;div id="inner"></code> (AND the corresponding <code>&lt;/div></code> !!)
+# removed <code>&lt;div id="inner"></code> (AND the corresponding <code>&lt;/div></code> !!)
-#. removed the include of the sidebar and the tabber area
+# removed the include of the sidebar and the tabber area
 Finally, the <code>content_wide</code> 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: