Automatically enhance headers with hierarchy, links and smooth scrolling with offset

Automatically enhance headers with hierarchy, links and smooth scrolling with offset

There are several things useful in a longer document:

  • showing position of given heading in the structure
  • ability to create links to a heading
  • smooth scrolling to internal links
  • offset for scrolling if the top header covers some of the contents

Enhance headers with hierarchy

Some long posts of mine have two levels of headings (I managed to avoid third level yet…), e.g.:

The page looked like this before:

Here, Animation is <h2> and Effect: Appear is <h3>. The distinction between them is visible in font size and color. But in a longer document it will be difficult to know what is the level of the heading you see – h2, h3 or maybe h4? What is the actual parent heading or name of the section? It will be confusing especially when scrolling or searching in a page.

I decided to annotate subheadings with their parent heading, to better show the hierarchy and position in the document:

This effect was achieved by a simple script:

JS

You can find the source code in my gist.

In my example I enhanced only h3 and h4 (if there are any in future):

JS

and I styled them to be semi-transparent and smaller:

CSS

In order to add this functionality to WordPress, you have to add the style to your theme’s styles. Then modify your style’s functions.php file and add the following code:

PHP

Notes:

  • if there is already a wp_enqueue_scripts handler, just add the wp_enqueue_script line.
  • use get_template_directory_uri() if this is a parent theme and get_stylesheet_directory_uri() if this is a child theme.

Next, create the file nisarg-child.js in the theme’s js subfolder (create it also if it’s not present). Fill it with the following function:

JS

I think it’s a useful capability to be able to provide a link to any header (especially that WordPress automatically provides IDs to the headers). This feature can be found i.a. in GitHub – after hovering over a heading, a link icon is shown. Look at this example:

This trick is not difficult to achieve, either. The biggest problem is getting the chain icon. If your website uses a font that provides such icon, use it. I didn’t have any and didn’t want to add a new font just for one icon, so I downloaded the SVG chain icon from Font Awesome and copied its content to my script.

Below is the script that adds the icon:

JS

You can find the source code in my gist.

Some styling is necessary – first to position it, and next to hide and show upon hover:

CSS

In order to add this functionality to WordPress, you have to add the style to your theme’s styles. Assuming you already have a scripts file in your theme (added to functions.php file in the previous example), just enhance the nisarg-child.js file:

JS

Smooth scrolling with top offset

The last feature I added was smooth scrolling to internal links with optional offset to scroll a bit farther if the top header covers some content. Check how the link functioned previously:

Compare with how it works now:

Below is the script that adds the functionality:

JS

You can find the source code in my gist.

Add smooth scrolling to a WordPress site

Assuming you already have a scripts file in your theme (added to functions.php file in the previous example), just enhance the nisarg-child.js file:

JS

where 90 is the top header’s height, and 800 is the duration of the animation in milliseconds.

Leave a Reply

avatar
  Subscribe  
Notify of