Designing with WordPress blocks and themes

Designing with WordPress blocks and themes

WordPress expert David Vogelpohl from WP Engine answers questions from the Wealthy Affiliate community around WordPress.

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 StudioPressMaiTheme, 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. StudioPressSEOThemes, 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 veteran 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.

Should You Create Your Website in WordPress or HTML & CSS?

Should You Create Your Website in WordPress or HTML & CSS?

If you’re looking to build a site for your business, then you’ll have to make many important decisions around the planning, design, and launch of the site. One of your first major choices will be deciding whether you want to build the site from scratch or use a website building platform.

You will likely need to hire a developer to create a website from scratch. A developer will use HTML with a variety of markup and scripting languages, including CSS and Javascript, to create web pages. Although it may require more time and money to build from scratch, this option can result in a site that looks and functions exactly like you want.

If you’d rather not hire a developer, then you can get started with one of the hundreds of publishing platforms, website builders, and content management systems on the market.

Of these solutions, a CMS is the most popular. It allows you to easily customize the design of your site, add multimedia in your posts, organize your content by tags and categories, manage multiple users, edit the underlying code, and much, much more.

Learn More About HubSpot's CMS Software

To help you find a solution that’s right for your business, we’ll compare the different experiences you’ll get using WordPress or building an HTML site.

Below are the key differences we’ll focus on. Click any of the links below to jump to that section.

Now that we have a brief overview of the differences between building and managing a site on WordPress and building and managing an HTML site, let’s start by clarifying a possible misconception. Does WordPress use HTML?

Does WordPress Use HTML?

The short answer is yes. 

The long answer is that WordPress is not primarily written in HTML. Its core software — as well as WordPress plugins and themes — are primarily written with PHP, a programming language that controls how a WordPress site interacts and connects with its database.

PHP is a server-side language, which means it runs entirely on the server that hosts the website. So when a site visitor types in one of your page’s URL, the PHP code on your server receives that request and pulls the relevant content from your WordPress database. It then converts that content into an HTML file (and the accompanying CSS files) and sends them back to the visitor who made the request. Because the WordPress core is written in PHP, third-party developers can also create plugins and themes that run on their own PHP files and use database content however they like. 

So while a WordPress site will look and function the same as a static HTML site to end users, the process of how its content and functionality is stored and delivered to those users is very different.

Whereas the hosting server has to assemble your WordPress posts or pages into HTML files using PHP code, each page of a static website is stored as an individual HTML file and these exist in their entirety. No assembly is required. That’s because HTML, like CSS and JavaScript, is a client-side language. Rather than run on the hosting server, HTML runs on the device of the visitor accessing a website.

Let’s look at what this means in terms of speed. 

WordPress vs. HTML Speed

Online consumers don’t want to waste time waiting for a website to load. In fact, page speed is so important to the user experience that Google began including it as one of its ranking factors in 2010 for desktop and 2018 for mobile. Its main reason for including speed in its algorithm was that data showed visitors spent less time on slower sites. According to a study by Google, as page load time goes from one second to 5 seconds, the probability of a mobile site visitor bouncing increases 90%.

To ensure you provide a good user experience and reduce bounce rate on your site, you have to consider speed when deciding how to build your site. Let’s compare the speed of WordPress and HTML sites below.

WordPress Speed

The disadvantage of a WordPress site requiring PHP and a database is its impact on load time. Every time a visitor lands on your site, your server has to execute the PHP code and retrieve information from your database to display the correct information to the visitor. Because this requires more server resources than an HTML site, it can increase load time and delays.

However, by selecting a fast hosting provider, purchasing a Content Delivery Network (CDN), optimizing and compressing your images, and taking other steps to speed up your WordPress site, you can meet your consumers’ expectation for speed.

HTML Speed

As mentioned above, HTML sites do not require PHP execution or database queries to load. That means that, if their code is optimized, HTML sites are faster out-of-the-box than WordPress sites.

There are several steps you can take to optimize an HTML site to ensure it’s fast-loading. These steps including eliminating unnecessary white space and comments, caching your content, reducing the number of inline scripts, minifying and compressing images, using lazy loading for images, and more. It’s important to note that many of these steps will also help reduce the load time of a WordPress site. 

WordPress vs. HTML Ease of Use

You want building a website to be as easy and quick as possible. But often, ease of use comes at the expense of flexibility. The more control you have over the administration and design of your site, the more difficult it will be to create and manage. The easier the process, the less control you’ll have.

