Intro

Intro

With the growing number of textile and quilt artists offering online classes these days, it makes sense to create a safe, secure and familiar environment for your students to download their lessons, interact with the teacher and other students, and upload photos of their progress. Using WordPress, you can add a private members area to your installation that will provide all this and more. This is also a solution that offers a very professional approach to online classes.

The online classroom will have the exact same layout as your website including navigation but with a different header image and a secure login area, as well as special features provided by various plugins.

1

Make a Header Image and a New Set of files for your Classroom

Make a Header Image

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-02.jpg.

Include the Image in Your Stylesheet

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

and paste the copy directly underneath and make the following changes

Make a Classroom Header File

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

Make a Classroom Sidebar File

Make a copy of the theme file sidebar-01.php, rename it sidebar-02.php.

Make a Classroom Template File

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

Also change

And finally change

2

Add Plugins

Add the “Member Access” Plugin

Download, install and activate the “Member Access” plugin.

Make sure you read the “readme.txt” file that comes with the plugin so you understand exactly what this plugin does but in essence the plugin allows an administrator to require that users be logged-in in order to view certain posts and pages; just what you need to keep the pages of your online classroom private.

After activating the plugin, go to your Admin menu and select “Plugins”,
and you’ll see a new item “Member Access”.
Click on this to access your “Member Access” settings.
You have a number of options available to you, but for our purpose, under “Page Settings” check the box “Perform redirect for non-members” and in the drop down box select “WordPress Login Page”.
Save the settings.

Now go to your Admin menu and select “Pages”.
The first thing you can see is that there is now a new column titled “Visibility” alongside each page with a “default” setting which you set to “Perform redirect for non-members” in the previous step.

Add “Peter’s Login Redirect” Plugin

Download, install and activate the “Peter’s Login Redirect” plugin.

Make sure you read the “readme.txt” file that comes with the plugin so you understand exactly what this plugin does but in essence this plugin allows you to set up redirection for your urls. This is necessary so that when registered members or students click the link to the secure classroom they are redirected to the login form and subsequently to the home page of the secure site.

After activating the plugin, go to your Admin menu and select “Settings”,
“Login redirects”.
On the “Manage Login Redirect Rules” page, go to “Specific Roles”,
“Add” -from the drop down box select “Subscriber”.
“URL” – type in http://www.yourdomain.com/online-classroom (replace “yourdomain” with your own url). Save the settings.

3

Create Menu Links for the Classroom

You should now understand enough about the menu configuration to understand how the pages and the menus and submenus work, so the question becomes “How does WordPress know to separate the website links from the online classroom links so that each menu shows different navigation links?”

The answer lies in the little used feature Custom Fields. Custom Fields allows you to create meta-data, and the meta-data can then be used in many different ways. You’re going to use it to identify two different sets of links; one for the menu for the website; and one for the menu for the classroom.

First, create your custom fields. Go to your WordPress Admin, select “Pages” and open “Home”.

In the “Custom Fields” edit box, add a new custom field. Type
websitenav in the “Name” Box, and true in the “Value” box. Click the “Add Custom Field” button. Save the page.

Now open each of the other pages and from the drop-down box in the Custom Field edit box, select websitenav in the “Name” box and type true in the “Value” box and save the page.

4

Add the Online Classroom “Home” Page

In your WordPress Admin, create a new page called “Online Classroom”. This will be the link on your website menu that will take the students to the classroom.

This page should have the same settings as the other website pages, except

• choose the “Classroom Page Template”
• select “Ignore the default settings and make this page visible only to members” in the “Members Access” settings; this now becomes a “private” page
• give the page an order number so that it shows up last on your main menu
• and most importantly make sure that the permalink name of the page is online-classroom. The permalink name itself is not important but it must be the same as the url you entered when you installed “Peter’s Login Redirect” Plugin, and for the purpose of this tutorial the file is named online-classroom.

5

Test

Set up a Test User

At this point set up a test user in your WordPress and make sure you give the user the role of “subscriber” because this is the role that you nominated when you installed “Peter’s Login Redirect” plugin.

Test Your Site

