A screenshot of the site on codepen that has the three columns of html, css, and javascript visible.

Headless(-ish) WordPress Example

This is a bit of an odd one but possibly odd enough to be interesting. The Scenario We can’t run WordPress on the University servers but we’ve got a bunch of people who have content on WordPress and like that editing experience. They also want VCU domains which are much harder to get for off-site servers. The Proposal What if we take one of those sites and see what we can do with the REST API data in a headless1 HTML/JS/CSS only environment? I also wanted to keep it out of Vue or other larger javascript frameworks so it’d be less abstract to explain. At this point I am unsure that was a great choice but I can make a different choice next time. More Details The faculty member already had a WordPress site. It had a bunch of pages and had no posts. The faculty member also wanted the header image to change on various pages and for a sub-menu to be created on certain pages. The Proof of Concept – Step One HTML Shell I opted to sketch out the HTML portion loosely with Bootstrap 4. Initially, I’d gone to one of the HTML5Up templates but pulled back as it added a chunk more complexity than I needed initially. Plus, I knew Matt was going to handle taking […]

13

Remove H1 Option from WordPress TinyMCE Editor

In terms of basic accessibility guidelines each page should have only one H1 element. In WordPress that’s usually built into the template and is usually the title of the post or page. I was thinking about that last night and wondered if we should just remove it as an option from the TinyMCE editor in WordPress. Removing options goes against my typical stance but I couldn’t think of any scenarios that demanded an H1 element but plenty of scenarios where offering it seemed like it’d create confusion. A brief perusal of the WordPress Codex’s TinyMCE section led to the code above. I put it in our generic network-activated plugin for Rampages. Next steps could include integrating a filter in kses to remove/replace H1 elements with H2 elements but that’ll wait for now as it seems a chunk more aggressive.

12

Conditional Content Display in Gravity Forms Templates

I don’t know when the conditional shortcode was added or if it has always existed and I was just unaware . . . but the ability to use a shortcode wrapper to show/not show portions of content in blog posts created via Gravity Forms is all kinds of handy. As a quick example, the following content would not show if the entry to the form field {What’s up?:1} was empty. In the past, if we didn’t have the wrapper and we had no response on the ‘What’s up?’ field we’d be left with the awkward ‘ – more words’ being there. This is so very nice for optional content where you might want to add additional html structure — like a link to an attachment but *only* if the attachment exists. It solves so very many problems so easily. You could also display different additional HTML elements based on the response to specific field entries. Like if a ranking on a scale of 1-5 is a 5 show a particular overly happy gif.

03

WordPress Plugin Health Dashboard (Early POC)

In trying to get a better handle on how we’re going to manage our plugins in the future, I found the API for the WordPress.org plugins data. Not like they were hiding it but I’d not seen it before.Consider me Columbus– absent the genocide, slavery, and other terrible things. Replacing *slug* in the following URL gives you a pretty robust javascript With that option, I could build a little Google Sheet/Scripts viewer that would look up information based on a list of plugin slugs. I could set conditional formatting to do various things for visual cues . . . I could even build a little mini-algorithm to evaluate different aspects and weight them towards a total plugin score. I’m debating whether it’s worth working into a more sophisticated plugin that will tell me how many sites the plugin is installed on, display that data etc. There are plugins like that out there but they die on large multisite installations.1 I’d also like some way to tie into the vulnerable plugin announcements. Here are the two little functions that look up and write the plugin’s health based on the slugs being written in column A and a header in row 1. 1 I have a functional, if crude, option that paginates through them in a way that doesn’t crash/die.

03

Javascript for Added Accessibility