So picking a platform is, in part, about deciding whether ease of use or flexibility is more important to you. With that in mind, let’s compare the ease of use of a WordPress and HTML site below.

WordPress Ease of Use

With WordPress, you can have ownership over your site without needing to code it from scratch or know how to code at all. You can easily create and manage content, change your site’s appearance, and configure its setting in the built-in dashboard, and easily extend its functionality via plugins.

Adding and managing plugins in your WordPress dashboard

To leverage the platform’s flexibility in these ways, you will have to spend time, effort, and money managing your site. Plugin, theme, and software updates will be essential management tasks for keeping your site safe and avoiding compatibility issues. 

Ecommerce stores, small business sites, and other companies looking to grow their brand and customer base will prefer building with this open-source CMS because of its ease of use, even if it does require more day-to-day management.

HTML Ease of Use

Tasks that are simple on WordPress — like adding and editing content, extending the functionality of your site, and changing how it looks — will be much more difficult when building an HTML site. That’s because you won’t have a dashboard with built-in features and buttons, themes, or plugins to automate these tasks. You’ll have to write the HTML and CSS yourself — or pay someone to do so.

There are ways to speed up the build process. You can use open-source toolkits like Boostrap CSS, which comes with pre-designed buttons, navbars, forms, tables, and other components you won’t have to build from scratch. 

Bootstrap pre-designed buttons displayed with corresponding code including default modfier classes

Image Source

If you don’t anticipate needing to update or change your site regularly, then you’re better off building or hiring a developer to build an HTML site. It will require less server resources and therefore be cheaper and easier to build. Once it’s published, you won’t have to worry about updating any software or third-party extensions to keep it secure.

Restaurants, gyms, boutiques, and other small businesses looking to establish a simple online presence will find this option appealing. While the up-front time and costs required to build an HTML site will be greater than a WordPress site, the day-to-day management will be much easier. 

WordPress vs. HTML Price

The cost of building a website depends on a whole host of factors but the four major ones are your time, budget, technical knowledge, and design skills. If you have time but not technical knowledge, for example, then you could learn how to build an HTML site. If you lack both time and technical knowledge though, you can build a site on WordPress.

Below we’ll look at the costs of creating and managing a website on WordPress and one built from scratch.

WordPress Price

As open-source software, WordPress is free to download and use. However, you will have to pay for a custom domain name and hosting to launch your site. You may also have to factor in any premium plugins or themes you want to install.

Although premium themes can cost up to $200 and plugins can range from one-time fees of $3.99 to annual fees of $250, these design options are most likely cheaper than hiring a web developer or designer to customize the appearance and functionality of your site.

Because domain registration, hosting, themes, and plugins vary in price, the costs of building and managing a WordPress site can range from a couple hundred to a couple thousands dollars.

Breakdown of costs of building and managing site on WordPress

Image Source

The average costs are much more moderate than that range implies though. According to Website Builder Expert, building a WordPress site will cost you around $200 and managing it will cost $11 to $40 per month, on average.

HTML Price

Let’s first consider the cost of building an HTML site. Hiring an agency to build and design your site from scratch will be the priciest option, costing tens of thousands of dollars. Hiring a freelancer will be cheaper but range dramatically, depending on their hourly rate and the duration of the project.

According to a custom quote by WebFX, hiring a developer to build out a responsive site with one to ten pages that’s moderately styled would cost between $7,000 and $10,000.

WebFX estimate for moderately stylized responsive site of 1-10 pages

Image Source

Estimating the cost of maintaining an HTML site is even more difficult than estimating the cost of building one because it completely depends on your coding abilities. If you don’t have any coding skills, you will have to pay a developer to make any changes to your site. Even simple tasks like adding new content or inserting images will require you to hire a developer for a few hours.

That’s why WebFX estimates that the cost of maintaining an HTML site can range from $400 to $60,000 per year. However, a smaller site like the one mentioned above will range much more moderately from $400 to $1,200 per year.

Since you can add new content and perform most tasks without hiring a WordPress developer, managing an HTML website will likely end up costing much more than a WordPress website.

WordPress vs. HTML for SEO

If you’re investing this amount of time and money into building a site for your business, then you want people to see it. To boost your site’s visibility, aim to get ranking as close as possible to the first page. According to Search Engine Journal, sites listed on the first Google search results page get 91.5% of the traffic share for a keyword or phrase.

To drive that organic traffic to your site, you need to optimize your on-page and technical SEO. Let’s compare the SEO friendliness of building a site on WordPress and building one from scratch.

WordPress for SEO

