Because we often use the WP Search with Algolia plugin on client projects, we make it a continuing education priority for all of our engineers. That includes me! Here’s what I want you to know about WP Search with Algolia.

First, what is Algolia?

Algolia is a site search platform that gives your website visitors a fast and useful search experience. It allows your site’s visitors to find information through search suggestions and to refine their search using facets, which are filters that allow users to narrow down their search results quickly.

Example facets of an eCommerce store might be brand, price, color, etc. It uses a powerful and fast algorithm that returns results quickly. Algolia’s analytics make it easy for site owners to refine search rankings and see how people are using search.

Algolia’s technology allows developers to interact with its API to build robust search functionality. It also provides tools for building and customizing search experiences, through analytics, search ranking, and personalization. 

Why should my site use Algolia instead of the native WordPress search?

WordPress’s out-of-the-box search is a simple keyword search across all content on your site, output into a single, long list with no way to filter or prioritize results. On larger sites with a lot of content, it can be slow.

Algolia improves your website’s search functionality in a number of ways:

1. Speed: Algolia’s search is faster and more accurate than WordPress’s built-in search, which can be slow and return irrelevant results.
2. Customization: Algolia allows for more customization of the search experience, with the ability to sort, filter, and display results in various ways. Content can also be weighted, so specific types of content are always shown first. For example, events can be displayed on an event-focused website before pages or blog posts.
3. Scalability: Algolia can handle large numbers of search queries and a large amount of data, which is good for websites with a large amount of content.
4. Analytics: Algolia provides analytics and search insights that can help website owners understand how users interact with their search and website more generally.

WP Search with Algolia

Now that you know why Algolia should replace your WordPress website’s default search engine, how do you integrate Algolia into your WordPress website? WebDevStudios’ WP Search for Algolia plugin is the best plugin to integrate Algolia search engine into your website.

Originally developed by Algolia, we forked the plugin once they ceased development, and have been developing and maintaining it since. It allows you to index your WordPress content and use Algolia’s powerful search engine to provide your users a fast and accurate search experience.

WP Search with Algolia is easy to set up and manage in any theme without having to touch your theme’s files or know how to use the API. To get started, all you need is an Algolia account and API key.

Key features of the WP Search for Algolia plugin include:

• Indexing of posts, pages, and custom post types
• Automatic syncing of the index with your website’s content
• Customizable search results template
• Typo-tolerance and synonyms support
• Faceted search
• Search analytics and insights

Customizing WP Search with Algolia

Out of the box, WP Search with Algolia works great to improve your website’s search performance. The ability to customize search using Algolia’s API makes the plugin more powerful.

WebDevStudios used Algolia to implement an eCommerce search for a recent client that bridged the gap between two data sources. The client pushed a lot of product data into Algolia from a non-WordPress source. Rather than forcing the data to flow through WordPress, our website design and development team adapted and customized the search on the WordPress side and we were able to provide a seamless search experience for their customers.

On another client site, we used WP Search with Algolia to improve the search results page by separating content types—products and pages—into two separate pages. Separating the two types of content allows users to drill down their product searches by filtering via facets, which isn’t needed for on-page search results.

Try the plugin and let us know how your WordPress website search improved!

The post WP Search with Algolia WordPress Plugin Benefits appeared first on WebDevStudios.

In this blog post, we’ll explore what gamification is and take a look at some gamification examples around the web. Then we’ll check out some interesting gamification statistics and brainstorm some ideas for adding gamification to your website.

What Is Gamification?

Gamification is the process of adding game-like elements to applications in an attempt to increase engagement by motivating users. Gamification can be found in many settings and industries, such as business, education, fitness, software, apps, and website technology.

In business, elements of games can give people a sense of fun in an environment that would otherwise feel like work. On your website, gamification is a deliberate strategy to increase user engagement, and it can also enhance motivation and loyalty.

Elements of Gamification

You can gamify a non-game system, such as your website or app, by using a variety of components. Here are some of the most common.

Points

The basic attribute of any game or gamified application is the collection of points. They are awarded for activity on your website and will add up as the user takes action across the system.

This gives the user a direct and simple method to see their progress. Points are allocated in different ways, such as for experience or reputation. They add up over time, contribute toward achievements, or are redeemed for rewards.

Badges and Achievements

Badges and achievements usually go hand-in-hand, with the user earning a badge for achieving specific milestones within the system. In video games, achievements are awarded for completing long-term or difficult tasks.

As elements of gamification, achievements are awarded once a user has reached a certain number of points or completed a series of activities. The user earns a badge that is displayed on their profile.

Leaderboards and Competitions

In gamified systems that feature leaderboards, users compete against each other and are ranked according to points accrued or achievements. Apps might also create competitions between users in which people will compete for the highest score in a set time frame.

Scores are displayed publicly so that users can compare their progress against their competitors. Competitions are arranged in teams or played by individual users.

Unlocks

Both points and achievements are used to unlock new game elements once the user has reached a certain threshold. For example, once users attain a certain number of points, they might be awarded new privileges within the system. Or, having completed certain achievements, the user might be presented with new challenges.

Progress and Completeness Bars

Progress bars and completeness trackers are ways to encourage users to complete all steps in a particular series. For example, this is commonly used to help people fill out all pieces of their user profiles.

Adding a profile photo, location, and other details will move the progress bar toward completion. Completeness bars can also be used to guide customers along the process of requesting a quote, completing a purchase, or filling out a long form.

Random Chance

A traditional form of gamification that’s easy to implement is random chance. This has been used at work, school, and home for centuries.

People use chore wheels to assign chores to family members by spinning a wheel. Drawing numbers out of a hat is another common way to use the random chance to make decisions.

Even though it’s random, it can help people feel more motivated to participate in tasks because they know they weren’t singled out for the chore and that it will change next time. Many card games, board games, and video games rely heavily on random chance to progress game elements.

Gamification Examples

Gamification can be found around the web in a variety of ways that you are probably already interacting with, but might not have noticed.

Social Media

Reddit is a great example of a social media website/app that uses different elements of gamification:

• Users gain “Karma” points, which are awarded by other people in the form of upvotes on their posts or comments.
• Users can give awards to each other, which are displayed on an individual post and in the user’s profile with icons and titles.
• Users gain trophies, which are similar to badges, for certain milestones like numbers of years on the app or for taking actions like verifying their email address.

Stack Overflow is a message forum website where people can ask questions related to programming and development. The platform uses these gamification techniques:

• Users gain points when other people upvote their questions and answers. Some activities award larger amounts of points, such as when a user’s answer is marked as “accepted.”
• Then, these points are shown as reputation earned, and indicate how helpful a user has been in answering questions.
• As users gain reputation points, new privileges are unlocked, including the ability to ask questions. Users must first be helpful before they can receive help.
• Badges are awarded at increasing levels of reputation.

Social media websites and apps like Twitter, Facebook, Instagram, and TikTok are gamified with likes and shares. Those add up by post, instead of contributing to a user’s overall score, and they motivate people to create more content and improve their posts to garner more likes and shares.

Education and Training

Treehouse is a website that offers online courses on web development and related coding topics. It’s a fantastic example of gamification in an educational setting with points, badges, and learning tracks.

• Learners gain points when taking important actions on the platform, such as completing quizzes, doing code challenges, finishing courses, and participating in forums.
• When users gain achievements they earn a badge that’s displayed on their profile.
• Courses are arranged into tracks, which are collections of courses on a related topic that move a learner from beginner to advanced skill level. These keep students motivated as they see their progression through the track.

Health and Fitness

Fitness trackers like Fitbit and Apple Watch include a lot of gamification to make workouts more motivating and fun. For example, Fitbit users aim for goals like the number of steps per day, resting heart rate, pounds lost, and the number of minutes exercised per week.

• Data from workouts is tracked and displayed on a dashboard.
• A number of steps is counted and displayed throughout the day.
• Weight loss or maintenance is tracked and displayed graphically.
• Users earn badges for reaching specific goals.

Fitbit also includes virtual events and competitions. Users can compete against each other in daily or weekly goals, but they can also participate in “Fitbit Adventures” where they use their real-life steps to follow virtual trails, reach destinations, and collect hidden items.

Work and Business

Gamification can be built into our daily working lives. Here at WebDevStudios, we use a Slack integration called HeyTaco that helps employees build relationships and give each other kudos for a job well done.

HeyTaco works by allowing users to give each other taco emojis in Slack or Microsoft Teams. They’re typically used to say thank you, good job, or congratulations. It goes a long way toward building camaraderie, especially in a remote work environment.

