Canvas-ish WordPress Template

Origin Story The request came in on Monday for a WordPress theme that looked like the Canvas LMS. That’s not a very dramatic origin but it’s what I’ve got. You can check out the current iteration of the theme here or get it on github here. What does Canvas look like? I’m really just imitating the pages so I went to check out a demo page. It looks something like this. In my head, I break it down into rectangles and start thinking of how to get the data into those boxes. The rough sketch below is how I conceptualized it. Most of the content is pretty straight forward as well. The Work For this type of quick work I knew that the understrap theme would get me most of the way there. It has a left sidebar template and it’s in bootstrap so no drama there. I didn’t strip this to the bones but that option remains open if we want to make this an even more streamlined theme. The two things I was less sure about were how I wanted to populate the left navigation bar and how I wanted to build out the next/previous buttons at the bottom of the page. Left Sidebar Menu I altered the sidebar-left.php file to read like this. If I haven’t assigned […]

MySql table screenshot showing a variety of metafields populated.

Learn Dash Gradebook Customization

Origin Story We had a group get in touch with us who were fairly far down the road using LearnDash for a project. I recalled seeing it in the past but had never used it myself. There were a couple things they wanted it to do that they were having trouble with and so they reached out to us. Joining in on a project late in the game is never much fun. It is best to just go with the flow rather than thinking dark thoughts around any/all of the choices made prior to your arrival. That is the path I am on. Here are choices made. Proceed to find a path forward. As I write this I also realize how much I’ve already forgotten about the wandering path this took. One more reason to keep the blog posts rolling. The Issues There were three major elements they wanted to work/work differently. Etherpad integration – integrate etherpad creation and sharing with the group function in LearnDash. Jeff handled this and got it working well. Quiz results/Group integration – the goal here was to show the choices made by all individuals in the same group on the completion of the quiz. I did this but am still not in the mood to write about it. Proctor Grading/Commenting – build a minimalist […]


Weekly Web Harvest for 2019-04-21

The Racial Bias Built Into Photography – The New York TimesIt took complaints from corporate furniture and chocolate manufacturers in the 1960s and 1970s for Kodak to start to fix color photography’s bias. ant-media/Ant-Media-Server: Ant Media Server supports RTMP, RTSP, WebRTC and Adaptive Bitrate. It can also record videos in MP4, HLS and FLVAnt Media Server supports RTMP, RTSP, WebRTC and Adaptive Bitrate. It can also record videos in MP4, HLS and FLV uoe-dlam/ed-lti: Provides a Learning Tools Interoperability (LTI) integration for creating WordPress blogs with appropriate user roles based on roles set within the Virtual Learning Environment (VLE)Provides a Learning Tools Interoperability (LTI) integration for creating WordPress blogs with appropriate user roles based on roles set within the Virtual Learning Environment (VLE) h/t Tony Hirst Silicon Valley Came to Kansas Schools. That Started a Rebellion. – The New York TimesMr. Smalley had put up bigger and bigger yard signs in front of his house, even though he knew Mr. Zuckerberg was unlikely to drive by and see them. They were red, with a slash across the word “Summit.” //whole thing reads like a bad joke Selfie Deaths Are an Epidemic | Outside OnlineTermed “killfies” by some social media researchers, these accidental deaths have involved social media personalities and, of course, adventurers. Canadian rapper Jon James McMurray perished last […]

Small red plastic toy shovel.

Gravity Forms Notification to Google Spreadsheet

The idea that data can flow to different places for different purposes is one of the key concepts I want people to believe in. Different technologies and different interfaces have different affordances depending on what you’re trying to do. In this case, we’ve built some online training for students. As part of that training they need to sign off indicating they read various rules and safety advice. We’re using Gravity Forms to collect that information. We’re going to set a special notification email that’s easier to parse in addition to the regular email that gets sent out (that one is oriented towards student confirmation and alerting the individual faculty). Gravity Forms Notification We’re just going to put the student email and faculty email in the subject line with a space between them. I did some fancier stuff early but went back to this when I realized what we were doing just wasn’t complex enough to justify extra drama. I set the from name to Health Hub Logger so it’d be easier to write the filter in GMail. Notifications in Gravity Forms are pretty straight forward but you can find out more on their site. GMail Filter I then setup a filter in GMail so that I could be confident that the Google Script could find these emails and that I […]

After form submission the data is graphed and displayed. Boxes show your guess vs your actual score and combined scores of previous participants.

Gravity Forms to Graph Interaction

