Creating Jump Menu in WordPress

WordPress is a cool cms for blogging and web development, how ever it lacks a method to create the jump menus. Jump menus are the titles/section of the post displayed right above the post which when clicked scrolls down to the content. WordPress Create Jump Menu will guide you on creating jump menu.

Screen Shot 2015-11-08 at 11.00.43 PM

 

WordPress Create Jump Menu

Add the following to functions.php of your theme folder. You can call this as a function or override the default the_content() or get_the_content to print the menu.
The script below searches for heading 3 (h3) tags on your post and creates jump menu for it. The tags can be changed on the following line (replace h3 with tag you want). Two arguments are passed in the function (jump_menu and id) using use, you can add/modify those:

Use Case

You can use it as a function or override the default wp print functions.

1. Using it as function

2. Overriding WordPress Functions

also add

to functions.php
This ensures everytime you print content, the jump menu will be displayed

Customizing Jump menu and add Smooth Scroll

After displaying jump menu you can see that the content scroll is almost immediate. This can be shown using smooth scroll and fade effect using javascript.

1. Add Smooth Scroll
Just add the following code to your js file

2. Show content using fade effect
Use the following code to display the fade effect on jump menu, you can use any effects by replacing it on the code below.

To use the effects do add the following to your css

The above codes will allow you with wordpress create jump menu across all articles or selected ones. You can also use smooth scroll or fade effects to display the content. You can add all headings to jump menu as well, a bit of customization can allow you to create sub jump menu too.