Add External Link to OnePage Section Menu

  • Hello,
    I’m using a theme built-in menu, that navigates over sections, and I’ve added an li on header.php menu builder to add a link to another page (so I won’t use only one page, the second page is a custom link to a product).

    <nav id="site-navigation" class="main-navigation" role="navigation" itemscope itemtype="https://schema.org/SiteNavigationElement">
	<ul>
	<?php 
		if( ! get_theme_mod( 'business_one_page_ed_home_link' ) ){
			
			if( is_front_page() ){ ?>
				<li class = "<?php echo esc_attr( 'current-menu-item', 'business-one-page' ); ?>"><a href="<?php echo esc_url( home_url( '#home' ) ); ?>"><?php echo esc_html( $home_link_label ); ?></a></li>
			
			<?php }else{ ?>
				<li><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php echo esc_html( $home_link_label ); ?></a></li>
	<?php   }
		}
		foreach( $enabled_sections as $section ){ 
			if( $section['menu_text'] ){
	?>
			<li><a href="<?php echo esc_url( home_url( '#' . esc_attr( $section['id'] ) ) ); ?>"><?php echo esc_html( $section['menu_text'] );?></a></li>                        
	<?php 
			} 
		}
	?>
			--mycustomlink <li id ="shopitem"><a href="https://site/product/custport1/">shop</a></li>
	</ul>
</nav>

    Everything works ok, I can navigate between my second page and the main page, but I cannot highlight the menu item of second page when I’m in.

    I’ve tried with 

    function special_nav_class($classes, $item){
	if ( is_product() && $item->title == "shop" ) {
        $classes[] = 'current-menu-item'; 
    }
	
	if ( is_checkout() && $item->title == "shop" ) {
        $classes[] = 'current-menu-item'; 
    }
	
    return $classes;
}

add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);

    but it doesn’t apply the filter.

    Is there a way to do it?
    Thank you for your help

    Hugo

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator bcworkz

    (@bcworkz)

    Because you are bypassing the common wp_nav_menu() call for this, the ‘nav_menu_css_class’ filter is not firing. You can cause it to fire in your code by calling apply_filters('nav_menu_css_class', 'your default classes here'); and echoing out the return.

    Or conditionally output ‘current-menu-item’ in your <li> element without using the filter. The condition to check varies by how your site works, but get_queried_object_id() will often work.

    Thread Starter hugo2808

    (@hugo2808)

    Thank you very much for your reply.
    I getted a little confused, I understood that the standard features for wp_nav_menu() is not working because I make the menu without it.
    I didn’t understand how can I intersept my <li id ="shopitem"> when I press it and give the element the css class whenever I’m on the pages I need.
    It must be done on functions.php also I presume.

    I’ve basic experience in wordpress/php, thank for your help.

    Moderator bcworkz

    (@bcworkz)

    Unless you’re keen to learn how filters work at this point, I’d not use one in your case. They are best used to allow others to modify something your code is doing or for you to modify what other code is doing. They are not necessary to modify your own code.

    When you press a menu item composed of an <a> element, it normally causes a new page to be requested. So to conditionally add a class to that element, you need to know what the current request is for. In WP, that is usually determined by get_queried_object(). You really only need the object’s ID, so get_queried_object_id() is useful.

    You also need to know what the actual ID of product/custport1/ is. You can get it from the URL when the object’s edit screen is open in the back end. The number after post= in the URL is the object’s ID. Then you can do something like this with your menu code (use the actual object ID in place of 1234):

    <?php
if ( 1234 == get_queried_object_id()) { $classes = 'menu-item current-menu-item'; }
  else { $classes = 'menu-item';}
?>
<li id ="shopitem" class="<?php echo $classes ?>"><a href= .... etc.
    Thread Starter hugo2808

    (@hugo2808)

    It worked perfectly.
    It’s simple and does exactly wait I needed.
    Thank you so much for your help.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Add External Link to OnePage Section Menu’ is closed to new replies.