Category: Tutorial

How to Make Your Custom Block Accessible

It has been almost two years since the initial release of Gutenberg; and although a lot of users have embraced it, there are still a few who prefer the old WordPress way of doing things. It will take a bit more time to make...

Retroactively Sign Git Commits

It’s a classic situation. You’re contributing to a project, filed your pull request, and gotten it approved by your peers. You’re all ready to merge your code and add your humble contribution to the project when, out of nowhere, GitHub gives you...

Speed Up Your Development with Visual Studio Code

Visual Studio (VS) Code was released on April 29, 2015 by Microsoft. In a very short time, it has taken the coding world by storm. As of 2020, nearly 51% of developers claim to use it as their primary development environment. This,...

Scroll Animations with Intersection Observer

When creating even the most basic scrolling animations, there are many steps involved just to add or remove a class name with JavaScript. With modern ES6 syntax, it’s time to simplify how much effort is needed by taking advantage of the Intersection...

Integrating Advanced Custom Fields + Gutenberg Into wd_s

With version 5.8 of Advanced Custom Fields (ACF), a new way to build Gutenberg blocks was introduced. The mission statement of ACF with this pivotal update was to: …radically change the perception of block development in Gutenberg by reducing learning time, hurdles,...

Debugging WordPress with Local by Flywheel, (neo)vim, and xdebug

Introduction Local by Flywheel is a popular tool for getting quick and reliable WordPress installations running on your computer. One of its lesser-known features is the inclusion of xdebug support. xdebug is a PHP extension that allows for real-time debugging of PHP...

Compile JavaScript with Webpack in a WordPress Plugin

The goal of this article is to show you how to configure webpack to watch and compile the JavaScript files in a WordPress plugin. What this article will not cover is how to configure webpack to work with every file type known...

Filtering ACF Content Blocks with WordPress Hooks & Filters

Here at WebDevStudios, we do quite a bit with Flexible Content Blocks in Advanced Custom Fields (ACF). If you aren’t familiar with the plugin, ACF allows for the creation of a multitude of custom meta field types using a graphical user interface (GUI)...

Creating a Global Options Component in Gutenberg

At WebDevStudios (WDS), we’ve seen many iterations of page builders and page builder-esque tools over the years. I think it’s safe to say that the experimentation began with CMB2 and led us down an exciting path that included a handful of full-fledged page...

A Jenkins Pipeline for WordPress Projects

If you’ve wanted to dive into Jenkins, chances are that the first thing on your mind is deployments. And if you’re like me and have absolutely no idea what you’re doing, it’s even more likely that you will be completely confused on...