WPBeginner v6 – Behind the Scenes of Our New Site Design

5 months ago 25

If you WPBeginner successful the past fewer weeks, past you astir apt noticed that we got a caller website design. While it has a batch of similarities to the past one, there’s a batch that changed down the scenes.

As I promised successful the newsletter, I privation to stock the thought process down our redesign, what we learned, what’s caller connected the site, and astir importantly however you tin usage immoderate of our learnings to amended your website.

WPBeginner v6 - Behind the Scenes

A Little Background

I started WPBeginner successful 2009, and similar astir caller creators, I changed our website taxable plan four times successful the archetypal 3 years.

As my concern grew, I realized that website redesigns instrumentality up a batch of clip and resources which could beryllium amended spent connected fulfilling our halfway mission:

Help tiny businesses turn and vie with the large guys done our tools, team, and training.

So I made it a constituent to dedicate each my absorption connected our halfway ngo and our concern grew tremendously.

The past redesign of WPBeginner was launched successful 2016, and we’ve travel a agelong mode since then.

Here’s what happened successful the past 5 years:

  • We created implicit a 1000 escaped WordPress tutorials connected WPBeginner blog and added hundreds of caller video tutorials connected our YouTube Channel.
  • We launched our WPBeginner Engage assemblage connected Facebook which is present the largest WordPress facebook radical with implicit 80,000 members (it’s escaped to join).
  • We launched the WPBeginner Growth fund to put successful immoderate of our favourite WordPress plugins including MemberPress, Pretty Links, Formidable Forms, Uncanny Automator, and 6 others.
  • We launched 2 caller WordPress plugins, TrustPulse, a WordPress societal impervious plugin, and RafflePress, a almighty WordPress giveaway and contention plugin.
  • We acquired 5 WordPress maturation plugins including the celebrated AIOSEO (all successful 1 SEO plugin for WordPress), SeedProd (drag & driblet WordPress tract builder), Smash Balloon (#1 societal media feeds plugin), PushEngage (website propulsion notification plugin), and AffiliateWP (affiliate absorption plugin for WordPress).
  • We besides acquired 5 WordPress level & infrastructure plugins including the celebrated WP Mail SMTP plugin (to hole email deliverability), SearchWP (powerful WordPress hunt plugin), Easy Digital Downloads (popular eCommerce plugin for selling integer products), WP Simple Pay (easy plugin for accepting recognition paper payments), and Sugar Calendar (simple lawsuit calendar plugin for WordPress).

Collectively our plugins are present utilized by over 19 cardinal websites, and 4 of our plugins are successful the apical 20 WordPress plugins of each time.

While each of those are large accomplishments, we person a caller acceptable of challenges that needed to beryllium addressed, truthful we tin proceed to amended and service our mission.

This brings maine to WPBeginner v6.

Design Focused connected Content Discoverability

WPBeginner started retired arsenic a elemental tutorial blog, but it has truly go the Wikipedia for WordPress.

Our users repeatedly told america that erstwhile they wanted to find an reply to their WordPress problems, they simply Google the keyword and adhd WPBeginner astatine the extremity to find the champion solution.

Google WordPress problems with WPBeginner answers

To assistance our readers rapidly find the reply to their WordPress questions, we made the Search diagnostic a large absorption connected our caller homepage.

Whether you’re a returning visitant coming to hunt our contented library, oregon a caller scholar conscionable getting started with WordPress, the homepage of WPBeginner present makes it casual for you to find what you’re looking for.

WPBeginner homepage search

You volition besides announcement a akin hunt widget successful our sidebar connected each azygous station pages arsenic good arsenic connected our website header erstwhile you click the hunt icon.

WPBeginner Full Screen Mobile Search and Sidebar Search Widget

One of the reasons wherefore WPBeginner has go the largest WordPress assets tract for non-techy users is due to the fact that we explicate analyzable WordPress topics successful plain English, step-by-step.

In the caller design, we person added unrecorded hunt diagnostic to our WordPress glossary section, truthful you tin easy familiarize yourself with communal WordPress lingo. This is fundamentally similar a dictionary for WordPress terms.

WPBeginner WordPress Glossary Live Search

As a WPBeginner user, you get exclusive entree to the champion WordPress discounts connected fashionable plugins, premium themes, hosting, and different selling tools.

Our squad genuinely has done a large occupation negotiating the champion deals for you, and this conception has grown rather a spot to person implicit 100+ coupons and deals.

Due to fashionable idiosyncratic request, we person besides added Live Search connected our Deals section, truthful you tin rapidly find the champion woody connected your favourite WordPress products.

Search WordPress and Blogging Deals

As we spell into 2022, a large precedence for america is contented discoverability.

This helps america present the champion idiosyncratic experience, increases clip connected site, boost pageviews, and trim our wide bounce rate.

I judge that successful 2022, idiosyncratic acquisition optimization (UXO) is going to play a captious relation successful SEO.

If you privation to bushed your competitors and get a competitory advantage, I powerfully urge paying attraction to UXO.

I’ll beryllium sharing tips done retired this nonfiction connected however you tin instrumentality akin features connected your tract similar we did successful our caller theme.

How to Improve WordPress Search

The default WordPress hunt diagnostic isn’t precise powerful, truthful if you privation to customize the ranking algorithm and power what shows up for each search, I urge utilizing the SearchWP plugin.

Alternatively, you tin besides usage Google customized tract search which uses the Google algorithm, but the downside is that Google volition show ads connected your hunt pages which doesn’t look precise good.

If you’re looking to adhd unrecorded hunt connected your tract similar we person done connected the Deals conception oregon Glossary, past travel this tutorial connected how to adhd AJAX unrecorded hunt successful WordPress.

Other WordPress hunt tutorials that you mightiness find adjuvant are however to create a customized WordPress hunt form, and how to adhd a hunt barroom successful WordPress menu.

New WordPress Mega Menu

Going on the taxable of contented discoverability, we upgraded our aged WordPress dropdown menus into caller multi-column Mega Menus.

WPBeginner WordPress Mega Menu

This allows our caller users to rapidly and easy find our precise champion content.

It besides allows america to amended item our caller products, the free concern tools that we’ve building, and more.

How to Add a Mega Menu successful WordPress

Although we’ve built a customized solution for WPBeginner, you tin travel this tutorial connected how to adhd a mega paper successful WordPress to amended item your apical pages.

The WordPress Block Editor (Finally)

In 2019, WordPress introduced the ace almighty block exertion (aka Gutenberg) for creating content.

I instantly started utilizing it connected my personal blog, but since WPBeginner was utilizing a bequest taxable with a batch of customized coded features, the power wasn’t arsenic easy.

So for the past 2 years, we were stuck utilizing the Classic Editor connected WPBeginner tract portion each of our newer websites got the latest and top features of the WordPress artifact editor.

Finally with our caller theme, we tin present usage each the awesome features of the WordPress artifact editor.

For example, present I tin adhd a truly chill “Did You Know” artifact without penning immoderate code:

WPBeginner – Fun Fact:

Our squad has present grown to implicit 200+ radical crossed 39 antithetic countries. We’re hiring for full-time distant positions. If you’re interested, cheque retired our Careers page.

We besides wholly redesigned respective of our landing pages utilizing the WordPress artifact editor.

For example, cheque retired our caller free WordPress blog setup landing page.

Free WordPress Blog Setup Landing Page

We besides redesigned our free concern tools utilizing the artifact exertion to item immoderate of the caller escaped tools that we person built.

Free Business Tools for Small Businesses

We volition inactive beryllium utilizing SeedProd for creating wholly customized landing pages erstwhile needed due to the fact that it’s a due drag & driblet WordPress leafage builder.

While it was amusive learning however to usage Gutenberg to make a customized landing pages, it inactive requires A LOT of coding to beryllium done for the setup earlier selling teams tin create a customized landing page.

Whereas erstwhile you’re utilizing a leafage builder plugin, selling teams tin rapidly make customized landing pages, funnel layouts, etc without immoderate assistance from the dev team.

WordPress halfway squad is moving hard connected the full-site editing features, but it inactive needs a batch of enactment earlier it tin vie with the almighty features that you get with leafage builders similar SeedProd, Divi, oregon Beaver Builder.

With that said, the artifact exertion is beauteous darn awesome, and determination are plentifulness of WordPress artifact plugins that you tin usage to make chill plan elements to heighten your content.

Here’s different chill artifact that our caller taxable has for highlighting featured plugins:

SeedProd Logo

SeedProd is the astir beginner-friendly resistance & driblet leafage builder for WordPress. It comes with implicit 150+ pre-made templates, and their taxable builder diagnostic allows you to physique wholly customized WordPress themes (without immoderate code). Try SeedProd Today »

In the coming blog posts, I’m definite you’ll spot much contented plan blocks that we person to further heighten our contented readability.

Switching from Yoast to AIOSEO

For the longest time, WPBeginner tract was utilizing a precise aged & customized mentation of the Yoast SEO plugin (v 2.3.5).

To enactment successful perspective, they’re connected mentation 17 close now.

I didn’t privation to update Yoast due to the fact that their squad had removed immoderate indispensable features that I thought were important for SEO.

I besides felt that the wide WordPress SEO abstraction had stopped innovating.

So opening of 2020, we acquired AIOSEO, the archetypal all-in-one SEO plugin, and I had my squad wholly revamp it.

AIOSEO - Best WordPress SEO Plugin

I’m ace arrogant of the enactment our squad has done, and it has each the SEO features you request to get a competitory advantage.

Like the artifact editor, our newer websites started switching to AIOSEO and started to spot their rankings improve, truthful I was anxious to commencement utilizing it connected WPBeginner.

Now, we’re utilizing the latest and top of SEO features from All successful One SEO.

We present person features similar video sitemap to assistance boost our contented rankings with videos, RSS sitemap to assistance our contented indexed faster, precocious SEO modules to person much fine-tune power implicit our tract SEO, and tons more.

I genuinely judge it’s the champion SEO plugin successful the market, and astir importantly it’s priced reasonably for tiny businesses and agencies.

I program to bash a afloat constitute up successful the coming weeks astir wherefore we switched with a elaborate diagnostic breakdown, but successful the meantime, you tin effort the free mentation of All successful One SEO, oregon cheque retired the Pro version that has each the almighty features that I’m utilizing connected WPBeginner.

WordPress Speed Improvements

Numerous studies person shown that faster websites amended idiosyncratic experience, summation clip connected site, and wide conversions.

This is besides wherefore Google made website velocity a SEO ranking factor.

Now if you’ve been pursuing the tract for a while, past you cognize that I’m obsessed with show optimization.

WPBeginner tract was already beauteous accelerated acknowledgment to our astonishing WordPress hosting spouse SiteGround. They connection a highly optimized WordPress hosting solution built connected apical of the Google unreality platform.

And of people we were pursuing the WordPress velocity champion practices, but with our caller taxable design, we made respective notable velocity improvements.

Here’s our Google Page Speed results:

WPBeginner Google Page Speed Test Results

Here’s the effect of the homepage from GTMetrix and Pingdom:

WPBeginner Speed Test results from Pingdom and GTMetrix

And we got this effect contempt adding caller sections, much contented to the homepage, wider images, etc.

And earlier you ask, the WPBeginner tract has 68 progressive plugins currently.

So you mightiness beryllium wondering however did I negociate to adhd much contented connected the tract portion reducing the leafage size and making everything faster?

Well, I removed things that I felt we nary longer needed, and these are somethings that I truly privation much website owners to see doing arsenic well.

Not lone volition this assistance velocity up your tract which helps SEO rankings, but it volition trim your wide bandwidth consumption, trim costs, and amended your website’s c footprint.

Disabling Gravatar from WordPress Comments

WordPress comes with a built-in 3rd enactment work called Gravatar abbreviated for Globally Recognized Avatars.

This allows you to spot a user’s illustration photograph oregon avatar erstwhile they permission a remark connected your WordPress site.

The situation is that it requires your website visitors to setup a Gravatar relationship which astir users don’t. So alternatively your website conscionable loads the grey enigma antheral avatar which doesn’t look good.

No Gravatar successful  Comments

Now let’s accidental that you person a fashionable blog station with 50 comments wherever lone 10% of the users person a Gravatar representation and 90% don’t. Well, that’s 50 further images that your leafage is loading that truly don’t adhd important worth to the content.

That’s wherefore a batch of fashionable blogs person started to disable Gravatar, and we’re doing the aforesaid connected WPBeginner.

This elemental alteration has drastically improved our leafage load times and tract velocity score.

Removing 3rd Party Custom Fonts

I volition beryllium honest, I ne'er thought doubly astir customized fonts successful the past.

It was thing that conscionable felt mean and made the tract look bully from a typography constituent of presumption astatine slightest if you’re fortunate capable to person a accelerated internet.

In the aged WPBeginner theme, we utilized a customized Adobe font called Proxima Nova, a fashionable icon font called FontAwesome, and our OptinMonster popups were utilizing the Source Sans Pro from Google fonts.

When I visited the tract from a distant determination with mediocre net quality, I genuinely realized however large of a show interaction these fonts person connected the idiosyncratic experience.

In our caller design, I wanted to lick this problem, truthful we tin marque it casual for students and concern owners successful processing countries to entree WPBeginner, larn WordPress, and turn their online presence.

The caller WPBeginner v6 taxable uses the default System Fonts which person travel a agelong way. They look large crossed each devices, and of people it’s ace fast.

No flash of unstyled substance (FOUT), nary cumulative layout displacement (CLS), and importantly reduced blocking time.

If you login to the WordPress dashboard oregon usage Github, past you’ll announcement that our fonts are akin due to the fact that some of these platforms made the power to strategy fonts earlier.

While removing customized fonts whitethorn not beryllium a viable solution for each concern websites, it’s decidedly thing I judge some designers & developers should beryllium mindful astir erstwhile it comes to speed.

Some champion practices that tin help:

  • Instead of utilizing 2 abstracted fonts for heading vs content, see utilizing the aforesaid font for both.
  • Instead of utilizing aggregate antithetic font weights and styles specified arsenic thin, regular, semibold, bold, other bold, black, and past italics mentation of each these, see reducing the font weights to lone two: regular and bold.
  • Instead of loading the full FontAwesome oregon different icon font library, see adding nonstop SVGs of the icons that you need.

Disabling Custom Fonts successful OptinMonster

Once the taxable was designed and coded, I inactive had to lick 1 much occupation with fonts.

My website popups and email subscription forms usage OptinMonster, and they were inactive loading Google fonts.

Now disabling OptinMonster wasn’t an enactment since it helps maine get much email subscribers and boost our website conversions.

Luckily, it’s 1 of my companies, truthful I asked the improvement squad for a solution to disable Google fonts.

Turned out, I wasn’t the archetypal 1 who requested this feature, and OptinMonster already had an API solution that allows for not lone disabling Google fonts, but besides loading immoderate customized web font that you want.

I’m reasonably tech savvy and tin instrumentality the tiny snippet the squad shared successful the documentation, but I cognize galore of our customers aren’t.

So present our squad has really built this diagnostic wrong the run builder (no coding needed).

Disable Custom Web Fonts successful  OptinMonster

But if you’re comfy with codification and don’t privation to manually toggle this mounting disconnected for each campaign, you tin conscionable travel the hack that I’m using.

First adhd the pursuing JS snippet to disable OptinMonster from loading immoderate web fonts connected your site:

<script type="text/javascript"> document.addEventListener('om.Scripts.init', function(event) { event.detail.Scripts.enabled.fonts= false; }); </script>

Next, adhd the pursuing CSS successful your style.css file:

html .Campaign * { font-family: "Proxima Nova", Helvetica, "Helvetica Neue", Arial, sans-serif !important; }

Of people don’t hide to alteration the fonts to lucifer your website fonts. This volition fundamentally use the font-family supra to each OptinMonster campaigns that load connected your site.

Switched from W3 Total Cache to WP Rocket

For the longest time, I was moving a highly customized configuration of W3 Total Cache plugin connected WPBeginner.

While it got the occupation done, it was nary lucifer for WP Rocket which we person been utilizing connected each our merchandise sites.

So with this redesign, I yet switched to WP Rocket which comes with A LOT of large website velocity features astir notably a reliable cache pre-loading and record minification.

This plugin is important if you privation to amended your website speed.

Just a speedy enactment if you’re utilizing ThirstyAffiliates oregon Pretty Links to negociate your affiliate links, past marque definite that you exclude them from being cached.

Simply spell to the Advanced Rules tab and adhd your affiliate slug nether the Never Cache URLs setting.

Never cache affiliate URLs successful  WP Rocket

If you don’t bash this and you person cache pre-load enabled, past WP Rocket volition effort to cache your affiliate links since they look similar interior links.

This tin artificially inflate your click counts and interaction your affiliate metrics.

I person asked the WP Rocket squad to spot if they tin automatically observe fashionable affiliate plugins and pre-fill the excluded URL tag to marque it much beginner friendly, and I anticipation they instrumentality the suggestion.

What’s Coming Next?

I person large plans for 2022 that’s wherefore I wanted to get the caller tract plan unrecorded earlier the extremity of this year.

We’re readying to motorboat a full caller conception connected WPBeginner that a batch of you person been asking astir for the past 2 years.

It’s coming soon, and I anticipation to motorboat it by opening of Q2 2022.

I’m besides readying to experimentation much with successful the caller artifact exertion to make a amended wide speechmaking acquisition for you.

Other than that, support an oculus retired connected our YouTube channel arsenic we’re going to beryllium doing immoderate truly chill things determination successful 2022.

As always, I privation to convey you each for your continued enactment and feedback implicit the years.

Yours Truly,
Syed Balkhi
Founder of WPBeginner

Read Entire Article