HeyTaco includes a few elements of gamification:

• Tacos add up like points.
• A monthly leaderboard ranks employees based on how many tacos they received that month.
• Tacos are exchanged for real-world rewards, set by the organization, such as gift cards or extra time off.

A 2019 study found that 89% of employees said that gamification made them feel more productive and 88% said it made them feel happier at work. Eighty-nine percent also said that when a task is gamified, they feel competitive and eager to complete it. (Source)

LinkedIn even has some gamification in the form of skill badges. Users take skill assessments, and if they score in the top 30%, they earn a badge that will display on their profile. The promise of a reward for a high score makes the skill assessments feel more important to the user, and it’s also useful information for potential employers.

Gaming

Gamification is even found within gaming systems themselves. For example, Xbox Game Pass members earn Microsoft Rewards points by playing games that are included with the Xbox Game Pass library.

• Players earn points by playing Game Pass games daily and weekly.
• The points are tracked within the user’s profile in the Xbox console and mobile app.
• These points are redeemable for rewards like Xbox gift cards, in-game content, movies, and more.

Gold Stars

Other forms of basic gamification exist in our daily lives. In elementary school, teachers sometimes award gold stars for good behavior or exceptional grades.

The stars are shown on a board next to each student’s name. This gamification takes the form of both points and a leaderboard and motivates kids to do well in school.

Website and App Gamification Statistics

Most website owners would like to improve certain stats on their website, like the bounce rate, time spent on the site, and the number of pages viewed. Higher user engagement with a website should lead to an increase in conversions and revenue.

• Gamifying your website can boost browsing time by up to 30%. (Source)
• A fully engaged customer tends to net an average of 23% premium in terms of profitability. Actively disengaged customers represent a 13% discount. (Source)
• Gamifying a website boosts comments by 13%, social sharing by 22%, and content discovery by 68%. (Source)
• Gamifying a website can lead to a 100-150% increase in engagement metrics including unique views, page views, community activities, and time on site. (Source)

These companies experienced measurable success with their website and app engagement rates due to gamification:

• Duolingo used gamification in language learning efforts to help grow its user base to more than 300 million. (Source)
• After introducing gamification to its mobile app, Foursquare expanded by 10 times within a five-year period. (Source)
• In 2018, Roblox launched its Roblox Education program, which helped increase the number of active Roblox users to over 90 million in a year. (Source)
• Autodesk used gamification to increase its trail usage rate by 40%, with conversion rates increasing by 15%. (Source)
• The logistics company Kenco saw a 45% increase in sales after using a sales gamification tool. (Source)
• Ford Motors increased sales by more than $8 million and boosted Facebook likes by 600% with gamified content. (Source)
• Coop saw an 39% average increase in spend amongst customers who stayed engaged with its gamification system long enough to collect a prize. (Source)
• Masai experienced a 50% cost-per-lead reduction. (Source)
• Samsung Nation increased its customer product reviews by 500% and site visits by 66%. (Source)
• Teleflora increased traffic by 105% and conversion rates by 92%. (Source)
• IBM has shown a 299% increase in comments posted. (Source)
• Texas bank Extraco tested a gamified process that taught clients about its offers and benefits, which led to a rise in conversion rate, from 2% to 14%, and raised customer acquisitions by 700%. (Source)

Ideas for Gamification of Your Website

Gamification is easy to apply to most websites with a little creativity and web development. Start with these ideas.

Gamification of eCommerce Websites

eCommerce websites are well positioned to take advantage of gamification since they already have a user database that can be expanded upon to include gamification elements like points and discounts.

Points and Progress Bars

A progress bar, shown prominently on the website, can track the customer’s number of purchases. The progress bar fills based on point accumulation for every purchase and amount spent.

Badge Achievements

Specific call-to-actions (CTAs) earn users badges and achievements. These CTAs are commonly used.

• Follow the company on social media
• Share an invitation to the website with a friend
• Use a coupon
• Sign up for the email list
• The customer’s first order
• Order number milestones such as 10 orders, 20 orders, etc.

Spin a Wheel

Displaying a wheel with various prizes such as discounts or free shipping is enticing. The user spins the wheel, which lands on a prize and adds the reward to their account.

Product Recommender

Product recommenders are like quizzes that allow the user to find the products they’re looking for. The user selects from product attributes and the results of the quiz show the customers which of the store’s products meet their needs.

Checkout Progress Bar

Users stay on track by monitoring the progress bar during checkout. It shows the stages of the checkout, such as shipping, billing, and review. This lets the user know what to expect during checkout and where they are within the process.

Gamification of Business and Professional Service Websites

Professional service websites include businesses like creative studios, web development agencies, marketing agencies, health industry businesses (clinics, doctors, dentists), lawyers, accountants, insurance, cleaning services, home repair services, and more. These businesses sell services instead of products, but many of the gamification methods for eCommerce apply here as well.

Product Recommender

If your business offers different levels of service, such as different packages, a product recommender is an interactive way to let clients discover which of your packages is best for them. The user selects from package attributes and the results of the quiz show them which of the services best meets their needs.

Completeness Tracker

If your website includes a database of user accounts, it can be beneficial to encourage your clients to fill out their profile. A completeness tracker can motivate them to input data like their location, times available for meetings/appointments, user photos, budget range, and preferred types of services. You can request the data that’s important to your business.

Achievements and Badges

The completion of action items can result in achievement levels and badges. Here are some common examples.

• Following the company on social media
• Sharing an invitation to the company with a friend
• Signing up for the email list
• Completing a large project with the company
• Keeping up with recommended activities (like six-month dental checkups or annual home maintenance)

Gamification of SaaS Websites

Software-as-a-Service websites can take advantage of gamification in training and sales. Some of the top SaaS companies include Salesforce, HubSpot, G Suite, Microsoft Office 365, Amazon Web Services, and Dropbox.

In addition to the sales and purchasing ideas mentioned earlier, SaaS websites can make great use of gamification in educational training for their product.

Some education and training ideas are:

• Award the user achievements and badges for watching training videos.
• Give the user different amounts of points for completing different tasks. Some activities might award more points, such as 10 for watching a video, and 20 for passing a quiz.
• Guide the user through the process of setting up the software for their business with a completion tracker.
• Award the user a downloadable certificate when they have successfully passed a course.

Gamification of News, Review, Blog, and Informational Websites

Informational websites include news websites, product review websites, personal blogs, professional/industry blogs, or advice columns. Text articles mostly make up the composition of these sites, which lack complex features like eCommerce.

While these websites might not directly sell products, they can still benefit from some of the same elements of gamification. Think about ways to include these elements:

• Encourage website visitors to sign up for your email list with a spinning wheel of prizes. Prizes can be anything that makes sense for the topic you write about.
• If you review products, you can treat them like any e-commerce site would, and offer a recommendation quiz that will help users find the content they’re looking for.
• Include a “Surprise me!” button that sends users to a random article.
• Run giveaway contests for special content like books written by the authors of the website.
• Add interaction that’s similar to social media, such as a robust comments feature with upvotes and downvotes. If your site has a user database, you could rank commenters by the number of comments.
• Include interactive elements that give the reader something to do. Buzzfeed quizzes are a great example of this.
• Embed social media posts, especially from your readers, to build a community and take advantage of social media’s built-in gamification of likes and shares.

Conclusion

Gamification is a compelling way to add interaction and fun to your website. Moreover, it can enhance websites in any industry by using game-like elements such as points, badges, and progress bars.

Statistics show that gamification improves user engagement, motivation, and ultimately revenue. That said, it’s worth gamifying your website to cash in on these benefits.

The post Gamification of Your Website appeared first on WebDevStudios.

Previously, this series covered WP Search with Algolia settings and index management (Part 1) and template customization (Part 2). If you haven’t read either, it’s worth going back to them since today’s blog post builds on the code provided in those.

Let’s begin.

Facet(s) configuration

Algolia comes with many useful widgets and facets for integrating InstantSearch with your business or website, allowing you to create robust UI for your users. Find quick demos of all of them over at their Algolia Showcase.

By default, WP Search with Algolia (WPSwA) makes use of the following widgets:

• Searchbox: The user types in a query
• Stats: General statistics regarding the current query
• Hits: The results for the current query
• Pagination: Navigation to move through any paged results
• Menu: General list menu
• Hierarchical menu: Menu that will nest items based on parent/child hierarchy
• Refinement list: List of content types that can further refine results
• poweredBy: A touch of branding when applicable