Imagine you’ve got a legacy WordPress site built using one of those drag/drop themes. Now complicate it by having a chunk of content created by a non-standard javascript-based slider plugin. Continue to imagine you have a very, very short window of time to bring it up to WCAG2.0 accessibility standards.1 Child themes aren’t a viable option because of the complexity and the tools that built this mess don’t even pretend to allow you to address most of the concerns. Enter our good friend javascript. I can now take our empty section elements and give them aria2 labels as Site Improve demands. One of the slider plugins was also attaching the same ID in two places. The weird one was on the HTML tag at the top of the document. That threw errors and was weird but it was also applied via javascript after the page finished loading so it was harder to get at. Awkward but apparently functional. 1 As interpreted by Site Improve . . . and yes it should have been there already but interpretation of WAVE vs Site Improve has some significant differences. 2 I’m pronouncing this like the opera solos but it’s actually stands for Accessible Rich Internet Applications

22

Add New Mime Type to WordPress Multisite

In WordPress multisite there is a set of allowed file extensions that can be found at Settings>Network Settings in the “Upload File Types” field. You can add to this list but what isn’t necessarily apparent is that if the extension isn’t already part of the list here1 then you can add extensions all day and you’ll still get the security warning. To make a weird extension work . . . like .studio3 for instance you have to add the extension there and do a bit more. I tossed the following code in our network activated custom Rampages plugin. It’s just a hodgepodge of bits of code like this that I want applied across the site but that doesn’t seem like it deserves a plugin of its own. Take note that if you try to guess at the mime type and get it wrong, things won’t work. You’ll be able to select the file in the media uploader but it’ll still give you the security warning. I found this site for determining mime types. There may be other ways but it worked. 1 It is a generous list.

13

Working on Accessibility

Bean with Tools on the Ocean of Storms flickr photo by NASA on The Commons shared with no copyright restriction (Flickr Commons) We’re taking a much deeper dive into accessibility lately. It is a fruitful and good thing to do but also one of those deceptively deep topics with lots of complications. As a result I’m learning a good bit so I better write it down before it’s all forgotten. Two Handy Tools Thanks to both Matt and Jeff, I ended up using a few different tools.1 Google’s Vox Plugin helps you get a better idea what the experience was going to be like for someone with issues seeing the website. Using this will enable you to understand exactly how some of your decisions play out. I found it very handy. As a minor warning, there appears to be no way to turn it off/on short of disabling the extension. Despite that, I really think it’s a good idea to spend some time using this tool. It really helps. The other useful tool so far has been the Siteimprove Chrome extension. It’s pretty handy to see what warnings/failures are in play in each page. It’s led me to realize that there are so many problems. Bits of Useful Code One of VCU’s requirements is a text only view for the […]

11

Correct Names in Comments

We had some trouble with the selected display name not showing up correctly in comments. It worked fine in themes which displayed post and page authors but comments was often incorrect. That wasn’t good from a user experience perspective and also concerned me a bit in terms of what students might expect to be showing vs what actually was showing. A bit of Google-ing prior to trying to write it from scratch led me to this post which I was able to add to a network activated plugin and be done with the issue. I tend to link in the source of stuff I used to solve the problem1 in the plugin. That gives me an embedded reference/footnote in case I ever need to revisit it and it provides a kind of credit as well. Good for me. Possibly even good for the author of the fix. Having a plugin network activated for fixes of this type is also handy. It keeps the plugin numbers down and ends up being a single place for adding/removing/troubleshooting random custom functions like this. 1 Harvard may not agree.

06

The Events Calendar Venue Issue

I’m a big fan of Events Calendar Pro. It makes all sorts of date related things in WordPress very pleasant. The free plugin also does a great job. I did run into a bit of an issue this afternoon as I tried to take events I created in one site and get them into another. Since the events are a custom post type you use the normal WordPress Tools>Export to get them out. That worked fine and I was able to import the events into the new site. The issue came with venues. I’d defined some Venues so I wouldn’t have to keep entering the same addresses again and again. I was able to export/import them in the same way I’d exported the events and they showed up fine as content. Unfortunately, it seems like plugin references the venues via post1 IDs. My imported venues ended up with different IDs and the IDs reference by the events ended up being random WordPress posts (in the traditional sense). This led to venues with names like ‘untitled 4’ or ‘a moment of calm in online teaching.’ Trying to change them on the backend to the venues I’d imported led to weird duplications and the prior information displayed no matter what I did. I didn’t have a huge number of events, maybe 13. […]