Hacking an Open Source Virtual Learning Space (Part 1)

Hacking the Future with WordPressSo 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:

a) That you are working in a LAMP server environment
b) That you have access to CPanel on this server that is equipped with Fantastico

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:
  • Image of Fantasitico in the CPanel

  • 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:

    i. Themes
    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.

    ii. Plugins
    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:

    SpamKarma 2

    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:

    #header {
    padding: 0;
    margin: 0;
    position: relative;
    height: 200px;
    background: #3371A3;

    Which I will replace with this:

    #header {
    padding: 0;
    margin: 0;
    position: relative;
    height: 225px;
    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!

This entry was posted in Uncategorized and tagged , , . Bookmark the permalink.

18 Responses to Hacking an Open Source Virtual Learning Space (Part 1)

  1. Matt says:

    Nice entry, Jimmy . . . very nice! Although I’ve got to say that your computer-mediated handwriting is just a baby step away from chicken scratch!

    I wonder whether you guys have considered having faculty set up blogs (or having you set them up for them) on wordpress.com. The pros are simplicity of use and ease of setup (no installation). The cons are significant for faculty members who are looking for a robust management system — the version of WordPress is very limited (you can’t customize the CSS file, for instance, and you have to make do with limited palette of themes and sidebar widgets). Also, all content is hosted on WordPress.com rather than the university server.

    But it’s certainly a huge improvement over, say, blogger.com. I just set up two blogs for courses I’ll be teaching this fall, and I couldn’t be happier. It’s definitely an option to consider for people who find themselves unable to hack out the learning spaces you’ve described so well above.

  2. Jerry says:

    This is awesome! I just started looking at K2 at your constant insistance, and it is indeed a wonder to behold.

    Thanks so much for all your hard work here – I’m looking forward to chapter 2.

    By the way, my tablet could help you with that “chicken scratch.” 🙂

  3. Pingback: Hacking WordPress into a Virtual Learning Space (Part 2) at bavatuesdays

  4. jimgroom says:

    Thanks Jerry and Andy!

    @matt: WordPress.com is definitely an option, and may very well be an easier option. My thoughts here are really working towards conceptualizing the potential of a CMS like WordPress as a makeshift portal for a class with wikis, flickr, protected pages, a forum, and (as you will see in chapter 3) a multi-user lyceum blogs that students can sign up for a blog and use throughout the class if not their college careers. I agree with you that wordpress.com is a million times easier and I would recommend it to a professor in 2 seconds flat, however I am trying to crudely work through a process of seeing how the pieces integrate and what kind of environemnt we can both create and have a certain amount of control over in regards to the structure and the databased information. I actually think working through a model like this may allow for a more particularized conversation and consideration of what an alternative course management system for education might look like – and with tools like WPMU and Lyceum – how might we start builidng it on a larger scale eventually. So I know it seems a lot of work for relatively little return, but in fact I think of it as a kid of praxis visioning of the tools we use – suggesting that such tools may eventually become invisible, or at least increasingly transparent, but until then we need to tinker and think ‘er. But, this may all be a thinly veiled rationalization of my love of the K2 theme and all its feature rich ways! 🙂

  5. jimgroom says:

    Now you got me thinking! How can we then effectively archive all this content produced during the technology enriched learning process? Ahh, now that is the key. How can the traces of teaching and learning become part of a larger digital resource for the entire educational community to be able to analyze, model, research and share? In other words, how to we begin to funnel such digital resources back into the ever evolving university library as a persistent resource? Hmm, now that would be an excellent rationale for wasting all this time on a lowly WordPress installment. I mean, come on, WordPress can see your latest Netflix queue – why can’t it interact with a library system in a similar manner?

  6. Martha says:

    Jerry and I are using wordpress.com blogs for Steve Greenlaw’s class this fall. It’s the first time we’ve done this, so we’ll report back about how things go. Basically, we wanted to be able to have students quickly and easily set up their own blogs with a standard robust set of themes and plugins. And we were intersted in the persistency that WordPress.com may be able to provide (so we’re not linking the blog to any particular class or a DTLT/UMW-owned domain, but rather encouraging the students to establish a place and an identity for themselves that they can continue to use once the class is over.)

    Obviously, this has it’s drawbacks. We don’t have the kind of control over the blogs that allows us to install special plugins or themes, so we’ll see if we think the external management of the service was worth that price when the class is over.

    A cool feature of wp.com: Using a special category we’ve chosen, the students can easily identify those posts that should be part of the class discussion, and we can use Wodpress.com’s new “Tags” feature to generate an RSS feed of all of those posts (to be reused in a custom WP install that we are runing as a class site much like you’re describing).

    One plugin to consider for group blogs when you are running the installation yourself: Dan’s Avatar Thingy (http://cheesemasterdan.com/wordpress/word-press-plug-ins/dans-avatar-thingy/). This allows users to easily upload as small avatar to their WP profile. Each time they post or comment, their avatar appears next to their text. We’re using it in two other classes this semester that are running group blogs, and I’m hoping it will help the group space to feel like it is actually made up of individuals. We’ll see!

    Great work, Jim. It’s so easy to forget to document this stuff when we do it, and it’s so important to have this documentation.

  7. jimgroom says:


    I took a page out of your book. I was ramping up for Lyceum, but time got the best of me so I am using WordPress.com and I have to say it was convenient and quick. I do love WordPress. I was hoping to work through Lyceum in a more focused manner this semster but looks like that will be put off, at least for now. But, now I will have access to everything you and Jerry discover about WordPress.com making me rich as kings!

  8. Pingback: IMing with my Tech Muse, or Blue Skying Course Managment Alternatives at bavatuesdays

  9. Pingback: Doing things with bavaforum at bavatuesdays

  10. Someone else below asked this already about antyspam sripts.
    I am getting nailed with Spam on my website mails and in our blog website – now ist offline too

    much spam. Is there anyway to stop this? If not, there really isn’t any point in leaving it up

    and active. Any help will be greatly appreciated. http://www.profesjonalna-reklama.pl

    Thanks for help, Keep up the good work. Greetings from Poland

  11. jimgroom says:


    If you are using WordPress Spam Karma 2 is the solution, it catches about 99.9 percent of spam on my blog. Every so often one or two slip by, and actually fr a moment I thought your comment was spam, and I am not entirely certain whether it is or not still because I can’t read Polish. But taking a leap of faith I’ll leave it up, for the moment at least, and spare you the wrath of Spam Karma guru Dr. Dave!

    Hope this helps …

  12. James says:

    Just found this post through a cocomment comment on my blog. And wanted to say thanks for your end of the conversation on LMS and this resource.

  13. jimgroom says:

    I aim to please, James. Good to have you in the conversation, and I am more than happy to help you along your journey in any way I can. It is really fun playing with the small pieces.

  14. nawadnianie says:

    Thanks so much for all your hard work here – I’m looking forward to chapter

  15. Pingback: “Alternatives for BlackBoard” at bavatuesdays

  16. Akhay says:

    This is awesome work. Could u also write a similar chapter on installing smf forums?


  17. Pingback: gcMac » Blog Archive » Blackboard Alternatives

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.