You could also add some extra useful widgets like a “sort by” dropdown, a “clear all” toggle to clear currently applied refinements, numeric menus, range inputs or sliders if you have some number-based attributes, a rating menu, and various other types. There is plenty to work with to fit your needs.

For the purposes of our integration with WooCommerce, we will focus primarily on the refinement list widget for finding just the products we want.

One of the WooCommerce attribute types I have in my demo site is “color.” This has resulted in a product attribute of pa_color and right now it has three terms in it.

To get this added as a widget we can further refine results with, we need to get some markup in our instantsearch.php file to render the widget. To start, we will add this below the Users section of the sidebar area. For our example, we’re using facet-color for our ID which we will need in a moment. You can use whatever ID value you want though.

<div>
	<h3 class="widgettitle"><?php esc_html_e( 'Users', 'wp-search-with-algolia' ); ?></h3>
	<section class="ais-facets" id="facet-users"></section>
</div>
<div>
	<h3 class="widgettitle"><?php esc_html_e( 'Color', 'wp-search-with-algolia' ); ?></h3>
	<section class="ais-facets" id="facet-color"></section>
</div>

Next, we need to configure the widget itself. This will go in the search.addWidgets([ ... ]) block of our template file.

search.addWidgets([

	...
	/* Search powered-by widget */
	instantsearch.widgets.poweredBy({
		container: '#algolia-powered-by'
	}),
	
	instantsearch.widgets.refinementList({
		container : '#facet-color',
		attribute : 'taxonomies.pa_color',
		operator  : 'or',
		limit     : 5,
		sortBy    : ['isRefined:desc', 'count:desc', 'name:asc'],
		showMore  : true,
	}),
]);

Here we will need the ID that you used with the widget above. We want to specify it in the container property, so that Algolia can find the div and render the refinement list widget.

Next, we need to tell the widget which indexed attribute we want to reference here. That is where taxonomies.pa_color comes in. Specifying this attribute informs Algolia to fetch all the indexed terms from the pa_color attribute, that match the determined results for a given search.

By default, WPSwA will include WooCommerce’s product_cat, product_tag, and various created attributes assigned to your products, so these should be available as soon as you index the product WooCommerce post type.

The operator property can be used to indicate which attributes should be associated with an item to be listed when refining. In this case, we use “or” to say “the product must have this attribute OR this attribute,” meaning any of the checked attributes.

If you set this value to “and,” then it turns to “the product must have this attribute AND this attribute” to be shown, meaning all of the checked attributes.

The sortBy tells in which order the refinement list items should be listed. By default, WPSwA puts “isRefined” items first, which would be if an item is checked, that item moves to the top of the list.

Next, it orders them by item with the most results available first, and then any with matching amounts shown alphabetically. Toy around with the sort order and see which display type you prefer most.

Lastly is the limit and showMore properties. If you specify a limit without showMore or showMore set to false, then Algolia will only return the amount specified by limit.

However, if you set showMore to be true, then the limit will be how many it shows before offering a button to select to show the rest of the found attribute items. You can read about all the refinementList properties in the refinementList documentation.

With these settings in place for the widget, we should see something like this below.

Most of the default widget sections in the WPSwA template and instantsearch.php don’t make sense for our purposes. You can keep them if you want, but I’m going to remove them for the rest of this article.

This will result in our facets <aside> looking like this below (about lines 27 through 32), ready for more additions as needed for widgets that make sense.

<aside id="ais-facets">
	<div>
		<h3 class="widgettitle"><?php esc_html_e( 'Color', 'wp-search-with-algolia' ); ?></h3>
		<section class="ais-facets" id="facet-color"></section>
	</div>
</aside>

This will also result in a reduction of our search.addWidgets([ ... ]) section as below. I have concatenated some parts within longer widget sections for brevity.

search.addWidgets([
	/* Search box widget */
	instantsearch.widgets.searchBox({
		container: '#algolia-search-box',
		placeholder: 'Search for...',
		showReset: false,
		showSubmit: false,
		showLoadingIndicator: false,
	}),

	/* Stats widget */
	instantsearch.widgets.stats({
		container: '#algolia-stats'
	}),

	/* Hits widget */
	instantsearch.widgets.hits({
		container: '#algolia-hits',
		hitsPerPage: 10,
		templates: {
			empty: 'No results were found for "<strong>{{query}}</strong>".',
			item: wp.template('instantsearch-hit')
		},
		transformData: {
			item: function (hit) {
				...
			}
		}
	}),

	/* Pagination widget */
	instantsearch.widgets.pagination({
		container: '#algolia-pagination'
	}),

	/* Search powered-by widget */
	instantsearch.widgets.poweredBy({
		container: '#algolia-powered-by'
	}),

	instantsearch.widgets.refinementList({
		container : '#facet-color',
		attribute : 'taxonomies.pa_color',
		operator  : 'or',
		limit     : 5,
		sortBy    : ['isRefined:desc', 'count:desc', 'name:asc'],
		showMore  : true,
	}),
]);

You can add as few or as many extra widgets as you want to be based on the needs of your store. Just make sure to remember to create the container markup so that Algolia can render the widget, and accurately specify the attribute to use for the given facet.

For a quick extra attribute demo, I’m going to add one more named “Size,” using the same steps above, resulting in these two additions. This time though, I have changed the sortBy to have just “isRefined” first, followed by the name in ascending order. I have removed the sort by count.

<aside id="ais-facets">
	<div>
		<h3 class="widgettitle"><?php esc_html_e( 'Color', 'wp-search-with-algolia' ); ?></h3>
		<section class="ais-facets" id="facet-color"></section>
	</div>

	<div>
		<h3 class="widgettitle"><?php esc_html_e( 'Size', 'wp-search-with-algolia' ); ?></h3>
		<section class="ais-facets" id="facet-size"></section>
	</div>
</aside>

instantsearch.widgets.refinementList({
	container : '#facet-color',
	attribute : 'taxonomies.pa_color',
	operator  : 'or',
	limit     : 5,
	sortBy    : ['isRefined:desc', 'count:desc', 'name:asc'],
	showMore  : true,
}),

instantsearch.widgets.refinementList({
	container: '#facet-size',
	attribute: 'taxonomies.pa_size',
	operator : 'or',
	limit    : 5,
	sortBy   : ['isRefined:desc', 'name:asc'],
	showMore : true,
}),

Replacing Shop and Product Category Archives with Algolia

This section of this tutorial on WP Search with Algolia InstantSearch widget and facet customization may be our greatest trick! Ready?

We are going to replace both the shop page as well as product category archives, i.e. /product-category/inflatable-toys/, with our overall Algolia Instantsearch UI.

With the shop landing page, we will present everything as if no specific query has been made yet, while with the product category archive will be limited to the products that would be originally listed there.

Loading Necessary Scripts and Styles

To accomplish this, we must first create a couple of template files and also enqueue some assets. First, we will get our assets loaded. This will help make sure we have the scripts and styles needed.

function woo_product_cat_algolia_assets() {
	if ( ! is_product_category() && ! is_shop() ) {
		return;
	}

	wp_enqueue_script( 'algolia-instantsearch' );
	wp_enqueue_style( 'algolia-autocomplete' );
	wp_enqueue_style( 'algolia-instantsearch' );
}
add_action( 'wp_enqueue_scripts', 'woo_product_cat_algolia_assets' );

Here we’re checking if we’re on a product category or the shop page, and if not, just return early. If we are, then we enqueue our InstantSearch JavaScript and CSS, as well as our autocomplete CSS.

Template Overrides

Next, we need to create the following files in our theme:

• archive-product.php
• taxonomy-product-cat.php

Since these file names follow the WordPress template hierarchy, they can be dropped directly into the theme folder.

For my example, they will be twentytwenty/archive-product.php and twentytwenty/taxonomy-product-cat.php. Inside both files, we just need to load our instantsearch.php file instead of what would be loaded by WooCommerce.

Below should be the complete template files needed to work for both.

<?php

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

require_once Algolia_Template_Utils::locate_template( 'instantsearch.php' );

If all went well, then visiting your shop landing page and any product category should now be showing Algolia-based listings.

Product category customization.

Before we can call ourselves done, we need to configure the product categories just a little bit. We want these to be limited to just products within that category.

To accomplish this part, we need to get some WordPress query details added to our inline scripts. We are going to add to our woo_product_cat_algolia_assets callback function and determine the current product category.

