Behind the Scenes of Our New Site Design: WPBeginner v6

If you have visited WPBeginner in the past few weeks, you may have noticed the new website design. While it shares many similarities with the previous design, there are many changes that have been made behind the scenes.

In this article, I would like to share the thought process behind our redesign, what we have learned, what’s new on the site, and most importantly, how you can use some of our insights to improve your own website.

Background

WPBeginner was founded in 2009, and like many new creators, I changed our website theme design four times in the first three years.

As my business grew, I realized that website redesigns consume a lot of time and resources that could be better spent on fulfilling our core mission: helping small businesses grow and compete with the big guys through our tools, team, and training.

So, I made it a point to focus all my efforts on our core mission, and our business grew tremendously.

The last redesign of WPBeginner was launched in 2016, and we have come a long way since then.

Design Focused on Content Discoverability

WPBeginner started as a simple tutorial blog, but it has grown into the Wikipedia of WordPress. Our users repeatedly told us that they simply Google the keyword and add WPBeginner at the end to find the best solution to their WordPress problems.

To help our readers quickly find the answer to their WordPress questions, we made the search feature a major focus on our new homepage. Whether you’re a returning visitor searching our content library or a new reader just starting with WordPress, the WPBeginner homepage now makes it easy for you to find what you’re looking for.

You will also notice a similar search widget in our sidebar on all single post pages as well as on our website header when you click the search icon.

One of the reasons WPBeginner has become the largest WordPress resource site for non-techy users is that we explain complex WordPress topics in plain English, step-by-step.

In the new design, we have added a live search feature to our WordPress glossary section so that you can easily familiarize yourself with common WordPress lingo. This is basically like a dictionary for WordPress terms.

As a WPBeginner user, you get exclusive access to the best WordPress discounts on popular plugins, premium themes, hosting, and other marketing tools. Our team has done an excellent job negotiating the best deals for you, and this section has grown considerably to include over 100+ coupons and deals.

Due to popular user requests, we have also added Live Search to our Deals section so that you can quickly find the best deal on your favorite WordPress products.

How to Improve WordPress Search

The default WordPress search feature is not very powerful, so if you want to customize the ranking algorithm and control what shows up for each search, I recommend using the SearchWP plugin. Alternatively, you can also use Google custom site search, which uses the Google algorithm. However, the downside is that Google will display ads on your search pages, which doesn’t look very good.

If you’re looking to add live search to your site like we have done on the Deals section or Glossary, then follow this tutorial on how to add AJAX live search in WordPress.

Other WordPress search tutorials that you might find helpful are how to create a custom WordPress search form and how to add a search bar in the WordPress menu.

We have improved our WordPress site’s content discoverability by upgrading from our old dropdown menus to multi-column Mega Menus, which highlight our new products and free business tools for new users. Our tutorial explains how to add a mega menu in WordPress or build a custom solution. We have also migrated to the WordPress block editor and redesigned several landing pages to use its features. While we still use SeedProd for fully customized pages, the block editor enables fast creation of custom pages and use of design plugins. The WordPress core team is working on full-site editing features, but it still requires improvement to compete with page builders like SeedProd, Divi, or Beaver Builder.

Switching from Yoast to AIOSEO

WPBeginner had been using an old and customized version of the Yoast SEO plugin (v 2.3.5) for a long time. However, in early 2020, they acquired AIOSEO, the original all-in-one SEO plugin, and revamped it completely. The newer websites that started switching to AIOSEO saw their rankings improve, so they started using it on WPBeginner. The latest AIOSEO version has advanced SEO modules, video sitemap, RSS sitemap, and other features that provide fine-tune control over site SEO. The plugin is priced fairly for small businesses and agencies and is believed to be the best SEO plugin in the market. A detailed feature breakdown of why they switched will be provided in a full write-up in the coming weeks. Meanwhile, readers can try the free version or check out the Pro version with all the powerful features used on WPBeginner.

Removing 3rd-Party Custom Fonts

Previously, the WPBeginner website utilized custom fonts, including Adobe’s Proxima Nova, FontAwesome, and Google Fonts’ Source Sans Pro, to enhance typography. However, the performance impact of these fonts became apparent when the site was accessed from remote locations with poor internet quality. Therefore, the new WPBeginner v6 theme employs default System Fonts, which provide a fast and visually appealing experience across all devices. Eliminating custom fonts may not be practical for all websites, but it is a factor designers and developers should consider for speed optimization. Some practices that can be followed include using the same font for both heading and content, reducing the number of font weights to regular and bold, and using direct SVGs instead of an entire icon font library.

In addition, the use of custom fonts in OptinMonster popups and email subscription forms presented another challenge. Although disabling OptinMonster was not a viable option, the development team was able to provide an API solution that enabled the loading of custom web fonts while disabling Google fonts. This feature was incorporated into the campaign builder, eliminating the need for coding expertise.

Switched to WP Rocket from W3 Total Cache
I customized W3 Total Cache plugin for a long time on WPBeginner, but eventually switched to WP Rocket for its superior speed features, such as cache pre-loading and file minification. However, users of ThirstyAffiliates or Pretty Links need to exclude their affiliate links from being cached to prevent artificially inflating click counts. In addition, I have asked the WP Rocket team to make the exclusion process more user-friendly by automatically detecting popular affiliate plugins. In 2022, WPBeginner plans to launch a new section that has been requested by many users in the past two years, and I hope to launch it by Q2 2022.