Home » Teaching and Learning with Technology » The Technology of Smarthistory

The Technology of Smarthistory

(A long and technical post follows.  If you don’t care to read it, if you’re of the TL;DR school, then go, right now, to Smarthistory.org and take a look at what kind of a beautiful OER can be made with WordPress.)

As anyone who knows me knows, I’m a big supporter (and helper, I guess) of Smarthistory (one of the most important Open Educational Resources on the web). I’ve been involved since the beginning.  I’ve posted about it before, more than once.  But Smarthistory has just reached another important milestone.  For years it was an independent stand-alone website, with several different designs.  The original iteration was in WordPress.  I built that one, and it looked…well, see for yourself.oldsh

That site was the beginning of Smarthistory and it did a lot of the good things that Smarthistory still does.  And I was proud to have built it with open source tools and for free. It even won an award, because it did work.

Then there was a small grant and a new design and new site in another open source CMS, ModX.  I didn’t build that one, and the design was much better as was the functionality.

smarthistory

That one actually won another award, a Webby, and got a lot more attention.  It was a great and beautiful site.  Then Smarthistory became part of Khan Academy, and eventually keeping up the separate website wasn’t viable anymore.  So the Smarthistory site went to the Internet Wayback machine.

Well, now, once again, Smarthistory is an independent site!  Beth and Steven have a blog post announcing and explaining the new setup.  And what their goals were.

sh-screenshot

The new site is even more gorgeous than before–I think–and even more functional.  Some of the goals (as Beth and Steven explain) were to make the art the beautiful center, and to use the menus as teaching tools.  That point–that information architecture can be a kind of pedagogy, is one that I hope to take up at some length in a later piece.  Here I just want to detail, for those who might be interested, just how I made the site happen with WordPress and gave it the kind of elegance and functionality it needed to have.

So let’s dig into some of the technical details.

Smarthistory is running on WordPress, hosted by the wonderful folks at Reclaim Hosting.

Smarthistory is using a child theme based on the Customizr theme. This is a very bare-bones theme, and very clean (letting the images take the stage).  It is also somewhat difficult to work with, since it doesn’t use exactly the standard WordPress setup of template files, and all the functions are controlled by hooks…which are sometimes not so well documented.

That child theme uses quite a bit of custom css (and, unfortunately, a lot of the !important declaration.  I know that’s not usually best practice, but in this case it was often necessary).  In some cases I had to use CSS to duplicate what customizr does for some of its non-template templates.  One example of that is the Popular Now page, which, like the Browse by Image pages, came out particularly nicely.

There’s also a rather extensive custom functions.php file.  (I’m happy to share both of those, in detail or in full, if anyone wants).

And then there are the plugins…we’re using a lot of standard ones (akismet, for example), but there are some really special ones we discovered and used.  Here are the most important–all highly recommended for anyone working on any kind of similar project.  Most are free.

Ajax Search Lite provides the really powerful and image-friendly (with thumbnails!) search bar.

Co-Authors Plus allows us to have authors listed for articles (and even more than one author, hence “co-authors”) who do not have to have an account on our WordPress system.  Even better, it gives us (with some special help from the great Daniel Bachhuber, formerly of CUNY, who originally wrote the plugin) a very beautiful and functional alphabetical list of all the site’s contributors.  And each of them has a particularly nice author page.

Maps Marker Pro let us make custom maps which are so important to telling historical stories.

NextEnd Accordion menu let us have very specific and contextual left-side nav menus, different on different pages (the top-nav is a different plugin–see below).

Ubermenu gave us that top nav.  This is an absolutely amazing responsive menu, and when a site has such a large and complicated structure, this is critical.

Of course the site is Creative Commons licensed…and I consider that goes for the technical details, too.  So anyone who has questions about how we made things or made them work…I will always share and answer!

To make a site with (literally) hundreds of pages and (literally) hundreds of different menu items, and to make that into a resource that teachers and learners anywhere can use anytime for free…I am so happy and proud to have been involved with that!  And I should also mention the great assistance of Gwen Shaw and Nara Hohensee, both CUNY colleagues, who put in long hours and excellent work in getting the site ready for launch.


Leave a comment

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