function woo_product_cat_algolia_assets() {
	if ( ! is_product_category() && ! is_shop() ) {
		return;
	}

	wp_enqueue_script( 'algolia-instantsearch' );
	wp_enqueue_style( 'algolia-autocomplete' );
	wp_enqueue_style( 'algolia-instantsearch' );
	
	global $wp_query;
	
	if ( empty( $wp_query->query['product_cat'] ) ) {
		return;
	}

	$term_parts = explode( '/', $wp_query->query['product_cat'] );
	$results['terms'] = [];
	foreach( $term_parts as $part ) {
		$term = get_term_by( 'slug', $part, 'product_cat' );
		$results['terms'][] = $term->name;
	}
	wp_add_inline_script( 'algolia-instantsearch', 'const woo_algolia_queried_terms = '' . json_encode( $results ) . ''; ' );
}
add_action( 'wp_enqueue_scripts', 'woo_product_cat_algolia_assets' );

With this added code, we are grabbing the current global $wp_query object and using PHP’s explode function on the product_cat portion of the query arguments.

This will get us an array of product categories for the current query. We then iterate over those categories and get term objects for each, before storing the term name values as part of our $results array.

Finally, we store that $results variable as JSON on a JavaScript constant to be used in a moment. This way we can access the product category information in our InstantSearch configuration code.

Back in our instantsearch.php file, we need to add this alongside our widgets configuration. We are grabbing that available woo_algolia_queried_terms constant that we just created, and parsing it as JSON data.

Once we have the identified terms from the current query, we add it to the Algolia configured widget and specify it as a default for the filters. This way it’s only showing items from the chosen category.

<?php if ( is_product_category() ) { ?>
	let woo_term_data = JSON.parse( woo_algolia_queried_terms );
	let item_parts = [];
	for (const item of woo_term_data.terms) {
		item_parts.push('taxonomies.product_cat:"' + item + '"');
	}
	
	let woo_query = item_parts.join(' AND ');
	search.addWidgets([
		instantsearch.widgets.configure({
			filters: woo_query,
		}),
	]);
<?php } ?>

You can read more about the configure widget over at Algolia Configure widget documentation.

Conclusion

This completes this tutorial on WP Search with Algolia InstantSearch widget and facet customization. We’ve covered a lot over these past few posts.

Hopefully, these tutorials give you a good idea of what is capable with WP Search with Algolia and WooCommerce, out of the box and with a touch of configuration and customization.

This is definitely not the end-all-be-all of the capabilities, and there is plenty of room for more. It’s all a matter of what data you put in your Algolia indexes, and how you want to make use of it.

When you need a team to integrate the power of Algolia search with your WordPress website, contact WebDevStudios.

Complete Code

As promised, below you can download a zip file that has the final code for our WP Search with Algolia InstantSearch widget and facet customizations, as well as all the topics covered in the previous posts. These are ready to install as a plugin.

You will need to copy the two template files into your active theme and place them in a folder named “algolia” for those to be detected. The rest of the code will work as a plugin named “WooCommerce Algolia.”

WooCommerce-Algolia.zip

The post Integrating WP Search with Algolia: InstantSearch Widget and Facet Customization appeared first on WebDevStudios.

I also covered the results to be shown for both autocomplete suggestions and instant search, among some other elements. It’s worth reading if you haven’t yet.

Today, however, we are going to focus on template customization for WooCommerce. Specifically, I am referring to the display of your Algolia data on your WordPress website and how to customize the display of returned results.

We will be using the product data discussed in part one of this series.

WP Search with Algolia: Autocomplete and Instantsearch Template Files

When you download WP Search with Algolia, it comes with a couple of template files for both autocomplete and instantsearch. These make for solid defaults with minimal display, but we need to make them more robust and fit our needs.

In order to customize these files safely, we need to copy the autocomplete.php and instantsearch.php files out of /plugins/wp-search-with-algolia/templates/ and into a folder named algolia in your currently active theme.

The plugin will automatically detect their existence from the theme and use those copies instead of the prepackaged versions. This allows you to customize and still update the plugin without losing customization.

Autocomplete

Below is a screenshot of the default autocomplete search when using the TwentyTwenty theme. Here, we can see a heading mentioning the content types being shown, followed by five different products matching our search term.

Each result includes a thumbnail for their product image, product name, and product description.

We are going to change the listings to include both the price and SKU number next to the product name, and use the short description if available, or else the current description.

For this, we need to edit the autocomplete.php template file, specifically, the section found at Autocomplete.php line 21-33.

Here, we will have a JavaScript variable data that will hold information for each suggestion hit, meaning an individual product. Now, we start making use of all that information we indexed.

The bundled template files make use of the wp.template functionality that ships with WordPress. It uses underscore.js for its templating, and has a mustache-like syntax. Luke Woodward has a great general tutorial for making use of this on your own.

<div class="suggestion-post-attributes">
	<span class="suggestion-post-title">{{{ data._highlightResult.post_title.value }}} - {{ data.sku }} - {{ data.price }}</span>
	<# if ( data.short_desc ) { #>
		<span class="suggestion-post-content">{{ data.short_desc }}</span>
	<# } else if ( data._snippetResult['content'] ) { #>
		<span class="suggestion-post-content">{{{ data._snippetResult['content'].value }}}</span>
	<# } #>
</div>

In the snippet above, I have amended the markup for the “suggestion-post-attributes” wrapper div, starting on line 26, to include a few more things. These values are all on the top level of your product index when looking at the item in the Algolia dashboard.

First, we output the SKU property, followed by the price property. Both are included in the span wrapping of the original post title value, which is getting some extra highlighting from Algolia.

Next, we can use some standard “if statement” logic on the properties to check if we have a value before acting. Here, I have checked to see if we have a short description to show, otherwise it falls back to the original snippet version coming from the full product description.

Below is a screenshot of the final result.

Other areas of the autocomplete.php template file has spots for customizing details like the autocomplete header, term suggestions, user suggestions, autocomplete footer, and no results template. We are not going to worry about those at the moment.

Towards the very bottom is the JavaScript that is powering everything. For the sake of this post, I won’t be going into details there. What we’ve been concerned about is the display of data coming back from a given query.

Instantsearch

Now that we’ve added some content to the autocomplete suggestions, we will add the same information to our Algolia hits output before we click into a specific result.

For this portion, we need to edit the instantsearch.php template file.

The section for this one can be found at Instantsearch.php line 48-68. We are going to insert a new paragraph tag above the excerpt, to conditionally show both the SKU and the current price if we have a value.

<h2><a class="ais-hits--title-link" title="{{ data.post_title }}" href="{{ data.permalink }}">{{{ data._highlightResult.post_title.value }}}</a></h2>
<# if ( data.sku || data.price ) { #>
	<# if ( data.sku ) { #>
		<span class="is-hit-sku">SKU: {{data.sku}}</span> |
	<# } #>

	<# if ( data.price ) { #>
		<span class="is-hit-price">Price: {{data.price}}</span>
	<# } #>
<# } #>

<# if ( data.taxonomies.product_cat ) { #>
	{{{data.taxonomies.product_cat}}}
<# } #>
<div class="excerpt">

To help keep our markup clean, we are only going to output anything if we have either a SKU or a price value. Once we know we have something, we output some span markup for each data item we have.

For easier styling, we have included some custom classes. To top off our instantsearch customizations, we’re going to output the product category for each.

Template Summary

These template edit examples are definitely minor but show how to take a given Algolia hit and modify the output for each. The data object variable is going to be the key here.

As a reminder, when viewing your index in the Algolia Dashboard and index explorer, each part of a given object is available via that data variable. Some parts may be top level like data.post_title, while others may be a bit more nested like you see in the images. For example, data.images.thumbnail found in use in the template files, but not as part of our code examples above.

Our journey through integrating WP Search with Algolia is not complete. Coming up next in this series, I’ll discuss facet widget customization. Be sure to come back to this blog.

The post Integrating WP Search with Algolia: Autocomplete and Instantsearch Customization appeared first on WebDevStudios.

However, our stance has been that due to complexities with WooCommerce, we are not planning to add any official support to the free plugin WP Search with Algolia. That does not mean there is zero ability for the plugins to work together; it’s just that integration is up to individual site owners to adjust to their own needs.

This has left a proverbial hole in our free Algolia support. Going into the end of 2021 and the beginning of 2022, I was assigned tasks regarding integrating WPSwA with a WooCommerce-based website.

At the time, I was still saying, “We don’t have official support for WooCommerce.” Yet, I was chomping at the bit for this opportunity and hands-on experience.

There were definitely hiccups and interesting challenges along the way, but I feel the gained knowledge has proved invaluable. I want to discuss with you here how I handled various parts of what I learned, including WP Search with Algolia’s settings and configurations for WooCommerce.

