WordPress Anchor Shortcode Plugin

Once an article reaches a certain length, it is valuable to allow linking to a specific part of the page by creating anchor locations. Unfortunately, creating an anchor location in WordPress involves writing raw HTML, which is not an ideal client solution. There are other solutions out there but Blinebury Design wanted a specific set of behavior for their clients, so we built the Anchor Shortcode Plugin for WordPress.

The basic idea is clients can create a target anchor location by using a shortcode. This means instead of writing

<span id="discussion-details"></span>

the shortcode

[anchor id="discussion-details"]

can be used. This shortcode can be used multiple times with different values for the id, allowing you to setup different target locations.

Editor Improvements

While the shortcode itself is not a great gain, we also added an Anchor button to the WordPress TinyMCE editor.

This button prompts the user for an ID value, which is then formatted properly, and displayed in the editor as a shortcode.

Implementation Details

This was an interesting project because while the shortcode itself is pretty straight forward, integrating in the TinyMCE WYSIWYG toolbar was a different challenge.

Additionally, since I needed the same behavior as WordPress’s sanitize_title() but in JavaScript, I need to work out how to emulate that function (I’ve described my solution in the post WordPress sanitize_title() in JavaScript).

Open Source

Blinebury Design was also generous enough to open source this plugin, which is available on GitHub as the Anchor Shortcode plugin for WordPress.

If you find this code useful, you might want to send them a tweet of thanks.

Photo Credit

Pixabay

Sal Ferrarello (@salcode)

Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.