So, to help you get the most out of WordPress, we round up 34 fantastic WordPress tutorials from around the web in this article. We cover the foundations like how to get started with Gutenberg, speed up load time and ensure smart maintenance of your sites. But we also explore plenty of advanced techniques to demonstrate what’s possible in modern web development with WordPress today. This includes using WordPress plugins to create CSS Grid layouts and interactive maps, building fast front-ends with Gatsby.js, and using WordPress as a headless CMS, which offers great flexibility and control to developers. Finally, we also cover internationalisation strategies and how to adapt and open up your sites to new markets.
Let’s dive in!
Get Started with Gutenberg
How to Create Custom Blocks for Gutenberg
Gutenberg has changed the way users create content within WordPress, and the way developers build WordPress plugins and themes. In this tutorial you’re going to learn how you can create custom blocks for Gutenberg.
Extending Gutenberg Core Blocks with Custom Attributes and Controls
Extensibility is one of the WordPress features that we love the most. In this article, WordPress specialist Jeffrey Carandang shares some of the lessons he’s learned himself from actively participating on Gutenberg development on GitHub, starting with custom attributes and controls.
Building a WordPress Theme with Gutenberg
A detailed walkthrough of how WordPress developer Bill Erickson builds custom WordPress themes, including custom blocks, archive pages, and modular templates. Also see his many other developer-focused Gutenberg tutorials and his Developer’s Guide to Gutenberg.
Using CSS Custom Properties for Better UX in Frontend and Gutenberg
Allowing users to customise your theme is crucial for adoption, but the usual CSS approach in WordPress is problematic. In this post Felix Arntz looks at a solution that uses Custom Properties to improve the UX for both website visitors and content creators, all at once.
Managing WordPress Metadata in Gutenberg Using a Sidebar Plugin
For more on Gutenberg, also see What does ‘Gutenberg-ready’ mean for WordPress themes?, 12 Gutenberg-friendly free WordPress themes, and 8 things your WordPress clients need to know about Gutenberg — all here on the Heart Internet blog.
Modern WordPress development
How to Approach Modern WordPress Development
Improving WordPress Code With Modern PHP
A tour of the most relevant PHP features newly-available to WordPress, such as classes, namespaces, traits and closures, and various best practices of how these can be used to build better software.
How to Create a Modern Web App Using WordPress and React
Want the advantages of a modern React single page app, but need a back-end that feels familiar? This article explains how to set up the WordPress REST API, including custom post types and fields, and how to fetch this data inside React.
Crash Course: Headless WordPress with WPGraphQL, ACF, and React
Alex Young, creator of the WPCasts video tutorials site, presents a brief introduction to using WordPress as a headless CMS. The half-hour video tutorial goes over the basics of setting up a bare bones React app that uses WPGraphQL to query ACF data.
Build a Vue.js SPA on Top of Headless WordPress
Bringing CSS Grid to WordPress Layouts
This article introduces a plug-in called Grids that creates a bridge between the new block editor in WordPress and CSS Grid. It only takes care of the layout structure and enables you to manually specify dimensions, backgrounds, responsive behaviour — all using visual controls in the block editor.
Designing Complex Responsive Tables In WordPress
Here’s everything you need to know about designing complex tables for your mobile visitors in WordPress. The article explores the kinds of tables you can create, how to build user control into your table and how to use WordPress table plugin wpDataTables.
Creating Interactive Maps in WordPress with MapSVG
Discover how to create feature-rich, interactive maps quickly with the MapSVG plugin. It comes with a smart admin UI and actually gives you five options for creating a new map based on vector, image, or Google Maps features but this article focuses on the SVG features.
Advanced Custom Fields Tutorial: Your Ultimate Guide
Advanced Custom Fields (ACF) is one of the most powerful and popular WordPress plugins. This guide explains why it’s so valuable and how to apply it to your WordPress site. For more on ACF, don’t miss Daniel Schutzsmith’s articles in Heart Internet’s free Design Systems and Get Started with Gutenberg ebooks.
The Complete Guide to Optimizing WordPress Site Speed in 2019
This article explores 26 ways a WordPress website can and should be optimised for performance, including hosting, CDNs, caching, minification, Gzip compression, lazy loading, security, more WordPress-specific topics such as themes and plugins, and more.
How to Speed up WordPress Page Loading Time
10 Micro Optimisations for a Faster WordPress Website
This article goes further than the generic advice — use smaller images and don’t forget to compress them, avoid too many plugins, leverage browser caching — and covers what we can do to further optimise WordPress websites to boost our speed, improve our responsivity and encourage Google to rank us higher.
Image Optimization In WordPress
This step-by-step guide over at Smashing Magazine will help you learn how to easily optimise all the images on your site (manually or on autopilot using tools such as Optimole, ShortPixel, and Smush) in order to gain better loading times.
Loading Just-in-Time CSS in the Body with WordPress
Inspired by Harry Roberts’ post about CSS and Network Performance, David Greenwald shows us how to set up progressive CSS rendering with WordPress. Also see Nathan Rice’s article on a better way to handle CSS overload, just for Gutenberg blocks, using a similar method.
Blazing Fast WordPress Sites With Gatsby
Learn how to integrate free and open-source React.js-based framework Gatsby.js with WordPress and build a robust and fast front-end. This post explores how to configure a basic project setup and use it to fetch data from a WordPress site. Also check out Porting the Twenty Nineteen WordPress Theme to Gatsby and watch this introductory WordPress and Gatsby talk:
Managing WordPress sites
The Web Designer’s Guide to Managing WordPress Sites
Once a site is built, designers often continue to help their clients manage their WordPress sites, improving the security, reliability, and performance. This article features two web designers and the lessons they’ve learned managing multiple WordPress sites for their clients.
How to activate and configure a WordPress Multisite network
In this post, Rachel McCollin explains exactly what WordPress Multisite is, works through some of its benefits, and shows us how to activate and manage a Multisite network from an existing WordPress installation.
How To Safely Update Your WordPress Site (Ultimate Guide)
Updates can make your site slow down, cause errors or even result in a complete site crash. And if too many updates pile up, it becomes overwhelming to tackle them. But fear not, the BlogVault team jotted down everything you need to know about WordPress Updates.
Changing Permalinks in WordPress Without Blowing Up Your Site
In this article, you’ll learn everything you need to know about your WordPress site’s permalinks, including why they’re important (spoiler: they help guide users, as well as search engines), their basic structure and how they are created, and how to change your permalinks safely.
10 Tips to Make WordPress Maintenance Smooth
WordPress developer Hassan Jamal outlines 10 essential WordPress maintenance tips that could help you save hours of work and keep your websites up with relative ease, including installing your WordPress site locally, linting and debugging.
Internationalization in WordPress 5.0
How to Create a Multilingual WordPress Site [The Complete Guide]
Learn how to create a multilingual WordPress site, which will help you improve SEO and opens you up to a new audience who can browse your site in their preferred languages. This guide explains how to translate 100% of your content by simply clicking on a live version of your site — no special knowledge needed.
A Best Practice Guide for Multilingual WordPress Websites
This article on the site of WordPress translation plugin Weglot covers 11 important best practices you should keep in mind when creating multilingual sites in WordPress, including providing simple language switching options, using dedicated URLs, considering cultural differences, and more. Also see How to Create a Multilingual Site With Themify and Weglot.
How to Use WordPress Geo Location Targeting
Discover how to use WordPress geo location data to personalise websites based on a user’s physical location. This article digs into how geo targeting works, covers two useful plugins, and explains the best practices you need to keep in mind to use it effectively.
For more on WordPress, check out all WordPress content on the Heart Internet blog.
Please remember that all comments are moderated and any links you paste in your comment will remain as plain text. If your comment looks like spam it will be deleted. We're looking forward to answering your questions and hearing your comments and opinions!