CODEWITHSUNDEEP
wordpresswordpress-theming
user9588170
user9588170

Reputation:

Connecting default theme menu to one-page sections dynamically

Connected to this question: https://wordpress.stackexchange.com/questions/300387/default-menu-items-for-custom-theme-but-easily-delete-able-customize-able-by-u

So, using this bootstrap template as an example again: https://blackrockdigital.github.io/startbootstrap-creative/

the menu items would be connected to the sections so when clicked on they are scrolled to. However, how would I dynamically link in a ux/ui friendly way the menu items to each respective section so that when user goes to change an item or menu they would link back to that section?

In other words, I would have a default easily change-able menu and menu items come with the theme. However, how would I go about making it easy for the user to connect a different menu item to the same section? And how would I dynamically connect a menu item to said section?

Upvotes: 0

Views: 35

Answers (1)

CaliCo
CaliCo

Reputation: 388

Assuming your theme uses the native WordPress menu page for building custom menus for your respective website, this is relatively easy. In order for this to work properly, there will need to be some custom JS added to your page to handle scrolling down to a given section.

Sections themselves will need to also have a unique identifier, so the JS provided can actually scroll to the given section. Here is an example on how to accomplish this:

  1. We will start by creating and editing a WordPress menu. Be sure to set up the links from the menu items so they will work with the upcoming anchor scroll-ability. These url's MUST match the ID of the section on the front-end you are wishing to scroll to. enter image description here

  2. We now can utilize jQuery to trigger a click function, which will scroll the user down to the respective section on the page. Here's an example of a function you can use. Remember, some formatting of the function will be required as you need to make sure the parent wrapper of your menu has the ID which the function is looking for. Here's the function: 

$('#navigation a').on('click', function (e) {
	//Stop page from doing default stuff
  	e.preventDefault();
  	//Get content panel ID from clicked element
  	var contentPanelId = $(this).attr("href");
  	//Animate to clicked element
	$('html, body').stop().animate({
		scrollTop: $(contentPanelId).offset().top
	}, 900, 'swing', function () {
		window.location.hash = target;
	});
});

  1. Now, to output the menu inside a template, we will go ahead and use the wp_nav_menu() function: https://developer.wordpress.org/reference/functions/wp_nav_menu/ . Be sure to wrap the use of this function around the a parent DIV with an ID matching what's being called inside your JS function (in this example, the ID is "navigation"). Here's an example of the expected markup (remember, I've named my menu menu-test in the back-end):

    <header id="navigation" class="site-header" role="banner">

    <?php wp_nav_menu( array('menu' => 'menu-test' ) ); ?>

</header><!-- #masthead -->

That should be it! Obviously additional styles are going to be required to lay out the menu however you'd like it to appear on your page. The most important to remember for this concept is that the markup elements' ID's MUST match the hash'ed out URL of the menu item. If there's no div on page with respective ID, the JavaScript will have no way of knowing what element to scroll to.

Here is a live example of the menu functioning the way you want it to on my personal portfolio.

Upvotes: 1

Related Questions