Responsive Videos in WordPress for Mobile & Desktop
A responsive video element to any WordPress block. Serves the best video URL for the browser’s device format. Great for page-speed.
Animate Search and Text Placeholders
Add text-reveal animations to input, search and text area placeholders on your WordPress site with this short copy-and-paste tutorial. It’s a neat UX enhancement for pages where you want to draw the user’s attention to an input box.
Reusable JavaScript Click-to-Copy
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.
Create a WordPress Accordion without a Plugin
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.
Smooth Scrolling Marquee Text Banner
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.
Animated Text-Reveal Effect
Learn how to create an animated text-reveal effect for your WordPress projects. A fun copy-and-paste JavaScript tutorial.
Parallax Scrolling Sprites with Rellax JS
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.
Auto-Numbered Headings
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.
Create a Glossary with Rich HTML Tooltips
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.
Button to show a Random Post
Add a button anywhere in your WordPress site that lets users jump to a random post. Works with any post type and with page caching plugins.
Popup Email Form Without a Plugin
Create a popup email contact form on your WordPress site without installing a plugin. We’ll include a GDPR/privacy consent checkbox, and we’ll rinse messages through Spam Shield to block junk messages.
Multiple WordPress Gallery Effects with Swiper
This tutorial extends the standard WordPress Gallery Block by using Swiper and GLightbox. You can apply different transition effects to your WordPress galleries by adding CSS Classes to the gallery blocks.
Floating Button Tutorial for WordPress
Add an always-on-top floating button to your WordPress site that displays a fully customisable popup panel when clicked. The whole thing will be mobile-first responsive.
Before and After Image Slider
Learn how to use the Cocoen JavaScript module to create before-and-after image sliders in WordPress. We’ll use the built-in WordPress Gallery Block to make it easy to layout the images.
Parallax Image Scrolling Effect
This lightweight copy-and-paste tutorial show you how to create a parallax image scrolling effect in WordPress, without installing a plugin. Suitable for beginners and developers.
WordPress Google Maps Tutorial
In this tutorial, learn how to add Google Maps to your WordPress website without using a plugin. We’ll create a custom shortcode that can be used multiple times on any post/page, and it’ll support multiple markers & popup info windows, with fully customisable HTML.
Turn any WordPress Gallery into a Slide Show
This tutorial shows you how to convert the standard WordPress gallery into a fading slideshow. We’ll use some PHP and core JavaScript – it’s super-lightweight.
Upvote and Downvote WordPress Posts
In this tutorial we’ll build upvote and downvote buttons that can be added to any post or excerpt. We’ll start with a requirement specification, break down the components we need, and then code it.
Make the WordPress Pages Widget Dynamic
Take the standard hierarchical WordPress pages widget and make it dynamic with a bit of JavaScript. Expand and Collapse the child items.
Animated JavaScript Typewriter Text Effect
Create a custom WordPress animated typewriter effect you can add to your hero sections, or to your posts. No plugin required.