facebook instagrammenu-icon twitter

Heading Jump Links in WordPress

Published September 5, 2016

Automatically adds IDs to headings such as h2, h3 etc, and adds jump links next to those headings.

The plugin has three options:

  • CSS class for jump links, so you can style them (defaults to hjl-jump-link)
  • Title attribute (defaults to “Jump to heading”)
  • HTML inside of jump links, e.g. an icon or text (defaults to a Font Awesome icon). Note: the plugin does not include any icons/icon fonts.

To actually display the jump links, you have to style them.

Example:

.hjl-jump-link {
    opacity: 0;
    position: absolute;
    width: 35px;
    margin-left: -35px;
    margin-top: 8px;
    color: #767676;
    transition: opacity .2s ease-in-out,
                color .2s ease-in-out;
    font-size: 2rem;
}
.hjl-jump-link:hover {
    color: #333;
}
h2:hover .hjl-jump-link,
h3:hover .hjl-jump-link {
    opacity: 1
}

You can find the repo here: github.com/anselm-urban/wp-heading-jump-links