WP Anchor Header
WP Anchor Header generates anchored headings (H1-H6), creating a heading like this: <h2 id="the-heading"> The Heading<a class="anchorlink dashicons-before" href="#the-heading"></a> </h2> The links are styled using the following CSS: /* show IDs for anchors */ h1[id]:hover a.anchorlink:before, h2[id]
WP Anchor Header generates anchored headings (H1-H6), creating a heading like this:
<h2 id="the-heading"> The Heading<a class="anchorlink dashicons-before" href="#the-heading"></a> </h2>
The links are styled using the following CSS:
/* show IDs for anchors */ h1[id]:hover a.anchorlink:before, h2[id]:hover a.anchorlink:before, h3[id]:hover a.anchorlink:before, h4[id]:hover a.anchorlink:before, h5[id]:hover a.anchorlink:before, h6[id]:hover a.anchorlink:before { content: "\f103"; /*dashicons-admin-links*/ color: #888; font-size: smaller; text-decoration: none; vertical-align: baseline; } a.anchorlink { text-decoration: none; margin-left: 0.5em; font-size: smaller; }
Credits
The plugin is inspired by Christian Weiske and his article Usability: Clickable heading links .
- 01Download the plugin and extract the read-online.zip
- 02Upload the extracted read-online folder to the /wp-content/plugins/ directory
- 03Activate the plugin through the ‘Plugins’ menu in WordPress