WordPress enables you to easily customize your image alt-text, meta descriptions, headings, and custom URLs right in your dashboard so you don’t need to edit a single line of code.

Editing URL slug in WordPress dashboard o optimize for SEO

Image Source

You can also choose among thousands of responsive themes to design a mobile-friendly site. Installing and activating a responsive theme will take a few clicks and you won’t need to worry about defining viewport meta tags, setting text in the viewport width unit, or adding media queries. 

If you lack experience or knowledge of SEO, then you can download or purchase a range of WordPress plugins to help. Plugins like Yoast SEO, WP Rocket, and Redirection let you control many aspects of your site’s technical and on-page SEO.

HTML for SEO

There are several ways you can optimize your HTML site for search engines — you just need to know how to do it.

Adding keywords in your posts and pages, linking to internal and external pages, and optimizing your URLs, heading tags, title tags, meta descriptions, and image alt text are all familiar best practices.

An image alt text for Lead Management image in Kissmetrics blog

Image Source

But, unlike on web building platforms, you can’t use any buttons on a dashboard or third-party plugins to help you with these steps. Instead, you have to spend the time creating the right tags and code for your site, or hiring someone who will.

While optimizing your on-page SEO in the steps outlined above is relatively easy, optimizing your technical SEO will be much more difficult. Adding breadcrumb menus and pagination to your site, for example, will require time and coding, whereas WordPress offers built-in functionality and plugins for adding these features.

And building a responsive site from scratch will require you to define viewport meta tags, resize your text and images, add media queries, and more. 

WordPress vs. HTML for Blogging

Since websites that feature a blog are 434% more likely to be ranked highly on search engines, you want to pick a solution that will enable you to easily create and publish custom content. Let’s compare what it’s like to blog with WordPress and with HTML below.

WordPress for Blogging

Although WordPress has evolved into a multi-purpose CMS, it was originally built as a blogging platform. It therefore has lots of built-in functionality to help you easily create content.

Using the Gutenberg editor, you can drag and drop elements to create an unlimited number of multi-media blog posts and pages. Once drafted, you can schedule, publish, update, and delete these posts and pages as needed. You can also moderate comments, assign user roles and permissions, make your content public or private, and secure posts and pages with a password.

Setting WordPress post to password protected in editor interface

The best part? You can do all this right in your dashboard without having to access or edit your source code.

If you’re a more advanced user with coding skills, then you can add code to your files to style individual category pages, display a list of recent posts in their sidebar, and extend the functionality of their site in other ways.

By offering these out-of-the-box features and access to its source code, WordPress combines ease of use and flexibility to advance your blogging efforts.

HTML for Blogging

Using HTML and CSS, you can create even more complex blog posts than you can on WordPress. You can insert images, format headlines, add bullet points, create tables, display posts in your sidebar, and anything else you can think — you’ll just need to write the code or hire someone to write the code to do so.

This takes time. For example, say you want to display some text in a simple list format. In WordPress, you can simply drag and drop the list block onto the page. On an HTML site, you’ll have to add the following code:

 

 

   

My list includes the following:

  • Item A
  • Item B
  • Item C

 

While you’ll have total control over the structure and design of your content if you create an HTML site, you’ll need the time and in-depth knowledge of HTML, CSS, and Javascript to wield that control. Since most users will have to hire a developer to add content to their site, those looking to regularly publish blog posts will be better off on WordPress.

Differences Between WordPress and CSS & HTML

Building a site on WordPress presents a very different experience from building a site from scratch. Deciding which one is right for you will depend on your time, budget, current coding and design skills, and willingness to develop those skills.

To help you make this decision, we’ll summarize the key differences between the two solutions below.

  WordPress HTML & CSS
Software Open-source content management system No underlying software
Uses HTML Yes, but primarily written in PHP. When a user visits your website, PHP code on your hosting server queries the database for relevant content, then packages that into an HTML file to deliver to users. Yes. Web pages exist as individual HTML files in their entirety. No assembly is required.
Speed Slower out-of-the-box because requires more server resources. Faster out-of-the-box because requires less server resources.
Ease of use Built-in dashboard, themes, and plugins make it easy to build, customize, and manage a WordPress site. Building and managing an HTML site will be difficult without coding experience or hiring a developer.
Price Free to use the software but have to pay for domain registration, hosting, and premium plugins and themes. On average, costs range from $11 to $40 per month in addition to a one-time sum of $200. Hiring a developer to build and design a small, responsive site from scratch ranges from $7,000 and $10,000. Maintaining such a site will cost $400 to $1,200 per year.
SEO In addition to being able to configure SEO settings in your dashboard, you can choose from hundreds of plugins that let you control your on-page and technical SEO. Have to optimize on-page SEO by including the right tags in source code or hiring a developer to do so.
Blogging Offers a drag-and-drop block editor and advanced built-in blogging functionality for managing users, controlling content visibility, and more so you can create and manage content right in your dashboard. More advanced users can edit the underlying code to make specific customizations if they want. Offers total control over the structure and design of content, but requires a significant time investment and in-depth coding knowledge to create.

