constantinmedia Blog

Just another guy blogging…



Deactivating YoastSEO marker buttons when using a custom editor in a WordPress theme or plugin

I’m currently working on a WordPress theme that comes with its own drag & drop visual editor for page content. The client also uses the popular YoastSEO plugin for SEO purposes. So, we have to make sure that the readability and SEO analysis are still working with the new theme.

As the editor uses shortcodes, most of the shortcodes have no direct content, but get their content from attributes. Therefore, YoastSEO didn’t see any content and simply couldn’t analyze anything. I was able to sort that out relatively quickly: Basically, you write a small plugin for YoastSEO that filters the content that YoastSEO „sees“. There’s an example in the official GitHub repo.

In its „Readability“ tab, YoastSEO shows a button with an eye icon next to several of the problem descriptions. When you click it, the relevant sentences in the WordPress visual editor will show up highlighted.

YoastSEO marker buttons

YoastSEO marker buttons next to the Readability results

This is a very convenient feature for the end-user, but unfortunately, it will not work for our visual editor (at least not with a lot of work required). By default, those buttons are automatically disabled when you switch to the text editor:

disabled YoastSEO marker buttons

The solution: disable YoastSEO marker buttons via a JavaScript call

I was trying to find a way to disable those buttons whenever our custom editor is used instead of the default WordPress editor. However, I couldn’t find any official documentation on this.

After I spent some time looking through the various objects and methods starting from the YoastSEO global variable, I finally found a solution. You can use this single line of code, to disable the marker buttons completely:

YoastSEO.wp._tinyMCEHelper.disableMarkerButtons()

Many WordPress Plugin and Theme developers seem to ignore YoastSEO alltogether despite its wide-spread use (for example the Enfold visual editor still hase some problems with it) and do not add support for it at all. But it’s really not so difficult to be honest! It took me more time to find out how to achieve it than actually implementing it, so I hope this is of use to others in the future.


Was this post of any help for you? Say thank you by buying me a coffee via a PayPal donation! :-)
Donate via PayPal: $ USD | £ GBP | € EUR

, , , , ,

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.