Now test your site (make sure you use a different browser to test otherwise this step will not work) and you should find that when you click on the “Online Classroom” link, you will be redirected to a login page. Login in as the test user and you should now see your classroom in all its glory.

6

Make Some Classroom Test Pages

You can see on your test site that the main menu displays the “website” links. You now need to make some classrooom test pages and restructure the code so that you have separate website and classroom links.

Make Some Classroom Test Pages

Add a number of classroom test pages including subpages, and make sure that for all classroom pages you use the following settings:

• “Classroom Page Template”
• Select “Ignore the default settings and make this page visible only to members” in the “Members Access” settings
• Change the “Custom Fields” settings to create new meta-data.
  In the “Custom Fields” edit box, click on the “Enter New” link. Type
  classroomnav in the “Name” Box, and true in the “Value” box. Click the “Add Custom Field” button.
  Save the page.

7

Change Code To Display Separate Website and Classroom Menu Links

Change Website Code

Using a text editor open the file header-01.php and change the following code to add the meta-data tag for the website links. Change

to

Change Classroom Code

Using a text editor open the file header-02.php and change the following code to add the meta-data tag for the classroom links. Change

to

With the header-02.php file still open, you now need to manually insert a “Home” page link for the classroom; this is in additional to the “Home” page link for the website. Obviously you can’t have two “Home” page links on the same site, so you are going to manually add the classroom “Home” page link using code. As you recall, you were asked to name the permalink for the online classroom page, which is the home page for the online classroom, online-classroom. Now add this code and replace “yourdomain” with your own website url

Now add a final piece of code that will redirect the student back to the home page of the website when she logs out of the classroom. This is just an elegant way to end the session.

Your complete piece of code should now look like this and remember: replace “yourdomain” with your own website url.

Test

Now check both your classroom and website. You will notice that

• they both have separate navigation menus
• the classroom now has a “Home” page link and a “Logout” link (as well as the other classroom test links you set up previously)
• and when you log out from the classroom you are redirected back to the home page of your website.

8

Blog Menu

If you have not already done so, you can remove the main menu from the blog and replace it with a simple link back to your website. The instructions are included in Lesson 3, Step 4.

Alternatively you can add a new main menu to the blog using the steps outlined in this lesson and adding additional meta-data.

Next Week

Next Week . . .

. . . You’ll add some additional plugins to make your classroom functional

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

1

Before You Begin

As recommended in Lesson 1, you should have a clean install of WordPress set up on a test site with the default theme activated.

This is what the default theme looks like right out of the box.

2

Testing Your Site

To easily test the changes you make to your site, install two different browsers e.g. Firefox and Internet Explorer. Use one browser to access the WordPress admin section and the other browser to view the changes to your theme as you make them.

Make a Backup Copy of the Theme

Make a backup copy of your theme and put it in a safe place so that in the event of a problem, you have a fresh copy to work with.

3

Now Add a Plugin

Now you’ll need to add a very handy plugin.

Download the “Exclude Pages” Plugin, then install and activate it. All plugins come with a “readme.txt” file so make sure you read the file so you understand what the plugin does and you also understand how to install it.

Briefly, this plugin will allow you to show or hide a page. This functionality becomes necessary once you add a submenu sidebar (next week’s lesson) because sometimes you may not want to include all pages in your menu.

4

Add Static Pages

Now we need to create two parent pages in WordPress and set them to “static” pages, which will essentially turn the blog into a cms (content management system) or a website. Also we will change the permalinks so that your urls look more like webpage urls rather than blog urls.

In the WordPress admin:

• Create Home Page
  - First of all, delete any pages that already exist
  - Add a new page title “Home”
  - Add some holding text “This is the home page”
  - Make sure the “Include this page in user menus” is checked
  Under “Attributes”
  - “Parent” – select “Main Page – no parent”
  - “Template” – “default template”
  - Set “Order” to 1
  - Uncheck “Allow Comments”
  - Uncheck “Allow Pings”
  - Publish

• Create Blog Page
  - Add a new page title “Blog” with the same settings as above except set “Order” to 10
  - Publish