At the time of this writing, we are using version 2.2.0 of the plugin, available on both WordPress.org and GitHub. Also, for these examples, we are focused on simple products in WooCommerce. Other product types will need more exploration and work.

I am covering our overall setup in three parts:

1. Settings and index management with WPSwA
2. Template customization
3. Facet widget customization

Today’s post covers part one only—WP Search with Algolia settings and configurations with WooCommerce.

After all three parts are addressed, we will provide a plugin version holding all the code presented in these blog posts. We encourage modifying this plugin version to meet your own fine-tuned needs For the sake of brevity, I assume you already have an Algolia account and WPSwA setup, including Application IDs and various API keys.

WP Search with Algolia Settings and Index Management for WooCommerce

Settings Management

It is definitely possible to control and manage indices configuration in the Algolia.com dashboard. Those settings are reflected on your website when using search.

WPSwA, on the other hand, is also set up to manage these settings. This is done via code rather than UI, using WordPress’ extensive hooks API. Whenever you see UI or instructions to “Push Settings,” the settings provided via custom code are pushed to your Algolia instance.

Controlling the settings via custom code may sound odd, but it is actually extremely handy. It allows not only version control of the configurations, but also allows for consistently deploying those settings across various indices and between development sites. All you need to do is trigger some UI and everything is configured for you.

We are providing configuration code to help with WooCommerce integration, but if you prefer managing it via the dashboard, remove that code and avoid the “Push Settings” UI.

Index Management

When I say index management, what I mean is managing what information gets pushed when a given product object is updated or removed. Some parts are already handled for you, while others will need manually added and a re-index run.

Not every change around index management requires settings deployment, but does need a re-index of the content. We let you know when each is needed.

For index management, we’re focusing on two indexes specifically. The first one is the posts_product index and the second is the searchable_posts index.

When you enable individual content types on the Autocomplete settings page and click to index that content type, a corresponding table is added to your Algolia instance. In the case of our WooCommerce intent, we want the “Products” row which creates the index of “posts_product.”

The searchable_posts index is a bit more encompassing with less to click. It indexes all of the content types that are considered searchable by WordPress.

If you have registered your own post type before, you may recall the “Show In Search” option. This is the same.

Any time that we’re adding information to the products in our indexes, we use the following two filters available to us in the WPSwA plugin:

algolia_post_product_shared_attributes
algolia_searchable_post_product_shared_attributes

Meanwhile, whenever we’re modifying the settings for the related indices, we use the following filters (also available in the WPSwA plugin):

algolia_posts_product_index_settings
algolia_searchable_posts_index_settings

Note: the final version of supplied code is different compared to isolated snippets, but should have all parts covered by the post in the end.

SKUs

We’re starting with one of the most common questions I’ve seen regarding WooCommerce integration. How do we get a product’s SKU value indexed?

function add_product_data_to_autocomplete_and_instantsearch( $shared_attributes, $post ) {
	$product = wc_get_product( $post );

	if ( ! $product ) {
		return $shared_attributes;
	}

	// We need to make sure the SKU is a part of each index, in order to search by it.
	$shared_attributes['sku'] = $product->get_sku();

	return $shared_attributes;
}
add_filter( 'algolia_post_product_shared_attributes', __NAMESPACE__ . 'add_product_data_to_autocomplete_and_instantsearch', 10, 2 );
add_filter( 'algolia_searchable_post_product_shared_attributes', __NAMESPACE__ . 'add_product_data_to_autocomplete_and_instantsearch', 10, 2 );

First, we hook into the shared attributes data where the attributes to be indexed are set and data included. This hooks in before the final data is sent to Algolia, and is a perfect spot for us to include extra information.

In the code above, we are utilizing the passed-in $post object to retrieve a WooCommerce product object. If we have a found product, we use the get_sku() method to retrieve and set the value in a new “sku” index. Once done, we return the updated $shared_attributes array.

Since we changed what gets indexed on product objects, we need to run a sync on both the Autocomplete and Search pages. Having the SKU on both will be important in a moment.

Adding the Ability to Search by SKU

Next, we need to amend the settings for our posts_product and searchable_posts configurations.

function amend_posts_products_and_searchable_settings( $settings ) {

	$settings['searchableAttributes'] = 'unordered(sku)';

	$settings['disableTypoToleranceOnAttributes'][] = 'sku';
	$settings['disablePrefixOnAttributes'][] = 'sku';

	return $settings;
}
add_filter( 'algolia_posts_product_index_settings', __NAMESPACE__ . 'amend_posts_products_and_searchable_settings' );
add_filter( 'algolia_searchable_posts_index_settings', __NAMESPACE__ . 'amend_posts_products_and_searchable_settings' );

Here, we are adding the “sku” attribute into our list of attributes considered searchable, and telling Algolia they should be unordered.

We are also disabling typo tolerance for the “sku” attribute. This means that a sku of “40025” won’t be included when you typed “40026.”

Lastly, we are also adding the “sku” attribute to the list to disable prefix searching on. That means if you were to type “400,” neither “40025” nor “40026” are considered as a result.

All of this helps ensure that SKUs can be searched exactly, both when showing suggestions in the search bar, as well as with the final results themselves.

Product visibility and availability

Product visibility

Let’s say you’ve gone through the effort to manage your merchandise. Sometimes, you want to remove a product’s catalog visibility on the frontend.

For this, we’re going to mark the product as should NOT be indexed, if its WooCommerce visibility is marked as “hidden” or “catalog” only. We will be making use of these available filters to achieve this.

The filters are passed a boolean value for the current determined status of if it should be indexed or not, and then a post object itself.

algolia_should_index_post
algolia_should_index_searchable_post

function exclude_visibility_and_outofstock_products( $should_index, $post ) {

	if ( false === $should_index ) {
		return $should_index;
	}

	$product = wc_get_product( $post->ID );
	if ( ! $product ) {
		return $should_index;
	}

	$product_visibility = $product->get_catalog_visibility();
	if ( in_array( $product_visibility, [ 'catalog', 'hidden' ] ) ) {
		$should_index = false;
	}

	return $should_index;
}

Here, we return early if it’s already been determined elsewhere that it should not be indexed. Why do extra work?

If the product is still considered indexable, we move to retrieve a product object and check its current visibility value. If that visibility is “hidden” or “catalog,” then we set $should_index to false and return our filtered value.

This post would not be indexed and WPSwA would move on to the next item.

Product Availability

Perhaps you don’t want to show products that are presently out of stock or are on backorder. Users should only see what they can buy now. Using the same function above, we can add a few more checks to potentially prevent the indexing of a given product.

function exclude_visibility_and_outofstock_products( $should_index, $post ) {

...

	$product_visibility = $product->get_catalog_visibility();
	if ( in_array( $product_visibility, [ 'catalog', 'hidden' ] ) ) {
		$should_index = false;
	}

	$stock_status = $product->get_stock_status();
	$statuses_to_retain_indexability = [ 'instock' ];
	if ( ! in_array( $stock_status, $statuses_to_retain_indexability ) ) {
		$should_index = false;
	}

	return $should_index;
}

In this amended code, we are utilizing the $product object to get the stock status. By default, WooCommerce stores either “in stock,” “outofstock,” or “onbackorder.”

For our purposes here, we only want to show items in stock. If the found status is not in our array, set $should_index to false and return the final value.

Bonus points: How could this information be used in conjunction with Yoast SEO content settings?

Extra product information

When it comes to your products, the SKUs don’t have to be the only thing you index. Any detail about the product that you can fetch can be included as part of it’s indexed object.

For the sake of the rest of this post, I’m going to add both the price (with currency symbol) and short description to my products. Don’t forget to re-index!

$product = wc_get_product( $post );

if ( ! $product ) {
return $shared_attributes;
}

...

$currency_symbol = html_entity_decode( get_woocommerce_currency_symbol() );
$shared_attributes['price'] = $currency_symbol . $product->get_price();
$shared_attributes['short_desc'] = $product->get_short_description();

return $shared_attributes;

Conclusion

Whew, we have accomplished a fair amount here. We have successfully integrated WP Search with Algolia’s settings and configurations for WooCommerce. Additionally, we marked some of our attributes as being searchable and added a fair bit of product information to our products in Algolia.

Lastly, we also configured our install to control whether or not a product should even get indexed, based on catalog visibility or current availability. Next time, we will get into how to make use of this information when performing a search and how to customize the display of everything.

If you’re ready to have WP Search with Algolia integrated with specialized settings on your WooCommerce website, contact WebDevStudios.

The post Integrating WP Search with Algolia: Settings and Configurations for WooCommerce appeared first on WebDevStudios.

