So you wanna make an online course site that is open, conversational, multimedia ready, and more conducive to an engaging and dynamic online learning environment? Well, you came to the right blog at the right time because as the monolithic administrative Course Management Systems tighten their imperial grip on anything “resembling a web interface to a database” (thanks for the line, Gardo), the open source rebellion is poised to slip through their stubby fingers. Are you ready to promote the virtues of openness, discovery, and sharing within the process of teaching and learning? Are you yearning for a way to accomplish academic goal outside the institutional logic of products like BlackBoard or WEBCT? If so, the following series of posts will be quilting together a number of open source software such as blogs, wikis, image repositories, and content management systems – in order to lay the groundwork for a customizable online learning environment that actually promotes a worthy ideal: an open university. So without any further preaching, let’s make ourselves the bitchinest online learning environment this side of Wallwalla.
Part 1: Setting up WordPress as a course specific CMS
First things first, we are going to start with a single, relatively insular installation for a course site that will be using the well-known blogging software WordPress as both a Content Management System and a malleable blogging component. Keep in mind, however, programs like Drupal (see Darcy Norman’s trail blazing work with this CMS) or multi-user blogging software like Lyceum or WPMU will allow us to eventually think through scaling this concept to a much larger degree (but more on this in another chapter of our exploratory revolution).
I will be assuming a couple of this during this walk through:
If these two things are the case for you then we are ready to rumble. If not, you can still install WordPress quite easily without Fantastico by following these instructions, but you will need a LAMP environment -so go find a good web hosting service (I will be demonstrating here with Bluehost).
I. Installing WordPress with Fantasitco
This will be quick and easy with Fantastico, keep in mind, however, that this script installer will not always be available for all programs and is not recommended for CMSs like Drupal and Typo3. Nonetheless, it does the trick for our purposes with WordPress:
- Go to the CPanel of your web hosting service (usually http://yourdomain.net:2082) and find Fantastico:
- Once inside Fantastico, find and click on the WordPress link on the left side of the window, then click on new installation:
- Next, Fill out the appropriate fields in the new installation script in order to setup up your WordPress installation.*
- Click the install wordpress button at the buttom of the fields and if everything checks out your done with the installation. Piece of cake, right!*An organizing logic – you might want to consider using addon domains or subdomains as a way to organize the structure of your program installations, particularly as the one-off site becomes something bigger with more and more courses within it. For an example of how to use addon domains and subdoamins check out the tutorial here. Link. For the purposes of the current tutorial I will be working from a subdomain courses (i.e., courses.jimgroom.net) and be installing WordPress in a folder titled engl101-f06 (i.e., courses.jimgroom.net/engl101_f06).
II. Choosing a Theme and selecting some Plugins
Now that you have successfully installed your WordPress blog, you should see something like this below:
This is the default Kubrick theme and has been the old gold for many a phenomenal site (see here and here for examples). You have tons of themes to choose from in addition to the default, and you can begin the search with Alex King’s Theme Browser. For my purposes here, I am going to be using K2 0.9 for many reasons, the most important of which is that I am most familiar with the CSS and PHP coding of this theme and I feel comfortable hacking it for my needs. Additionally, there is an active support forum surrounding this theme that helps me when I am feeling blue. This means that when I am hacking the look and feel of the Virtual Leaning Space much of the code I will be referring to will be based on the K2 0.9 theme.
To install a theme simply copy it into the wp-content/themes directory using your FTP client and then select it within the Presentation tab of the WordPress backend.
There is also a plugins database for WordPress that will allow you to build a number of additional features into the WordPress installation, and while there are many to choose from, I will begin with a list of, in my opinion, indispensable plugins:
Please ridicule, debate, or add to this list in the comments so that we can begin to define those plugins that are essential for using WordPress in an educational setting.
To install plugins copy them to your wp-content/plugins directory and follow the directions included in the download by the plugins’ creator.
iii. Customizing K2
Now we need to make K2 0.9 look like we want it to – which is personal preference of course – but I’ll show you how to change the CSS so you can do your thang.
In the themes folder there is a file titled styles.css (../wp-content/themes/styles.css), this is the file the controls the layout and design of your content. By modifying certain elements of this file we can change background colors, header images, etc. Here are some quick changes I always make:
Line 36 – Body background color
I change this color value to #000 because I like a black background for the body of my WordPress sites.
Line 54 – Header class information
This is where I modify the header to include an image of my choice. This process just got a lot easier with K2 version 0.9 for in the presentation tab they now give you the ability to upload an image and make it your default header -they are making this stuff really easy – not like way back in 2004!- so don’t hesitate to try it and make your life simple, as for me I will proceed with editing the styles.css code because I am a creature of habit.
Here is the existing code:
Which I will replace with this:
background: black url('images/engl101.jpg') top right no-repeat;
Let me quickly explain some of the changes I made. The “background” element for the header reads (from left to right): black background, relative url address of image (full url is http://courses.jimgroom.net/engl101_f06/wp-content/themes/k2/images/engl101.jpg), placement of image, and do not repeat image. I made the image 200px in height but made the header 225 px high – so that I can have a black bar running between the header image and the tabs to avoid any problems with reading the static page tabs. Voila, you have the beginnings of the coolest virtual learning space humanity has collectively dreamed up – wjich remains comfortably outside of the profit-mongering aegis of false patents!
See for yourself (click on image below for larger image):
Part 2 is coming this evening featuring a Mediawiki install that is linked to through the page tab menu in the the WordPress header, so stay tuned!