• Create Static Pages
  Now go to
  - “Settings”
  - “Reading”
  On the “Reading Settings” page
  - Check “Front page displays”: “A static page”
  - “Front Page”: Select Home
  - “Posts Page”: Select Blog
  - Save Changes
• Change Permalinks
  - Go to “Settings”
  - “Permalinks”
  On the “Permalink Settings” page
  - “Common Settings”
  - “Custom Structure” type /%postname%/
  - Save Changes
• Test
  Test your WordPress and notice that when you type in your url, the “Home” page is now the page that appears rather than the blog post page. You will also notice that you now have two links “Home” and “Blog” listed on the sidebar under the “Pages” heading.

5

Re-organize Navigation: Side Menu

Now you’ll re-organize your navigation. Website navigation is more conventional than blog navigation, and usually the menus are located either on the left hand side of the screen using a vertical menu, or underneath the header image using a horizontal menu, or a combination of both. This tutorial will show you how to modify the default theme to use both a horizontal main menu with vertical sub-menus.

Side Menu
The default WordPress theme has only one sidebar located on the right hand side of the page so you are simply going to move the sidebar from the right to the left. To do this you need to edit the stylesheet.

Using a text editor such as Notepad, or one specifically used for editing web files, open the file “style.css” which can be found in the default theme folder and change

.narrowcolumn {
  float: left;
  padding: 0 0 20px 45px;
  margin: 0px 0 0;
  width: 450px;
  }

.narrowcolumn {
  float: right;
  padding: 0 45px 20px 0px;
  margin: 0px 0 0;
  width: 500px;
  }

Then change

#sidebar {
  padding: 20px 0 10px 0;
  margin-left: 545px;
  width: 190px;
  }

#sidebar {
 padding: 20px 0 10px 0;
 margin-left: 20px;
 width: 190px;
 }

Your page should now look like this.

6

Re-organize Navigation: Horizontal Menu

The horizontal menu generally contains the “main” menu; that is, links that lead the viewer to a main section of your website and where they may also find sublinks for pages related to the main link. This configuration is handled by WordPress using “parent” and “child” pages.

To see the “parent” and “child” links in action

In the WordPress admin:

• Create Test Parent Page
  - Add a new page title “Test Parent”
  - Add some holding text “This is a test page”
  - Make sure the “Include this page in user menus” is checked
  Under “Attributes”
  - “Parent” – select “Main Page – no parent”
  - “Template” – “default template”
  - Set “Order” to 2
  - Uncheck “Allow Comments”
  - Uncheck “Allow Pings”
  - Publish

• Create Test Child page
  - Add a new page title “Test Child” with the same settings as above except
  - “Parent” – select “Test Parent”
  - set “Order” to 1
  - Publish

If you view the site in your test browser you will now see these pages listed under the “Pages” heading in the sidebar with the Test Child link indented underneath the Test Parent link indicating it is a sublink or a “child” link.

Add Styling

Now you’ll add some styling to set the font size, color and placement of your horizontal menu. Using a text editor, open the file “style.css” and add this basic styling code to the bottom of your “style.css” file then save the file. You can of course modify the style of the code to your own preferences.

Now add a piece of code that will turn your “parent” pages into links. Using a text editor, open the theme file “header.php” and at the very bottom of the page below all the text add this code then save the file. This code is no secret and additional information about how the wp_list_pages code works can be a found here.

Your page should now look like this

and you can see that the horizontal menu only contains the links for the “parent” pages while both the “parent” and the “child” pages are listed in the sidebar menu.

Now add some more pages and watch the links appear on the menu. Make sure that the order number is sequential so that the links display correctly; Home being #1 and Blog being #10 (if you want it to display last), and with all other pages numbered in between.

To recap; the horizontal menu was made by simply adding the styling code for the div hnav to the css file, and then wrapping the hnav div around the wp_list_pages code which was then added to the header.php file. Easy yes? (When you know how of course.)

Next Week

Next Week . . .

. . . You’ll learn how to complete the look of your website

• Make a Page Template to display the sidebar so that the website and blog can have different sidebars
• Make a separate sidebar for the website that dynamically displays a submenu with headers that show links related only to the page you are visiting
• Make a separate header image for the website so that your website and blog can have two unique and individual header images