JavaScript

Extend your WordPress projects with cool JavaScript goodies. Animations, AJAX interactions with the back-end, jQuery fiddles, and user interface extensions.

Animated placeholder text reveal tutorial

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.

JavaScript click-to-copy tutorial

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.

WordPress accordion tutorial

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.

Scrolling text marquee WordPress tutorial

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.

Numbered headings tutorial for WordPress

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.

WordPress glossary terms tutorial

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.

WordPress popup emailer tutorial

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.

WordPress Swiper Gallery Tutorial

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.

Before and After Image Tutorial

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 scrolling effect tutorial

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.

Google maps wordpress shortcode tutorial

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.

Upvote Posts in WordPress Tutorial

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.