Today we’re going to take a look at some of the leading SEO plugins and compare them based on five criteria:

• Setup
• Dashboard
• Keyword analysis
• Pricing
• User experience

We’ll compare three of the most popular plugins: Yoast, Rank Math, and SEOPress. By the end of this piece, you’ll know which SEO plugin is right for your website.

Setup

Each of the plugins we’re reviewing has an excellent setup wizard that helps guide the user through the process of getting up and running in just a handful of guided steps. Walking through the setup for each plugin, we discovered a handful of features were either automatically set by the plugin, allowing users to let the plugin handle the heavy lifting while others required a more thorough understanding of SEO and web practices with the ability to handle redirects and import information from other plugins. Let’s take a look at what we found.

Yoast

The easiest configuration of the three, Yoast uses an “SEO Workout” to get you set up quickly. It doesn’t require you to set up things like redirects and setting up an xml sitemap, but collects the basic necessary information and uses default formatting for everything else.

The one downside I found with this setup is that I couldn’t use it on a non-production site, which meant I couldn’t get it installed and set up in my sandbox and had to use my personal site to create this article. In the setup wizard, you will configure:

• Basic sitewide schema data
• Whether or not to index your site
• SEO title templates

Yoast also offers a lot of tips and suggestions which can benefit users who are less familiar with WordPress and SEO in general.

Rank Math

From a user experience standpoint, the Rank Math configuration wizard was clean, modern, and easy to use. It walked me through all the steps necessary with helpful tips and tricks aimed to make setup quick and easy.

You can also add further customization by linking your free Rank Math account. In the setup wizard you will configure:

• Basic schema information
• Google Analytics and Google Search Console integrations
• XML sitemap.
• Other basic settings, like whether to noindex empty category and tag archives.

Options like role managers, 404 error monitoring, redirection, and more detailed schema markup are items you’ll have the option to set up after you complete the initial setup wizard configuration.

SEOPress

Another clean and simple configuration wizard, SEOPress was the only plugin I found that allowed you to import your data from Yoast to skip having to do it all manually. This is really helpful if you’ve been looking for a new SEO plugin but daunted by the monumental task of migrating from Yoast.

There is a very heavy emphasis on upgrading to the paid version of the plugin to the point where some users might find it confusing but you can skip through them without upgrading.

In the setup wizard you will configure:

• Basic sitewide schema data
• Whether or not to index your site
• SEO title templates
• Redirects

All in all, each of the plugins is quick and easy to set up and there’s no really clear preference in this category.

Dashboard

Outside of having a solid on-page SEO user experience, having quick access to the customization options of your SEO plugin is essential to success. All three of the plugins we reviewed had some version of a dashboard that allows you to customize your plugin to better set yourself up for SEO success.

Yoast

The most familiar dashboard of the three, Yoast utilizes a simple series of tabs to house the major components of its plugin including integrations, features, and webmaster tools as well as a quick glance of your site’s overall SEO health and tips and tricks to improve it.

Rank Math

Rank Math has a great dashboard that shows all the available customization modules available and gives a quick explanation of what they do. One of my favorites is the ability to set up a generic preference that will automatically generate on any image used that is missing an alt or title tag. This feature is a really good catch-all when you have content creators who aren’t always able to keep SEO top of mind.

SEOPress

SEOPress has a clean and modern-looking dashboard that lists tips for improving site SEO as well as any current issues. There’s also a nice section for news items to keep you updated with things like improvements from the company.

Keyword Analysis

Each of the plugins uses the same basic concept for their keyword analysis. You enter keyword(s) and you’ll see a score for the keyword and a list of specific tips and whether or not you’ve met them.

The differentiation here lies mainly in the number of keywords you’re allowed on a free version of the plugin versus a paid one.

Yoast

Allows only a single keyword for each piece of content. You can upgrade to Yoast Premium to allow for multiple keyword searches.

Rank Math

Rank Math allows you up to five keywords in their free version.

SEOPress

Much like Rank Math, you can analyze up to five keywords in their free version.

Pricing

Yoast

• Free – Personal websites with no keyword tracking
• Premium ($89) – Single site with discounts for multisite licenses
• Other add-on pricing:
  • Video SEO for WordPress (from $79 for a single site)
  • Local SEO for WordPress (from $79 for a single site)
  • News SEO for WordPress (from $79 for a single site)
  • Yoast WooCommerce SEO (from $79 for a single site)

Rank Math

• Free – Personal websites with no keyword tracking
• Pro – ($59) Unlimited personal websites, track up to 1,000 keywords
• Business – ($199) Unlimited personal and client websites, track up to 20,000 keywords

SEO Press

• Free – Personal websites with no keyword tracking
• Pro – ($39 annually) Unlimited site usage
• Other Add-on Pricing:
  • SEOPress Insights Plan – ($99 per site) Option to track keyword positions in Google, monitor backlinks, and integration with Google Trends

User Experience / UI

Yoast

There are two ways to set up SEO information on a page with Yoast. The meta box under the editor or, if you’re using the block editor, a sidebar option in the toolbar.

If you’re using the meta box you’ll access:

• SEO – Set titles/descriptions, view keyword analysis, and control advanced settings such as robots tags and canonical links.
• Readability – View the readability analysis tips.
• Schema – Choose a schema type for this piece of content.
• Social – Set up open graph information for Facebook and Twitter.

If you’re using the block editor, you’ll get the same options, but they’ll be listed in a single column in the sidebar.

Rank Math

If you’re using Gutenberg, Rank Math fully integrates into the block editor so you won’t have the “meta box” approach you get with the classic editor.

The settings, accessed by the icon in the toolbar, give you access to the following:

• General – Edit the snippet details, set a focus keyword, and view analysis.
• Advanced – Configure robots meta information, such as adding a noindex tag.
• Schema – Set up schema markup/structured data.
• Social – Set up social graph information for Facebook and Twitter.

SEOPress

SEOPress has the same meta box approach that Yoast does, but there is currently no sidebar option with the block editor.

In the meta box you’ll access:

• SEO – Set titles/descriptions, view keyword analysis, and control advanced settings such as robots tags and canonical links.
• Mobile Preview – Lets you toggle between desktop and mobile views for your meta data.
• Readability – View the readability analysis tips.
• Schema – Choose a schema type for this piece of content.
• Social – Set up open graph information for Facebook and Twitter.

A Handy, Helpful Comparison Chart

In Conclusion

Each one of these plugins is a great way to build SEO-friendly content that will help improve your site’s google rank, and there’s no real clear winner. Rank Math has some really great feature offerings in its free version, while Yoast SEO’s familiar UI and simplified setup can be a great plugin for the user who doesn’t want to be bogged down with all the minute details. SEOPress offers a clean and modern UI with lots of great features.

It really comes down to preferences and requirements, but if you’re ready to launch a new website and want a team to help you make the decision, contact us. We’re experienced with building enterprise-level websites and guiding our clients on which SEO plugin is right for their project.

The post Which SEO Plugin Is Right for You? appeared first on WebDevStudios.

Thinks about it. You sit down and consider what you want to share. Then, there’s  planning, proofreading, deleting, starting over, and the eventual moment of pushing publish and calling it a day.

I pondered ways that you could generate some engaging content, knowing it had to be simple. However, it could not be so simple that the resulting content would be brief and not very engaging.

Generating content with a WordPress plugin needs to be easy, but also empowering. The process must allow you to sit for only a few minutes to make three or four decisions and then walk away.

That’s when I stumbled onto an idea while talking with my friend Glenn.

How to Generate Content Easily with a WordPress Plugin

What if there was a way to create a poll that you could then share with your friends, followers, current customers, and potential customers that allowed them to share their opinions with you in a fun and nonintrusive way?

Glenn and I thought of ways to engage with people in our community, other businesses, while also voicing which ones we liked the most. This was the perfect starting point to the content generation concept that had been at the back of my mind.

By the way, this is also the moment where I chose to challenge myself, level up my coding abilities, and pursue the goal of not only writing a new plugin, which I’ve done before, but also submit it for approval to the WordPress plugin repository.

Planning for Development

Now that I knew what I wanted to do, it was time to develop the rules of my new challenge. 

1. Security: A plugin that generates content needs to be above the WordPress coding standards and pass multiple security checks.
2. Collaborative code: This codebase needs to be open-source, and it needs to be readable by humans who may want to extend or add features.
3. Pass peer review: I knew my new WordPress plugin would be reviewed upon submission by the WordPress plugin team, and I had to be sure it would pass.
4. Clear and helpful documentation: Just because I know how to use my content generating plugin doesn’t mean everyone else will. Helping users understand how to get started and how to use this plugin was a big goal for me.
5. Five for the Future: The plan was to make my plugin a collaborative project, so why not reach out to others and invite them to participate and give back to the community in the process? It could be their opportunity to participate in the WordPress initiative Five for the Future.

