Inside and Outside the ds106 Assignment Bank Theme

cc licensed ( BY NC ND ) flickr photo shared by Scott Maxworthy

It’s almost ready to share. I’ve been working on and off since August (a project I thought I could do in a month) on turning the ds106 Assignment Bank into a customizable WordPress theme that could be used for any kind of collection of “Things to Do”.

But I’ve done all I can, and just squashed a few nagging details and formatting. A big one over the last 2 days was updating from using as a parent theme the previous WP-Bootstrap theme (based on Bootstrap 2) to the most current one based on Boostrap 3. If that sounds like gobbledy goop, do not worry.

The parent theme provides the base functionality of the site, and I am using one based on Twitter Bootstrap “the most popular front-end framework for developing responsive, mobile first projects on the web.” The previous WP-Bootstrap had all kinds of crazy option panels, and the new version is much leaner, makes better use of LESS. The downside was having to do a lot of manual changes to my templates, because the many of the spans, divs, etc have changed.

Enough blah, let’s first look at the exterior and interior, the former you can see as well at http://bank.ds106.us (the content is of course silly filler).

This is the menu of the “things” in the bank (they can be “assignments”, in the demo I call them “challenges”). It is a WordPress page, and you can have it either as the main entry to the site (Settings for static front page) or an interior page– this way you can use it in say a course site, or have a blog portion on the front. The title and content a the top are what you edit in the page

I’ve made two shortcodes available anywhere in the site [thingcount] displays the number of “things” or assignments or challenges, and [examplecount] displays how many total examples have been collected at the site.

The theme’s 3 footer widgets are configurable, and come blank. In the demo, I use two widgets: Flexible Posts Widget allows me to do the middle and right widgets, which are custom post types, and the widget can list the most recent, or in my use, it randomly displays assignments (middle), and examples (right). The List Custom Taxonomy Widget is used on the left to display the types of “challenges” with a list count within (more or less like the standard WordPress Category widget).

The “Challenges” are the equivalent of Assignments at ds106; so within each one, like “Design Assignments”, are individual assignments, like the Cooking Challenges:

As an index page this lists the name, star rating, number of views, number of examples, and number of tutorials created for each. The format is the same as the main menu, it displays two per line– I will have to see if this is viable as a responsive design (each is its own row). There was a fair bit of trickery on the icon- because it can be the uploaded thumbnail (that size is controlled by the WordPress media settings), but other times it comes from media embeds from flickr, YouTube, and the sizing there gets to be fun. I think I have it fairly uniform.

The index can be resorted via the drop down menu to list alphabetically, by star rating, number of examples done, date added.

Now we get to an individual “thing” which has the same features as DS106