Discover videos, templates, tips, and other resources dedicated to helping you  launch an effective video marketing strategy. 

6 Best WordPress Search Plugins (2020): Most Are Free

6 Best WordPress Search Plugins (2020): Most Are Free

Searching for the best WordPress search plugin?

By default, the native WordPress search function is quite limited. It doesn’t search all of your content, the search algorithm itself is pretty weak and doesn’t generate good results, and it doesn’t offer user-friendly front-end features like live Ajax search suggestions that appear as soon as a user starts typing.

On high-traffic sites with lots of content, the default WordPress search feature can also cause performance issues because of its database queries.

WordPress search plugins let you change all of that. You can include a lot more content in your search algorithm, adjust the weighting/algorithm, and, depending on the plugin, offer a much more useful search interface with suggestions, filters, and more. With some solutions, you’ll also be able to offload your search feature to a separate server, which is great for performance on high-traffic sites.

In this post, I will share the six best search plugins for WordPress, most of which have a free version that you can use.

Six Best WordPress Search Plugins

1. Relevanssi

Relevanssi is the most popular free WordPress search plugin at WordPress.org. It’s primarily focused on improving the WordPress search algorithm, not necessarily adding new front-end features.

For example, it lets you include different types of content in your search index including:

  • Custom post types (e.g. events, products, jobs, etc)
  • Custom fields
  • Categories, tags, and custom taxonomies
  • User comments
  • Attachments such as PDFs, Docs, etc. (with the paid version)
  • User profiles (with the paid version)
  • The front-end output of shortcodes

You can also change the weighting of the algorithm. For example, you can add more weight if the user’s keyword appears in the category than in the body of the content. It also adds fuzzy matching, which can help turn up more search results.

On the front-end, Relevanssi automatically integrates with the native WordPress search widget, so you don’t need to change anything.

However, it does still add a few front-end changes:

  • Sort results by relevance, not by date
  • Create custom excerpts that show the content where the search phrase appears
  • Highlight search terms when a user clicks through to the content
  • Add Google-style “Did you mean?” suggestions

You can get many of the features in the free version at WordPress.org. Or, the premium version costs $99 for use on unlimited sites. Click to see a comparison of the free vs premium features.

2. SearchWP

SearchWP is a popular premium WordPress search plugin. Like Relevanssi, it integrates with the native WordPress search widget and is mostly focused on helping you improve the search results that your site generates.

However, it does include a few front-end enhancements, as well.

The biggest feature is that it lets you include “more” content in your search index, including:

  • Custom post types (e.g. products, jobs, etc.)
  • Custom fields
  • Front-end output of shortcodes
  • Categories, tags, and custom taxonomies
  • Content in PDFs and other documents

You can also adjust the weighting of all those different types of content and SearchWP adds fuzzy matching for improved results.

Some other useful features include:

  • View search analytics
  • Sort results by relevance not by date
  • Use SearchWP to power related content suggestions on your site
  • Automatically redirect certain queries to another page

The same developer also offers a free SearchWP Live Ajax Search plugin at WordPress.org that adds live search results to your site. That is, search results will appear as soon as a user starts typing.

SearchWP only comes in a premium version. Plans start at $99 for use on a single site, but you’ll need the $149 Pro version to access every single feature.

3. Ajax Search Lite/Pro

Ajax Search Lite is a popular search plugin that comes in both a free version at WordPress.org as well as a paid version with more features.

As the name suggests, its primary function is to add real-time search results as soon as users start typing. You can even customize the live search results to include thumbnails and other details. For example, if you’re running a WooCommerce store, you can include a product’s price in the live search results.

You can try a demo here to experience what it’s like.

You can also add sort and filter options to help visitors further refine the results and get other user-friendly features such as:

  • Search term highlighting
  • Search suggestions

However, it’s more than just front-end improvements. You can also use Ajax Search Lite to control the backend search function:

  • Control what content can be searched. For example, should it search blog posts or WooCommerce products? Or both?
  • Include custom fields and other information in search
  • Include user comments in search

