DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Paul
Paul

Posted on • Originally published at boldoak.design

Search and WordPress Shortcodes

My wife and I run a WordPress blog about our family, and I’ve incorporated the Algolia plugin to replace the default search to improve it. With its addition, search suggestions and search-as-you-type improves the whole experience (if I do say so myself), especially in showing text match snippets in the results. I did notice something odd, however:

Screenshot of WordPress search with shortcodes appearing in result snippets

A shortcode appears in the first search result's snippet.

As you can see here, snippets include shortcodes. In case you aren’t aware, shortcodes in WordPress are special codes written inside square brackets. They’re stored in plain text as part of the page or post, but WordPress’s rendering process converts them on the fly into whatever content they’re actually supposed to be.

In the above image, you can see the beginning of a shortcode: [aesop_video. This is because for quite some time, I had been using a plugin called Aesop Story Engine to contol the display of images and videos in my posts. This was well before Gutenberg gained traction, which for themes which enabled it, could break media out of the normal post width. (Aesop did it first. πŸ™‚)

Unfortunately, this resulted in an unpleasant side effect of showing the shortcodes (which are stored in plain text) in the type-to-search powered by Algolia. The only way to fix this is to go through every post with Aesop shortcodes, replacing them with the equivalent Gutenberg block.

I’ve lost track of how many posts I’ve updated. I’m down to about 250 more to go…


This post was originally published on Bold Oak Design.

Top comments (0)

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›