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 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.

WooCommerce custom registration fields

Separate WooCommerce login and registration forms

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.

Speed up WordPress page load tutorial

Troubleshoot and Speed Up WordPress

Learn how to analyse your WordPress pages and make them load faster with these easy-to-follow repeatable techniques. Great for designers and developers.

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.

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.