Now that all of the planning was out of the way, I was ready to begin working on the first step of the process and create the public repository for the code to reside in during development on GitHub.

Welcome to the world, Yelp Polls!

Wait, Yelp Polls? Yeah… we’ll get to that later, but follow along with me for a moment.

Security

One of the first questions I asked myself was, “How can I start coding from a known good spot and ensure that my code is secure before it goes out into the wild?”

I could enforce local coding standards within my editor and follow best practices. But, that’s boring, and I already do that.

What about integrating security and linting services to validate the published codebase to see if it can pass more than just the WordPress standards? I did some research, and I settled on one that I can run locally in my terminal that would help me identify security issues within the dependencies my plugin might end up using.

snyk

Getting set up with snyk was pretty straightforward, and it allowed me to safely scan my project on my local machine before I submitted the code to the repository on GitHub. After that was in place, I used the WordPress plugin scaffold within WP CLI to start creating my new content generating plugin quickly.

I wrote a few simple functions and then pushed the code to the repository. It was now time to integrate the Codacy service with the GitHub repository and get the first nightmare of issues to resolve and fix.

This was when I knew I was on the right track if I was trying to challenge myself. Right out of the gate, I had issues to resolve that came from some code I didn’t write and some code that I did. 

After a few moments of triaging and addressing these new issues with the code, I continued coding and got back to work.

Collaborative Code

One of the bad habits I struggle with is that I generally neglect to document my classes and functions in personal projects like this one. And, I couldn’t let that happen here.

I needed to identify the types of variables others would be using and what could be expected. Just because I know what is happening with a plugin I developed, doesn’t mean that someone else will.

It was quick to write out the documentation blocks. The plugin was now well on its way.

Acquiring Assistance, Hitting a Roadblock

I also had one of my favorite days at WebDevStudios (WDS), Five For The Future (5FTF), in my near future. During various meeting, as my coworkers and I discussed what projects we had planned for that day, I mentioned my plugin designed to generate content and how I could use some help with the styling and design for the content pages. 

My former teammate, Christina Workman, said she would be happy to help out with that, and help she did! With her assistance, the cards that the business locations were going to be placed into were now using Grid CSS and were mobile responsive. In addition, Christina’s volunteered time allowed me to focus on the API integration with the Yelp API service and StrawPoll.

By the end of the day on February 25, 2022, the plugin was working. Plus, the code was passing almost all of the linting on Codacy without any issues.

So you caught that, too, right? Almost.

Yeah, this is where I ran into an issue that I still can’t resolve at the moment.

So, I put the case to our entire engineering team here at WebDevStudios, and we all came to the same conclusion. You can’t satisfy this linting rule pattern because you have to include, require, include_once, or require_once your autoloader for PHP to know where to load your classes from if they are in other files.

I left the note regarding the issue as a comment in my plugin and left it at that. Case closed. Or, so I thought.

Pass Peer Review

As the day came to a close, I was pretty confident in the state of the plugin. I was excited to submit it to the WordPress plugin review team. However, before I could, I knew I should go back through the plugin guidelines and ensure that I didn’t overlook anything. 

There it was, the one item I had overlooked. And, this one was going to require me to rename the plugin.

From Yelp Polls to Business Matchup

I was pretty annoyed by this revelation, and I blamed myself for not catching it sooner. Outlined in the plugin guidelines is rule number 17. It stared back at me as if I owed it money. I can’t prefix my plugin with the word Yelp because that’s a trademarked name. 

I spent the weekend kicking around various name ideas that conveyed what you could do with the plugin while still being fun and inviting. Then, after I settled on the new name, I had to back through the plugin code and replace all of the areas where I had used ‘Yelp Polls’ so that I was following best practices and helping keep things identified. 

The following week was pretty rough. I misunderstood what the plugin review team had wanted me to correct initially and changed the prefixes of my function names a few times.

Another Roadblock

Once the changes were completed and submitted, I got another email. This one pointed at the comment I left in the plugin regarding that linting rule that I couldn’t resolve. Yeah, that comment.

Their discovery of that comment started that conversation again, and this time it was with the WordPress plugin review team. We had a few back and forth emails about the issue, and I was given some methods to try, but none of them resolved the problem with the Codacy linter.

Finally, I made the swap I was trying to avoid and swapped my autoloader out for the simple option and went with using Composer. Using the Composer autoloader allowed me to use a PSR-4 based autoloader, follow best practices, and clearly define the classes I wanted my plugin to load.

This also meant that I needed to refactor the plugin. I mean, I might as well since I’m already ripping things out here.

After the code was refactored, I sent another resubmission to the review team. My confidence was starting to shake that this would pass review.

Another email came in a few hours later. The review team could still see the problem in my code and not the new composer autoloader.

I went back through the code on GitHub. No, this is using the composer method. Next, I checked the zip file in the release using the link I sent the review team, and no, that is also definitely using the new composer method.

Then, I asked them to check again and sent them the link, and I could see from their reply and screenshot that they do not see the updated code. I bumped the version of the plugin once more and made a new release. My email inbox went silent.

Then, it happened.

The weekend passed, and the plugin review team still had no word back. So, I direct my attention back to my work, pressed on, and refreshed my inbox every once in a while as I went on about my day Monday.

On March 21, 2022, an email notification popped up just before my morning team meeting. It said, “Business Matchup has been approved!”

My jaw dropped, and I could barely contain my excitement as I joined a Zoom meeting. Talk about perfect timing! It was our monthly 5FTF Friday at WDS.

I published my first plugin to the WordPress plugin repository, and I met the challenge I put before myself. It just shows how good it feels to set a goal for yourself. If you persevere and push yourself, you will be successful.

Yeah, the bar was a bit higher than usual. Yeah, I struggled a bit here and there. At the end of it all, though, I can see just how much I learned and grew through that process.

In my next blog post about Business Match, I’ll share what I struggled with when writing a readme file, showing documentation to users, and the steps I took to deliver on the goal I set for myself regarding that documentation.

You can find the new plugin on WordPress today under the name Business Matchup, and if you do happen to check it out, you will also see the link to the documentation.

Contribute often, dream big, and push hard for those goals that you set for yourself. You can do this. I did.

The post Generate Content with the Business Matchup WordPress Plugin appeared first on WebDevStudios.

These plugins are sorted in the order of block patterns, blocks, block-based themes, or theme combinations. Ready to be a power user? These Gutenberg plugins will get you there.

Block Patterns

Can you imagine Gutenberg editor without block patterns? Whether it is creating a landing page or blog post, block patterns come in handy.

As a backend engineer, I prefer using block patterns created by designers rather than creating something on my own. You can find block patterns at the official repository or GutenbergHub’s directory.

Block Pattern Explorer

This plugin allows you to list block patterns registered from your theme or plugins. You can also browse the block patterns that come with WordPress core. As per the developer of this plugin, Nick Diego, this plugin is currently an experimental one.

Control Block Patterns

The control block patterns plugin allows you to manage block patterns and their categories. It also supports inserting custom code to header and footer like analytics scripts, custom CSS styles.

This plugin makes it easier to create custom block patterns from the Gutenberg editor, exporting and importing reusable blocks and block patterns.

Blocks to Improve Writing Experience

Editors Kit

As the name suggests Editors kit plugin offers an array of features that make the writing and editing experience better. You get rich text formatting including superscript, subscript, indent paragraphs, inserting special characters, etc.

Additionally, you can show or hide blocks based on the device screen sizes. With conditional logic, you get granular controls to block visibility.

If you are a developer or a techie who loves MarkDown, this plugin supports markdown, and also comes with a syntax highlighter You can define keyboard shortcuts and speed up your writing process.

There are other cool features like copy and pasting gradients for buttons and covers, block pattern library, theme support for developers and block navigators, etc. Since this plugin comes with many features, you can manage them via feature manager.

MathML Block

Are you tired of trying different plugins to insert math formulas? Try this MathML block.

It allows you to insert mathematical markup language easily. It is also compatible with the official AMP plugin.

Simple TOC

Readers love to see the table of contents while reading a long article. Let your readers know what is in it for them using this simple TOC block.

Blocks to Design Pages

An icon is worth a hundred words, use icons with this icon block. Web fonts API is now available in the Gutenberg plugin, you can change the typeface using the block settings.

