Designing with WordPress blocks and themes

With affiliate optimization experience as a publisher, affiliate, and in outsourced program management, WordPress expert David Vogelpohl shares a unique and very informed point of view on how you can use WordPress to help drive success in your affiliate business.

In the third and final part of our interview series with David, we he gave us his final thoughts to the most common affiliate questions around WordPress (you can read part 1 here, and part 2 here.)

What is Gutenberg?

DV: “Gutenberg” is the term people use to describe the new “block editor” experience used to build posts and pages in WordPress.

The WordPress block editor was introduced in December 2018 and completely changed how the default experience works for building pages and posts. The WordPress Foundation has published user experience videos so you can see the improvements the block editor delivered for WordPress vs. the previous editing experience.

For context, prior to the block editor being released in WordPress, site owners would use what is now called the “classic editor” to create pages and posts.

The two primary elements of the classic editor were the title of the page and the body. The title was a plain text field and the body was a “rich text editor” that allowed content creators to create text, format text, insert images, and generally create document style content for their website.

I affectionately call the classic editor “A Word doc for your website.”

The problem with the Classic Editor was that a “Word doc for your website” isn’t really helpful for how most people want to build out a web page (outside of a blog post). No one wants a “rich text” document for their home page, contact page, and generally most web pages on their site. We want pretty designs that convert!

In order to create pages and posts that looked like actual web pages with the old classic editor, site owners had to either hire a developer (or learn development themselves) in order to code extensive CSS changes to get the design just right.

Non-technical users could also use third-party plugins called “Page Builders” to make WordPress more intuitive; however, WordPress itself was not very helpful to non-technical users in its default state.

Obviously this wasn’t a great experience.

Starting in early 2018, the WordPress #Core team set out to change all that and bring WordPress into the modern era of site building by launching a brand new editing experience called the block editor that leverages web page design elements presented as easy-to-use blocks. The block editor was tested before it was released into WordPress itself. The plugin used to test the block editor was called “Gutenberg.”

This is where the “Gutenberg” name comes from, but if you want to look cool in front of all your WordPress friends, “block editor” is the correct way to refer to the new building experience in WordPress itself.

The block editor experience has dramatically changed how WordPress sites are built. In the video below you can see how quickly and easily you can build a beautiful and well designed experience with WordPress using the block editor. Try the free Genesis Blocks plugin that is used in the demo video to really get the best out of the new block editor.

How do I pick the best WordPress theme?

DV: WordPress allows you to either build a custom WordPress theme with a design 100% unique to you or a theme designed by others. Pre-designed themes can be found in the themes section of WordPress.org or on websites of theme companies like StudioPress, MaiTheme, or BrandiD.

When choosing a pre-designed WordPress theme, I link to think about seven key areas.

Business Audit

As discussed in my previous article “How to pick WordPress plugins like a pro,” understanding the business interest of the person or company who makes the software you use can go a long way in understanding if that software is likely to be maintained and improved over time.

With themes the same rules apply.

Start by trying to understand the importance of the theme to the person or company that made the theme. The goal here is to understand the role of the theme in the theme author’s business. 

The reason this is important to me is that as WordPress evolves, theme authors need to release updates in order for the theme to work properly with new features released in WordPress itself. If a particular theme was a weekend project or part of a failed business venture, then I might not have confidence that theme will be maintained.

See if you can see who/what owns the theme you’re researching by reviewing information on their website, or if the theme is available on WordPress.org, click on the people and company names under “Contributors & Developers” in the theme’s wordpress.org/plugins listing to see who is involved in the project.

Research the companies or individuals who make and distribute the theme to see if you can figure out if the authors’ businesses are aligned with keeping the theme you’re considering up to date. If the theme seems like a weekend project or unimportant to the author’s overall business, it might not be the best theme for you.

Design Aesthetics

Beauty is in the eye of the beholder and that same principle is certainly true for web design. While there are “best practices” with web design (which I describe a bit below), in the end the “best practice” for you is the design you like and the design that helps you generate the most revenue!

By sake of example, the very successful UK car rental site Ling’s Cars breaks every web design “best practice” you can think of, yet the design of the site is specific to their brand of being quirky and funny. The quirky rules-breaking design is exactly the design that Ling’s Cars needs.

Your mission in choosing a theme is to pick the design that works best for you.

As you shop for pre-designed themes, visit the demo sites for the themes you’re researching and consider what you think looks best in terms of the layout of the pages, designs of on-page elements (navigation, buttons, headers, etc).

Don’t worry about the color scheme of the theme or any of the images or content used on the demo site as those things can easily be changed later and often without code.

The layout of the theme’s demo content and the design of on-page elements (buttons, forms, etc) are typically what I focus on when choosing a theme based on design aesthetics.

There are many ways of thinking about what makes the best design (e.g. less is more, more is more, attention to CTAs, and so on), but if you’re not a design nerd who is going to get into that level of detail, my suggestion would be to go with a theme with a clean and beautiful design you’d be proud to represent your brand.

Support for the “Gutenberg” Block Editor

Fundamentally, themes are a collection of styles represented as code. The most basic styles your theme controls are your navigation, footer, sidebar, layouts of types of pages/posts, and other base-level elements of your website.

