Ever felt like you’re stuck in a time loop while waiting for your WordPress dashboard to load? If you’re dealing with a WordPress back end slow down, you’re not alone. A sluggish admin panel isn’t just a minor inconvenience — it’s a significant roadblock to effective website management.
But here’s the good news: a laggy dashboard isn’t a life sentence. This article will guide you through a comprehensive set of strategies to optimize your WordPress dashboard’s performance. Say goodbye to slow load times and hello to a more efficient WordPress experience.
1. Check Your Connections
Your Internet connection can be a silent killer when it comes to dashboard speed. If you’re working from a place with spotty wifi, you’re already at a disadvantage. Use speed test tools like Speedtest.net to check your Internet speed. If it’s below par, you might want to consider upgrading your Internet plan or using a wired connection for a more stable experience.
On the server side, if you’re on a shared hosting plan, you’re sharing resources with other websites. When those sites experience high traffic, it can slow down your dashboard.
Most hosting providers offer a status page where you can check for any ongoing issues or maintenance. If server issues are a recurring problem, it may be time to consider a more robust hosting solution, like VPS or dedicated hosting.
2. Speed Test the WordPress Back End
Conducting a speed test on your site’s back end is a smart way to approach this situation. Lighthouse is a great tool for doing this, as it’s a comprehensive performance auditor. When you run a Lighthouse test, you’re not just getting a “fast” or “slow” label for your WordPress back end; rather, you’re getting a detailed analysis of various performance metrics, such as:
File Sizes — Large files, especially images and videos, can slow down your dashboard. Lighthouse will point these out so you can optimize them.
Render-Blocking Resources — These are scripts and style sheets that prevent your page from displaying until they’ve loaded. Lighthouse identifies these culprits, allowing you to defer or asynchronously load them.
Server Response Times — If your server takes too long to respond, it can delay everything else. Lighthouse measures this as Time to First Byte (TTFB), helping you identify if server speed is a bottleneck.
Running a Lighthouse test is pretty straightforward. Using the Chrome browser, open your browser development tools, e.g. by right-clicking anywhere on your WordPress dashboard and selecting Inspect. Navigate to the Lighthouse tab and click Generate report. The tool will then run its magic and give you a detailed breakdown of what’s slowing down your dashboard.
3. Update WordPress Regularly
Each WordPress update not only brings new features but also often includes performance improvements. Running an outdated version means you’re missing out on these enhancements. They can range from code refinements to caching enhancements, all aimed at making your website run smoother and faster.
Another consideration is that, due to its popularity, WordPress is a prime target for hackers and data thieves. By running an outdated version, you’re essentially leaving your back door unlocked for things like malware or other code injections. This malware can slow down your site significantly.
4. Adjust PHP Settings
WordPress is built on PHP, so the version you’re using can significantly impact your website’s speed. Newer versions of the programming language are not only more secure but also faster. According to a benchmarking test conducted by Cloudways, PHP 8.0 is almost three times faster than PHP 5.6.
Not sure which PHP version your server is running? You can easily check it via Site Health under the Tools menu in the WordPress back end or in its widget on the dashboard.
How to Increase PHP Memory Limit
Another lever you can pull in the PHP settings is the memory limit. Think of this as the amount of “brainpower” your website has to perform tasks. The more memory, the faster your dashboard can load and perform operations.Â
You can usually increase the PHP memory limit through your hosting control panel. But if you’re comfortable tinkering with code, you can also do it by editing the wp-config.php file.
Just add the line define('WP_MEMORY_LIMIT', '256M'); to increase the limit to 256 MB. If your WordPress back end is slow, this could help solve the problem.
5. Check Your Plugins
Most WordPress websites make use of at least a few plugins, but some can consume a lot of resources, slowing down your dashboard. So, how do you identify these culprits and what can you do about them?
Besides speed testing the WordPress back end, a very good tool for that is WP Hive. It’s a Chrome (and Firefox) extension that provides performance metrics for each plugin you have installed, right in the WordPress plugin directory.
WP Hive can show you how much memory a plugin uses, how it impacts your page speed, and even if it throws any errors. It also allows you to compare one plugin with another, offering a detailed insight into each plugin’s performance metrics. This kind of intel is invaluable when you’re trying to speed up your WordPress dashboard.
Once you’ve identified the plugins that are slowing you down, the next step is to consider deactivating them to see if doing so improves your dashboard speed.
But what if the plugin is essential to your site?
In that case, look for lighter alternatives that offer similar functionality. It’s also worth mentioning that every plugin you add contributes some overhead to your site’s loading times. So, the goal is to use as few plugins as possible while still maintaining the functionality you need.
6. Run Query Monitor to Keep Tabs on Plugins
Query Monitor is a more advanced tool that can give you deeper insights into what’s happening at the database-level of your WordPress site. It helps you identify resource-heavy plugins by showing you all the database queries that are being run on your site. This can be particularly useful if you’re trying to dig deeper into why a specific plugin is slowing down your dashboard.
After installing the plugin, you’ll see a new menu item in the admin toolbar. Clicking on it will give you a detailed breakdown of database queries, PHP errors, and much more. It’s a powerful tool and well worth using to diagnose a slow WordPress back end.
7. Cache Your Website Smartly
Caching works by storing static versions of your web pages, which lightens the load on your server and speeds up your site. So, it’s an important feature to have active on your site.
But here’s the kicker: your WordPress admin area is one of the places where you might not want to use caching. That’s because it’s often a bustling hub of real-time changes, from new posts to updated plugins. Caching this dynamic content could mean you are presented with outdated information, causing more headaches than it solves.
Thankfully, there are a few caching plugins that have got your back. Take W3 Total Cache and WP Super Cache, for example. These plugins come with settings that let you turn off caching for logged-in users or even specific pages like your admin dashboard. That way, you can enjoy the speed perks on your site’s front end while ensuring your admin area stays up to date.
8. Use a CDN for Speed
A CDN works by distributing your website’s static resources across a network of servers located around the globe. This setup minimizes the distance between the server and the user, reducing latency and speeding up access to your website.
But it’s not just about your site’s front end. A CDN can also improve the speed of your WordPress admin area. This is particularly beneficial if you or your team access the admin dashboard from various locations.
9. Reduce WordPress Autosave Intervals
The autosave interval is the time gap between each automatic save WordPress makes of your posts and pages. By default, this is set to 60 seconds. While that’s a godsend for preventing data loss, it’s not without its drawbacks.
Each autosave triggers a process that consumes server resources. So, if you’re working on a long, media-rich post in Gutenberg, these autosaves can add up and slow down your dashboard.
Some hosting providers with limited resources may increase this interval to avoid performance issues.
You can change the autosave interval by adding define('AUTOSAVE_INTERVAL', 300); to your wp-config.php file. Adjust the number to your desired autosave frequency in seconds. Alternatively, plugins like Unbloater can help you manage autosave settings through a user-friendly interface.
10. Limit Post Revisions
Something that goes along with the autosave settings are post revisions. WordPress creates those every time you save or update a post or page so you can go back to an earlier version if need be. The problem: Each of these snapshots is stored in your MySQL database.Â
Now, this might not be a big deal if you’re a solo blogger. However, if you’re running a multi-author blog, the problem multiplies by the number of posts and authors on your site. Soon, you’ve got yourself a hefty database that could slow down your dashboard.
So, what’s the solution? Limit the number of post revisions WordPress keeps. You can do this by adding a single line of code to your wp-config.php file: define('WP_POST_REVISIONS', 3);
By adding this line, you’re instructing WordPress to keep only the last three revisions of each post. Any older revisions get the boot the next time a new one is created. This is a straightforward way to keep your database lean, improving not just your website’s speed but also the performance of a slow WordPress back end.
11. Do a Database Cleanup
Since we’ve just learned about the importance of the database for WordPress performance (including the back end), let’s continue on that theme.
A streamlined database isn’t just something nice to have — it’s a necessity. The more information your database has to process, the longer it takes for your site to load. This is especially true if you’re running an e-commerce site with WooCommerce, as it stores a lot of temporary data, known as transients.
You don’t have to be an expert to clean up your database, however. Plugins like WP-Optimize can be your cleanup crew. This plugin can sweep away old revisions, spam comments, and other data.
But before you go on a cleaning spree, always make sure to back up your database. You don’t want to accidentally delete something important and then wish you had a time machine to retrieve it.
12. Assess Your Theme’s Performance
Let’s talk about your WordPress theme. It’s not just about aesthetics. You might be surprised to learn that some themes come with bloated code or unnecessary features that can slow down your website and your WordPress back end.
So, how do you figure out if your theme is the culprit?
First things first, you’ll want to get a baseline for comparison. Switch to a default WordPress theme like Twenty Twenty-Three. This will give you an idea of how a clean, optimized theme performs on your site.Â
Once you’ve done that, measure your dashboard’s speed using browser developer tools like Lighthouse. They can provide insights into load time, page size, and all the resources loaded by your theme while accessing your WordPress back end. Because you need to log in to speed test the WordPress back end, external tools are not suitable for this purpose.
After you’ve got your baseline, it’s time to switch back to your original theme. Run the same tests again and compare the results. Keep an eye out for large files or an excessive number of HTTP requests, as these can be red flags.
13. Use the Heartbeat Control Plugin
The WordPress Heartbeat API allows for real-time communication between your browser and your server. While this is useful for things like auto-saving posts and showing plugin notifications, it can also put a strain on server resources.
You see, this API sends AJAX requests to your server every 15 seconds when you’re editing posts and every 60 seconds on the dashboard. Over time, especially if you’re the type to keep your WordPress admin open for extended periods, these AJAX requests can accumulate and put a strain on your server.
Thankfully, there’s the Heartbeat Control plugin, which allows you to manage the frequency of these communications. By reducing the frequency, you can reduce server load, speeding up your dashboard.
14. Adjust Screen Options
Ever feel like your WordPress dashboard is cluttered with too many widgets and modules – to the point it’s making your dashboard load more slowly? If so, you’re not alone.
The good news is that WordPress has a built-in feature that lets you customize your admin screens and reduce the visible elements to make the back end less slow. It’s called Screen Options and you find it at the top of most pages in your WordPress dashboard.
When you click it, a drop-down menu will appear, allowing you to customize what modules or widgets are displayed on that particular admin page. For example, if you’re on the Posts page, you would see options for displaying the author, date, categories, tags, and custom fields columns, among others.
Use the screen options to slim down the number of elements visible on your admin pages and you might just speed up your WordPress back end as a whole.
15. Upgrade Your Hosting
Your hosting environment plays a crucial role in your dashboard’s performance. Shared hosting, while cheap, often comes with limited resources, affecting your dashboard’s speed.
However, before you even think about switching hosts, make sure you’ve run through all of the previous steps. If the dashboard is still underperforming, it’s crucial to know where the bottleneck is. Tools like WP Benchmark can help you gauge your server’s performance.
Pay special attention to the Time to First Byte (TTFB), which measures how quickly your server responds to a request. If the TTFB is high, your server might be the culprit.
If you do decide to make a switch, look for a hosting company that can scale with your needs, offers robust security measures, and has a track record of reliability.
Final Thoughts: Speed Up a Slow WordPress Back End
As the central management tool for your website, a slow WordPress back end can really put a number on your productivity. Thankfully, there are plenty of things you can do to speed up the dashboard if need be — from checking your Internet connection over updating your PHP version to cleaning up your database and admin screen.s
We hope you’ve found this step-by-step guide useful. Implement these strategies one after the other and you’ll be well on your way to a more efficient and enjoyable WordPress experience.
How have you optimized your WordPress dashboard for speed? Please share your tips and tricks in the comments below.
What are must-have, essential pages for every website?
Every website consists of different web pages (or at least one, the homepage). However, they are not always the same for every type of site. For example, a website without eCommerce capabilities does not need a shop page. Having one would only confuse and frustrate your audience.
At the same time, there are a number of pages that almost every kind of website needs to function properly, fulfill visitor expectations, or even legal reasons. And in this post, we will go over them, define why each page matters, what to put on there, and some examples for inspiration.
Let’s get on the same page, shall we? (Yes, yes, I’ll put a dollar in the bad-pun jar.)
1. The Homepage: Make the First Impression Count
The homepage is the quintessential must-have page for any website. It is where your visitors land when they enter your domain into their browser bar. Consequently, it’s also what a lot of people will base their first impression of your website on. It’s also almost always the most linked-to page of a website. Therefore, you should pay special attention to it.
Typically, you homepage answers one question: What is this website about? A visitor who lands on it should very quickly understand what they can expect from your site and how it will benefit them (because, in the end, that’s all they care about). So, you should do your best to answer that question.
What Belongs on the Homepage?
Typically, in order to make the above clear to visitors, the most prominent element of the homepage is an attention-grabbing headline. After that, you most often find some more clarifying text and the main call to action such as a newsletter signup, booking a consultation, or similar.
The rest of the page is simply additional information. Examples can be the services you offer, how you can help your visitors, links to further resources and other pages on your site that cover important topics, and more. Also, to make a bigger splash, some social proof and customer reviews don’t hurt.
Overall, the exact homepage content really depends on the kind of website you run and what you want your visitors to do. For example, it can also be a blog page, if that’s the kind of content you offer.
However, keep in mind that goal is to inform your audience and provide guidance towards their and your goals. Even if your homepage is blog, you should still give an introduction of some kind about what it is about.
2. About Page: Allow Your Visitors to Get to Know You
You might be surprised to hear that the about page is frequently the second most visited page of any websites. As it turns out, people who surf the Internet are interested in whose content they are reading or products they are buying. They don’t simply want to interact with a faceless entity, they want to know who you are and what you stand for.
The about page is exactly for that. It should make it very clear who is behind the website and what visitors can expect from them. Doing so helps to build trust and personalize your brand, company, or yourself.
What to Display on Your About Page
If there was ever a place on a website to show some personality, it is the about page. You can and should talk about why you do what you do, what your mission is, your values, and what you hope to achieve. You can also share the company history or your individual story, how you started, fun facts, and milestones. In addition, what makes you different from your competitors.
In fact, the about page is one of the pages that can most benefit from storytelling. You can also add personal touches like profiles of the people behind the site and lots of images. If you run a company website, it’s also a good opportunity to show awards and other accolades. Finally, because it’s so popular, this page is a great opportunity to collect email addresses.
3. Contact Page: Make It Easy to Get in Touch
The contact page is another one of those absolutely essential pages. There are so many reason for why someone on your website would want to talk to you:
Questions about something you said in your content
Seeking clarifications for products or services you are offering
Wanting to hire you
Trying to find out where you are located to visit your physical shop or office
A good contact page contains all the information necessary to enable clients and visitors to do so.
Contact Page — Essential Content
Naturally, a contact page should contain all the information needed to get in touch with you.
What that is and which information makes the most sense depends on your site and business. Here are common possibilities:
Email address
Mailing address
Phone and fax number
Contact form
Addresses of your locations
Social accounts
Business hours
A map showing your shop locations
Live chat and availability times
A bunch of that can also go in other places, such as the footer.
Just make sure that anyone who wants to talk to you has all the information they need to do so.
4. Products and Services Page: Show Them What You’ve Got
These two pages are only must-have if you actually offer services and products via your website. Otherwise, naturally, they don’t make that much sense.
It’s essential that you use your product and service pages to provide all the necessary details and structure them so that they are easy to understand. If you only have a few, possibly even digital-only offers, a single page for all of them can be enough. However, if what you offer is quite extensive, consider creating one page that summarizes your services and products with links to secondary pages for each individual offer with more details.
In those cases, your shop or service page might also need a way to filter its content and follow other best practices of eCommerce UI design.
How to Offer Your Products and Services
If your are providing services, provide a summary of what they are followed by further details. A common format for that are bulleted lists.
After that, provide next steps, such as how to get in touch, ask questions, or hire you if they so desire. In your copy, be sure to try and anticipate what questions or doubts someone on this page would have and proactively address them.
For products, provide an outline with a short description and details. Possibly include information about variations, product images and details like price, dimensions, material, and everything else applicable. However, this is also information that can go on the individual product pages if that’s how you decide to build it.
Other useful features are categories and filters, a search function, and important assurances like trust seals, return policy, etc.
5. Blog Page: Build an Information Hub for Your Site
As mentioned early, if your website is mainly a blog, the blog page can also can be the homepage. If not, it make sense to put it in a separate place.
A blog page collects all your articles in one location for easy access and usually shows them in reverse chronological order.
Do you have to have one?
No, there are plenty of websites that don’t have a blog. However, it is a great tool to provide additional content, explain your services or products with case studies, and give behind-the-scenes information. Blogging also helps you be useful to your visitors and target audience, rank for additional keywords, give your business a voice, show off your expertise, position yourself as a thought leader, and a lot more.
That’s a lot of benefits and they make adding a blog page definitely worth it. Just be sure to create a blogging strategy beforehand.
Here’s What Goes on the Blog Page
If you are using WordPress, the CMS will automatically fill your blog page once you have set it up. You can do so under Settings > Reading.
Then, add the page to your navigation menu in the usual way.
For the blog page itself, it makes sense to have a title and possibly a short description at the top to make it clear what the blog is about.
You also often have a sidebar with links to the most popular posts, categories, and other relevant information. You can easily add this to your page template in the Site Editor.
6. Privacy Policy Page: Protect Your Visitors and Yourself
Over time, the online space has become a lot more regulated in order to protect consumers. These days, especially if your website is registered and active in the European Union, you need a privacy policy.
It’s truly one of those must-have pages for a website, like literally. Not having one can land you in legal hot waters and get you fined.
What does a privacy policy do?
It defines what data you collect from those surfing your website and what you do with that data. It also explains how they can opt out of data collection and learn what information you have collected about them. For that reason, the privacy policy usually deals with cookies, email opt-ins, ads, affiliate programs, and similar things that involve collecting consumer data.
Here’s the important part: The privacy policy doesn’t just have to exist, you also need to follow it.
Essential Privacy Policy Content
What needs to be part of your policy really depends on your site, what data you collect, which country you are registered in, who you share what data with, and a lot more. This is a bit of a sticky wicket because it needs a lot more consideration than we can provide here in short form.
Luckily, there are online tools and resources that can help you set up your privacy policy. You can get started on this topic here.
7. Terms and Conditions Page: Another Legal Necessity
Another legal page that oftentimes needs to be on your website is the terms and conditions page. It provides a behavior framework for visitors on your site such as defining age restrictions, compliance with applicable laws, or which country’s laws govern the transactions.
Your T&Cs also contains things like intellectual property and copyright matters, responsibility for links to third-party websites, rules for user accounts that may exist, and a lot more. They are especially important if you have a shop or sell something on your site because terms and conditions also define stuff like returns, etc. (though you can also put that on a separate page).
What Needs to Be in Your T&Cs?
Again, this is a bit of a complex topic where you are best advised to be working with a professional. We can’t really give any blanket statements for what needs to be on your terms and conditions page. It’s different for every individual website.
Other Pages to Consider
The pages below are not necessarily must-have pages but it still makes a lot of sense to consider adding them to your website depending on what you do.
404 error page
This is the page that visitors land on when the URL they originally requested is not available. It automatically exists in WordPress, however, by customizing your 404 error page you can make it more effective. For example, you can provide assistance to help visitors find what they were originally looking for or other relevant content. Both can possibly keep them on your site longer.
Search Results Page
The search results page is another page that already exists on every WordPress installation. However, you can customize it to your needs to make it a more effective part of your site.
HTML Sitemap
An HTML sitemap shows your visitors what pages are available on your site, making it easier for them to discover more content. While they are optional, they can also be worth adding.
Don’t get it confused with an XML sitemap, which you should have either way. This one you can and should submit to Google Search Console and other webmaster tools to help search engines find and index all the page on your website.
Testimonials
If you sell services or products, creating a separate page for all the good things customers say about you or your wares can be a powerful sales tool. However, it’s also possible to fold those into other parts of your site.
Press or Media Page
If you rely a lot on press for your visitor traffic and publicity, it can make sense to create a press kit and publish it on a separate page on your website. That way, it’s easier for people writing about you to do so.
FAQs
This acronym stands for Frequently Asked Questions. Those are all the things you keep hearing over and over again from readers, visitors, a customers.
Answering them on a separate page is a great way to proactively address concerns and doubts, provide peace of mind, and save time. You can also couple them with calls to action to move people along in their buyer’s journey.
Return and Refunds
If you have an online shop, the return and refunds policy is probably one of the topics your customers are most interested in. Sure, you can have it in your T&Cs, however, you are doing your clients a great service if you provide it separately and clearly link to it.
Shipping Information
The same as return and refunds. It’s an important topic for any online shopper so make sure it’s easy to find. A separate page can be a good option for that.
Career/Jobs
Are you trying to attract new talent? Make it easier for yourself and potential hires by posting available jobs on your site and providing a easy way to apply for them.
Pricing
Instead of a product or services page you can also offer a pricing page. This is especially suitable for SaaS companies who have only a single product but with different pricing tiers.
Case Studies
Case studies can be great tool to convince people to try out your services or products. They are especially popular in B2B, where they often appear on a separate page and under their own menu item.
Final Thoughts: Website Must-Have Pages
Websites can have hundreds, even thousands of pages, however, not all of them are of the same importance. While many are optional depending on what kind of website or business you are running, there are some pages that are absolutely essential. Among those must-have pages are:
Homepage
About page
Contact page
Products and/or services
Blog
Privacy policy
Terms and conditions
Almost every website should have most or all of the pages above. There are many others that can make sense to add but the above form the core of must-have website pages. By now you don’t only know what they are but also what content to place on there. Start with these and branch out as needed.
Are there any other pages you consider must-haves for most websites? Share your thoughts in the comments section below!
When WordPress 5.0 was released in late 2018, it came with a brand-spankin’-new block editor known as Gutenberg. In contrast to the Classic Editor, which was far more reliant on manual code, the block editor offers a modular approach to page and post editing making each piece of content in the editor—from a paragraph to an image gallery to a headline— its own editing block.
WordPress presents a larger barrier to entry for some, and the Gutenberg Editor was created to make building and updating site content easier. With WordPress 5.0, the block editor was absorbed into WordPress core, and WordPress development has been optimized for Gutenberg’s use ever since.
Additionally, the team behind Gutenberg has continued to make massive strides both for user interface and design-facing capabilities.
Staying informed on Gutenberg’s latest updates is advantageous for designers, developers, and anyone else who wants to keep their WordPress game sharp. The Gutenberg team is constantly refining the block editor with new version releases to improve the experience, so check back every few weeks for what’s new in Gutenberg!
This version update was released on July 14, 2023.
The weather isn’t the only thing heating up this July. Gutenberg 16.2 allows users to use footnotes, consolidate patterns, and more.
Highlights of Gutenberg 16.2 include:
While footnotes were added in 16.1, they’ve been optimized in 16.2. Not only are they more reliable, you can now add the block manually in case you delete them.
Using the Typography setting in a text block, you can change the way the text is oriented. This is a step toward supporting vertically-written languages.
The Patterns section is more intuitive than ever before. Users can now see a Pattern’s sync status right in the sidebar.
Other highlights include the Command Tool being renamed The Command Palette, the “Browse All†button in the quick inserter has been restored, bug fixes, and much more.
Check out the official release post to see what else Gutenberg 16.2 has to offer.
Gutenberg 16.1
This version update was released on June 29, 2023.
72 contributors worked on this massive release. Let’s get into the highlights from Gutenberg 16.1.
Highlights of Gutenberg 16.1 include:
Access all your patterns directly from the new Pattern Library and sync them across your entire site.
We previously had a “Distraction Free†Editing experience but now you can design without distractions. Cut out all distractions and get your work done.
A very exciting update introduces automatic footnotes. You can find them in text blocks including paragraph, heading and lists, and can be added from the block context menu.
This is a massive update leading Gutenberg into the future and beyond. It also comes with bug fixes and other performance enhancements.
Check out the official release post to see what else Gutenberg 16.1 has to offer.
Gutenberg 16.0
This version update was released on June 14, 2023.
Gutenberg 16.0 provides a glimpse into upcoming features that will soon be integrated into core WordPress, coinciding with the release of WordPress 6.3 Beta 1.
Highlights of Gutenberg 16.0 include:
Users now have the ability to create new pages and access page details through the sidebar. This empowers website creators to efficiently build their sites within the Site Editor, eliminating the need to switch between editors.
Previously, theme authors had to resort to custom CSS for controlling block spacing within the Post Template block, which is part of the Query block. However, Gutenberg 16.0 introduces block spacing and layout controls directly within the Editor. This improvement enables easier management of the space between posts, empowering theme authors with more flexibility.
Initially introduced as an experiment in Gutenberg 15.6, the Details block has undergone revisions and stabilization based on community testing and feedback. In Gutenberg 16.0, this block employs <details> and <summary> HTML elements to conceal content until readers are ready to view it. Users can also configure the visibility of content as per their preferences.
Gutenberg 16.0 includes a wide array of additional enhancements and bug fixes.
Check out the official release post to see what else Gutenberg 16.0 has to offer.
Gutenberg 15.9
This version update was released on May 31, 2023.
Gutenberg 15.9 includes several exciting features that improve the Site Editor user experience.
Highlights of Gutenberg 16.0 include:
Gutenberg 15.9 introduces a new, yet-to-be-named Command Tool, which allows for enhanced navigation and content creation within the Site Editor. You can access the tool by opening the Site Editor and using the keyboard shortcut Cmd+k on Mac or Ctrl+k on Windows. Once opened, you’ll have access to a variety of different commands that enable swift actions and interactions. You can also customize the tool by adding your own commands. Detailed documentation is available here.
Users can now resize the Site Editor, allowing you to preview how your site will appear on smaller screens (i.e. mobile devices). This feature helps optimize your site’s layout for various screen sizes.
When moving blocks, you will now experience a visual cue that clearly indicates the drop location, especially when working with empty groups. This enhancement streamlines the process of rearranging your site’s layout, making it more intuitive and efficient.
You can now access style variations and all navigation menus of your site. This enhancement simplifies the process of switching between different styles and menus, providing a convenient interface to make adjustments effortlessly.
Gutenberg 15.9 also includes the introduction of an API that allows for prioritizing inserter items, better accessibility through arrow keys in certain input types, keyboard focus improvements for enhanced accessibility, and numerous bug fixes..
Gutenberg 15.8 introduces a range of improvements that enhance the user interface (UI) and user experience (UX) for content creators, site owners, and theme developers.
Highlights of Gutenberg 15.8 include:
The site editor now provides direct access to the ten most recently updated pages, allowing users to jump straight into editing them. This step is part of our exploration to reintroduce the ability to edit content directly from within the site editor. This enhancement aims to streamline the editing process and improve efficiency.
In the global styles interface, users can now navigate through revisions and explore how the site appeared at different points in time. The revisions timeline displays saved changes along with timestamps and author information. This feature empowers users to review and compare previous versions of their site, facilitating better decision-making and content management.
Previewing different themes has become more convenient with the introduction of the theme_preview parameter. Users can now preview how their site would look with different themes directly within the site editor. This capability simplifies the process of selecting the perfect theme, ensuring a seamless and visually appealing site design.
Gutenberg 15.8 introduces additional bug fixes, improvements to responsiveness, and more.
Gutenberg 15.7 comes with a number of small yet impactful changes aimed at improving workflows, fixing bugs, and enhancing responsiveness.
Highlights of Gutenberg 15.7 include:
To streamline creator workflows, the Site Logo block now offers a direct method to replace the logo within the sidebar for the block. Although it may seem like a minor feature, simplifying the management of a site’s branding identity is crucial and warrants an easy and intuitive process.
The inclusion of duotone filter controls in the block sidebar represents another step in streamlining workflows. Previously, these controls were hidden within the Block Toolbar, but now they are readily available alongside the style settings in the sidebar.
While fluid typography was introduced with WordPress 6.0, users and designers encountered challenges with large custom fonts, as the previous fluid calculation didn’t scale down sufficiently for smaller screens. In this release, a more refined handling of fluid typography has been implemented using a logarithmic scale factor to calculate a minimum font size for smaller screen.
Gutenberg 15.7 includes a ton of additional highlights, enhancements, bug fixes, and more.
This version update was released on April 5, 2023.
This release comes with a ton of user-facing updates and great news for theme editors. Let’s take a look at what’s inside Gutenberg 15.5.
Highlights of Gutenberg 15.5 include:
Users can now create new templates from theme-registered template patterns. This greatly improves customization.
Caption editing has been integrated into the Site Editor so you can change caption styles without using code.
A brand new experimental layout type has been added in 15.5. Though it only supports column width, it creates the foundation for more future configuration options.
This version update was released on December 7, 2022.
We are nearing the end of the year but that hasn’t slowed down the Gutenberg developers! Gutenberg 14.7 is better than ever. Let’s take a look.
Highlights of Gutenberg 14.7 include:
The block inspector now separates appearance and settings controls by tabs in this experimental sidebar view.
Add videos and images directly from the inserter. Add a block, toggle over to Media and then choose your image or video. Just like that.
Template and Reusable Blocks will now be outlined in a different color making them easier to identify.
All these updates make it easier to design and create content quickly. The update comes with these and an array of bug fixes and other performance enhancements.
This version update was released on November 23, 2022.
This is a gargantuan update with a lot of features to get through. There are a number of design and block updates.
Highlights of Gutenberg 14.6 include:
Upon picking the Group Block, you are given the option to pick a layout. This way you don’t have to format after putting in content.
You can now drag items in the Navigation Menu. Want to move your About Me page above Contact Me? Do that quickly right from the sidebar.
Looking for a rebrand? Try out the “Randomize colors†feature to get a random color palette just for your site.
This just scratches the surface of what Gutenberg 14.6 brings. You can also define a minimum height, adjust your fluid typography minimum and maximum, and more.
This version update was released on November 9, 2022.
Gutenberg 14.5 adds a ton of design functionality making it easy to customize every part of your site. Let’s dive in.
Highlights of Gutenberg 14.5 include:
Quickly toggle between List View and Document Info all in one place. The Details popover and List View have been combined making it easy to see your entire post at a glance.
It has always been difficult to customize margins and padding in WordPress. Gutenberg 14.5 added improved visualizers that allow you to change margins with a slider.
Just like with the Image block in 14.4, a button was added to the Audio and Video blocks that allow you to quickly add a caption.
These updates along with big fixes and more performance enhancements allow you to take more control of your website with Gutenberg 14.5.
This version update was released on October 12, 2022.
Gutenberg 14.3 continues the march toward Full Site Editing with design and UX enhancements. Let’s get into it.
Highlights of Gutenberg 14.3 include:
In huge news, you can now drag and drop an image into a paragraph block to turn it into an image block. This is a massive time saver.
The Styles interface is now consistent with the Block Settings interface.
New keyboard combinations make it easier to navigate big blocks of text. Use alt + up arrow or alt + down arrow to move your cursor through blocks of text.
The writing flow has been greatly improved in Gutenberg 14.3. You can drag and drop and navigate your way through your post to make editing and designing a dream.
This version update was released on September 28, 2022.
The latest version of Gutenberg improves the writing flow, letter spacing in headings, and more.
Highlights of Gutenberg 14.2 include:
Big improvements have been made to the writing flow such as making selecting multiple blocks visually consistent and hiding the block inserter to clear up clutter.
In the Global Styles interface, you can modify letter spacing in headlines.
You can now edit the background color and text color of the Calendar Block.
This version update was released on August 3, 2022.
The latest version of Gutenberg comes with accessibility updates, block updates, UX enhancements, and much more.
Highlights of Gutenberg 13.8 include:
Fluid typography got more support in 13.8. This allows text to scale and adapt to any screen size.
New template parts have been added including “Header,†“Footer,†and “Subscribe to Newsletter†sections. You can also now search for the template part you’re looking for.
Gutenberg 13.8 includes big accessibility updates such as keyboard-friendly clickable elements in the “Add template†modal and improved and consistent labels in the Editor.
Other updates include the consolidation of the Post Comments and Comments block, new settings for full-width content in the theme, bug fixes, and more.
This version update was released on July 20, 2022.
This was a massive release with 127 pull requests. Lots of features were added. Let’s get into it.
Highlights of Gutenberg 13.7 include:
Lock settings were updated in 13.7. For Group, Cover, and Column blocks, you can choose to lock with just the toggle of a button.
You can now create templates for specific categories and pages. For example you can have one template for a product page, one for a calendar, and one for a blog.
The Information Panel now excludes a “Time to Read†readout beside word count and character count.
Performance was the focus of Gutenberg 13.6. There were enhancements for accessibility and development with Gutenberg.
Highlights of Gutenberg 13.6 include:
This update works with an API introduced in WordPress 6.0 that allows you to provide patterns for any post category. This is going to cut design time in half, especially with clients.
Directly from the editor, you can now create more template types. You don’t need to know post type identifiers or post slugs.
The theme.json engine that was updated in 13.4 has been expanded to allow you to create a cohesive theme across all your blocks. You can fully control all block styles.
This was a jam-packed update with added keyboard shortcuts, bug fixes, performance enhancements and more.
This version update was released on June 22, 2022.
Gutenberg 13.5 improves the featured image UX, expanded design tools, and some accessibility updates.
Highlights of Gutenberg 13.5 include:
When using the Cover Block to add a Featured Image, a placeholder now displays so you can get a better idea how much space the image will take up. Also when you hit “Replace†on an image block, there’s a drop down option to add the Featured Image.
A huge update to the Post Navigation Link allows you to customize your link color.
Context was added to the Edit/New buttons increasing accessibility.
Along with these updates, there were 15 bug fixes and 12 performance enhancements. All of which add customization.
WordPress 6.0 “Arturo†is out and Gutenberg 13.4 just builds on that momentum! Let’s look at what changed.
Highlights of Gutenberg 13.4 include:
The sidebar got a rework with Gutenberg 13.4. The Publish popover has a new look that’s easier to understand. The color-picking interface now uses the ToolPanel.
The Gallery Block now supports axial spacing, so you can add space on either side of an image or on the top and bottom.
A huge update is that Themes can now add buttons using theme.json.
Gutenberg 13.3 has a long-awaited update, a Table of Contents block. This and a variety of other enhancements makes this a very exciting update.
Highlights of Gutenberg 13.3 include:
You can now display custom taxonomy terms in the Post Terms Block. This allows the user to add things like product categories to a post.
The Query Loop Block now supports a “parent†filter so you can see any of the children content defined for that parent.
The new Table of Contents Block works like a charm by automatically finding all the headers and automatically adding them with anchor links. This is such a time saver.
This update puts the focus on the editor and makes things easier. Along with bug fixes and other performance enhancements, Gutenberg 13.3 is a big one.
The Comment Block got a tune up as well as a brand new API in Gutenberg 13.2.
Highlights of Gutenberg 13.2 include:
The placeholders for the post excerpt, post comments, and post comment form have been greatly improved and look more realistic.
Padding and margins now have much greater customization. As you adjust them, they highlight in blue so you can see exactly what you’re changing.
A new API was created that allows you to save your editor preferences so your experience looks exactly the same on any browser or any device. This is incredibly exciting because you can edit no matter where you are.
Gutenberg 13.2 is a huge step forward in Full Site Editing. The Separator Block supports top and bottom margins, bugs to the Comment Block have been fixed, and more.
This version update was released on April 27, 2022.
Gutenberg 13.1 comes with updates to important blocks as well as numerous performance enhancements.
Highlights of Gutenberg 13.1 include:
The Columns Block got a huge facelift with this update. You can now customize the width and color of borders within columns.
The Comments Block also got an update including a better view of nested comments.
Most notably, a variety of accessibility updates were made including closing the welcome dialogue in the post editor, installing blocks from the directory, and more.
A lot of work was done in Gutenberg 13.1, so thank you to all the new contributors who helped make it happen.
This version update was released on April 14, 2022.
This is a loaded update because it has all the features that will be released with WordPress 6.0. Blocks are more responsive, the Editor has been improved. Let’s get into it.
Highlights of Gutenberg 13.0 include:
In a huge relief to editors and writers everywhere, you can now select text from different blocks. No longer do you need to delete and edit one block at a time.
The Cover Block has been updated and you can now view your featured image and headline in one place before publishing.
Patterns are here! Staring at a blank page can be very intimidating, but now you can plug in a pattern and start designing immediately.
Like we said at the top, this release has a lot to cover. Along with these highlights there was also the ability to build responsive groups, rows, and stacks. Increased customization for borders and columns. Bug fixes, performance enhancements, and more.
This version update was released on March 30, 2022.
Gutenberg 12.9 introduces several features that provide greater flexibility and ease of use for both theme developers and website administrators.
Highlights of Gutenberg 12.9 include:
The new block locking UI introduced in Gutenberg 12.9 allows you to disable specific actions for locked blocks. When a block is locked, users are prevented from moving or removing it. This is particularly useful for site-level blocks like Post Content, which many themes may want to restrict.
You can now adjust the whitespace, allowing for zero spacing or large art-gallery-style gaps. This feature enables the creation of beautiful and unique layouts using blocks.
Previously, the Site Editor had limited options for creating new templates. Now, you can create templates for various page types on your site, including Category, Author, Taxonomy Date, Tag, and Attachment pages.
When exporting a theme from the Site Editor, all theme files are now included, simplifying the process of exporting themes between sites along with all edits. This update is a significant step towards creating new themes directly from the Site Editor. Additionally, including patterns with your theme is now effortless and doesn’t require any PHP coding. You can simply include patterns in a patterns folder, similar to how templates and parts are organized.
In the List View, you can now use the Shift + Home and End keys for multi-block selection, facilitating the selection of blocks from a specific point to the beginning or end of a post.
Gutenberg 12.9 includes several additional enhancements, such as displaying the name of custom colors in the color palette selection, providing more precise font size control for tag clouds, enabling easy previewing of drafts right after saving, and offering the option to choose suggested or custom date formats.
With these updates, Gutenberg 12.9 empowers users with enhanced control, improved defaults, and more intuitive options for creating engaging content with blocks and block themes.
This version update was released on March 16, 2022.
Gutenberg 12.8 comes with new APIs, iterative UX enhancements, and numerous bug fixes to enhance the stability of the editor.
Highlights of Gutenberg 12.8 include:
The new Webfonts API represents a significant step towards loading fonts in a performance-friendly, privacy-conscious, and future-proof manner. The API also paves the way for additional tools and optimizations that will ensure WordPress delivers the best possible experience and privacy to users.
Inline links can now be inserted using a direct keyboard shortcut. If you thought the slash inserter was fast, you’ll be impressed with the new [[ keyboard trigger, which allows you to add an inline link without navigating through the inserter.
When using the export tool in the Site Editor, the generated zip file now includes the theme.json file, which contains the Styles settings, along with the index.php and styles.css files..
Gutenberg 12.8 further refines placeholder and loading states. The Navigation block now provides a clear loading state during initial setup and subsequent loading of existing blocks.
As WordPress continues to evolve, Gutenberg 12.8 also comes with valuable enhancements and bug fixes to enhance the editing experience.
This version update was released on March 2, 2022.
Gutenberg 12.7 introduces new features that make working with patterns even more convenient and user-friendly.
Highlights of Gutenberg 12.7 include:
The block quick inserter now prioritizes patterns over blocks in specific conditions. When editing a template in the site editor or post editor, and the inserter is at the root level between other blocks (not as the first or last block), patterns will be given priority.
The creation flow for template parts like Header, Footer, and Sidebar now also includes patterns, providing a smoother experience for adding complex designs.
Themes now have the ability to highlight specific patterns to their users. By adding a pattern field to the theme.json file, themes can recommend patterns to enhance the user experience. When accessing patterns from the Pattern Directory, their slugs can be found in the URL when browsing individually.
Gutenberg 12.7 includes a few other noteworthy improvements. Columns blocks now have the option to add border styles, while Group blocks can have margins applied. These additions offer greater design flexibility. Additionally, to address backward compatibility issues reported in WordPress 5.9, the automatic anchor generation for headings introduced in Gutenberg 11.8 is now an opt-in feature. Developers can enable this feature by adding the provided code snippet to their settings:
This update also improves the ListView functionality, introduces frontend HTML changes, and includes various iterative enhancements for a more refined block editor experience.
This version update was released on February 16, 2022.
Gutenberg 12.6 introduces a long list of updates, including numerous design enhancements to the block editor as well as accessibility improvements.
Highlights of Gutenberg 12.6 include:
Following the pattern set by Gutenberg 11.9 and Gutenberg 12.2, which incorporated the ToolsPanel component for typography tools and border controls, this update brings the ToolsPanel to the color sidebar. Users can now expand and collapse Text, Background, and Link colors in different contexts, improving the color editing experience and aligning the controls with other design tools.
Two new blocks have been introduced in 12.6. The Post Author Biography block is part of an ongoing effort to separate the existing Post Author block into its individual components. The Read More block provides a simple way to link to a specific page or post within the Query block.
Certain styles like color and font size are now retained when transforming between blocks. Furthermore, new block transforms have been added, such as converting Tag Cloud to Categories, Calendar to Archives, Paragraph to Code, and Group to Row variation.
The editor now includes an error boundary specifically for plugins, enhancing its resilience against plugin-related issues. Beginning with Gutenberg 12.6, plugin errors are displayed at the top of the editor, providing users with information on which plugins are causing the problem.
Building on the accessibility improvements made in Gutenberg 12.4, the List View is now more accessible for keyboard navigation and screen readers. Other accessibility improvements include VoiceOver now reading placeholder descriptions and search results in the block manager being announced.
This update also includes numerous enhancements and bug fixes for the Block Library, Components, and more.
This version update was released on February 2, 2022.
Gutenberg 12.5 comes with some excellent improvements meant to expand on existing functionality and help streamline workflows.
Highlights of Gutenberg 12.5 include:
Users now have even more flexibility with the introduction of style variations, which allow for quick and effortless switching between different appearances within the same theme.
The Query Loop feature has been enhanced to include custom taxonomies and filtering and more. In the filters panel, the Query Loop block now displays custom taxonomies based on the selected post type, providing comprehensive filtering options. Additionally, filtering by multiple authors is now supported in the Query Loop block.
When inserting a new Button Block, the new button will automatically inherit the styling from adjacent buttons, simplifying the design workflow.
The Code Editor view is now accessible in the Site Editor. This allows users to access the underlying code, providing a peek behind the curtain for anyone who needs it.
This update also includes a variety of enhancements and bug fixes for the Block Library, Site Editor, and more.
This version update was released on January 19, 2022.
Gutenberg 12.4 has a big focus on accessibility as well as the usual performance and bug fixes.
Highlights of Gutenberg 12.4 include:
It is now much easier to navigate through the List View and Block Inserter Sidebar. This will make it much easier for screen readers to work through the page.
The post publish panel now reminds the writer to add tags and categories before you push it live.
The site editor now has a list of keyboard shortcuts you can pull up and add into your daily use.
This version update was released on January 5, 2022.
Happy New Year, WordPressers! We are kicking the year off with an exciting Gutenberg update.
Highlights of Gutenberg 12.3 include:
The update comes with two new blocks, an Author Block, and a Comment Pagination Block. Both of these make creating your layout easy.
Using the Site Logo Block, you can now set your site icon. This is what you see in your browser tabs, bookmark tabs, and on mobile.
We’ve talked about block spacers, but now you can get even more customization with custom units including VH, viewpoint height, EM, relative to parent font size, and more.
Along with other performance enhancements and bug fixes, Gutenberg 12.2 comes with improvements to post comments, new font sizes in the FontSizePicker component, and more.
This version update was released on December 8, 2021.
Another big update on the heels of WordPress 5.9, Gutenberg 12.1 is jam-packed. Let’s get into it.
Highlights of Gutenberg 12.1 include:
The Template List View has returned. This allows you to easily toggle between all your pages.
Global Styles got a big update. The typography panel now allows you to toggle between text and link elements. You can view duotone styles in the color palette and preset your own gradients.
The Navigation Block has been reworked. Menu names are added automatically right off the bat. The dropdown menu now only displays what you choose it to.
This was a big update with a variety of ux updates, changes to block themes, bug fixes, and even more.
This version update was released on September 16, 2021.
The block gap support introduced in 11.4 is expanded in 11.5, as well as other performance updates and design tools.
Highlights of Gutenberg 11.5 include:
You can now choose the distance between items in a block. In 11.5, it was added to Columns, Title, and Navigation blocks.
Flex Layouts, which were introduced in 11.2, are now supported in the Group and Social Links blocks.This will ensure the content in the blocks finds the best fit within the post.
In huge news, Global Styles are now available to themes by default. That means block, theme, and patterns can access styles in Core.
Gutenberg 11.5 brought a lot of exciting design enhancements and bug fixes.
This version update was released on September 1, 2021.
Block design is the star of the Gutenberg 11.4 update with a refactored Gallery Block, duotone filters for featured images, and more.
Highlights of Gutenberg 11.4 include:
The Gallery Block has been greatly updated. It is now a wrapper for the Image block, which means individual gallery images now contain all the functionality of the Image Block.
Duotone filters for featured images have been extended and can be made consistent across all post and page templates, query blocks, and more.
Support has been added for gap spacing control to a variety of blocks including Columns, Images, and more.
The updates in Gutenberg 11.4 are adding the groundwork for more precise layout options. And as always comes with bug fixes and other enhancements.
This version update was released on August 18, 2021.
Featured post images get an update in Gutenberg 11.3, as well as new controls for Block Dimensions and more.
Highlights of Gutenberg 11.3 include:
The Spacing Panel has been renamed to the Dimensions Panel and now has greater capabilities. You have more control over spacing and other style options than ever before.
The block inserter got a significant performance boost, making finding and inserting blocks way faster and easier.
The Featured Image block got a huge facelift with new width, height, and scale options.
Gutenberg 11.3 makes it even easier to create and customize a post.
This version update was released on July 20, 2021.
To the relief of many designers, Gutenberg 11.1 support has been added to edit block borders. You can now also drag and drop in the list view, and much more.
Highlights of Gutenberg 11.1 include:
The biggest thing to come out of 11.1 is begging support to edit block borders. You can change the width, style, radius, color, and more. Until now, this had to be done with custom code.
Click on the List View and you can reorder all of the blocks in your post without copying and pasting. This is a huge time saver.
These are huge advancements toward Full Site Editing. The update also comes with other enhancements and bug fixes.
Gutenberg 11.0 coincides with efforts still underway on the WordPress 5.8 release. As such, this version is heavily focused on updates and bug fixes. Nonetheless, the release also introduces the following notable highlights.
Highlights of Gutenberg 11.0 include:
A new “clickthrough” behavior has been added, requiring active selection of the block before interacting with its child blocks. This introduces a new editing overlay and interaction for reusable blocks. When the block is not selected, hovering over it displays a blue overlay. Clicking anywhere inside the block selects the block itself, preventing the selection of children before the parent. This change addresses user feedback about the lack of friction when editing these reusable elements, leading to a frustrating experience.
Support for CSS Shorthand Properties in theme.json and Block Attributes Theme JSON is increasingly being used to define reusable CSS rules across themes. As the usage of this feature grows, it becomes important to support common methods of setting style properties. In this release, full support for CSS shorthand properties (e.g., margin: 0) and longhand properties (e.g., margin-left: 0) has been introduced.
The Gutenberg team has also addressed a list of bugs and implemented numerous enhancements, ensuring a smoother and more refined user experience for all.
This version update was released on June 23, 2021.
Gutenberg 10.9 comes with several new features and improvements that have been introduced to enhance the editing experience.
Highlights of Gutenberg 10.9 include:
The Link Control feature now includes rich URL previews, providing users with visual and contextual information about the linked content. This helps with better understanding and managing links within the editor.
List View now allows users to expand and collapse nested blocks, providing a more organized and streamlined view of complex block structures. This makes it easier to navigate and edit content within nested blocks.
The Query Loop block has been renamed as the Post Template block. This change clarifies its purpose, which is to create custom templates for displaying posts dynamically.
The Widgets Editor has received various enhancements and bug fixes, improving its functionality and addressing any reported issues. These improvements ensure a smoother and more reliable experience when working with widgets.
Additionally, Gutenberg 10.9 brings valuable enhancements and bug fixes to the editor, making it more user-friendly and robust.
Gutenberg 10.8 comes with several new features and improvements that have been introduced to enhance the editing experience.
Highlights of Gutenberg 10.8 include:
Significant attention has been given to improving performance through iterative enhancements. One notable improvement is the ability to pass __experimentalLayout to a memoized object, preventing unnecessary re-renders when layout data remains unchanged. This optimization greatly benefits blocks like BlockList, reducing the frequency of re-rendering and enhancing overall editor performance.
The heading block now supports font-weight customization, allowing for greater typographic control. Additionally, the List block now offers support for custom fonts, enabling users to create visually appealing lists with their preferred font choices. These design tools can be easily configured in the theme.json file, providing flexibility for customization.
The title area in the Template Editor now corresponds to the current post title, providing clear context during editing. The template details popover has also been improved, offering more detailed information and an enhanced layout. These enhancements provide users with a clearer and more descriptive interface, making it easier to understand and work with the post and template being edited.
Overall, Gutenberg 10.8 focuses on performance optimizations, introduces additional design tools, and enhances the Template Editor to provide a smoother and more efficient editing experience.
Gutenberg 10.7 is the last Gutenberg release to be included in the coming WordPress 5.8 release. As such, much of the focus for this release has been on bringing forward features that will be included in WordPress version 5.8
Highlights of Gutenberg 10.7 include:
In previous versions of Gutenberg, the List View in the Post Editor was displayed as a popover that closed when focus was shifted elsewhere on the page. However, starting from Gutenberg 10.7, the List View now remains persistent in the Post Editor, just like it was in the Site Editor. This means that a sidebar displaying the full post block tree is available.
Gutenberg 10.7 also introduces the initial version of responsive menus in the Navigation block. By enabling the “Enable responsive menu” block option, the Navigation block now collapses into a “Hamburger menu” when viewed on smaller screens. This implementation prioritizes accessibility by ensuring full keyboard navigability of the menu.
Continuing its focus on design tools, Gutenberg 10.7 introduces new features and support for existing ones in blocks. For example, the Site Title and Site Tagline blocks now support custom margin blocks with configurable sides. The Query block receives special attention in this release, offering new design options including layout and color choices.
The behavior and placement of the “Top toolbar” mode have been refined. Wider screens will no longer display the editor bar and block toolbar together, resulting in an improved user experience. When enabled, the top toolbar remains fixed on top of the canvas, positioned below the editor top bar, regardless of the browser width. Implementers will also benefit from a simplified implementation with all toolbar APIs unified under a single <BlockTools /> component.
Patterns can now be inserted directly from the WordPress.org Pattern Directory, similar to how blocks are inserted.
Additionally, Gutenberg 10.7 brings valuable enhancements and bug fixes to the editor, making it even more user-friendly and robust.
This version update was released on April 14, 2021.
Gutenberg 10.4 introduces block widgets to the customizer and lots of other cool stuff.
Highlights of Gutenberg 10.4 include:
This update introduces the first iteration of block widgets in the customizer, making it much easier to find the block you’re looking for.
The Site Editor List View got a facelift with updated icons, new colors, and more.
More description has been added to the publisher widget. You can now see where you’re publishing to, whether it’s on mobile, a full screen option, and more.
One of the most exciting improvements is you can now revert to theme defaults without leaving the Site Editor.
This version update was released on April 2, 2021.
Gutenberg 10.3 comes with an editor performance boost, improvements to the navigation block, inserter and more.
Highlights of Gutenberg 10.3 include:
In order to simplify the way themes define and style alignments, the team has introduced the concept of layout and layout configuration, something that is automatically rendered with the theme.json file
You can now drag and drop a new background image in the Cover Block
The Navigation Block got a facelift with a better-flow to build nested menus, in-between inserter, and a list-view in the editor.
This only scratches the surface of the changes made in 10.3. To see what else it has to offer, check out the official release post.
Gutenberg 10.2
This version update was released on March 17, 2021.
We are getting even closer to Full Site Editing with the updates in Gutenberg 10.2.
Highlights of Gutenberg 10.2 include:
When choosing a Query block there’s now a setup step that allows picking a block pattern for it to use. This is done using a new API that allows you to fetch various patterns.
The new Spacer Block allows you to slide for the width of your spaces. This works particularly well in horizontally-stacked blocks.
When you transform media and text blocks to columns, you will automatically be given two columns with the media and the text side-by-side.
The “Start writing or type / to choose a block†prompt will only be shown in the top block, and not in all of them in your post.
As always, the update comes with various bug fixes and enhancements.
This version update was released on March 2, 2021.
Gutenberg 10.1 continues Full Site Editing enhancements as well as updates to widgets and navigation screens and Global Styles.
Highlights of Gutenberg 10.1 include:
Reusable blocks saw a big upgrade with this update. The Reusable block’s title is displayed next to the block type in the navigation list in the toolbar. You can now also modify the saved title of reusable block in the sidebar inspector.
The Image block’s toolbar now displays as, “meta, block level, inline†in the block toolbar. This update will be made to other blocks.
You can now add more spacing around your social links and buttons, making them easier to see.
This version update was released on February 17, 2021.
Gutenberg 10.0 is the 100th release of Gutenberg. While that in and of itself is an impressive feat (The Gutenberg project launched just over two years ago), there’s nothing particularly extraordinary about this release. It offers improvements for existing features, fixes bugs, adds new features, and experiments with new ideas.
Highlights of Gutenberg 10.0 include:
You can now use a dynamic Pages block that updates with new pages and can be added inside a Navigation block or used on its own.
You can also make the parent block selector visible and offset within the block toolbar.
This version update was released on February 5, 2021.
Gutenberg 9.9 marks the 99th release of the Gutenberg plugin! This version, which will be included in the WordPress 5.7 release, continues to push forward on exciting features like Full Site Editing, Global Styles, the Navigation block, and the Widgets screen.
Highlights of Gutenberg 9.9 include:
You can now customize the background color and icon color for all the icons within a Social Icons block. This update allows you to create a cohesive, visually appealing design matching your unique style.
The Options modal has transformed and re-emerged as Preferences. With its brand-new look, Preferences offers a sleek, updated interface that enhances usability and navigation. Explore the improved interface and effortlessly fine-tune your settings to personalize your editing experience.
By enabling the “Display button labels” setting, you can now use text labels in the block toolbar instead of relying solely on icons. This feature allows for more precise and intuitive navigation, ensuring you can quickly identify and utilize the tools you need to create your content.
The Gutenberg team has also addressed various bugs and implemented enhancements, ensuring a smoother and more refined user experience for all.
This version update was released on January 20, 2021.
As WordPress continues making steady progress with Full Site Editing, this release pushes ahead with ongoing enhancements, including updates to Global Styles, numerous bug fixes, and other improvements.
Highlights of Gutenberg 9.8 include:
The Spacer block has been updated with a semi-transparent background, replacing the opaque light grey background. This enhancement aims to improve visibility by distinguishing the spacer from lighter-colored layers that might be behind it.
Continuing the enhancements introduced in block variations with version 9.7, the block switcher now showcases the specific variation’s icon instead of the generic icon associated with the block. This change provides a more intuitive and visually appealing experience for users.
The Site Editor now utilizes an iframe to render its content. This implementation offers several advantages, such as preventing unwanted interference from admin CSS and enabling the use of a theme stylesheet without any adjustments. The team plans to adopt the same approach for the Post Editor once its stability has been established.
Full Site Editing no longer generates auto-drafts for template and template part post objects. Previously, these auto-drafts were necessary for block templates and template parts directly derived from files in a Full Site Editing theme without any user modifications. However, managing and synchronizing these auto-drafts proved to be complex.
This release also features new bug fixes and multiple enhancements.
This version update was released on January 6, 2021.
It’s the first release of the new year, bringing some great improvements and fixes to the publishing experience!
Highlights of Gutenberg 9.7 include:
The ability to drag and drop block patterns from the inserter into the post canvas. (This builds upon the ability to drag and drop blocks into the post, which was released in version 9.6)
Updates to reusable blocks, specifically how they’re shown and edited. This will likely inspire some UI updates in weeks to come!
When you insert a block variation, the editor will match it to the block being used and show the icon and description of the variation, so you can keep track of exactly what variant you’re working with.
This release also features three new APIs, a number of bug fixes, and several experiments to kick the year off right.
This version update was released on November 18, 2020.
Gutenberg 9.4 focused on updates to existing blocks and APIs, while work on Full Site Editing and Global styles continues.
Highlights of the Gutenberg 9.4 release include:
The ability to change the width of buttons based on percentage, instead of just the dynamic width. (For example, if you have two buttons side by side, you can set one to have a larger width than the other, to establish a little hierarchy.)
The option to change the size of social icons via the Social Icon block.
The option to change the font size of text in a list block.
You’ll also find a bunch of bug fixes with this release, including the option to add headers by typing /h1, /h2, etc. and small polishes to various UI elements like improving the high-contrast mode for Windows 10.
This version update was released on November 4, 2020.
With WordPress 5.6 getting closer and closer, this release focused on some stability improvements as well as full-site editing flows. (If you activate a block-based theme, this will be automatically enabled.)
Highlights of the Gutenberg 9.3 release include:
Support for all units in font-size presets.
Making sure all alignment options are always rendered in the same order. (So less clicking the wrong one!)
Dark mode UI enhancements for those of you (like me!) who prefer a darker screen.
New Patreon, Tiktok, and Telegram icons for social links.
This release also included over 20 bug fixes, bringing lots of little quality of life improvements to the block editor experience.
This version update was released on October 21, 2020.
This release is the final version that made it into the WordPress 5.6 beta, with features and enhancements to continue improving the block editor.
Highlights of the Gutenberg 9.2 release include:
Support for video subtitles! You’ll find a new drop-down in the video block.
The ability to select multiple blocks and transform them into a Columns block. (You can see an example converting three images into a three-column layout in the official release post.)
The option to add background patterns (repeating images) in Cover blocks.
As for enhancements, there were a lot of improvements made to the widget screen and new APIs added/updated to further expand functionality.
This version update was released on September 30, 2020.
This release includes almost 200 commits from 77 contributors. Wow! The primary focus is on features related to WordPress 5.6, such as the Widgets Screen and Block API.
Highlights of Gutenberg 9.1 include:
Progress on the Global styles project, with the possibility to use the theme.json config file to control block editor features and presets (like color palettes, font sizes, etc.)
Block patterns are now organized per category for better navigation.
There’s now an “Open in new tab” option for the “Social Links” block.
There’s a new “Image Size” control in the Media & Text block.
You’ll also find a bunch of enhancements, like reducing the minimum height for the Spacer block to 1px and allowing HTML editing and rich text content in Code blocks.
This version update was released on September 16, 2020.
The Gutenberg 9.0 release included several highly anticipated updates to the navigation screen. You’ll notice a newly designed user interface and improved functionality here! The query block was another strong focus for this update as it got jacked with several new commands.
Highlights of the Gutenberg 9.0 version release include:
The navigation block got a facelift in terms of a new interface and features. It can now support drag and drop functions inside the list view!
New robust features added to the query block. Updates to this block include the ability to search all, filtering by author, order options, and added support for tags (woohoo!).
Saying goodbye to Facebook and Instagram embedding options since Facebook will be dropping their own embedding support in the future.
Several experimental features including heaps of new support for the block editor theme control!
Gutenberg 9.0 included several updates to the navigation block with a new interface and drag and drop features inside the list view. Photo credit: WordPress.
This version update was released on September 2, 2020.
The Gutenberg team has two main focuses to refine and update which are full site editing capabilities and the widgets screen additions.
Highlights of the Gutenberg 8.9 version release include:
Block-based widgets have moved out of experiments as a full-fledged feature, enabled by default now. Lots of testing and feedback is still needed to get this feature right but it’s a great step in the right direction for the future of Gutenberg!
The option to add a character count to the info panel.
30(!) bug fixes were added to refine and improve the overall editing experience.
Gutenberg 8.9 included removing the block-based widget feature from an experimental one to an automatically enabled one. Photo credit: WordPress.
This version update was released on August 19, 2020.
Cheers to WordPress 5.5 and the release of Gutenberg 8.8 to go along with that!
The Gutenberg team has made major progress in their move towards full-site editing capabilities with several UI enhancements and experimental features with this release.
Highlights of the Gutenberg 8.8 version release include:
A redesigned widget screen that’ll rely on new dedicated endpoints. This is a part of a bigger goal to add more block enabled sections to the WordPress experience!
The ability to add undocumented global style blocks and properties.
This version update was released on August 5, 2020.
With the release of WordPress 5.5 right around the corner, the Gutenberg team has released a quieter update this go-around with the bulk of this release containing minor enhancements and bug fixes.
Highlights of the Gutenberg 8.7 version release include:
This version update was released on July 22, 2020.
The Gutenberg expansion plan continues forward with the release of version 8.6. This time around, don’t expect a ton of new shiny features but do expect the Gutenberg team to continue refining the overall editing experience through interface redesigns and enhancements.
Highlights of the Gutenberg 8.6 version release include:
More reign of control over the cover block positioning of videos. You can now pick a focal point within a video and position it as you please!
New block pattern updates for the following elements: Large header and paragraph,Large header,Text two columns,Three buttons,Two buttons,Quote.
A few enhancements and a lot of bug fixes.
Gutenberg 8.6 introduced a new feature for more control over the cover block of video positioning. Photo credit: WordPress.
This plugin release will be entirely included in the WordPress 5.5 core on its target date of August 11. This wasn’t a major release but Gutenberg 8.5 was still packed with a few notable feature improvements, bug fixes, and enhancements (all the goooood stuff).
Highlights of the Gutenberg 8.5 version release include:
Improvements to the drag-and-drop block feature, so you can now drag and drop multi-block selections.
Accessibility improvements to disable arrow navigation across blocks to avoid confusion when you’re writing long-form content.
The option to upload media to the media library when pasting into the block editor from an external source so external media will no longer be in limbo and can be safely kept in your media library.
A new feature to add anchor/id support to all static blocks.
A new feature to have the ability to keep the caret inside blocks in edit mode.
Gutenberg 8.5 has simplified the process of uploading external media into the media library. Photo credit: WordPress.
This version update was released on June 24, 2020.
This plugin release came out with an extra helping of editing features and bug fixes (always positive news)! Several experimental blocks evolved into permanent blocks to be downloaded for every install so there are a lot of user-facing updates in this release.
Highlights of the Gutenberg 8.4 version release include:
A new image editing feature that allows you to zoom, rotate, or change the aspect ratio for an image directly in the editor. Previously, you might’ve used third-party software like Adobe Photoshop to accomplish this so three cheers for quick image edits done in the editor!
A feature that allows new multi-block controls. You can now select multiple blocks and customize them all at once with this new editor! The only limitation is that the blocks have to be the same type in order to fulfill multi-selection action.
The long-awaited block directory feature. This allows you to discover, install, and insert third-party blocks into your post from the editor.
Lots of bug fixes to improve editor performance.
Gutenberg 8.4 introduced a new image editing feature. Photo credit: WordPress.
This version update was released on June 11, 2020.
The latest Gutenberg editor was released with a few new notable features. This version includes several user-facing features and performance enhancements.
Highlights of the Gutenberg 8.3 version release include:
A new intuitive padding option so you have more control over the spacing within the blocks.
Saying goodbye to previous default-set link colors, and hello to new link color control options.
A new block category system that has been renamed and updated. The new categories are: text, media, design, widgets, and embeds.
A new parent block selector to child blocks to improve your chances of selecting the correct block when in nested contexts.
Gutenberg 8.3 introduced a new padding feature in the editor. Photo credit: WordPress.
Say hello to the latest Gutenberg editing experience! This release has heaps of improved editing functions. There are lots of updates so let’s dig into it!
Highlights of the Gutenberg 8.2 version release include:
New block pattern categories. The categories are: text, hero, columns, buttons, gallery, features, and testimonials.
In the Cover Block, a new content alignment feature. The functionality is now easier to do with nine(!) alignment options.
The ability to copy/cut an entire block (if no text is selected) with keyboard shortcuts. You can use Ctrl + C to copy a block or Ctrl + X to cut a block.
Several enhancements to improve the writing and editing experience. Commands such as copy, cut, and paste are smoother thanks to the enhancements.
Another day, another Gutenberg release! The latest update doesn’t include a lot of bells-and-whistles feature updates, but does include plenty of important user interface improvements.
Highlights of the Gutenberg 8.1 version release include:
A new block pattern feature so it’s easier for you to insert desired patterns and a new pattern (the testimonials).
New Transform functions so it’s easier for you to shift blocks into different forms:
Embed blocks into paragraph blocks.
Code to HTML block and the opposite.
A small, yet incredibly useful, copy block action. You can now copy one or multiple blocks with a simple click.
This version update was released on April 29, 2020.
*You have now reached the next level*
Let’s welcome Gutenberg 8.0 to the WordPress world today! This plugin is chalked full of performance refinements and the addition of a few nifty features.
Highlights of the Gutenberg 8.0 version release include:
A new tab-panel has been added to the block to allow you to browse and insert block patterns. This function has been redesigned so now it’s heaps easier to browse through patterns in the space it allows!
A collapsible dropdown list of formatting options. The previous interface was very limited in screen space so this should improve the editing experience of formatting moving forward.
A new and improved code editor (which looks exactly how it should now). The Gutenberg team redesigned the code editor to use a monospace font for the title with a newly resized editor viewpoint.
New formatting options! You can now add subscript and superscript formatting options.
Lots of good ‘ole enhancements and bug fixes.
Gutenberg 8.0 introduced a new patterns inserter feature. Photo credit: WordPress.
This version update was released on April 15, 2020.
After a slight delay, the Gutenberg team has released the newest editor version–7.9. With the longer-than-usual wait, we were awarded with more new features and user interface enhancements for compensation!
Highlights of the Gutenberg 7.9 version release include:
Tons of additions to the block design tools. You now have more functionality over the height unit control for the cover block, line-height control for the paragraph and heading blocks, and background gradient support for group, columns, and media and text blocks. This is a great step towards redefining the editing experience in WordPress with Gutenberg!
Three new block patterns. Say hello to the following new patterns: Hero Two Columns, Numbered Features, and It’s Time.
The usual lot of bug fixes and performance enhancements.
Gutenberg 7.8 introduced expanded design capabilities in the block editor. Photo credit: WordPress.
This version update was released on March 25, 2020.
This smaller plugin release focused mainly on block user interface redesign and official API modifications. While this release isn’t all that big, the user interface continues to improve (and that in itself is huge)!
Highlights of the Gutenberg 7.8 version release include:
A polished user interface so you’ll notice that several elements in the block editor have been redesigned for ease.
Lots of bug fixes and user enhancements to go along with the user interface redesign.
Gutenberg 7.8 introduced an updated user interface. Photo credit: WordPress.
This version update was released on March 11, 2020.
Big things were promised with version 7.7 and the Gutenberg team delivered. This plugin release featured a newly designed user interface and new block editing functions.
Highlights of the Gutenberg 7.7 version release include:
A newly designed user interface. While this won’t be the final design of the Gutenberg editor, this new version comes with a simpler block toolbar, better user interface color contrast, and consistent focus styles. The main goal was to elevate the previous editor so it felt more professional and clean!
The introduction of new block patterns that will be offered as predefined block layouts, ready to insert and customize as needed! There are currently four patterns with more to be released in the later versions.
Gutenberg 7.7 introduced new UI elements in the block editor. Photo credit: WordPress.
This version update was released on February 26, 2020.
The Gutenberg 7.6 editor introduced several notable experimental features for expanded block controls. Hopefully these functions will move their way into the permanent boat over the course of the next releases!
Highlights of the Gutenberg 7.6 version release include:
A new transition from single-tip to now rotating-tips in the block inserter. Instead of one, a list of several suggested actions will appear when you press [/] to quickly insert new blocks.
New experimental full-site editing blocks for elements such as the post featured image, post tags, comments count, and comments form.
A lot of bug fixes and enhancements that make up a majority of this release.
This version update was released on February 12, 2020.
This plugin release will be fully included in WordPress 5.4. The latest Gutenberg editor comes with a heavy emphasis on improving the social functions!
Highlights of the Gutenberg 7.5 version release include:
The previously experimental social links block is now a stable block in the editor.
A new feature so you can add color to rich text and inline color to text.
A new feature to display featured images in the latest post block.
A good chunk of bug fixes and performance enhancements.
Gutenberg 7.5 introduced a new block variations function in the editor. Photo credit: WordPress.
This version update was released on February 5, 2020.
The latest release is a colorful new edition to the next Gutenberg editor. The Gutenberg team added a lot of exciting functions to liven up your design capabilities!
Highlights of the Gutenberg 7.4 version release include:
A new feature where you can now add background color support to the columns block.
A new feature where you can now add text color support for the group block. In previous versions, you couldn’t apply a text color to every sub-element of the block so now you can design with a bit more ease and customization.
Navigation block enhancements to improve your editing experience.
Several bug fixes and enhancements to make everything run a bit smoother.
Gutenberg 7.4 introduced new color features and enhancements in the editor. Photo credit: WordPress.
This version update was released on January 22, 2020.
The second release of 2020 consisted mainly of performance and interface improvements, and a good helping of bug fixes and enhancements. On a very exciting note—the navigation block received some noticeable interface changes!
Highlights of the Gutenberg 7.3 version release include:
A fresh navigation block perked up with colorful feature enhancements. With these new options, you can now set the text color for all navigation and set the background color for the entire navigation block.
Load time for page loads and commands have improved 30-50% faster according to the team. A great win for the editing experience!
New block collections API that can be used to group blocks in the block inserter.
This version update was released on January 22, 2020.
The first Gutenberg release of 2020 includes some of the most asked features from you and the WordPress community! The Gutenberg team set the bar high with this release—perhaps it’s setting the tone for the rest of the year for Gutenberg’s course.
Highlights of the Gutenberg 7.2 version release include:
A new button block to align more than one button in a row. This was previously a huge headache for designers in the editor but the Gutenberg team heard your concerns to remediate this function!
A new tabbing navigation has been introduced for edit mode to improve accessibility. This will be one of many interface updates to improve the editing experience.
A new gallery block so you now have more control over the proportion and ratio of the media in the block.
The ability to add a link for the image in the media and text block.
Bug fixes and enhancements.
Gutenberg 7.2 introduced a new button block function in the editor. Photo credit: WordPress.
We recently started off a new series on Google’s Core Web Vitals metrics with a post on Largest Contentful Paint. Here, we want to continue with the next candidate in line: First Input Delay or FID for short and how to improve it in WordPress.
In the following, we will take a deep dive into what FID is and how to optimize your WordPress website for it. You’ll learn to understand and measure First Input Delay, what value you should aim for, and how to improve it if necessary.
Note that this post assumes that you are already familiar with Google Core Web Vitals and their impact on user experience and search engine optimization. If you are unsure about any of this, check the first article in this series or our standalone post on Core Web Vitals.
What Is First Input Delay? A Definition
So, as already mentioned, FID is one of three metrics for measuring website user experience that Google considers as core values to judge how user friendly a website is. It’s also part of their search algorithm, so if you score badly on this, your search ranking will suffer.
However, what exactly is First Input Delay?
In short, FID quantifies the delay between the time a user interacts with a web page (such as clicking a button) and the time when the browser is able to respond to that interaction. This reflects the responsiveness of a web page.
While Largest Contentful Paint calculates how long it takes for a web page to become useful to a visitor, FID measures how well it stays useful by performing whatever action the visitor wants – even during load. Naturally, if your site is more responsive, it makes for a better user experience.
You probably know this from your own Internet usage. Ever been on a site that took way too long to react to your input? You didn’t like that, did you? Well, neither do your website visitors.
How Is FID Calculated?
FID is measured in milliseconds (ms). To calculate it, the browser tracks the moment a user interaction occurs on a page and the time it takes for the browser’s main thread to process that interaction. The FID score represents the delay between the two events. As a consequence, a low FID score indicates that the page is highly interactive and responds quickly to user input.
At this point, you probably have to questions: What is the “main thread”? And what counts as an interaction?
Here’s the answer.
The main thread is basically the browser’s work pipeline. All processes that are necessary to render and run a website run through it. If it is constantly busy, it takes longer before it can react to new input.
As for what counts as an interaction, that can be a click on a link, a tap on a button, using a drop-down menu, text field, checkboxes, or radio buttons, as well as pressing a key on your keyboard (e.g. Esc to close a popup).
What Causes FID?
First Input Delay is often highest between First Contentful Paint (when the first page element appears in the browser window) and Time to Interactive (when the page first becomes usable and responsive to user input).
Basically, input delay stems from when the browser is busy with something else while the user tries to do something. In that case, it can’t respond timely to the input, resulting in waiting time for the site visitor.
On the technical side, common culprits for this are:
Large JavaScript files that the browser needs to parse and execute
Heavy calculations, DOM manipulation, or resource-intensive processes
Slow network connections or high latency that can lead to delays in fetching website files and other resources
Activities that block the main thread, such as heavy animations, long-running CSS transitions, or large image processing
One last thing that is important to note about First Input Delay is that it will be replaced by another metric called Interaction to Next Paint (INP) in March 2024. However, for now FID is what we are working with, so it still matters that you get familiar with it.
How to Measure First Input Delay
You can test your website’s FID with pretty much the same tools as the other Core Web Vitals:
PageSpeed Insights — Simply enter your page URL and receive a report including your FID value.
Chrome User Experience Report — Google collects and compiles real user experience data from many websites through its browser. You can access this data through different tools, including those mentioned here.
Search Console — The Web Vitals report in Google Search Console lets you know about pages with bad FID readings.
web-vitals JavaScript library — If you are more technically inclined, you can build this JavaScript library into your website and get the information about Core Web Vitals from there.
Most of these tools simply show the FID value in their results so you know what you are dealing with.
What’s important to note is that you need real user interaction for this metric. It is not something you can simulate in a lab-type environment. Therefore, your best sources for this is real user data like from the CrUX report.
If you want to test your site in a lab environment beforehand, your best proxy metric is Total Blocking Time. You can also find that in PageSpeed Insights, for example.
In addition, focus on the really worst cases of FID on your site, it will tell you the most about what is wrong.
What Is a Good First Input Delay?
That only leaves the question, what number should you shoot for? A good FID score is typically below 100 milliseconds. Scores between 100 and 300 milliseconds are considered to need improvement. Everything over 300 milliseconds indicate a poor user experience.
So, with these benchmarks in mind, let’s learn how to make the First Input Delay on your site better.
How to Improve First Input Delay on Your WordPress Website
Improving FID mostly involves optimizing the web page’s performance and reducing any blocking tasks that may delay the browser’s response to user input. The most common culprit for the latter is heavy or incorrect use of JavaScript. For that reason, much of the measures below will focus on that. However, there are also other things you can do.
Optimize your website environment — The faster your website generally, the quicker resources can be delivered, reducing time to interactivity. Therefore, invest in quality hosting, themes, and plugins. In addition, reduce the number of plugins on your site and keep it updated. In addition, implement caching and compression.
Implement a CDN — Content delivery networks allow you to shorten the distance between the server and the user, also resulting in faster file delivery.
Eliminate render-blocking resources — Any parts of a website that stall the loading process negatively impact all parts of the user experience and Core Web Vitals. Eliminating them from your site helps correct that problem. More details on render-blocking JavaScript below.
As mentioned, JavaScript is usually the main factor for bad FID results. Here is how you can optimize the markup on your site so that it doesn’t become a problem.
Reduce the Overall Markup
Of course, the best thing you can do is to reduce the overall JavaScript on the page. Check the Coverage tab in your browser developer tools to find the unused JavaScript on a web page.
In WordPress, excessive JavaScript is often the result of too many plugins or themes that come with a lot of bells and whistles causing First Input Delay. So, if you want to get rid of it, check if there is a way you can eliminate some of them or switch to a leaner version.
Async and Defer Scripts
After that, the next step is to optimize JavaScript delivery to the browser. The main problem here is that, unless otherwise specified, when the browser encounters a JavaScript script in your website markup, it stops rendering HTML until the script has been downloaded and executed. This also referred to as the “render-blocking resources” mentioned above.
However, there are ways around it and they are based on two keywords:
async – Adding this to your script call allows the browser to download it in the background without pausing the processing of the page. It will only execute once downloaded, independently of the rest of the page.
defer – Very similar to async. It tells the browser not to wait for the script and instead keep building the page. However, in this case, it will load the script last, when the rest of the page has been fully built.
Here’s what using async and defer looks like in practice:
As you can imagine, both of these methods can result in significant time saved during page load. Their main difference: defer keeps the relative order of scripts the way they appear in the document, while async uses the order in which the scripts are done downloading.
You can use both to make unused and non-critical JavaScript load later. This includes third-party scripts such as analytics.
Minify JavaScript for Faster Download
Finally, for the JavaScript that does get loaded, be sure to minify it. Minification means removing all markup and code formatting that’s only there to make files legible for humans.
It further reduces the file size and makes them faster for the browser to download. There are plenty of tools out there to do this, including the plugin recommendations below.
Break Up Long Tasks
Besides reducing the overall JavaScript on your site and improving delivery, you can optimize First Input Delay on your WordPress site by breaking what remains down into smaller chunks. This is especially suitable if you have a lot of “long tasks” on your page.
What are long tasks, you ask?
Anything that blocks the main thread for more than 50ms. You can see these in Chrome developer tools marked with red flags.
If you cut them down into smaller parts, you can load them asynchonously, resulting in less uninterrupted work in the main thread.
How do you do that?
By using code-splitting. It allows you to load chunks of JavaScript conditionally so that only critically important code is loaded from the beginning. The rest only comes into play when necessary. You can also break up tasks into smaller separate functions. Both are ways to keep your pages responsive.
For more very technical tips on how to handle long tasks check this resource.
Useful WordPress Plugins to Improve FID
We understand that optimizing JavaScript files is not everyone’s cup of tea, especially if you are not a developer. For that reason, we have compiled a few WordPress plugins and tools that can help you in making your First Input Delay values better.
Asset Cleanup – This plugin allows you to disable unused CSS and JavaScript, preload fonts, minify your files, defer JavaScript, and more.
Flying Scripts — Lets you delay the execution of non-critical JavaScript until the time there is no user activity.
Plugin Organizer — Change the order in which plugins load on your site and selectively switch them off on chosen pages or content types.
Autoptimize — Can combine and minify CSS and JS files automatically as well as add async and defer to scripts. It’s also super easy to use.
WP Rocket — A paid caching plugin that can do a lot of what we talked about above. Generally, most caching plugins offer similar functionality.
Final Thoughts: First Input Delay in WordPress
FID is one of the metrics that make up the triumvirate of Core Web Vitals and it measures the interactivity of web pages. Since nobody likes sluggish web experiences, this is an important part of user experience. By focusing on improving First Input Delay, website owners and developers can provide a more responsive user experience, and ultimately improve user satisfaction and engagement.
Above, we have covered how to measure, test for, and improve FID on your WordPress website. While optimizing JavaScript might feel a bit out of reach for less-technical users, there is still a lot you can do to improve the overall performance of your site including FID. Hopefully, you feel capable of doing so by now.
Do you have any other tips to improve First Input Delay on WordPress websites? Share your thoughts and recommendations below!
Bringing real-time collaboration or collaborative editing to WordPress will be the focus of the third phase of the Gutenberg project. It started off with the block editor in WordPress 5.0 and has by now progressed to Full-Site Editing aka the WordPress Site Editor. Adding real-time collaboration will be the second-to-last phase, while the final phase will add native multilingual capabilities.
Lead Architect Matias Ventura recently posted a preliminary outline of what is planned for Phase 3. The planned changes will not only bring new functionality to WordPress but also necessitate rebuilding (large) parts of its interface. The developers also predict that collaborative editing is going to be the most challenging to build due to the scope.
Reason enough to take a detailed look at what we can expect. In the following, we will go over what real-time collaboration is, what’s planned for this update, and the consequences for the WordPress platform. We will also go over ways you can already try out more collaborative workflows on your WordPress website right now.
What is Real-Time Collaboration?
If you have ever worked on a Google document together with other people, you already know what collaborative editing is. It is the ability for several users to edit a document at the same time, comment on make changes to other people’s work, and use shared assets together.
This allows you to work on a single document collectively instead of giving each person a separate copy and combining their individual input later. You are also able to assign different roles to users that decide whether they can only see, comment on, or edit the content.
Doing so saves time and effort, improves communication, and allows you to divide the labor. It can also result in better outcomes and makes the current work product available to every team member at the same time.
Other software solutions also offer this functionality. Examples include Canva, Sketch, and Microsoft Office 365. However, it is currently not possible in WordPress, at least not by default. While you can work on content pieces together, it’s only possible to do so one user at a time. When one person is in the editing screen for a particular page or post, anyone else who tries to access it gets locked out or needs to kick out the original editor.
“Supporting these workflows is not just about concurrency, though, but also about lifting restrictions that have been present in WordPress for a long time, such as locking a post when two people try to edit at the same time,” Ventura said in the post.
With the planned real-time collaboration, it will be possible to work on content together as a team instead — right in the WordPress interface.
Why Do We Need Collaborative Editing in WordPress?
Yet, why is it the goal to implement this? After all, you could already simply use a Google document for the collaborative part and then copy over the result.
However, copying and pasting content from Google Docs to WordPress does not always work perfectly. It can lead to errors and need reformatting before you can publish the content. In addition, any images included in the document first have to make their way over to WordPress. With a native solution, none of this would happen.
In addition, there is a bit of a lack of collaboration tools in WordPress overall. Unless you install plugins for that purpose, there is no way to leave comments or feedback for other authors and users. Therefore, you often need to rely on other, asynchronous tools, like email or Slack to coordinate.
Doing so will also often result in one person having to implement the suggestions from the rest of the team. Seeing as many websites and content strategies are run by teams, giving people tools to collaborate directly in the environment they are working in would go a long way in making the creation process more seamless.
Plus, since the WordPress block editor can do both content and design, it would also help designers and content creators work together better. While one person can take care of the written part, the other can already start prettying it up.
Finally, offering real-time collaboration is also simply a good way to improve the WordPress CMS and make it into a mroe modern piece of software.
What Exactly Are the Developers Planning?
In his post, Matias Ventura lays out the preliminary goals and ideas the developers are focusing on. Here is a breakdown of what they include.
1. Real-time Content Collaboration
Naturally, this is the centerpiece of the entire phase. The goal is to provide the necessary infrastructure and UI to allow multiple users to work together on the same content simultaneously. To create, edit, and customize web pages and posts as a team.
2. Asynchronous Collaboration Tools
However, working together on content doesn’t just mean the ability to be inside the editor at the same time. You also need tools to communicate effectively about what you are doing. Gutenberg Phase 3 also aims to provide those, including things like:
Some of this is currently already possible through plugins but the goal is to make it native.
3. Improved Publishing Workflows
Another goal is to provide better tools for creating, editing, reviewing, and publishing content within WordPress. This can include features such as:
Defining editorial requirements
Setting customized goals, e.g. a certain number of words or images
Prerequisites to complete before publishing is unlocked such as setting a featured image, etc.
Support for multiple preview contexts (e.g. members vs no members)
The plan is not to necessarily include all of this in WordPress Core. However, Phase3 will provide the infrastructure to make it possible to implement this in the editor.
4. More Powerful Post Revisions
Naturally, to accommodate the added complexity, you need a more detailed post revision system. The plan is to make it “more visual, aware of individual blocks, and explore adding the ability to schedule revisions across multiple parts of a site”.
What does that mean?
First of all, it would add the ability to revert singular blocks to earlier versions, not just entire content pieces. Secondly, you would be able to update several content pieces at the same time, for example that belong to the same campaign.
5. An Enhanced Media and Asset Library
Another piece of WordPress that the developers want to work on is the media library. They want to provide not only a place for managing visuals but also blocks, block patterns, styles, and fonts.
As part of this, it is necessary to enhance the media library’s design and functionality. Historically this is a part of WordPress that hasn’t seen a lot of work, so it would be exciting to find out how they can improve it.
6. A Global Search and Command Component
The final component that Matias is talking about in connection with real-time collaboration in WordPress is a command prompt such as Spotlight in MacOS.
It would allow users to navigate directly to content or different admin areas as well as run commands like “create a new post†or “insert patternâ€. This is also in response to the surge in AI and to introduce functionality that is prompt-based. A Github repository for this already exists.
Consequences of the Proposed Changes
From the above, it should already be obvious that this will not just be simply another feature that’s added to WordPress. These changes will make it necessary to rebuild and change parts of the WordPress user interface. As Matias says in his post:
To accomplish this, we’ll be looking beyond the editors at the rest of the admin experience.
Especially the library will likely see a lot of work. Other areas include update admin notices and UI design components as well as the admin list views used in posts, pages, categories, templates, comments, and by hundreds of plugins. Those should receive a more modern design and better support for interactivity and extensibility. You can find early concepts here.
So in short, real-time collaboration might change the very fabric of WordPress as we know it. We need to find entirely new workflows and design solutions to be able to incorporate it into the CMS.
That’s also the reason why real-time collaboration is on the roadmap before multilingual capabilities. Many of the workflows have to be already in place before we can tackle native translation options as Josepha Haden Chomphosy and Hector Prieto discuss in this podcast.
Technical Challenges for WordPress Real-Time Collaboration
Of course, to take on something of this magnitude, there are a number of technical challenges to overcome. As states in the podcast episode above, collaborative editing is going to be especially difficult because of the need for real-time communication between different user browsers. If you want to read about the kind of problems that arise from this, read this account by the people who make the CKEditor (in a word, conflicts!).
In addition, you need to take into consideration the diverse user base WordPress has and especially the different servers that they host their sites on.
For example, Google had an easier time to add collaborative editing to their tools because they are hosting them themselves and have full server control. As a consequence, they mostly had to solve for different browsers.
WordPress, on the other hand, runs on a myriad of server setups with various PHP versions and environments. Not all of them are equipped for all types of technical approaches. That’s also why no underlying technology has been chosen yet. Real-time collaboration is really in its early stages. It will take a lot more thinking and proofs of concept before a decision can be made.
Besides, the developers will continue to work on projects related to earlier phases of Gutenberg. That includes adding more blocks, improved tables, a grid layout system, and improving the block API.
How to Test Drive Collaborative Editing in WordPress Today
If you are really curious about the topic of real-time collaboration in WordPress, there are a number of working prototypes and plugins that let you try ou this functionality now:
AsBlocks — Made by Riad Benguella, who works for Automattic, it demonstrates a collaborative editing experience inside the Gutenberg editor. You can try it out online here. It won’t look exactly like this but it shows one possibility. Read the accompanying blog post for more information.
Block Collab — Another prototype by Enrique Piqeras. It seems like it’s not currently under active development but might still be usable.
Multicollab — A plugin offering features such inline commenting, pinging users, marking comments as done, and email notifications. You can find a demo here (requires signup but comes with a 14-day free trial).
One of them or part of one of them might even be the basis for the final feature. It’s not the first time that something first developed as a plugin ended up in core. The WP REST API and Gutenberg itself both started out that way.
What Are Your Thoughts?
Real-time collaboration has been on the WordPress roadmap for a long time. After finishing up the first two phases of the Gutenberg project, it is now the next step. The preliminary roadmap offers an exciting vision of the future of WordPress in which you can work on content together with all the necessary features for effective collaboration, synchronous and asynchronous.
However, making it happen will need a lot of work and planning. The feature itself will probably change the WordPress platform as we know it and also to pave the way for the fourth phase and native multilingual support.
However, if past developments are any indication, it won’t happen quickly but over time. For example, it is not part of the 6.3 release coming in August 2023. So we will see. Until then, share thoughts and give your input on the official post.
Are you excited about collaborative editing in WordPress? What’s your favorite part? What are your concerns? Share in the comments!
This post is the first in a three-part series about Core Web Vitals. In it, we want to go over each of the three metrics that are at the heart of Google’s new yard stick for website quality. Our first stop: Largest Contentful Paint (LCP) and how to improve it in WordPress.
By now, Core Web Vitals are a critical ranking factor in Google. As measurements for user experience, they determine whether or not visitors have a good time on your site and also influence how well you do in search engines. For that reason, it’s important that you get them right.
To help you do so, as mentioned, we want to examine each of the components of Core Web Vitals in depth. Below, we talk about what exactly they are and why they matter for SEO. After that, you get a grade-A education on how to ace Largest Contentful Paint, the first one of them, on your WordPress site. The post explains what LCP is, how to measure it, what number you should shoot for, and how to improve this metric on your WordPress site if necessary.
What Are Core Web Vitals?
First off, in case this topic is entirely new to you, let’s start with the basics: what exactly are Core Web Vitals?
In short, they are a set of user-centered metrics that measure the loading speed, interactivity, and visual stability of web pages that Google introduced in May 2020. They are supposed to help website owners and developers understand how good of a user experience their pages offer and identify areas for improvement.
Core Web Vitals consist of three metrics:
Largest Contentful Paint (LCP)
First Input Delay (FID)
Cumulative Layout Shift (CLS)
Each of these is measured separately and influenced by different factors, which is why we are writing this article series.
Why Do Core Web Vitals Matter for SEO?
The reason why we stress this point is pretty simple. Google has made it clear that it wants to prioritize pages that provide a pleasant experience to visitors who frequent them. Core Web Vitals are a way to measure that.
As a consequence, by now they are a key component of Google’s algorithm for evaluating and ranking web pages. To quote their own page on that matter:
Core Web Vitals are the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools.
Therefore, if you want your pages to perform well, you not only have to look at things like web design, E-A-T, content authority, on-page optimization, site speed, and mobile friendliness but also at these UX metrics. Otherwise, you might find yourself penalized by Google and not ranking well.
In addition, improving Core Web Vitals can lead to better user engagement, longer site visits, and ultimately, increased conversions and revenue. So, optimizing your website for them not only helps with SEO, but also drives business results.
All clear? Then let’s tackle the first metric.
What Is Largest Contentful Paint (LCP)?
LCP is the first Core Web Vitals Metric we want to look at. It measures the time it takes for the largest element in the viewport (that’s what you see in your browser window) to become fully rendered on the screen after a user initiates a page load. It could be an image, video, text block, or any other element that occupies a significant amount of space on the page.
LCP is an important metric because it reflects how quickly users can access the main content of a web page, which is likely what they came for in the first place. A slow LCP score means that users may have to wait longer before they can start reading or interacting with the page. This can lead to frustration and simply make them leave. No bueno.
How Is Largest Contentful Paint Calculated?
A page’s LCP score is determined by tracking how long in seconds the largest element in the viewport takes to become fully rendered. However, the metric only regards certain types of elements for its calculation:
<img> elements, meaning images
<image> elements inside <svg> documents
<video> elements that show a preview image
Elements that load a background image via the url() function
Block- and inline-level elements with text content
In short, visuals and main text. At the same time, LCP disregards components that users likely do not consider to be “contentful”, such as:
Elements with an opacity of 0, that are invisible to the user
Elements that cover the full screen and likely function as background rather than content
Placeholder images or images with little information that likely do not reflect the true purpose of the page
How to Test Your Site for LCP
There are many ways to test Largest Contentful Paint on your WordPress website. As the quote above mentioned, it is now a metric in all Google tools, so you can start there.
For example, when you input your website into PageSpeed Insights, you can find your LCP value and whether you have passed the test or not.
In addition, you find information about problems with Largest Contentful Paint and other issues in the Core Web Vitals report in Google Search Console.
Chrome developer tools also shows it (more on that below). Plus, there are browser addons that allow you to measure these metrics like Web Vitals for Chrome and SpeedVitals for Firefox. Finally, if you are a developer, you might want to use more technical solutions such as the web-vitals JavaScript library.
What’s an Ideal LCP Value?
After learning how to measure LCP, your next question is probably what exactly is a good value? What benchmark should you shoot for?
In the case of Largest Contentful Paint, the magic number is 2.5 seconds. If your LCP score is less than 2.5 seconds, it is considered good. The page in question likely provides a good user experience. If your score is between 2.5 and 4 seconds, Google considers it in need of improvement. Anything over 4 seconds is considered poor.
So, pretty cut and dry. No need to wonder, you know exactly what is expected of you by the search giant.
How to Improve Largest Contentful Paint (in WordPress)
If you find that after testing that your site does not meet the above benchmark, fear not. We will spend the rest of this post talking about how to improve your Largest Contentful Paint value if necessary.
The good news is that there is plenty you can do. On the other hand, many factors can influence LCP, therefore, correcting it is often not a quick fix thing. You need to look at the entire page loading process step by step. So let’s do that, shall we?
Find the Largest Contentful Paint Element
The first step in making your LCP value better is to find out what exactly your LCP element is. After all, how can you improve the delivery of something if you don’t know what to focus on?
If you are using PageSpeed Insights to measure your site, it will actually tell you what’s your LCP element further down the page in the Diagnostics section.
If you run a Performance test in Chrome’s browser developer tools, it will also show up in the timeline and even highlight the LCP element on the page. Click on LCP and then hover over the file under Related Node.
Break Down the Loading Process Into Parts
Next up, in order to optimize your Largest Contentful Paint, it helps to divide the process into several phases. As mentioned above, there is no one-size-fits-all approach. You have to look at it from different angles to find out what needs fixing on your site. The phases proposed by Google are:
TTFB – Means “time to first byte”, as in the time from a user requesting the page until they receive the first byte of HTML.
Resource load delay – The timespan for receiving the page files (HTML and CSS) and before the LCP resources itself is loaded.
Resource load time – The phase in which the LCP resource loads.
Element render delay – Finally, the time between loading the LCP element and fully rendering it.
Breaking down Largest Contentful Paint this way allows you to concentrate on the different phases and improve them individually.
Optimize Site Hosting and Architecture
These are measures to improve TTFB and resource load delay.
How fast visitors receive you site data depends on a number of factors. For one, there is the server. Even if your site has a very small footprint, such as a one page website, it can still be heavily delayed by a sluggish web server. Another factor are the components that your site consists of, such as its operating system, themes, plugins, etc.
As a consequence, improving all of these factors helps optimize Largest Contentful Paint. Here’s how to do it:
Invest in quality hosting — As mentioned, the web server is a large factor and your hosting provider, therefore, an important consideration. Avoid shared hosting if you can and get a hosting plan according to your traffic. Plus, try to have your site on a server close to your audience.
Use high-quality themes and plugins — Make sure you get your site components from good sources so that you know they are well programmed, lean, and have good support. Use the minimum number of plugins to reduce HTTP requests on your site.
Keep your site updated — WordPress core and plugin/theme updates come with improvements, including performance fixes. Stay on top of them in order to get the latest and greatest.
With these in place, you can make sure that visitors receive your site data as quickly as possible. In order to know if your server is the problem, it helps to learn how to speed test your website. Also, avoid multiple redirects and look into the aforementioned server requests.
Use a Content Delivery Network (CDN)
Another way to improve time to first byte is to use a content delivery network (CDN). It helps to reduce the distance between the user and the place where they receive your website data from. This can make the loading time shorter.
There are even specialized CDNs where you only put your images on external servers, such as Jetpack’s Site Accelerator. This makes a lot of sense since images are often the largest contentful elements. CDNs also sometimes implement the image optimization techniques we will talk about now.
Optimize Images and Web Fonts
We are now getting to techniques to reduce the resource load time. If you paid attention earlier, you will know that that is the speed at which the LCP resource is delivered to the browser. An important consideration here are visuals.
Images often end up the largest contentful object because they tend to be larger in size than text due to the surplus in information they carry. For that reason, one of the things you should focus on to reduce your resource load time is optimizing them:
Use the correct size — Only use images as large as they appear on the page, otherwise you are making visitors load more than they need. This often means resizing your images before upload or setting the WordPress media options exactly to the size you need for your layout. The regenerate thumbnails plugin can help you optimize the sizes of images already on your site.
Go for modern image formats — Not all image formats are created equal. To make your visuals as small as possible, use modern formats such as webp or avif, which have a smaller footprint than their predecessors.
Compress images — Compressing means removing unnecessary data. You can do this either before uploading your images (e.g. via TinyPNG/JPG or RIOT) or automatically with WordPress plugins like Smush or Optimole.
Lazy load images not on screen — Lazy loading means not loading images that aren’t visible in the browser yet. This can save lots of time. Just be sure to exempt images that do need to be visible immediately.
Caching and compression are both techniques to generally speed up your website by making your site files faster to load. They can help with both resource load delay and load time.
The first one does it by pre-rendering your HTML documents and saving finished versions of them on your server so this process doesn’t have to be performed each time visitors want to see your site.
The second one means shrinking the size of your website files so that they are faster to transmit. You can do the latter either with Gzip compression or the newer Brotli compression. Combine it with minification for your files so that they take up less space and load faster.
A plugin like Autoptimize or many WordPress caching plugins can do all of the above and are an easy way to improve Largest Contentful Paint on your site.
Eliminate Render Blocking Resources
Now we are getting to improving element render delay. Even if you have optimized your page loading speed and the delivery of your LCP element, your score will still be bad if the element itself takes a long time to show up on the page. Here, render-blocking resources are the most common culprit.
You can use the linked article above for detailed instructions on how to deal with them. However, here a some short notes:
Load scripts asynchronously and inline essential JavaScript.
Inline style sheets into HTML (this only applies small style sheets, since inlined elements are not cached).
Use the Coverage tab in your browser developer tools to identify the elements that your visitors need to load first. It also helps you identify unused code that you may be able to remove.
Some Really Technical Stuff
If you are of the technical persuasion, here is some more nerdy stuff you can do to further improve your Largest Contentful Paint in WordPress and beyond:
Preload images in HTML — Especially when used as CSS backgrounds or similar, add <link rel="preload"> to put priority on your most important images. This also works for fonts that could be needed to display the main text.
Adjust the fetch priority — Tell browsers what they should load first by adding fetchpriority="high". Limit this to one or two images, otherwise it defeats the purpose.
Use server-side rendering or prerendering — Especially if you have fast server. This reduces the amount of work needed to be done in the browser.
Optimize web fonts via font-display — Set the font-display rule to swap, fallback, or optional to keep your text rendering from being blocked during web font load.
Largest Contentful Paint and WordPress in a Nutshell
Largest Contentful Paint is just one of three metrics that Google considers as Core Web Vitals and uses to judge a website’s user experience and – ultimately – search rank. If you are struggling with site and search performance, it’s one of the factors to look into.
In this post, you have learned how to figure out if this is a factor for your WordPress site, what LCP value to shoot for, and ways to improve it. Hopefully, by now you feel capable of changing your LCP for the better.
As usual, you don’t have to be perfect. Pick what you feel capable of, implement it, and take it from there.
Do you have any additional tips regarding the Largest Contentful Paint metric and how to improve it in WordPress? Feel free to chyme in in the comments.
With the advent of the WordPress Site Editor (aka Full-Site Editing) and block themes, the way WordPress users have to think about how to modify their websites and themes has changed dramatically.
These days, instead of style.css and functions.php, there is a new central file for block themes: theme.json. Plus, instead of CSS and PHP, you need to be familiar with a new type of markup to make changes to it. Its name is JSON.
While that might sound scary, the good news is that JSON is actually quite approachable. With a bit of technical understanding and tenacity, it’s not that hard to understand and to start making theme changes by yourself.
To help you get there more quickly, this post is an absolute beginner’s guide to JSON and how to use it in WordPress. In particular, we will cover what JSON exactly is, which function the theme.json file fulfills in WordPress block themes, and how to use it to modify your themes.
Take a deep breath and keep an open mind, it’s going to be fine, I promise.
What is JSON?
Let’s start off with elephant in the room. What exactly are we talking about when we say JSON?
You might have heard about it before, especially in connection with the WordPress JSON REST API. JSON, short for JavaScript Object Notation, is a lightweight data interchange format. That means, it’s a way to represent, store, and exchange data between different systems, applications, or platforms.
There are other such formats out there, such as XML or CSV. However, what’s special about JSON and the reason why it has become so popular in recent years is that it’s not only easy for machines to parse and generate but also for humans to read and write. More on that below.
Although it originated from JavaScript, JSON has become a language-independent format. Most programming languages now have built-in support or libraries for parsing and generating JSON data. That’s also one of the reasons why it is widely used in web applications and APIs for data transmission.
Basic JSON Syntax
As mentioned earlier, JSON is actually quite simple. It basically shows data in key-value pairs, meaning it gives you the name of something and displays what value it has, such as "color": "#ffffff". If you have ever worked with CSS, this type of format should look very familiar.
Aside from that, JSON markup has the following features:
Keys are strings, meaning words, and the value can be a string, number, boolean (true or false), null, array (meaning, a list of values), or another JSON object.
JSON objects are delimited by curly braces (“{}”) while arrays use square brackets (“[]”).
Keys and string values are enclosed in double quotes.
The data format is strict, and any deviation from the standard syntax will result in a parsing error.
Already feeling lost? Let’s go over an example to make things clearer:
The above first defines a version of a file. It is divided into a settings and styles section, both of which define certain colors. In the settings part, the colors are assigned to a subcategory palette and displayed as an array containing several colors as well as values called name and slug.
The styles segment defines two colors, one for background, one for text. Both are only specified as variables. You can see that all the formatting mentioned above applies and how it’s easy to understand which keys and values belong together.
Is that at all understandable? Because it it is, the good news is that the example above is taken directly from WordPress. So, if you feel like that wasn’t impossible to understand, you are ready to start using JSON to modify WordPress block themes.
What is the WordPress theme.json File?
Ever since the introduction of Full-Site Editing/the Site Editor and block themes, there is a technology shift going on in the WordPress platform. Instead of CSS and PHP, it is increasingly relying on JavaScript and JSON to get things done.
The best example for that is theme.json. It’s a configuration file for block themes that helps to manage global styles and settings. It allows theme developers to define default styling, options, and configurations for the entire site and single blocks across the theme.
That way, theme.json can change both how the theme looks and what options are available for users to make their own changes. This gives you a single, central way to build and modify block themes, especially since anything you configure here applies to both the front end of your site and the WordPress editor in the back. What’s more WordPress will read the markup in the file and create the necessary CSS styling for you.
Before, the editor and website front end used different style sheets that you had to maintain separately. In addition, theme developers offered settings in different ways, even when using the WordPress Customizer.
Now, with the new, unified approach, users will have a more congruent experience.
Of course, as the file ending suggests, theme.json is written in JSON. As a consequence, if you want to learn to work with it and block themes, you need to be familiar with the markup that it is written in. That’s what we’ll do in the rest of this post.
How theme.json Is Structured
theme.json file has three main parts: settings, styles and custom templates/template parts. Here’s what you can control in each section:
Settings — Contains global styles, meaning available color palettes, font families and sizes as well as other text options, theme widths, spacing, and borders. Basically, the fundamental controls to change your theme’s look. It can also do the same for individual blocks and you have the ability to set custom CSS variables.
Styles — Here, you define the default styling of the theme, meaning the default values it should use for many of the options mentioned above. For example, you can set the theme background color and font families it will use for headings and body text. Again, the same is possible for single blocks. This is basically what style.css used to do.
Custom Templates and Template Parts — Where you define the page templates and template parts that will be available in your theme and point the theme to the accompanying HTML files.
Using JSON to Customize WordPress Block Themes
To give you a better understanding how this is relevant to modifying WordPress block themes, let’s go over a number of practical examples.
Loading Local Custom Fonts to Change Theme Typography
The first thing we are doing is load some font files placed on the server to introduce a different kind of typography to your theme. We have a detailed article on that topic, in case you want to see more details, so here is a slightly shorter version.
The options for that are located in theme.json under settings > typography and then under fontFamilies.
Note that you can include several font files in fontFace, e.g. to load different styles. As mentioned earlier, you need to separate them with curly braces and a comma to do so.
For a way to add local Google fonts to your theme without manually changing the markup, you can also use the Create Block Theme plugin.
Modifying Hover and Focus Styles
Next, we want to deal with how to modify hover and focus styles for elements like links and buttons in WordPress block themes. Note that this is not yet in WordPress Core at the time of this writing. If you want to take advantage of it, you need to install the Gutenberg plugin so that you can use the latest improvements and features.
To make changes to hover and focus styles, can use the pseudo elements:hover, :focus, :active, and, for the outline property, :visited. The settings for this are located in themes.json under styles > elements > link or, alternatively, button.
It states that links should not be underlined when someone hovers over time with their mouse cursor.
In the focus state, it adds an outline that is two pixels wide, solid, and has the color code #111111.
When active, the link text takes on a color defined by a CSS variable and, again, is to set to have no text-decoration value.
Modifying Block Theme Colors
In this example, we want to introduce a custom color palette and also disable the option for users to make their own color options. You would do this, for example, to make sure that everyone on your website can only use approved brand colors and not introduce something else to your website design. We will also go over how to add colors to specific blocks or elements so that you can predetermine what they look like.
Understanding Standard WordPress Color Settings
To do this, you first need to know what color palettes are available in Gutenberg by default. These are:
WordPress default color palette — This is always available. It provides colors that will prevail even at a theme switch. That’s why they are used for block patterns.
Theme color palette — Ships with the theme and is custom to which theme you are using.
User color palette — Colors added by the user via the available color picker. You can define them in the global styles under Colors > Palette.
One or several of these always appear when accessing the color options for any of the blocks or global styles.
Eliminating Color Options
Let’s first hide the default color palette and gradients. You can do this under settings and color like so:
If you input the above markup, all the usual color options will not be available, except for the theme colors.
Adding a Custom Color Palette
Next, we want to add our own color palette. We do this in the same place in theme.json by adding a palette key and then adding an array with the slug, color, and name for each of the colors you want to include.
With this present in theme.json, you will find your own color options in the back end (and, in this case, also applied to your site).
You can also do the same for gradients and duotones. In almost all cases you can use pretty much any CSS color declaration. Hex, RGB/A, color names, whatever you want, even CSS variables. Only duotones strictly take Hex and RGB color values.
In addition, it’s possible to do the same for single blocks (be sure the names and slugs are different than in your sitewide settings):
As you can see, setting default colors happens under the styles section. Here, we are targeting the core/quote block under blocks and defining a background and text color. Here is what it ends up looking like on the page:
By the way, if you want to find out what other settings you can tinker with in theme.json, refer to the developer handbook.
Introducing Additional Theme Styles
One of the best features of the Site Editor is that it offers style variations. These allow WordPress users to completely modify the look of their themes (colors, fonts, block styles) with the click of a single button.
How can you implement this in a theme? Simple, by including additional theme.json files.
A few notes:
For WordPress to pick up the additional files, you need to place them inside a directory called styles inside your theme folder.
The extra files get loaded in addition to the main file and override the included styles. That means, you only have to include markup for what you actually want to change. This is similar to child themes.
You can name the new files whatever you want, as long as they end in .json. The Site Editor will automatically use the file name (without extension) as the display name in the back end. However, you can also include a custom name by adding "title": "[your preferred name]" at the top of the file.
For example, here is the (shortened) content of one of the style variations that Twenty Twenty-Three ships with:
This is the theme.json for the “Canary” theme style. As you can see, it introduces new duotone and color palettes, adjusts the layout width, and adjusts font sizes. It also adjusts the styling for several blocks and elements like buttons, headings, and links. At the end, it also changes the general theme font size.
All of this is enough to adjust the theme appearance quite dramatically:
At the same time, the theme variation file does all of this in about 250 lines of markup, while the original theme.json of Twenty Twenty-Three is over 700 lines long.
By the way, another option to create theme variations is to use the aforementioned Create Block Theme plugin. It has the possibility to export your current modified design as a variation to use on other websites.
Changing the Styling of Individual Blocks
We have already shown above how you can make changes to singular blocks. Just to formally mention it here more generally, you can modify singular blocks in settings and styles, each under blocks.
Here is what the markup above looks like in action:
It’s possible to target blocks via core/blockname, e.g. core/paragraph for the paragraph block. You can find the names of all of the core blocks here.
Adding Template Parts and Templates
The final thing we want to talk about in terms of modifying block themes via theme.json is the ability to add templates and template parts. You find those as options in the Site Editor when clicking on the WordPress logo in the upper left corner.
Naturally, in order to show up in the theme, you need to register them somewhere, which is another thing that happens inside theme.json. The exact location is under templateParts and customTemplates. These are placed at the base level of the file, meaning the same as version.
name — This is the name/slug of the file for this template part, e.g. if you input “small-header”, your file would have to be named small-header.html.
area — This matters so that the Site Editor knows where to assign each part. templateParts know three areas: header, footer, and uncategorized. If you don’t specify either of the first two, the template part will default to the latter.
title — This is the name of the template part visible in the editor, make sure it is descriptive.
Objects under customTemplates also take three attributes:
name — Same as for templateParts. Needs to correspond to the name of the associated HTML file.
title — Also same as above, appears in the editor.
postTypes — An array of post types this custom template supports such as post or page.
Custom templates and template part files need to be placed inside the templates and parts folders in the theme directory respectively. You need to build them out of block markup, which you can also do by creating them in the visual editor and exporting them. More information on that here.
WordPress theme.json Generators
If you want to create your own theme.json, below are some helpful tools to make the process quicker. They allow you to simply pick settings and styles from a visual user interface and then download or copy the corresponding theme.json file to your theme.
Modifying block themes is very different than working with classic themes. Instead of functions.php and style.css, a lot of the work happens in theme.json and HTML files.
This can be a bit intimidating at first, especially if you are not familiar with JSON. However, as you have probably seen above, the markup is quite simple to understand and get used to. It also offers a powerful way to make sweeping changes to the look and behavior of your theme.
Hopefully, with the examples above, you feel capable of implementing some of them yourself.
Have you modified your WordPress theme via JSON markup before? Please feel free to share your experience in the comments!
Widgets are a popular way to add extra functionality, features, and information to different locations of WordPress websites. They allow you to put anything from contact forms over calendars to lists of your latest blog posts on your web pages.
However, in order to do so, you first need widget areas — at least in classic WordPress themes. These are special designated parts of WordPress themes where, if you add widgets to them in the back end, they will show up in the front end as well.
Block themes using the WordPress Site Editor, on the other hand, no longer have widget areas. Here, adding widgets works very different than before, which is reason enough to cover this entire topic.
In the following, we take a look at different ways to add widgets to your WordPress theme. We talk about how to use widgetized areas and create new ones in classic themes, as well as how to make widgets show up in your block themes.
What Are Widgets and How Do You Use Them?
Before getting to the more technical stuff, let’s first settle real quick on what we are talking about when using the term “widget” in relation to WordPress. If you are using a non-block theme like Twenty Twenty-One, you find their settings under Appearance > Widgets.
This shows all the widget areas available in your current theme (here, it’s only the footer) and the widgets they contain. Everything visible here also corresponds to the front end of your website.
Typically, widgetized areas will be in the footer, sidebar, or header. However, you can also place them pretty much anywhere you want (as you will soon see).
How to Display Widgets on Your Site
The widget menu used to have a different user interface, but by now it has been converted to work with the block editor like the rest of WordPress. Therefore, you can use it like any other instance of the WordPress Gutenberg editor.
Add blocks via the block inserter (the blue plus button in the upper left corner) or its smaller version in the widget areas. You can also remove blocks in the usual ways and change their look and behavior in the right sidebar.
The blocks you can use span the usual options. Paragraphs, headings, tables, images — anything is possible.
Typically, widget areas are used for more dynamic sections where the information updates itself. You can still find those under the Widgets category in the block inserter.
As you can see they include things like displaying archives and categories, a list of your pages or the latest posts and comments, RSS feeds, or a search bar. Don’t forget to click Update in the upper right corner so that any changes you make here become permanent.
Alternatively, you find all of these settings also in the WordPress Customizer (Appearance > Customize) and then in the Widgets tab.
The advantage here is that you can preview how everything will look like on the page directly in the editor.
Creating New Widget Areas in Classic WordPress Themes
Ok, so far so good. We have settled on what widgets are and in which part of classic themes you can manage them.
However, what if you are not satisfied with your choice of available widgetized areas? What if you would like to be able to add widgets in other locations of your theme?
In that case, you have to create them yourself, which is what we will go through now.
1. Register Your Widget Area
Creating widget areas in a WordPress theme is a two-step process. The first step is to register them.
You do that using the register_sidebar() function inside functions.php. It looks something like this:
function ns_register_top_banner_widget() {
register_sidebar( array(
'name' => 'Top Bar',
'id' => 'top-bar-widgets',
'description' => 'Widgets in this area will appear in a bar at the top of the site.',
'before_widget' => '<div id="%1$s" class="widget top-bar-widget">',
'after_widget' => '</div>',
'before_sidebar'=> '<div id="top-bar">',
'after_sidebar'=> '</div>',
) );
}
add_action( 'widgets_init', 'ns_register_top_banner_widget' );
Note: Like many theme changes, you’d be advised to implement this in the form of a child theme.
Some explanation of the different parts of the code snippet and what they mean:
name — This is the name of the widget area that will appear in the WordPress back end.
id — You need to give the widget area an id so you can display it later.
description — This used to show up inside the Widgets menu. You can use it to, for example, explain the location of the sidebar to other users. However, it will only appear for WordPress versions not using the block editor for widgets, so you can also omit it.
before_sidebar and after_sidebar — These two parameters allow you to add HTML markup before and after the widget area. That way, for example, you can wrap it in a <div> container.
before_widget and after_widget — Same as above but for any widget that appears in this area.
There are other parameters you can use with register_sidebar(). You can learn more about them in the documentation. However, for our purpose, the above is enough.
Once present in functions.php and with the file saved, the widget area will already show up in the WordPress back end.
2. Outputting Widget Areas in Your WordPress Theme
While you can already see the widget area in the dashboard, currently putting any blocks or widgets in there will have no effect. That’s because there is not yet any markup that tells the theme to output whatever you add to it.
This happens via the dynamic_sidebar() function. For example, to output the widget area that you created above anywhere in your theme, you can use this function:
<?php dynamic_sidebar( 'top-bar-widgets' ); ?>
Note how the code contains the same id as the widget area created earlier in order to display it.
While the above works, it often makes sense to use a slightly more complex snippet:
The code above first checks if the widget area in question has any widgets in it and adds it to the page only if that is the case. It also contains some more markup like HTML classes and ids to make it easier to customize the output via CSS.
That only leaves the questions, where do you put this markup?
The answer: Anywhere in your theme files where you want the widget area to appear. Typically that is inside page template files like page.php or single.php. However, you can also add it to something like header.php or footer.php. To make a decision, it helps if you know the template hierarchy and understand how themes work.
In this case, for the Twenty Twenty-One theme, we place it inside header.php right after the opening of the page.
With the code in place, when we now put a widget inside the newly created area, it will show up on the website in the intended place.
Alternative: Use WordPress Hooks to Display Widget Areas
Instead of adding the code snippet directly to your page templates and theme files, you can also achieve the same output using WordPress Hooks.
These are little pieces of code placed in strategic locations inside the aforementioned files that you can use to tell WordPress to execute functions in that very place without physically placing the code there. Instead, you can place the functions in question inside functions.php. Doing so has the benefit that it’s possible to manage all your widgetized areas from a single place.
What would that look like for our case?
Here’s how to place a widget area using a WordPress hook:
function ns_output_top_banner_widget() {
if ( is_active_sidebar( 'top-bar-widgets' ) ) :
dynamic_sidebar( 'top-bar-widgets' );
endif;
}
add_action( 'wp_body_open', 'ns_output_top_banner_widget' );
The Twenty Twenty-One theme has a hook named wp_body_open() insider its header file. By hooking into it, we can display the widget area in the same place without modifying the file itself.
As mentioned, the code snippet goes inside your (child) theme’s functions.php. This method is especially suitable for themes that contain a lot of hooks, like the Genesis Framework.
How to Add Widgets in Block Themes
So far, we have only talked about how to create widget areas in classic themes. However, what about block themes, which – after all – will likely become the de-facto standard for WordPress themes.
Here, because the Site Editor works very differently, you don’t really have widget areas. You will also notice that the Appearance > Widgets menu does not exist.
However, you can still add widgets, content, and other elements to your theme using similar principles as above.
Enter Page Templates and Template Parts
The first thing to notice here is that you are a lot less constrained in your placement of widgets with the block editor. Since you are not limited to pre-configured widget areas, you can place any page element pretty much where you desire.
However, you can still use blocks like widgets in classic themes by using page templates and template parts. Access them in your block via menu in the Site Editor on the left (click on the WordPress logo in the upper left corner to open it).
This gives you a list of available page templates on your site. They usually range from page over archive templates to the 404 page.
It’s similar to what you would find if you had a look at the theme files in a classic theme.
Under Template Parts, on the other hand, you find templates for parts of your website like the header, footer, or comment section.
Click on any of them to open in the editor. Alternatively, you can also make changes to your templates and template parts via the Template Editor. That is a slightly reduced version of the Site Editor that you can open via the normal page editor. Just open your desired page, click on the template name under Template, and then Edit template.
You can also pick another template from the drop-down editor.
Adding New Elements/Widgets
If you know how page templates work, you probably understand that any changes you make here will affect not just a single page but every single piece of content on your website that uses the page template or template part. Therefore, any page elements that you add to them will appear everywhere on your site where those are active.
For example, you can add a latest post widget to the footer template part.
If you do, and save, it also appears on the front end of the website for every page where this template part is present.
If you think about it, that’s not very different from how classic widget areas work. They are also simply a way to add page elements and content so that they are reproduced in the same place across your entire website.
The only difference here is that there is no need to edit files. Instead, you can do all of it in the visual editor, WordPress creates and modifies the files for you.
Creating New “Widget Areas” in WordPress Block Themes
So, how do you create new widget areas in block themes?
The answer is: You don’t really. However, the closest equivalent to it is creating new page templates and template parts. Doing so allows you to add content that will show up only in limited parts of your website.
Let’s go over an example to make things clearer. Say you want to do the same thing we did manually on top. In the past, you would have to register a widget area and then add the code to output it. With the Site Editor, you can achieve the same thing. Only in this case, it’s much easier.
One possibility is to create a new template part. For that, under the Template Parts menu in the editor, click the plus icon at the top.
In the menu that appears, give it a name (for example, “Header with top bar”) and choose the type (in this case, Header, of course), then start editing. Populate it with any page elements, widgets, and content you need or desire.
When you are done, you still need to assign it to the page template that you want it to appear in.
For that, go to that template (in this case, Home) and find the existing header. Click on it, then on the three dots to open its menu, and choose Replace header.
This will open a menu with available template parts and patterns on your site.
Pick the one you just created to input it, then save the page template. If you now go back to your website’s front end, you see your newly created header live on the page (and only there).
How to add New Widgets/Blocks
The final question that remains when talking about how to create widgets and widget areas in block themes is how to add more widget choices. After all, by default, you are only limited to a handful of options. Luckily, there are different ways to add more.
For one, you can install Gutenberg block plugins, many of which contain different widget blocks such as forms, maps, or carousels.
In addition, you also have the possibility to install singular blocks with widget functionality. For that, first click on the block inserter inside the WordPress Site Editor.
Once open, enter a search term for the kind of block you are looking for in the field at the top. Besides any options already present on your site, the editor will also search the WordPress block directory and show fitting options.
If something sounds like what you are looking for, simply click on the block in question to install it on your site and insert it into the page in the current position. Place it in the page template or template part where you want it to appear and save. Then, admire it on the front end of your site.
By the way, you can always remove singular blocks that you installed in the Plugins menu in case you don’t need them anymore.
Widgetizing WordPress Themes is Not That Hard
Adding widgets and widget areas in WordPress is an important skill to display a wide array of features and information on your site. They help to make your site more interactive, informative, and usable.
In classic themes, the approach to creating widget areas is a little more technical. You need a rudimentary understanding of WordPress file architecture and feel comfortable with a code editor and making adjustments to PHP code. In block themes, on the other hand, you can do the same with just your mouse cursor.
What’s important to keep in mind is that the principles are the same, only the implementation differs. Now that you know how it’s done, use this knowledge to improve your site!
What is a must-have widget that you like to place on your websites? Are you using a classic or block theme to implement it? Let us know in the comments!
Automattic has published a new project called wp-now that creates a local development environment in seconds. The tool is a NodeJS app that is powered by WordPress Playground, an experimental project that uses WebAssembly (WASM) to run WordPress in the browser.
wp-now allows developers to quickly spin up a new WordPress site with their chosen theme and then open it in the browser automatically logged in as admin without having to enter any credentials. It uses the SQLite Database Integration plugin for its database and developers can quickly swap out versions of PHP and WordPress for testing.
Automattic software engineer Antonio Sejas explained how it works:
When you use wp-now from a directory, we create a php-wasm instance, download the selected WordPress version and mount the necessary directories in a virtual file system (VFS). Then, we initiate a NodeJS express server that listens and proxies all requests to the php-wasm. As a result, wp-now can easily log you into WordPress automatically, activate plugins and themes, and automatically configure your WordPress site.
wp-now can be installed directly from npm. It works across all platforms (Mac, Linux, and Windows). Although it doesn’t support custom domains or SSL yet, Automattic has it on the roadmap. wp-now contributors are also looking at auto detecting when a file is modified and automatically refreshing the browser, importing a database from another WordPress site, and adding a deploy feature for SSH/SFTP hosting, among other features.
Trying to come up with strategies for enhancing user engagement, boosting conversions, and achieving your business objectives can seem intimidating. It’s a lot of effort to stay on top of all the details. Thankfully, there is a way to streamline these efforts: WordPress A/B testing.
A/B or split testing can help you improve the most important aspects of your site. It’s a great tool for optimizing your website performance and conversion rates.
If you’re ready to take your WordPress website’s performance to the next level, we’ll show you how. In the article below you will learn what A/B testing is and why it matters. After that, we’ll guide you through setting up a split-testing plugin on your WordPress site and teach you how to run tests effectively. We’ll also pinpoint which elements it makes sense to test and provide clear insights into analyzing the results.
So if all of that sounds good, read on. We have a lot of ground to cover.
What is an A/B Test?
A/B testing is a way to test different versions of a webpage or app against each to see which performs better. It helps to find out what users react to better and optimize their experience in the process. The ultimate aim? To maximize conversions.
Users randomly see the variations over time and their behavior is monitored and analyzed for any disparities in performance. Ultimately the design variant with higher engagement rates will become your top choice.
Before starting an A/B test, it’s essential to have a strong understanding of the expected outcomes and determine what exactly to test. Whether headlines, images, button colors or more – split testing provides insight into how individuals respond to changes on your website and will guarantee reliable results when done correctly.
For accurate results, it is essential to conduct a thorough A/B testing process that involves the following steps:
Articulate an exact hypothesis of what you are trying to assess.
Generate two different versions of your web page.
Randomly show both versions to users and carefully observe their behavior. Run the experiment for a sufficient sample size and duration in order to obtain reliable outcomes.
Using data-driven insight, select the version which achieved better performance as your final design solution.
Why Are A/B Tests Important for WordPress Site Owners?
A/B testing is a crucial tool for people who desire to get the most out of their site. It enables you to assess how effective your content and design or app elements really are and test alternatives. This allows you to discover which works best in order to optimize conversions on your site.
Testing is not only a great way to reduce risks associated with introducing major changes. It also allows you to trial different ideas and assess the effect that each possible change has on user behavior before making any substantial alterations.
Running a split test also provides an opportunity for website owners to identify what works and what doesn’t. This allows you to adjust your strategy in order to get the most from your online presence. The best opportunity are pages with clear calls-to-action. Any page where the expectation is that visitors will perform a task, i.e. make a purchase, sign up for a newsletter, or fill in a form. Specifically, landing pages, contact pages, and checkout screens are the best candidates.
To deliver the optimal experience for users and to maximize conversions, revenue and ROI, it’s essential to have an understanding of visitors’ behaviors and preferences. A/B testing provides you with this knowledge quickly so that you can implement changes accordingly.
As you might’ve guessed, this sort of testing is essential for any website regardless of its size, complexity, industry, or niche. It’s an invaluable tool that all WordPress website owners should consider employing.
Setting Up A/B Testing Plugin on Your WordPress Website
Now that you understand the importance of A/B testing, it’s time to learn how to get started.
1. Install the Visual Web Optimizer Plugin
One popular tool for A/B testing on WordPress is Visual Web Optimizer. To use it, you’ll first need to sign up for an account on the company’s website. That’s where you’ll be configuring the majority of your tests.
Sign-up is free and you get a 30-day trial for A/B tests. During the process, you will also have to define which website you are going to use the software for and be given the code to run Visual Web Optimizer on your site.
However, we want to integrate the tracking code another way. For that reason, once you’ve signed up, you’ll next need to install their plugin, which connects your account to your WordPress site.
To do this, go to Plugins in the WordPress dashboard and click Add New. Search for “Visual Web Optimizer” and click Install Now then Activate.
The first thing the plugin will ask you to do is input your VWO account ID.
You find this on the Visual Web Optimizer dashboard in the upper right corner. It’s simply a six-digit number. Enter the ID in the WordPress settings, save, and the plugin will take care of the rest.
Note that Visual Web Optimizer is not the only plugin available for A/B testing on WordPress. There are other options available as well, which we’ll cover in more detail at the end of this article. However, to give you an impression of the work involved, VWO is a good example.
It also offers features like built-in analytics, visitor segmentation, and heatmap analytics. These can help you track and analyze the performance of your tests.
2. Choose What to Test
When launching your A/B test, it is essential to identify the website elements you wish to evaluate. As mentioned, these may include headlines, images, call-to-action buttons and layouts. To ensure the best outcome, it helps to prioritize testing changes to these components based on their anticipated effect and how easy they are to implement.
It’s also essential to think about your site’s objectives and what you intend to accomplish through A/B testing. Remember that the tested changes should be based on a particular hypothesis rather than randomly selected. This is key for ensuring successful results from your experiments.
3. Create a Control Version of the Page or Post You Want to Test
Once you’ve identified what to run a split test on, create a control version of your page or post. This is essentially a base design that serves as the control. It allows you to compare it with other versions in order to measure changes accurately.
Most often, the control version is simply your current website design without any changes that you want to test. Likewise, this will be the version that the majority of visitors will see. It will be the benchmark for the performance of the variations. In this case, we are using the design below.
4. Create One or More Variations of the Page or Post
After that, it’s time to set up one or more variations of the page or post in question. All of that happens on the Visual Web Optimizer homepage. When logged into your dashboard, go to Testing > A/B and then click Create an A/B Test to get started.
In the next screen, define the pages you want to run a test on (in this case, that’s simply the homepage).
When you are done, click Next. VWO will then automatically open the defined URL in their visual editor where you can create the design variations. In this case, we want to do a simple thing: make the “hire me” button on the right side of the navigation menu stand out more. That’s very simple. You can just click on it and then choose Edit element to create the variation.
This opens up the options menu for that element.
Here, under Styles, we can define a background color, adjust the font color, as well as change margin and padding. Here is the result:
When satisfied, click Next to finish the design part.
Note: Make sure to only change one element at a time to ensure accurate test results. For example, if you want to test the effect of a new headline, create a variation that only includes the new headline. By limiting yourself to one change at a time, you will know exactly what variation made all the difference.
5. Define Which Metrics to Track
The next step is to define the metrics that you want to track for your A/B test. This can be clicks, page visits, form submissions, and a range of other events that you can set up. In this case, we set it up so that it tracks the clicks on any pages where the goal URL is the “hire me” page (except for from that page itself).
Once you have figured everything out here, it’s time to click Next again.
6. Run Your A/B Test
Now the real test starts. In the last step, you need to name your test and configure what portion of your website’s visitors are shown the control version, while the rest are shown one of the variations.
This can be an even split, you can set up custom proportions, or have VWO automatically move more traffic to the variation that performs better. In addition, you are able to use less than 100% of your traffic for the test.
Once you have made your decisions, click Create to get to the summary page. Check that everything is as you wish and then start running the test by hitting the Start Now button at the bottom.
From here, it’s simply a waiting game. Be sure to run the test for a sufficient amount of time to gather statistically significant data. How long that takes depends on the size of your sample and the difference in performance you want to detect.
You can use the built-in analytics tools to track metrics such as click-through rate, conversion rate, and bounce rate for each variation. It also comes with over 20 different predefined segments you can use to further break down your test results. These include time of day, browser, location, and new vs returning visitors.
7. Implement the Winning Variation
Once you’ve determined which variation performed the best, implement it on your live website. Continue to monitor the key performance indicators of the page to ensure that the positive impact lasts.
It’s vital to recognize that A/B testing is not a sporadic event, but something that should be part of your regular routine. That way, you can provide the best experience for visitors and make sure your site copy and design is effective.
Additionally, various elements like seasonality, user behavior, and traffic sources can have an impact on the results of these tests. This is why it’s generally recommended to run more than one test to ensure consistent and reliable outcomes.
Lastly, it’s important to note that split testing is not a replacement for user research or usability testing. Rather, it’s a complementary tool that can help you make data-driven decisions and improve your website’s performance. It’s recommended to use it in combination with other user research methods. That way, you can gain a comprehensive understanding of your users and their needs over the long-haul.
Other Plugins Worth Considering
In addition to the Visual Web Optimizer plugin, there are several other options you can use for A/B testing your WordPress website:
Nelio A/B Testing: A WordPress plugin that allows you to run A/B tests on your website’s pages, posts, custom post types, and taxonomies. It includes features such as heatmap analytics, visitor segmentation, and conversion tracking.
Optimizely: This platform is a more advanced A/B testing tool. It allows you to run A/B tests on your website as well as apps and also offers features such as personalization, multivariate testing, and behavioral targeting.
Split Hero: Here’s another example of a platform that offers website testing and personalization. Split Hero comes with multivariate tests and redirect tests. It includes heatmaps, visitor segmentation, and conversion tracking.
AB Press Optimizer: This one can run both A/B and multivariate tests on your WordPress website’s pages and posts, as well as custom post types and taxonomies. It supports heatmaps, segmentation, and conversion analytics, too.
Icegram Engage: A general engagement and testing tool. It offers A/B testing, funnel analysis, visitor segmentation, and heatmaps.
It’s important to note that these are just a few of the options available. When running split tests, it’s recommended to research and compare different and plugins to find the one that best suits your needs.
A/B Testing in WordPress is a Must for Future Success
As a website owner, you can greatly benefit from A/B testing. It is an invaluable tool that allows you to compare various versions of your webpages and features. Doing so will help you discover how to improve your pages for increased click-through rate and conversion rates. And who doesn’t love that?
Split testing allows you to make data-driven decisions about your website’s design and functionality. It can optimize the overall user experience, minimize bad decisions, and continuously improve your website’s performance over time.
By regularly conducting A/B tests and implementing the changes that lead to the best results, you’ll be able to reach your goals more efficiently. And with the right tool or plugin, you can easily get started without huge upfront costs. A/B testing is a “must†for any website owner who wants to maximize their success.
Do you A/B test regularly? If not, will you start now? Let us know in the comments! We’d love to hear your thoughts.
Gutenberg 7.5 introduced a new block variations function in the editor. Photo credit: 
Gutenberg 7.4 introduced new color features and enhancements in the editor. Photo credit: 