Newsletter Glue

It is hard to create a blog post and add it to your email newsletters. Newsletter Glue solves this problem. Create content once, and use it as blog posts and also newsletter archives. Newsletter Glue comes with blocks including embed links, author bylines, social sharing, show or hides content blocks, and more!

Editor Plus

Editor Plus allows you to customize every block with easy-to-use controls for typography, shape divider, box-shadow, spacing, visibility, and more features. You can copy any block patterns from Gutenberg Hub with the help of this plugin.

Addons for Gutenberg

Actively maintained plugins are the best part of the WordPress ecosystem. This enables no-code design and development for people of all skill levels.

Here is the list of Gutenberg addons or suites that provide an array of blocks. They are not listed in any particular order, read more about each of the plugins, shortlist the ones you might need. Then install them on a dev site, try the blocks, and then implement them on the live site.

• PublishPress Blocks
• Caxton
• Coblocks
• Genesis blocks
• Getwid
• Kadence blocks
• Otter blocks
• Responsive Gutenberg Blocks Library
• Stackable
• The plus addons for Gutenberg
• Ultimate blocks
• Kioken blocks
• Aino blocks

Plugins to Enhance Gutenberg Block Editor

Block Manager

This is another feature that should come to WordPress core in the future. Block Manager by WebDevStudios Lead Engineer, Darren Cooney, allows you to enable or disable blocks.

QuickPost

You have to toggle the fullscreen editing mode, to see the add new post link. The QuickPost plugin by Aurooba Ahmed allows you to add new items in the fullscreen editing mode. If you want to duplicate a post, click on the kebab menu, click on the duplicate post. This plugin works with custom post types too.

Theme and Plugin Combinations

Not sure about what theme to use and which blocks work with them well? Try these combinations, most of them are from the respective theme authors.

Gone are the days with multi-purpose themes which make you install a bunch of plugins. Now you are free to choose the starter theme and plugins that you need.

wd_s

At WebDevStudios we use our own starter theme, which provides the best developer experience to our backend and frontend engineers.

Bring Your Own Blocks

Our Frontend Engineer Amor Kumar has been building a brilliant solution to prevent the design system collapse by abuse of block controls.

His headless theme comes with a dockerized container that is easy to set up and get started.

The low-code or no-code themes and block combinations are listed below

ACF Blocks

If you are an Advanced Custom Fields (ACF) user, you can take advantage of their ACF blocks. This requires the ACF pro plugin to be installed and active.

With 20+ blocks in their suite, you can build pages on the fly.

Aino

Aino comes with FSE support and Aino blocks. With the Aino blocks, you can build pages that every website needs.

GeneratePress and GenerateBlocks

This is another popular solution to build sites faster. GeneratePress comes with its own blocks to allow more granular control of the container, grids, headings, and buttons.

One noteworthy feature is that GenerateBlocks doesn’t add too many blocks. It gives extra features instead of extra blocks with their Pro plan. With the features like global styles, effects, backgrounds, custom attributes, container links, and template library.

On a side note, GeneratePress has another plugin called WP Show Posts which is almost the short code-based version of the query loop Gutenberg block. Give it a try.

Kadence and Kadence Blocks

Kadence theme is one of the popular themes that allows you to control and customize your website without coding. Kadence theme and their blocks come with controls for visibility, responsiveness, spacing, typography, colors, and background. With the Pro version, you can get premium templates, animations, custom fonts, and icons.

FrostWP

FrostWP is coming from WP Engine’s family and is an open-source theme. It is packed with standard features, block patterns, and sample sites that you can import.

The global styles and FSE feature adds FrostWP to the popular themes of recent times. It also adheres to accessibility standards.

Blocksy and Stackable

Blocksy is a good choice if you want to control most of your site from the customizer. It allows you to customize colors, typography on every area of the site including header, footer, archives, and single items.

Recently Blocksy team started using Stackable blocks to build their demo sites. You can import the starter sites using their free Blocksy Companion plugin.

Twentig

A better way to customize the default WordPress themes is to use Twentig plugin. This adds more customization options to Gutenberg blocks. You can choose from pre-built starter sites to speed up your development process.

Conclusion

The possibilities are endless with the Gutenberg block editor. Every day, new blocks and themes are added to the WordPress repository.

What is your favorite one from this list? Please leave a comment below.

Learn More from Lax at Atarim Web Agency Summit 2022

Catch Lax at Atarim Agency Summit 2022, April 26-29, 2022. He will present a talk on “Build Something That Scales: Why You Should Use CI/CD.” Registration is free.

The post Gutenberg Plugins That Make You a Power User appeared first on WebDevStudios.

At that time, it included a number of major new features, such as a new default theme called Twenty Ten (Kubrick was the default for years prior to this). Also featured was the merging of WordPress MU and WordPress. This ultimately led to WordPress Multisite. Plus, WordPress 3.0 included the ability to create custom menus.

Those features alone would make an amazing release for WordPress, but it doesn’t stop there. WordPress 3.0 also introduced custom post types (CPTs) and custom taxonomies. These two new features helped WordPress grow to a full fledged content management system (CMS). They also eventually inspired the creation of the WordPress plugin Custom Post Type UI.

See, CPTs allow you to easily register unique content types within WordPress. Doing so helps you organize your content beyond the default Post and Page post types.

Custom taxonomies work the same way, giving you the ability to register unique taxonomies for content organization. It’s easy to see how powerful these new features would be in WordPress, but there was one small problem.

The only way to register custom post types and taxonomies was via code. There was no dashboard user interface for administrators to manage CPTs and taxonomies.

Enter light bulb moment…

I immediately saw an opportunity to build a simple plugin to help register and manage CPTs and taxonomies directly in the WordPress dashboard. I worked on the first version of Custom Post Type UI (CPTUI) over a few days. It was released on February 25, 2010, which was approximately four months before WordPress 3.0 was even released.

One of the most exciting things about open source software is it is largely planned and created in the open. At the time, I was actively joining the WordPress developer chats and learning what was coming to WordPress before official announcements were made. I saw the opportunity coming to CPTUI and wanted to make sure my plugin was released and ready when 3.0 dropped.

Fast forward to today, 12 years later, and Custom Post Type UI is one of the most popular WordPress plugins in the world. With over 1 million active installations and over 10 million all-time downloads, it’s safe to say that CPTUI is a hit and will continue to be an important and widely-used plugin for WordPress development!

The post The History of Custom Post Type UI appeared first on WebDevStudios.

What is a CPT?

At the time, WordPress shipped with Posts and Pages for all of your content. There was no way to customize or add new content types, so every piece of content was either a Post or a Page. Thus, the idea of Custom Post Types was born, allowing site admins the ability to register any types of content in WordPress.

This was a huge step towards WordPress becoming a full-fledged content management system, but there was one catch. The only way to register a CPT was directly in the codebase. I immediately saw this as an opportunity to build a simple user interface (UI) to register, and deregister, CPTs directly in the WordPress Dashboard. The final challenge was coming up with a really unique name that would make it crystal clear what the plugin did… Custom Post Type UI!

CPTUI

The first version of Custom Post Type UI was released on February 26th, 2010, almost four months before CPT support was released in WordPress 3.0. Fast forward to today, and CPTUI officially has over 8 million downloads and 1 million active installs, making it the 59th plugin on all of the WordPress.org Plugin Directory to achieve this prestige! The momentum of the growth in popularity of CPTUI doesn’t seem to be wavering, as it’s common to have the plugin and its useful mentioned in tutorials, presentations, and nominated yearly in Plugin Madness.

Evolution of CPTUI

Over the years, we’ve invested thousands of hours building and supporting the plugin, with our Plugin Czar, Michael Beckwith, taking the lead. In 2016 we released our first premium add-on called Custom Post Type UI Extended, which allows anyone to easily display their CPT content on their website. We have also continued to grow the base feature set of the plugin including registering custom taxonomies, generating the PHP code needed to register your CPTs/taxonomies, and even custom labels for all of your content. Additionally, we just developed CPTUI to support WPGraphQL, which comes in especially handy for Headless WordPress projects.

Open-Source Opportunities

The beautiful thing about open source software is that it is created in the open! By observing dev discussions and realizing the opportunity CPTs had before their release, I was able to create an extremely valuable plugin for the community that has not only helped millions of users, but also helped promote our company as we grew into one of the top WordPress agencies in the world.

Opportunities are everywhere if you look for them.

The post Custom Post Type UI Hits 1 Million Active Installations appeared first on WebDevStudios.