The icon/embedded media size is configurable in the theme, and the instructions for how to add an example, depend on the theme options (explained below)- it provides tags if syndication via Feed WordPress is enabled (it needs only a single tag if you use Feed WordPress on the site itself, two tags are needed if the syndication is from an external source (like we do in ds106).

You can also configure it to allow (or not) submissions of examples or tutorials via a web form

The form can be set to make all submissions published directly, or to enter as drafts. I’ve also made it an option to use Google recaptcha, because it you put up a web form, you will get spam. I was able to add this functionality completely in the theme, so no plugins are needed (see below).

In making this form, you just need to create a WordPress page and choose the “Submit Example/Tutorial Form” as a template. You don’t have to write any content, but if you do, it goes on the top like instructions. And you can title it whatever you want.

If you want to allow people to add assignments, there is a form for that!

If you do not want ratings, then these options (and elsewhere you see star ratings on the site) are hidden. This has a caption too, and a nifty jQuery thing to toggle fields for URLs, thumbnail uploads. I’m damn proud of coding all the stuff you can get done (probably better) in Gravity Forms. But I wanted this site to work with no premium plugins.

This too, is created by making a WordPress page, and selecting the “Submit Assignment Page” as template. If you do not want people adding assignments, I would still make the page, but add a password protection- it will make your assignments be entered properly as opposed to using the WordPress admin.

There were some minor tweaks on archive listings, such as all examples added/syndicated to the site

This is an archive template for a custom type, so they are not called “posts”; it also took some custom functions to be able to list the assignment/challenge an example is associated with (they are linked by taxonomy tags).

When you syndicate in examples, a user account is created to match the feed, so the archive for an “author” is not really an author, but a site.

Likewise, the search results needed some tweaking to display the meta information, because it is different for an example, versus an assignments:

I might be missing some conditions here, like if the site owner does normal blog posts.

The site menu is constructed by the site admin via standard WordPress menus. This gives a lot of flexibility as to how you create navigation. So “thing types” are all of the groupings of assignment types, so you get to pick where they go on your menu

All of the functionality in the site is configurable via a Assignment Bank Options admin page; it is under the “Appearance” menu of the dashboard, but also is added to the top of the main admin bar

I’ve blogged before as this was developed, but I am hugely appreciative from the tutorial and code from Aliso the Geek— The WordPress Settings API is a sprawling beast. I have greatly expanded her framework for the special kinds of form elements needed, but the structure enabled me to do this rather cleanly (I hope).

The options have 4 main tabs to organize them , the first are a range of general options:

First you get to customize what you call the “things”- be they Assignments, Challenges, Recipes, Bands, etc. This is used all over the site to label the “things”.

For the form where you create new “things” you can set whether they are published immediately, or set to draft.

Next, you have to identify the page created that houses the “Add an Example/Tutorial” form (this probably needs to move below with the syndication options). You actually just select from all pages created. There’s a function for that.

The excerpt length allows you to have longer or shorter summaries of examples, posts, etc (the default is the WordPress 55).

Then you have a number of options to enable the captcha on forms, and if so you need to enter public/private keys you get from Google recpatcha. You can even select from the 4 visual styles Google gives is.

Next are the media options, you set the width and height for thumnbnails that appear on the main, and the type index pages, as well as the width of images, media on an individual thing page.

And you get to set a default thumbnail to use for an assignment/thing of none is chosen- this was the most challenging thing to develop, to figure out how to use the WordPress media uploaded, where you can drag and drop to the site.

The bottom is an indicator if you have installed the WP-PostRatings plugin; if no, that means you do not want to allow ratings. There are a few edits that you will need to do in the plugin.

Next we have the options that enable the form to be available for visitors to add their examples, and whether they should be published or kept as draft.

The bottom contains the syndication options for bringing in examples (responses to assignments)– I recently blogged those options in more detail. The way it stands now, if you do syndicate from an outside source (like ds106), you will have to manually add one feed to Feed WordPress; if you enable syndication on the bank site itself… well I do not (yet) have a simple way to allow people to add feeds.

My hope is to create this as a general plugin, as it is going to be useful outside. I did not see it as essential to build into the site.

And that’s ONE options tab!

The next tab is where you edit the names, descriptions, and thumbnail images for each type of thing/assignment. Again, the thumbnails are uploaded directly to WordPress. I am seeing a small bug for the first time you do this; the second thumbnail seems to replace the first, but once saved, they seem to behave.

There is also a check box to delete a type.

Ahh, you ask, how to you create these in the first place? At the bottom, you list new types you want to add in a text area

When you save, they then become part of the top set, where you can edit, etc. This again called for some trickery to make a save return the page to the same tab. Win for me.

The third tab represents my remaining major task

Once I write the docs, and make sure there is sufficient comments in the code, this baby can go on github.

Whew! This has been major. Trying to make sites for other people to make sites is much harder than just making sites. I am sure there are use cases I have not counted on, or actions people will take that I’ve not anticipated. And people will ask for features not in the original. All is expected.

I have tested this in multisite on ds106, and as a standalone on me own sandbox. Check.

But if you want to try this out early, let me know. It’s almost prime time (I hope).

 Share this barking on social media

If this kind of stuff has value, please support me by tossing a one time PayPal kibble or monthly on Patreon