I’ve long wanted to build more interactive digital content after being inspired by Brett Victor’s explorable explanations. I’m now finally coming to the place where my ability to build things is starting to match my desire to create them. This particular piece of interactive content was inspired by the NYT’s You Draw It Obama article. We did a direct imitation with carbon sequestration a while ago but I liked the broader concept of guessing at something and then being presented with data. In this case we’re trying to get people to think a little harder about the good things they got out of life just by being born. Form Tweaking First I wanted to tweak the gravity form layout. Given our first question was a placement on a scale of -10 to 10, that content needed to be arranged horizontally. This is Gravity Forms and the radio button input type. So I copied the HTML into a codepen to play with it. This is the result. See the Pen gform layout by Tom (@twwoodward) on CodePen. Results Display Another pattern I find myself repeating is roughing out the data display portion in Codepen. I can then figure out how I need Gravity Forms/WordPress to pass the data live but it’s easier to build out the experience a bit without worrying […]


H4 Widget Headers – Incorrect Nesting Fix

Nothing fancy here but I’m documenting it for the benefit of beginners or people who don’t do this at all. It seems most of the widgets in WordPress automatically give you h4 headers when you add them to the sidebar. That seems to go against the idea of nested and orderly headers that WCAG accessibility wants. Granted, I’m not an expert and reading their documentation seems more painful than it should be. I do know that the SiteImprove checker flags it on the site I’m working on so I turned to javascript for a fix. What I need to do is take the HTML below and remove the H4 element and replace it with a div. I add a class so it’s easier for me to repeat the style that the H4 element had. As is typical for me, I did it on one element first and then I move to see if I can make a more generalizable function. Now I need to repeat this for the other 3 or 4 widgets. I could just copy it over and replace it but I’m really only dealing with two variables so making a decent function makes sense. I need to select the specific ID of the widget and I need specific replacement text. That leads to a function like this. […]


Weekly Web Harvest for 2019-04-14

Marn Grook – WikipediaHowever, to observers the game appeared to lack a team objective, having no real rules, or scoring. A winner could only be declared if one of the sides agreed that the other side had played better. Individual players who consistently exhibited outstanding skills, such as leaping high over others to catch the ball, were often praised, but proficiency in the sport gave them no tribal influence.[1] Most Tech Today Would be Frivolous to Ancient Scientists“Technology” comes from the Greek ?????, techne, which designates art, skill, or cunning. In Greek, it can be applied to sculpture, to metallurgy, to any craft or a method or set of rules for doing anything. The Latin translation of ????? would be ars, from which we get our word art. I find it amusing that moderns tend to imagine technology and art as opposites, when in fact the root words—techne and ars—mean exactly the same thing. In terms of ??????????—technologia—it means specifically a systematic treatment of grammar. The modern sense of the word technology is not found in the ancient word.  Fantasy Map Generator – bl.ocks.orgProject goal is a procedurally generated map for my Medieval Dynasty simulator. Map should be interactive, scalable, fast and plausible. There should be enought space to place at least 500 manors within 7 regions. The imagined area is about 200.000 km2. h/t […]

cartoon face eating cheetos.

Accessibility Bandage

We’re trying to solve some accessibility issues in sites that already exist. It’s not much fun but some of the solutions might be useful to others. The goal is also to do it pretty fast as many of these sites aren’t really our responsibility but we’re trying to help people out who are on WordPress. Same Name, Different URL In this case we had an issue where some tags for the posts were the same name as some other links on the page. They didn’t go to the same place. That’s a bad thing for accessibility. Handily, our post tags were wrapped in a div with the class tags (.tags). The following bit of js, selects all the a elements within the element with tags class (.tags) and adds a the # character to the tag title. Simple and easy compared to writing a custom tags function in php. I also like the ability to use querySelectorAll in combination with forEach. See the Pen cobe tags accessibility fix by Tom (@twwoodward) on CodePen. Pattern What you can see too in the codepen above is that I’ll often copy/paste the HTML from the WordPress site and experiment with it in codepen. It often simplifies things while providing a quick working environment.

Will Wonka asking you to tell him again what WordPress can't do.

Multisite Post Forker – The Jolly Brancher

I happened to see John Johnston’s tweet earlier today. Essentially the goal was to write a plugin in WordPress multisite that would let the user fork a post/page into their own site where they could then continue to edit etc. @cogdog possible splot/plugin idea — john johnston (@johnjohnston) April 19, 2019 I had been hassling with a few other projects and felt like a break so I decided to take a swing at making it. I knew I had some of the major concepts worked out as part of the Motherblog Plugin, I’d just need to tweak some things. I managed to get a working plugin together in an hour or so. I’m dabbling off and on with some details but it’s functional. It’s up on github. Demo video is below.


Weekly Web Harvest for 2019-04-07

Facebook includes weird messages inside Oculus Touch controllers – Business InsiderFacebook said it accidentally hid bizarre and “inappropriate” messages inside “tens of thousands” of virtual-reality controllers, including “Big Brother is Watching” and “The Masons Were Here.”