Turn the regular WordPress gallery block into a series of CSS-animated link-tiles. It’s a fun way to add bling to your site without slowing down the page-load. We’ll set it up so all we need to do is add the “animated-gallery-links” class to any gallery block we want to animate.
Create a custom plugin to control how hard your WordPress API gets hit by external clients. Useful if an external client is making too many API calls to your site, and you want to force them to slow down a bit. Retake control of your site’s bandwidth and CPU usage.
Insert the selected variation’s price into the add-to-cart button on the WooCommerce single product page with this JavaScript snippet.
Reconfigure the WooCommerce checkout fields so the placeholder labels are inside the field inputs. These compact placeholder labels will resize, depending on whether the fields contain data and/or have input focus.
Add click-to-copy JavaScript functionality to any WordPress site. Use it with any element (or WordPress block) just by setting a CSS class name. It’s ultra-lightweight and should work with page builders too.
Learn how to create a lightweight JavaScript accordion for WordPress blocks without installing a plugin. It’s an easy-to-follow tutorial and the code can be customised to fit into your projects.
Learn how to add a custom column to the WooCommerce orders table. This tutorial will add a flag for the order shipping country, and it’s easy to extend with your own custom data.
Change the WooCommerce single product image gallery into a grid layout, where the featured image and gallery thumbnails all the same size. For variable products, the top-left image is dynamic… so it shows the image of the selected product variation.
Create a new column on the WooCommerce admin orders page so you can see the products in each order. We’ll hook a WordPress filter to modify the list of columns available to the admin orders table. Then we’ll hook an action so we can render the contents of the column on a per-order basis.
Learn how to split the WooCommerce login and registration forms into two separate URLs without using a plugin. We’ll also make it easy to add custom fields to the registration form, so you can capture things like billing address when new users/customers register.
Learn how to analyse your WordPress pages and make them load faster with these easy-to-follow repeatable techniques. Great for designers and developers.
Add share-to-social network links to any WordPress content without installing a plugin. We’ll use some simple PHP to hook the content and inject the links & icons. It’s easy to customise and to add more networks of your own.
Learn how to build a configurable popup module you can use in multiple projects. Configurable and extendable, with multiple display methods and no JavaScript dependencies.
Convert the WooCommerce checkout shipping methods to a drop-down list, or pill-style buttons. It’s copy-and-paste code and you can customise it for your store’s specific needs.
Create a scrolling text marquee banner, like a news-ticker, for your WordPress site with this copy-and-paste tutorial. Supports scrolling to the right for Arabic languages. No plugins required.
Learn how to create an animated text-reveal effect for your WordPress projects. A fun copy-and-paste JavaScript tutorial.
We’re going to use the Rellax JS parallax scrolling library to create the effect of rising bubbles, as the reader scrolls down the page.
Learn how to add automatically-numbered headings for your post content. They can be ascending or descending. It’s a great little tutorial for Top Ten lists.
Add custom menu items to the main WordPress admin menu, with whatever URLs you want. Super-handy for linking to external support URLs and custom reports.
In this tutorial we’re going to create a glossary for a WordPress site, with rich HTML tooltips controlled by Popper JS, We’ll do this by creating a custom plugin, step-by-step.