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