0

0

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.

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:

preg_replace_callback( '/(\<h3(.*?))\>(.*)(<\/h3>)/i', function( $matches ) use (&$jump_menu, &$id)

function auto_id_headings( $content, $heading = NULL) {
	$jump_menu = '';
	$id = array();
	$content2 = '';
	$i = 0;
	$content = preg_replace_callback( '/(\(.*)(<\/h3>)/i', function( $matches ) use (&$jump_menu, &$id) {
		if ( ! stripos( $matches[0], 'id=' ) ) :
			$matches[0] = '
' . $matches[1] . $matches[2] . ' id="' . sanitize_title( $matches[3] ) . '">' . $matches[3] . $matches[4];
		$jump_menu = $jump_menu . '
' . $matches[3] . '
';
		$id[] = str_replace(' ','-',strtolower($matches[3]));
		endif;
		return $matches[0];
	}, $content );
	echo '
' . $heading . '
';
	echo '
' . $jump_menu . '
';
	$ary = explode('
',$content);
	foreach ($ary as $section) {
		if(!empty($section)){
			$class = ($i == 0) ? ' first-sub-head' : '';
			$content2 = $content2 . '
' . $section . '
';
		}
	}
	return $content2;
}

Use Case

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

1. Using it as function

just call
echo auto_jump_menu_smj(get_the_content(), 'Project Details');
where you want to print the post and jump menu.
argument one is the content and argument two is the title of jump menu.

2. Overriding WordPress Functions

add
add_filter( 'the_content', 'auto_jump_menu_smj' );
or 
add_filter( 'get_the_content', 'auto_jump_menu_smj' );
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

$('a[href*=#]').on('click', function(event){     
    event.preventDefault();
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});

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.

var prev_ids = '';
$('a[href*=#]').on('click', function(event){     
  event.preventDefault();
  var ids = $(this).attr('href');
  if(prev_ids != ids) {
    prev_ids = ids;
    $('.subhead').fadeOut(100);
    ids = ids.substring(1);
    $('#span' + ids).fadeIn(1000);
  }
});

To use the effects do add the following to your css

.subhead {
    display: none;
}

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.