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 […] […]

Read More…

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 […] […]

Read More…

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 […] […]

Read More…

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 […] […]

Read More…

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 […] […]

Read More…

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. […] […]

Read More…

Privacy Statement