Putting our clients where they belong.

“Why did we create a totally new site rather than update the old site?,” you might ask. This site was/is an experiment in using WordPress as a content management system (CMS). The old site was a collection of static HTML pages which was pretty standard for a site built between the birth of the Web and about 2001. Such sites were typically managed with some program like Dreamweaver and had content that changed very infrequently. Such was the case with our previous site.

I developed the previous Instructional Technology site in 2006 as an experiment in developing an XHTML/CSS compliant site. The site was managed with Dreamweaver and at the time was rather different than the College’s site or other sites on campus. As with most sites composed of static HTML pages, the old site suffered from a lack of new content. The process of creating a new page or refreshing an old page involved several steps and a knowledge of HTML. This meant that only one or two people could do updates and if those people were busy then things didn’t get updated. The result was a site that had not been updated in almost a year and referred to things that were two or three years old.

Enter Matt Gardzina and a challenge to design a site that was easier to maintain and update. I think Matt would have been happy with just finding a way to refresh the look of the old site and develop a schedule for updating the content. I, on the other hand, saw it as an opportunity to develop a completely new (for Wooster) way of maintaining a site. I wanted to use WordPress as a CMS because I knew it would be very easy to keep the content fresh (it just takes a few minutes to write a post and put it in a category) and that it would be easy to refresh the look (drop a new CSS file in and you have a whole new look). What I didn’t know is how hard it would be to actually modify a theme to function as a CMS.

The theme I started with as the foundation was Branford Magazine. It had a homepage that all of us felt had the elements we were looking for on the homepage. Really any of the magazine themes could serve as a starting point because they all are using categories and conditional tags to control the content that appears on a page. For this site the main things to figure out were how to get posts from our personal blogs on the homepage, how to have a calendar of events, how to incorporate video, and how to replicate some of the look and functionality of the Duke CIT site.

The first three challenges were able to be solved with plugins for WordPress. To pull posts from our personal blogs the site uses SimplePie with a custom template. The SimplePie plugin will do much more than we are using it for and there are others that would have worked, but I liked the implementation of SimplePie. For the calendar of events I chose to use the Event Calendar plugin by Alex Tingle in conjunction with the The Future Is Now! plugin. The Event Calendar plugin creates the calendar seen on the homepage by using a special category designated for events and adding an Event element to the post creation screen. The Future Is Now! makes Event Calendar think that events scheduled in the future have actually been published so that they will display on the calendar. Lastly, the video on the front page is being displayed by the Video Widget that is able to create a playlist of videos from YouTube and a number of other services. Other plugins that were added to enhance the site’s functionality are CForms, Podcasting, Redirection, and TinyMCE Advanced.

With these elements in place the last thing to figure out how to do was how to have a section of the site that discussed the technologies supported by Instructional Technology and their pedagogical value similar to this portion of the Duke CIT site. This is where I really had to learn how WordPress works because I had to create page templates which would display posts from a single category even if the category was a sub-category of something else. I also had to figure out how to have different sidebars depending on which page or post is being viewed. The first task was accomplished by using

<?php query_posts('showposts&cat=cat-id');

and

<?php while (have_posts()) : the_post(); ?>
<?php if ((is_category(cat-id)) && in_category($wp_query-> get_queried_object_id())) { ?>

The first statement gets posts in the category we are interested in and the second will only show posts in our chosen category. We need to do this so as to avoid displaying posts from a parent category when we only want post from the child category. Without the last statement if we wanted to display posts in category 2 which was a child of category 1 we would actually get all posts in category 1. This is a limitaion of the way category selection works in WordPress and hopefully it will be fixed in the future.

Getting the custom sidebars was easier as we only need to do a check to see if we are displaying a particular post, if a post is in particular category, or if we are using a particular page template. This can be accomplished by using

if ($post->ID == id-num || in_category(cat-id))

or

if (is_page_template('page-template1.php') || is_page_template('page-template2.php') || is_page_template('page-template3.php')) {

By putting posts in particular categories or sub-categories the above methods allow us to create page templates to display only the posts in that category or sub-category. This is how the Technologies page and its sub-pages are being created. The sidebars on those pages then use the

wp_list_pages(); function or

query_posts('category_id=cat-id&showposts=');
$posts = get_posts('category=cat-id&numberposts=&offset=0');
foreach ($posts as $post) : setup_postdata($post);
echo ('<li><a href="'); the_permalink(); echo('" rel="bookmark" title="Permanent Link to '); the_title(); echo('">'); the_title(); echo('</a></li>');
endforeach;

to display the main pages in Technologies or posts in the same category as the current post. I think that this allows a very smooth browsing and navigation experience on the site. In total I think the site has 31 page templates and the sidebar has 21 conditional checks. It sounds like a lot and it was not easy to set up, but it allows us to have things get added to pages and sidebars just by putting them in the right category. I can’t even being to imagine how much time it would take to update something like this on a static site even if you did use includes. I’ll probably revise this as I think more about how the site is working and people should feel free to contact me if they have questions.

Jon

Educational Technology Equipment

UNDER REVIEW Educational Technology maintains a small selection of innovative hardware and software that faculty, staff, and students may borrow. This equipment has not yet been deployed generally across campus. If you’d like to explore some of this equipment, simply send an e-mail to the Help Desk. For more information, visit the “Checking out Equipment” wiki page. iPad The iPad is a tablet-style wireless computing device which is like a large iPhone in design and function (minus the phone features). With a nearly 10″ screen, multi-touch display and the ability to run applications like an iPhone, the iPad has potential to greatly impact…