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

23

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

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 https://t.co/pL0HnuIO2L — 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.

A tag cloud of filler text.

Tag Cloud from Gravity Form Entries WP Plugin

Based on a conversation I had on Tuesday there appeared to be a need to generate a tag cloud1 from Gravity Forms responses. I didn’t see any immediate solutions after browsing for plugins. Granted, I could have jerry rigged something by creating posts and doing something weird where I added the words as tags . . . but I’m trying to do things in a more sustainable way lately and I figured this wouldn’t be too tough. I’m going to try to do a decent job of moving through the development process in stages. If you just want to mess with the plugin, it’s on GitHub. Find a Decent Tag Cloud Library I looked around and found wordcloud2.js. It seemed perfect. It has some real flexibility and the hard work has been done for me. I played around with a demo in CodePen. This lets me work out any kinks I might have in the js/html/css side of things before adding any WordPress and PHP complexities. If I don’t force patterns like this, I’ll add enough complexity that figuring out which thing I’m not understanding is much harder. It might take some extra time but it saves me quite a bit more in the long run. Building the Plugin Foundation enqueue the main scripts Following my mantra of slowly adding […]

30

Gravity Forms to ACF Pattern

When you use Gravity Forms to make a post, you can provision ACF fields but what I found was that the data wasn’t showing up correctly until I manually went and updated the created post. I tried using the WordPress wp_update_post() function but found that didn’t do it. I ended up taking a look at the post_meta in the database directly.1 That’s something that I find myself doing more and more. When you can look directly at evidence, do that. Don’t assume. So what I saw was this . . . You can see that the base custom fields are there. The data is visible. Now I hit update and refreshed the database view and saw lots of new custom fields get generated. This data associates the human readable fields with the field keys that ACF creates. Note the underscores which prevent those fields from showing up in the backend of WP even if you have view custom fields selected. I feel like this has something to do with acf/save_post but couldn’t figure out how to make that work. When my knowledge fails,2 I resort to force. First, I turned on the ability to see the field keys in ACF. It’s easy to miss and easy to forget that this is a Screen Option in WP. Once I could see […]

Cowboy riding a horse standing up.

Clean Up the Playground WordPress Plugin

I looked around for a WordPress plugin that would delete content every X hours and didn’t find anything. It may be this is a strange desire or I could be bad at searching but in any case I built something to do that. The idea I had was that people in a multisite environment could try out sites and get a good feel for how the plugin/theme would work but without the barrier of adding it to their site or creating an entirely new site. The plugin also creates a page that has the shortcode on it which will trigger the cleansing manually. Assumptions1 I assume we’re going to delete all the content that wasn’t created by the admin. That lets us leave some directions and some demo content if needed that will persist after the site is purged of content. I figured we’d auto-add people using the Join My Multisite plugin and setting the user to editor or lower. It might make more sense to create a custom role and/or restrict the ability to maliciously or accidentally change the author of content. I used wp_schedule_event and set the refresh at every 24hrs. I am only deleting pages, posts, and media. I haven’t gotten around to finding/deleting custom post types. 1 Acknowledged laziness.

cartoon face eating cheetos.

Auto Featured Image for Gravity Forms Posts by Response

This scenario is fairly specific, Gravity Forms to post and adding a specific featured image based on a form field but the ease of assigning a featured image via the media post ID is hand elsewhere and it’s always nice to document more ways to tweak Gravity Forms. Step One Upload your images to the WP Media Library. After uploading the images you want to use, go to the Media Library and change the view to list view. If you mouse over the edit button, you’ll see a URL appear in the bottom right of your browser window. Setup Your Form Take note of the entry ID of the form element that’s going to determine the featured image. It’s likely the same number you’d get if you counted the fields from top to bottom but if you made them and rearranged them it could be something else. If you mouse over the field in the form editor, you’ll see the form ID in blue. The Code Now we’re just writing a bit of PHP to tie into the form. In this case I’m tying it just to form 5 with this action add_action( ‘gform_after_submission_5’, ‘altlab_timeline_featured_image’, 10, 2 );. Leaving off the _5 would apply it to all forms and changing the 5 to another number would target another form. In […]