This is the third of n in a series of posts covering the development of a web site project for JIBC. Previously I wrote about the metaphor of and prototyping of a map metaphor. Now it’s how it was not exactly realized in the WordPress site created.
But let’s start with the end, meet CorrLeader, the BC Corrections Leadership Model.
The project I was tasked with was creating/organizing a site that supports leadership development programs for managers in the Corrections Branch (see the About page for more). It was meant to include specific workshops. courses, online modules that have been arranged to be available for staff, but also a set of optional readings, audio, videos that could augment. The need there was that there should be content recommended for busy, on the go people, things they might access on a mobile device. Also, it was desired to be easily accessed, nothing behind a login. Open.
As I understood it, managers in development would be individually coached/advised on areas of leadership to develop. This was the idea of the first metaphor of sometimes being given a map and directions to a destination, other times when you find your on way.
Their program had an organizational scheme of three broad areas of leadership (each a page on the site) for Personal, Relational, and Organizational Leadership. Under each are 6 to 12 topics.
You may notice the visuals there, that was as far as those maps got into the site, the terrain I created for the prototype ended up inserted into some Unsplash photos used to represent these areas. More on that soon.
There are two types of content mixed across here- Recommended Courses includes schedule opportunities– workshops arranged by Corrections, JIBC and Royal Road University leadership courses, and a few self-paced online modules purchased for the project. Then there are the optional additional resources that include articles, books, TED Talks, and podcasts about Leadership.
So where did the fun Leaflet,js map thing go? Prototypes sometime go by the wayside. One of the driving reasons cropped up early- the hosting setup for WordPress at JIBC (which is well supported, and appreciated) is a bit more controlled than most of my projects. In fact, even as an admin on the site, I cannot install themes or plugins, these are done as requests to tech services.
This means I would not be able to do my usual custom work in WordPress child themes and coding my way in. That would make it nearly impossible to do something like the Constellations concept I did last year.
But it also made me more carefully reconsider the interactive map interface- it appealed to me, but I had a feeling it would not make things easier for the intended audience. So I decided to make it more of a visual element in the site, the navigational icons that show up in a few places.
I have to give a big thanks to Dennis Yip in the JIBC Centre for Teaching, Learning, and Innovation. By working far off site there were a series of things he had to do for me, and he handled all my requests to tech services, and helped much with the packaging of the module content (plus he’s a really great photographer).
In starting the WordPressing, it seemed efficient to pick a theme that was already supported on their other projects, so when I saw Total listed I felt comfortable. I have used this theme on two other web projects, the Preservation Trust of Vermont and THAT Brewery.
Yeah, it’s one of those heavy themes with a visual editor that turns your content into a heap of shortcodes, but it also has lot of built in features that I felt would give enough flexibility to make up for the lack of doing custom coding.
The theme has a number of display elements that can show grid views of posts or custom post types, limited by category, and various kinds of sorting so I can create places on the front page to show a section of newest recommended courses and also for resources. But say on the page for Personal Leadership I can have a place to list random courses and random resources from within the category (with a different display type for each)
I was also able to make a list view for all the recommended courses, again, just by using the same kind of Post Grid element.
This has a small extra step to use Custom CSS to color over other item in the blue color, it makes it a bit more visually interesting:
#courselist .portfolio-entry:nth-child(odd) .portfolio-entry-details {
background-color: #38598a4d;
}
One that I knew would help is that it has a built in custom post type (for portfolios) that can be renamed easily. So as it worked out, I used regular Posts for the Resources content and the portfolio content type for the Recommended Courses (initial experimenting using one content type got to be a tangled mess of categories).
While we waited for approval for Tech Services to set up the admin site, because I had my own license of the theme, I started the first phase of development on a password protected domain in my own back yard.
One characteristic of the project that moved it along was that all of the information on it is public; we are not asking users to log in, so there are no implications for privacy (we have comments turned off).
Now let’s go deeper on the things that were built out on the site using only plugins.
Custom Fields and Content Blocks
I could see for both kinds of content having a way to add extra meta information- like for a resource a link, a indication of type of resource (article, video, audio), cost if any, etc. The Recommended Courses had some other types of data- date of next offering, contact info, location.
Doing this as a custom development I might have created metaboxes for custom post fields; in this case it seemed a job for Advanced Custom Fields, a rather powerful tool to turn WordPress into something more like a database. I’ve seen the fabulous ways Tom Woodward puts it to work, and were I able to code my own template functions, I could have done a lot more.
But as it is, the field elements I could add to posts and custom content types means the information is more structured than lobbing it into the post, offers so options for error checking on input, and really simplifies the use of custom meta data.
I created 3 different “groups” of fields; one for Resources, one for Courses, and one used for “Common Meta” which ended up being a field to hold image credits. The great thing about the set up is you can choose which content types to associate them with. Here are the ones I set up for Resources:
In the settings you can make them required, and provide prompts on the editing screen. By associating these with posts, when evert I create or edit a post, I get more fun fields below the post:
In doing this I can get all of this data included in my posts. But how do I get in the screen? Since I am not editing a child theme, this did not jump out until I realized that each item I created in Advanced Custom Fields has a shortcode to display it. I also had in mind down the line I might be able to organize resources by say, type of media.
I cannot remember where it clicked, I know it was a feature in the old theme we used on ds106, but I thought of the idea of a kind of plugin that would allow be to create a chunk of content as a block that could then be inserted into a post as a single shortcode. I am talking about a shortcode that contains a formatted batch of other shortcodes.
Looking for these kinds of plugins means wading through a lot of plugins related to Gutenberg blocks, but I found the aptly named Blocks plugin and testing it out worked great.
What this means is I create as a Block the way I want the meta data for resources displayed:
The rich media editor lets me format it with headers, lists, and even use the theme’s font_awesome shortcode for icons, and then I have the Advanced Custom Fields shortcodes that pull in the post meta data for each item.
To get this into the post, I just insert the shortcode [block id="212" title="Resource Data"]
This means advanced custom fields entry I showed above where they were edited for the post is displayed with the metadata at the bottom of the post.
I hope you get the meta meta of a shortcode that includes other content generated by shortcodes. The real power comes in is that once I have the one shortcode in the post, any time I change the template inside the block (e.g. to add another field, change the order, tweak the formatting) it is updated across every post that uses this.
Cough- reusability here. Big time. Flexibility too.
The one note here is I would not use the same Blocks plugin again. It took me much longer, and only by turning off plugins one at a time, to find out this plugin messed with the admin bar of the front end editor (I lost the Customizer and all menu items after it). It’s not a deal breaker for the site, but it bothered me.
It bothered me even more to find out the developer puts in their own plugin support forum an all caps note to NOT POST HERE and also ignores messages sent to the one he linked from there.
Fortunately as I am reusing this approach on a new project, I found a better reusable content plugin in Custom Blocks (Custom Post Widget)– I’ve been able on my new project to author the layout in the Gutenberg editor (not required but hey, I am not head sanding this).
But regardless, this combination of Advanced Custom Fields, using it’s shortcodes in reusable content blocks, was utterly powerful on this site (and in the next project even more).
Another little trick I did was to bring out some emphasis in the multiple listings of the recommended courses (see the yellow highlighted bits in the excerpts).
I have a Course Excerpt Block that pulls in data from the custom fields:
The trick here is in the block settings, where I make it applied to a span with a name of course_list.
I can make the highlight yellow with a little bit of transparency using the CSS
.course_list {
background-color: #ffeb3b4d;
}
I was not sure before I tried this, but adding the shortcode to the excerpt renders it with all the formatting:
This is a tiny detail, but it makes the info about the courses stand out on a full page of listings.
Dynamic Stats
Discussions with my client suggested it would be helpful on the front page to have something to show dynamically how much content was there. Were I coding the template, this is an easy one line code thing but the Simple Blog Stats plugin did the trick with just a shortcode. It can give you counts of posts, custom post types. So here on the front:
This is done in the editor by writing:
This site includes [sbs_posts type="portfolio"] Courses plus [sbs_posts] Additional Resources across these leadership areas and topics:
That was easy.
Late in the project I was asked about being able to provide any data on what content was being used. I offered a few suggestions, noting how using analytics like WordPress Stats and Google Analytics required some consideration that these are done with some kind of tracking code. The Google approach would call for someone on the client/s side to provide a Google account to get a tracking code.
I had a hunch that they were looking for something much simpler, just to know something like page views. So after outlining some of the implications of full on analytics, I suggested the Post Views Counter plugin. This does the counting without using any outside service.
It provides us an inside view by adding the views to the dashboard listings, which can be sorted:
It also provides a dashboard widget with a monthly total activity view:
But a nice feature is it can also generate a shortcode to add to any post (or just have it appended after the content). So remember those block things above? Ticked in there as well is a [post-views] shortcode that just mingles this in with the other meta data. It even does an icon thing which matches the other items.
So this can be seen by anyone. All 2 views!
Form Functioning
Also in the project specs was a need for some forms to be used for answering questions about the program, for suggesting resources, for expressing interest in the scheduled courses. I saw on other JIBC projects they used Contact Form 7 so I requested having it added to the mix. It’s by no means as powerful as Gravity Forms, but given the needs expressed, this free plugin working great.
It’s prime function is emailing the responses, but I was also able to get the Flamingo plugin (by the same author) that saves the form responses in the WordPress database.
This does present some of the information tracking issues, so each form we have offers an email address someone can choose to use if they do not want to fill out the form (let people know and choose their information feeding!).
The client also suggested we restrict it to government email addresses; doing it by a check requires another add on, for now it is there as a suggestion.
I also had some concern about spam through forms. I did find that Contact Form 7 offers a quiz challenge, which you will find at the bottom of the forms. Yes they are annoying, but I really do not want a government official pummeled by stupid spam:
But as an additional level, I found out JIBC does have use of Akismet, so I was able to get tat plugin added to the site (Contact 7 works with that too).
Spam, bad bad bad!
We later added one more form that did not ask for any personal data, but used it to evaluate the purchased module content (I branded them Independent Learning) so we made a simple feedback form for these. I found out the way with Contact Form 7 that I could pre-populate fields via a URL with the name of the course. Because these modules are done as Ari
Events and Redirects
I had also seen early on that some of the JIBC sites used The Events Calendar, so I had that plugin installed for use on the scheduled courses. There were things I liked about how it displayed items with maps, and ordering things chronologically. But so much of it used “event” to label things, and I was not creating events.
In the end I did use it, but solely to be able to list the scheduled workshops in one part of the site, the blue box listing under Recommended Courses solely to list them in date order:
It does seem useful to be able to see the next events, and it will update dynamically. It’s made possible because the plugin provides a widget, and the Visual Bakery editor has an element to enter a sidebar widget anywhere on the page.
To make it work, I use the title, excerpt, and featured image from the real entry for a scheduled course, say the Clear Writing Workshop. and create the entry as ad Events post type. I add there the date and time. But the nifty trick the Total theme provides is… you will never see it.
The theme provides a setting so any content can have a redirect to somewhere else, so the entry for the event https://corrleader.jibc.ca/scheduled-course/clear-writing/ will always go to https://corrleader.jibc.ca/courses/clear-writing/
It’s kind of overkill, but it made it so I can have that simple widget of the schedule courses in the right order (better than fooling around with fake dating the posts).
That’s a Wrap
Those are most of the tricks I folded into making this site, all done with plugins and a bit of custom CSS. I thought at first that this would be very limiting not to do my usual code based approach, but I found the challenge refreshing.
I was given mainly URLs for the content, so there was a lot of researching, paraphrasing, and finding/making images to use as featured ones. I made it a point to give a credit for all images used, even if they are the free kind you can pilfer from Unsplash or Pixabay.
So the site is really a collection of resources. But I am pretty pleased with the way it came together. And the folks who wanted the site are fairly ecstatic about it — I think their norm is spending a lot of time behind a Sharepoint wall. I give credit to the people who planned this project for wanting to do something more open.
That’s the WordPress part. But there is something much more exciting next.
It was hinted at 2 weeks ago, and even what I have added since then was beyond my imagination:
Stay tuned!
Featured Image: Added the WordPress logo to Pixnio image by Pixel2013 shared into the public domain using Creative Commons CC0
Not being able to add new plugins or do any serious custom stuff makes for an interesting challenge. I like seeing how you tackled it (a bit like MacGyver) and I feel extra sympathy for the shortcodes. We have a great site that was removed from public view because of shortcode disease causing unfixable accessibility issues. I am looking forward to the next post.