Practical WordPress tutorials for developers and designers

These tutorials are easy to use if you just want to copy-and-paste them into your site. They’re also a fun way to learn how WordPress works, or teach yourself PHP and JavaScript.

--

Latest WordPress Tutorials

Custom admin posts column tutorial for WordPress

Add a custom admin column to the WooCommerce orders table

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.

Single product image grid tutorial for WooCommerce

WooCommerce Single Product Image Gallery Grid

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.

Custom WooCommerce admin column tutorial

Add a products column to the WooCommerce admin orders page

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.

Featured WordPress Tutorials

 

 

Animated Typewriter Effect

Learn how to create a custom WordPress animated typewriter effect. Add it to hero sections or use it anywhere in your posts and pages. Some fun, lightweight bling.

Google Maps Without a Plug-in

Learn how to add Google Maps to your WordPress website without installing yet another 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.

Checkout Address Autocomplete

Create an address search box with auto-complete for your WooCommerce checkout page. Your customers can search for their billing address by querying the Google Places API. Quite cool.

Enforce Strong Passwords

Force users to use strong passwords against their accounts, without installing a big “security plugin”. The tutorial covers how to check if a password is strong, and also how to actually generate a strong password.

Masonry Gallery Tutorial

This copy-and-paste tutorial shows how to convert the standard WordPress Gallery Block into a responsive masonry gallery with a full-screen pop-up light box. Just add a single CSS class to any Gallery block to turn it into a masonry gallery, without installing a plug-in.

Disable WordPress REST API

This neat little tutorial helps you block the WordPress API for non-logged-in users. It also blocks user enumeration attacks. Copy and paste into your child theme. No plugin required.

Flipsum Ipsum

Ipsum Text Generator

Loads of ipsum text generators for generating placeholder copy to use in your projects. My favourite is the Jabberwocky ipsum… What’s yours?