WordPress as a CMS: Lesson 3

1

Make a Page Template

WordPress is very flexible and you can easily change the layout of a page by using page templates. In this step you will be making a page template for your website that displays a sidebar with submenus and headers.

Make a copy of the theme file page.php which is the default page template that comes with WordPress, and rename it page-01.php.

Using a text editor open page-01.php and add this code to the very top of the page before any other code; this must be the first piece of code on the page as this is the code that creates the template.

 <?php
/*
Template Name: Website Page Template
 */
 ?>

Then near the bottom of the file change this code

 <?php get_sidebar(); ?>

to

 <?php include (TEMPLATEPATH . '/sidebar-01.php'); ?>

Save the file.

Changing this code means that when you make a new page and select the template called Website Page Template, instead of displaying the standard blog sidebar, the page will now display a sidebar called sidebar-01.php (which you’ll make in the next step) that displays a submenu with headers.

2

Make a new Sidebar with Submenus

Adding different sidebars to your pages gives you the option to display different information on different pages. In this step you will add a sidebar with special code that displays the “child” page links of the “parent” link, or in other words a submenu, on your website pages. The is a more formal type of navigation system and allows your visitors to easily find what they are looking for, as opposed to the standard blog sidebar which displays categories and tags and is more exploratory in nature.

To make a new sidebar, first make a copy of the theme file sidebar.php which is the standard blog sidebar, and rename it sidebar-01.php. Using a text editor open sidebar-01.php, remove all the code and replace it with this code and save the file. I can take no credit for this piece of code and full credit is given to the K2 theme which is “Open Source”.

Now go to your WordPress Admin and select “Pages” and one by one select all the pages you have made – except the Blog page – and in the “Attributes” module on the right hand side of the edit page in the drop down box under the “Templates” heading, you will now see the new template we made in the previous step: Website Page Template. Select this template for each page and save.

If you view your website and click on the Test Parent link on the main menu, you can see that the sidebar now displays a submenu with a “Parent” heading and the parent’s “child” links.

To make the heading a clickable link (this is optional and a personal preference) change this part of the code

<h2><?php printf( __('%s','k2_domain'),
     apply_filters('the_title', $parent_title) ); ?></h2> 

to this

<h2><a href="<?php echo get_permalink($parent_id); ?>">
     <?php printf( __('%s','k2_domain'),
     apply_filters('the_title', $parent_title) ); ?></a></h2> 

You can also see that when you click on the Home page link then nothing is displayed because the Home page link has no “child” pages.

To sum up, each page only displays the links that are relevant to that page. If the “parent” page has no “child” pages, then nothing is displayed. This is a very nice piece of code.

If you click on the Blog link, you can see that it displays the standard blog sidebar.

You really don’t need the pages links on the Blog sidebar, so to remove them simply remove the Pages code

<?php wp_list_pages('title_li=<?h2>Pages<?/h2>' ); ?>

from the sidebar.php file.

3

Make a Separate Header Image for Your Website

Using a graphics program such as Photoshop, create an image the same size as the image kubrickheader.jpg which is located in the images folder of your default theme, and name it kubrickheader-01.jpg.

Using a text editor open the file style.css. Around line 38 copy this piece of code

#header {
	background: #73a0c5 url('images/kubrickheader.jpg')
no-repeat bottom center;
	}

and paste the copy directly underneath and make the following changes

#header {
	background: #73a0c5 url('images/kubrickheader.jpg')
no-repeat bottom center;
	}

#header-01{
	background: #73a0c5 url('images/kubrickheader-01.jpg')
no-repeat bottom center;
	}

Save the file.

Make a copy of the theme file header.php, rename it header-01.php and change

<div id="header">

to

<div id="header-01">

Using a text editor open the file page-01.php and change

<?php
<**
 * @package WordPress
 * @subpackage Default_Theme
 *>
get_header(); ?>

to

<?php
<**
 * @package WordPress
 * @subpackage Default_Theme
 *>
include ('TEMPLATEPATH . '/header-01.php'); ?>

Now preview your site. Your website pages should now show a different header image from your Blog pages.

To recap the steps necessary to add a separate header image

• You created a new header image for your website
• You added a new div header-01 to your style.css file
• You made a new header-01.php file
• You changed the code in the page-01.php file which is the Website Page Template

Now, when you create a new page and select the Website Page Template, the template knows to show the website header instead of the blog header. Voila!

4

Remove the Horizontal Main Menu from the Blog

If you like, you can remove the horizontal main menu on the Blog and replace it with a simple link back to your website.

Using a text editor, open the file “header.php” and remove this code

Save the file.

Using a text editor, open the file “sidebar.php”. and directly under

add this piece of code, replacing “yourdomain” with your own url

Save the file.

You now have a fully functional website and blog combo. Each site has a different header and sidebar menus, and the website also has a horizontal main menu. You can now make any styling changes such as changing colors, font sizes etc within the style.css file. You can also easily turn the blog off by unchecking the “Include this page in user menus” checkbox in the “Page Edit” screen.

Next Week

Next Week . . .

. . . You’ll begin adding a secure online area that can be used as an online classroom or private members area