What is a Page Jump Menu

Have you ever seen those long articles have their own in-page menu linked to sub-headings on the same page?

Such a menu is called page jump menu which gives an easy access to readers to jump to different sections of the same page which interests them the most.

This is what we are going to discuss today to create jump menu in a WordPress post or a page. If you are looking for creating a main menu in WordPress then see our step-by-step tutorial creating menus in WordPress

This technique is also called bookmarking menu within a post. For example, you can create your own table of contents in a WordPress post and link them to sub-headings in the article. This will make your post user-friendly and boost user engagement.

How to Create Jump Menu in WordPress

You can create a jump menu or bookmarking menu just like you create a link in WordPress but with a slightly different behavior.

Page jump menu code depends on two parts, a link and a corresponding target or an id. Using the duo, you can create a menu link to section of a page.

Lets make a table of contents in a WordPress post. Consider a scenario like the image below.

wordpress table of contents menu

We are going to complete our links parts first and then we will add targets.

Select the First link text, click the Insert link button. Give it whatever name you want followed by hash symbol (#). For this example, we added a name #para01. Do the same for the rest of the links as many as you have.

wordpress hash post link

We are done with the links part but the links are not working because they don’t know where they are linked to. It’s time to add targets now.

Targets could be anything on a page like headings, text or images . We will make targets by adding ids to these elements. In our case, we will add ids to headings.

We can only add ids with HTML code but WordPress don’t give us a way to write HTML in visual editor so we have to switch to text editor.

wordpress text editor

In text editor, for each of the heading tags add an id with its corresponding link in Table of contents.

<h3 id=”para01″>First Link</h3>

<h3 id=”para02″>Second link</h3>

wordpress jump menu headings

Do the same for rest of the headings to add additional ids. Publish your post to check. All of the links in table of contents should work now and jump to headings.

Back to Top Menu Link Button

We are done with the basic structure of in-page menu for WordPress but we also need to do the same process for Table of Contents heading and Back to Top text to interlink them.

Add a link #tbc (table of contents) to link text which will take users back to top of the page.

Add an id to table of contents heading. It should be like:

<h2 id=”tbc”>Table of Contents</h2>

Using the guide above you can create page jumps in your WordPress posts and pages to make them look more professional and organized. Users really enjoy such setups because of the ease of use and instantly get to the information they want.

If you still have any questions do let us know by using the comments section below

Gimme a Share pleeeaase!

Pin It on Pinterest

Share This