06

YouTube Snippets WordPress Plugin

I made a little shortcode plugin for making it fairly easy to embed YouTube video snippets. The plugin supports both a start and end time or either a start or end time. It also now allows you to embed multiple videos on a single page. The plugin works like below. Times are in seconds. [yt_video id=”xxxxxxxxx” start=”101″ end=”117″] It’s a slight evolution of the code I found at Amit’s site after a quick Google search. This version obviously ties into WordPress but it also supports multiple videos and stops the video from displaying related videos. The uses for this are pretty wide open. Seems like film studies would have lots of reason to chop up scenes and display them with additional written context.1 Lots of classes would have reasons to chop up YouTube videos to show exactly what they want. Minor Figuring Out of Stuff The only real thing to figure out was how to deal with multiple videos on one page. The original code looked for a single ID on the page. I needed to both generate and find as many unique ideas as people might need. A bit of Google and I found a Stackoverflow bit to create a random string. Then the ID of each div created by the shortcode becomes id=”youtube-player-‘.randId().’ with randId being a 20 […]

20

RVArts.org Version II

Lots of remakes going on lately. That’s good in that it means people still want to work with me (now our group) after doing it once and secondly they’re seeing things to change and improve which is how things get better. The harder part to figure out is that in you never really finish anything so you have to keep that partial snowball effect in mind as you figure out how much work you can take on. Or I suggest you do. I at least pretend I do but really if it’s cool and interesting enough I just say yes.1 So anyway, the old RVArts site was decent but it was an early work in terms of my capacity as someone who makes websites.2 This remake is a mix of technical and visual changes. Technically . . . This remake is about harvesting the content students create in a Facebook group and then using it with different material students create in WordPress. Right now the data is pulled from the Facebook group events into WordPress through the Event Aggregator which ties into Event Calendar Pro. Later in the game we opted to jump events right back to Facebook so we could have skipped all that and just used the FB API but sometimes you find that stuff out too late. […]

18

ANTH101 v 3.ish

“You cannot think your way into a new way of living. You have to live your way into a new way of thinking.” – Mike Wesch You can’t beat that quote as a way to frame a course and it’s nice to consider how digital content supports that kind of perspective on learning/living. It’s also a key consideration in how I think about building courses like this. You have to do it. You shouldn’t expect to be perfect the first time, or the second, or ever really but if you’re doing it right improving it should be worth the investment. You should get some joy out of the process and it should alleviate things that cause you pain. I’ve had the opportunity to work with Mike Wesch and Ryan Klataske at Kansas State over the last few years1 on the ANTH101 site. It’s been an interesting progression over time as the course has continued to evolve. We’ve gone done a variety of paths and dealt with human and technical issues. It has been interesting to participate in the ongoing co-evolution of aesthetics, mechanics, and content. It’s also a scenario where I wish I’d have done a much better job with screenshots so I could more accurately show you how the site has evolved.2 After an initial meeting at Kansas State […]

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.