Force a Youtube Video to be Watched Before Continuing on a Gravity Forms form.

This is a very specific application, but I had a client who was using Gravity Forms for a volunteer application and they had a intro/safety video that they wanted to be included in the application. The idea was that the applicant had to watch the entire video before continuing through the application. To do this, I just created an HTML field in the multi-page form, and included the following code in that HTML field. It loads the YouTube API, gets the video details – including turning off the controls so people can’t skip to the end – then runs a function when the ‘onPlayerStateChange’ hits 0 (which is the end of the video). To start, first we create a player div, and get the YouTube Player API: The we need to disable the ‘Next’ button used in the form. We do this by finding...

How to Show a Randomized ACF Repeater Row

I recently had a client that wanted a random image to display in a Bootstrap modal popup banner on their website. The banner content was created with an Advanced Custom Fields image field for easy editing, with a text field as well. To change the static banner image to a randomized image, I just created a repeater field where the image field was, added an image field into the repeater (using the Image URL return value), then set up the code like this: Thanks to bridgetwes for the randomized row code on github....

Woocommerce Cart Fix for Bootstrap Websites

Last year Woocommerce made some code changes to their shopping cart that can cause any theme running Bootstrap to break the layout of their checkout page. The file itself is form-checkout.php found in woocommerce/templates/checkout. In this file, they now use ‘col-1’ and ‘col-2’ as their two columns in the checkout page. This conflicts with newer versions of Boostrap where ‘col-1’ and ‘col-2’ dictate column widths, and therefore show their checkout columns as very narrow. Col-1 is a random and badly planned class for woocommerce – since it really doesn’t specify what the column is. The easy way to fix this is to include some css in your theme that overwrites the max-width setting that Bootstrap has for col-1 and col-2. Here’s the code that works:   Thanks to muktoapb who came up with the workaround at the original issue on github....

Call Featured Image from Parent Post

Here’s a simple php code for WordPress that gets the Featured Image from a parent post and displays it on a child page. I had this come up recently for someone who was creating an online guide, so the parent post was the primary topic, and they wanted to easily make all sub posts have the same header without having to do it themselves. I also added the conditional functionality to look for the post thumbnail for the child post first – so that you could overwrite it if you wanted. This also uses ‘global $post;’ as it was used outside the loop – you should be able to remove that if you’re using it in the loop....

Website JSON-LD Schema For Multiple Locations

When you’re trying to give a website the best Local SEO setup, most of the time you concentrate on getting on Google Business (aka Google Places), making sure you use the area’s name on the site and getting reviews. The other part of a good local SEO setup is structured data. Below I’ll show you how to use Schema markup to better assist Google and other sites with identifying your business details, especially when you have more than one location. This is even more essential if you’ve got more than one location listed on a single page of your site, which can be the case with one page or small websites. I’ve started using JSON-LD instead of the microdata version because you can just group it all together in one script. The downside is that you have to update the code if your location...