You can try Ajax Search Lite for free at WordPress.org. For more features, you can purchase Ajax Search Pro for $36 from CodeCanyon, which includes lifetime updates. The premium version is well-rated, with 14,000+ sales and a 4.82-star rating on over 790 reviews.

4. Elasticsearch

Elasticsearch isn’t a WordPress search plugin itself – it’s an open-source search engine that you can integrate into any type of website. However, there are multiple plugins that help you integrate Elasticsearch into WordPress to power your WordPress search.

Elasticsearch makes a really good option for high-traffic, high-content WordPress sites because it separates your search index from your WordPress site. This will reduce the number of database queries that your site needs to make, which improves performance. This is a big part of why some managed WordPress hosts, like Kinsta, offer Elasticsearch add-ons.

Beyond that, Elasticsearch also helps you generate better, more accurate search results. It lets you include more content in your search results and also customize the algorithm. You’ll also get other useful features such as fuzzy matching, faceted search, and real-time automatic suggestions.

Unfortunately, using Elasticsearch can be a little complicated, so it might not be the best option for beginners.

First, you’ll need to set up the Elasticsearch software yourself, which is kind of like setting up a WordPress install. You can either self-host it (because it’s open-source) or you can pay ElasticPress to host it for you (which can be a little expensive). If you’re using Cloudways, Cloudways also has a tool to help you install Elasticsearch and some other WordPress hosts (like Kinsta) offer Elasticsearch options.

Once you have your Elasticsearch install, you can integrate it with your WordPress site using the free ElasticPress plugin at WordPress.org.

Jetpack Search is a paid WordPress search service from Automattic, the same team behind WordPress.com, WooCommerce, and the standalone Jetpack plugin.

One of the biggest advantages of Jetpack Search is that it does all of the processing and search indexing on Automattic’s servers. If you have a high-traffic site and/or a site with lots of content, this will greatly reduce the load on your server, which can improve your performance. 

Beyond that, Jetpack Search completely replaces your site’s native search feature with its own search overlay that supports various user-friendly features:

  • Real-time search suggestions
  • Search query highlighting in results
  • Sort/filter options in the search results

As for the search algorithm itself, Jetpack Search is actually based on Elasticsearch (the same technology that I shared above). It features various improvements like:

  • Spelling corrections
  • Fuzzy matching
  • Prioritized search results based on site stats – that is, it can rank more popular content higher

You can learn more about the technology here. And if you want to see Jetpack Search in action, you can use the search function in the top-right corner at CSS-Tricks.

Unfortunately, Jetpack Search only comes in a paid version. You’ll pay a monthly fee based on how much content your site has. The plans start at $5 per month for up to 100 search records (e.g. 100 blog posts) and go up from there.

Lastly, there’s Ivory Search, which is another popular search plugin at WordPress.org that comes in both a free and paid version. It used to be known as Add to Search Menu, but the developer changed the name to Ivory Search.

It shares a lot of similarities with SearchWP and Relevanssi. That is, the main feature is that it lets you search in “more” content including:

  • Custom post types
  • Custom fields
  • User comments
  • File attachments
  • Categories, tags, and custom taxonomies

You also get more detailed controls. For example, you can exclude certain content from search or only search password-protected posts.

Other useful features include:

  • Fuzzy matching (helps generate better results)
  • Keyword stemming (also helps generate better results)
  • Different options for sorting the search results

Ivory Search also includes a few enhancements to the front-end search form. For example, you can add an Ajax live search to your form. It also includes a search form customizer that lets you customize the colors and text.

The free version of Ivory Search is available at WordPress.org. The paid version starts at just $20 per year.

Improve WordPress Search Today

By default, the WordPress search feature is very limited. If you want to make it easier for people to search and discover content on your site, you need to use a WordPress search plugin.

So – which plugin is right for you?

Well, if you just want an easy way to make your WordPress search more “complete”, I would recommend starting with Relevanssi (freemium), SearchWP (paid), or Ivory Search (freemium).

On the other hand, if you want to enhance your front-end search with real-time Ajax search suggestions, you might want to start with Ajax Search Lite/Pro.

Finally, if you have a high-traffic site with lots of content, Elasticsearch is a great way to reduce the load on your server while also serving up better search results. The easiest way to benefit from Elasticsearch is to use Jetpack Search. Or, if you’re more of a technical person, you can also set up Elasticsearch yourself and use the free ElasticPress plugin.

Do let me know how you have enhanced your WordPress search? Are you also monitoring how users are using search feature of your WordPress website?