• Skip to primary navigation
  • Skip to main content
Sal Ferrarello
  • About Sal Ferrarello
  • Speaking
  • Connect
    Mastodon GitHub Twitter (inactive)
You are here: Home / Programming / WordPress Anchor Shortcode Plugin
A photo of a ship's anchor

WordPress Anchor Shortcode Plugin

Last updated on October 25, 2017 by Sal Ferrarello

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.

Anchor button in TinyMCE WYSIWYG toolbar.

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

Anchor ID Prompt that displays after clicking the anchor button

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
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.

Share this post:

Share on TwitterShare on FacebookShare on LinkedInShare on EmailShare on Reddit

Filed Under: Computing, Programming, Solution Tagged With: anchor, shortcode, WordPress Plugin

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2023 · Bootstrap4 Genesis on Genesis Framework · WordPress · Log in