In today’s world, theme designers will often not include styles specific to the WordPress block editor commonly referred to as “Gutenberg.” This is especially true for older themes or themes created before the block editor was released in WordPress in late 2018.

Themes that include styles for the WordPress block editor will typically include designs for the blocks that are included in WordPress itself (e.g. paragraph block, quote block, gallery block, and so on). Themes may also provide their own custom blocks or blocks provided by other plugins.

The general idea here is that theme’s with styles for blocks include styles specific to the theme’s design aesthetics for the blocks you use when building pages and posts. Having a consistent design aesthetic for your site’s theme and blocks will help you build better looking and more consistent web pages in the future and help you avoid building a “Frankensite!”

In the video referenced above, I walk through using a theme that includes styles for the WordPress block editor to show you how easy block styles in your theme makes building posts and pages in WordPress.

If you’re unsure if the theme you’re considering supports the WordPress block editor, look for mentions of “Gutenberg” or “WordPress block editor” in the documentation or marketing material for the theme.

If you don’t see any mentions of “Gutenberg” or “block editor,” that could be a sign that the theme doesn’t support the block editor and that may make it harder for you to build consistent posts and pages in the future.

Search Engine Optimization

As previously mentioned, your theme is essentially a collection of styles and layouts, but those styles are often applied to elements of your site that can directly affect SEO.

By sake of example, the “H1 tag” on your site represents your site’s main title and is super important to SEO; however, some theme designers can use bigger font, more emphasis, and so on to make an H7 title appear to be the main title of your website.

From the visitor’s perspective, an H7 that looks like an H1 is probably fine; that said, when Google indexes your site it may be harder for Google to figure out what the most important content is.

You can use tools like Semrush to scan the demo content for the theme you’re considering, but keep in mind that some of the “problems” Semrush will find may be things you’ll fix when you use the theme on your site (e.g. having a descriptive & keyword-rich H1 tag, etc).

If you’re not an SEO professional or have an SEO professional on staff, you can do a little research on the reviews or reputation of the theme you’re considering. Some theme companies are known for their SEO prowess (e.g. StudioPress, SEOThemes, etc), so you may be able to use reputation as a measure, if SEO isn’t your specialty.

The Speed of Your Theme

WordPress themes are fundamentally software used to define the styles of your website. Just like any other kind of software, themes can either be fast or slow and can affect your site’s performance in a variety of ways.

If you’re comparing multiple themes, I suggest using tools like Google’s PageSpeed Insights or WebpageTest.org to test the speed of each theme’s demo website. This can help you determine which theme might be more performant than another.

I say “might be more performant” though as comparing load times of demo sites isn’t always fair. For example, if one theme company has a video on their demo site home page and another theme’s demo site doesn’t have a video, the site without the video will almost certainly win in a speed comparison even if the underlying theme was less performant. Yikes!

To help avoid this, choose a page on the demo site of the theme you’re considering that has as few images or videos as possible. This will help isolate the performance of the theme itself. A sample blog post on the theme’s demo site is usually the best place to look for such a page in order to run your speed tests against.

To measure the true impact of a theme on the speed of your site, it’s best to just install the theme on your site and measure the performance before and after you make that change. As always, do tests involving themes and plugins in a copy of your website and not your live site. Ask your host if they offer “staging” copies of your website (WP Engine and Flywheel offer one-click staging if your host doesn’t) or use the free software Local to test your site locally on your computer.

To get a fair speed test for your site, create one copy of your site where you don’t change anything and create another copy of your site where you install and activate the new theme. Make sure both copies of your site are located in the same place (staging on your host or in Local). Testing copies located in the same place will help eliminate the server hosting the copies affecting the speed results.

Once you have both copies in place, run Google Pagespeed Insights or Webpagetest.org speed tests to measure the impact (good or bad) to the performance of your website.

By testing the speed of demo sites for the theme and eventually the effect of the theme on your own site’s performance, you can get visibility into the true performance of the themes you choose.

What to do after you pick your theme

DV: Once you’ve selected your theme, you’re ready to start building a new site or replace the theme on your existing site. As discussed in the speed testing section above, it’s best to do all this in a staging or local environment for your site. You never want to make changes on the live version of your site if you can avoid it.

If you’re replacing a theme on an existing site, you’ll want to make sure that all your existing pages look good with the new theme and make adjustments as necessary.

That being said, you should take note that changing your site’s design might actually decrease your conversions. Before implementing a new design it’s best to A/B test the new design with a tool like Google Optimize; however, if that’s beyond your ability, just carefully measure your sales after you launch the new theme to make sure your revenue holds steady, or better yet… increases!

In the end, your visual voice is your voice. What looks good to you, your potential customers, and the audience you serve is what’s best. Don’t worry too much about what people tell you your design should look like. Listen to your audience, use your instincts, and test your changes. 

If you’re looking for other insights into how to optimize your affiliate business, we encourage you to register for the Wealthy Affiliate community, as well as read more of our Market Insights.

These insights were brought to you by David Vogelpohl. David serves on the senior leadership team at WP Engine, where he leads WordPress ecosystem strategy and its Genesis business unit. David is a digital vetern with over 20 years of experience leading teams building, growing, and scaling digital businesses. David also owned and operated an advanced WordPress agency serving clients globally including marquee clients like WP Engine, Pioneer Electronics, and Esurance.