Overwriting header.php with a custom navWalker - Support | Kriesi.at

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts

June 1, 2017 at 9:35 am #802434

H I wonder if it is possible with Enfold to overwrite the menu section (header) with a custom navigation Walker. I tested my walker on a custom wp theme and it worked. Basically in the header.php I wrote the following code

	<header id="masthead" class="site-header" role="banner">
		<div class="container-menu">
			<ul id="gn-menu" class="gn-menu-main">
				<li class="gn-trigger">
					<a class="gn-icon gn-icon-menu"><span>Menu</span></a>
					<nav class="gn-menu-wrapper">
						<div class="gn-scroller">
					<?php
					$args = array(
						'theme_location' => 'menu-1',
						'depth'      => 2,
						'container'  => false,
						'menu_class'     => ' gn-menu',
						'walker'     => new GnMenu_Walker_Nav_Menu()
						);
 
					if (has_nav_menu('menu-1')) {
						wp_nav_menu($args);
					}
 
					?>
						</div>			<!-- /gn-scroller -->	
			
					</nav>
				</li>
				<li><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php bloginfo( 'name' ) ?>" rel="homepage"><?php bloginfo( 'name' ) ?></a></li>
				<li><a class="codrops-icon codrops-icon-drop" href="#"><span>Back to the Codrops Article</span></a></li>
			</ul>
		</div><!-- /container -->		
	</header>

And in the file functions.php I included my Walker as

/**
 * Load GnMenu.
 */
require get_template_directory() . '/inc/gnmenu-walker.php';

I wonder how to do teh same with Enfold. I am trying to overwrite the header.php in a child theme, but something goes wrong. Do you have any suggestion?

Thanks very much

June 2, 2017 at 3:03 pm #803051

Yigit

Keymaster

Hey Elena,

Please copy enfold/includes/helper-main-menu.php file to your child theme and apply the changes there :)

Best regards,
Yigit

June 8, 2017 at 2:50 pm #805582

elenapoliti

Participant

Hi Yigit, sorry but I already tried that way but it didn’t work. I try to duplicate here what I did so you can correct me where I was wrong.

In my enfold-child theme I created the following directories

child-theme/includes/gnmenu-walker.php
child-theme/includes/helper-main-menu-php
child-theme/fucntions.php

File gnmenu-walker.php

<?php
// Custom Walker Class for Bootstrap Menu
add_action( 'after_setup_theme', 'gnmenu_setup' );
 
if ( ! function_exists( 'gnmenu_setup' ) ):
 
	function gnmenu_setup(){
 
		class GnMenu_Walker_Nav_Menu extends Walker_Nav_Menu {
 
 
			function start_lvl( &$output, $depth = 0, $args = array() ) {
 
				$indent = str_repeat( "\t", $depth );
				$output	   .= "\n$indent<ul class=\"gn-submenu\">\n";
 
			}
 
			function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
 
				$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
 
				$li_attributes = '';
				$class_names = $value = '';
 
				$classes = empty( $item->classes ) ? array() : (array) $item->classes;
				$classes[] = ($args->has_children) ? 'gn-submenu' : '';
				$classes[] = ($item->current || $item->current_item_ancestor) ? 'active' : '';
				$classes[] = 'menu-item-' . $item->ID;
 
 
				$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
				$class_names = ' class="' . esc_attr( $class_names ) . '"';
 
				$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
				$id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
 
				$output .= $indent . '<li' . $id . $value . $class_names . $li_attributes . '>';
 				
 				$iconClasses ='';
				if ($item->ID == 1265)
				{
					$iconClasses = 'gn-icon-home';
				}
				elseif ($item->ID == 1266)
				{
					$iconClasses = 'gn-icon-cog';
				}
				elseif ($item->ID == 1267)
				{
					$iconClasses = 'gn-icon-about';
				}
				elseif ($item->ID == 1273)
				{
					$iconClasses = 'gn-icon-portfolio';
				}
				elseif ($item->ID == 1274)
				{
					$iconClasses = 'gn-icon-marble';
				}
				elseif ($item->ID == 1275)
				{
					$iconClasses = 'gn-icon-wood';
				}
				elseif ($item->ID == 1276)
				{
					$iconClasses = 'gn-icon-meta';
				}
				elseif ($item->ID == 1282)
				{
					$iconClasses = 'gn-icon-design';
				}
				;

				$attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
				//$attributes .= ' class="gn-icon gn-icon-download"'; 
				$attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
				$attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
				$attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
				//$attributes .= ($args->has_children) 	    ? ' class="dropdown-toggle" data-toggle="dropdown"' : '';
				//$attributes .= ' class="gn-icon gn-icon-download ' . ( $depth > 0 ? 'sub-menu-link' : 'main-menu-link' ) . '"';
 				$attributes .= ' class= "gn-icon ' . $iconClasses . '"';

				$item_output = $args->before;
				$item_output .= '<a'. $attributes .'>';
				$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
				$item_output .= ($args->has_children) ? ' <b class="caret"></b></a>' : '</a>';
				$item_output .= $args->after;
 
				$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
			}
 
			function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
 
				if ( !$element )
					return;
 
				$id_field = $this->db_fields['id'];
 
				//display this element
				if ( is_array( $args[0] ) ) 
					$args[0]['has_children'] = ! empty( $children_elements[$element->$id_field] );
				else if ( is_object( $args[0] ) ) 
					$args[0]->has_children = ! empty( $children_elements[$element->$id_field] ); 
				$cb_args = array_merge( array(&$output, $element, $depth), $args);
				call_user_func_array(array(&$this, 'start_el'), $cb_args);
 
				$id = $element->$id_field;
 
				// descend only when the depth is right and there are childrens for this element
				if ( ($max_depth == 0 || $max_depth > $depth+1 ) && isset( $children_elements[$id]) ) {
 
					foreach( $children_elements[ $id ] as $child ){
 
						if ( !isset($newlevel) ) {
							$newlevel = true;
							//start the child delimiter
							$cb_args = array_merge( array(&$output, $depth), $args);
							call_user_func_array(array(&$this, 'start_lvl'), $cb_args);
						}
						$this->display_element( $child, $children_elements, $max_depth, $depth + 1, $args, $output );
					}
						unset( $children_elements[ $id ] );
				}
 
				if ( isset($newlevel) && $newlevel ){
					//end the child delimiter
					$cb_args = array_merge( array(&$output, $depth), $args);
					call_user_func_array(array(&$this, 'end_lvl'), $cb_args);
				}
 
				//end this element
				$cb_args = array_merge( array(&$output, $element, $depth), $args);
				call_user_func_array(array(&$this, 'end_el'), $cb_args);
 
			}
 
		}
 
	}
 
endif;

FILE helper-main-menu.php

<?php 
global $avia_config;

$responsive		= avia_get_option('responsive_active') != "disabled" ? "responsive" : "fixed_layout";
$headerS 		= avia_header_setting();
$social_args 	= array('outside'=>'ul', 'inside'=>'li', 'append' => '');
$icons 			= !empty($headerS['header_social']) ? avia_social_media_icons($social_args, false) : "";

if(isset($headerS['disabled'])) return;

?>

<header id='header' class='all_colors header_color <?php avia_is_dark_bg('header_color'); echo " ".$headerS['header_class']; ?>' <?php avia_markup_helper(array('context' => 'header','post_type'=>'forum'));?>>

<?php

if($responsive)
{
	echo '<a id="advanced_menu_toggle" href="#" '.av_icon_string('mobile_menu').'></a>';
	echo '<a id="advanced_menu_hide" href="#" 	'.av_icon_string('close').'></a>';
}

//subheader, only display when the user chooses a social header
if($headerS['header_topbar'] == true)
{
?>
		<div id='header_meta' class='container_wrap container_wrap_meta <?php echo avia_header_class_string(array('header_social', 'header_secondary_menu', 'header_phone_active'), 'av_'); ?>'>
		
			      <div class='container'>
			      <?php
			            /*
			            *	display the themes social media icons, defined in the wordpress backend
			            *   the avia_social_media_icons function is located in includes/helper-social-media-php
			            */
						$nav = "";
						
						//display icons
			            if(strpos( $headerS['header_social'], 'extra_header_active') !== false) echo $icons;
					
						//display navigation
						if(strpos( $headerS['header_secondary_menu'], 'extra_header_active') !== false )
						{
			            	//display the small submenu
			                $avia_theme_location = 'avia2';
			                $avia_menu_class = $avia_theme_location . '-menu';
			                $args = array(
			                    'theme_location'=>$avia_theme_location,
			                    'menu_id' =>$avia_menu_class,
			                    'container_class' =>$avia_menu_class,
			                    'fallback_cb' => '',
			                    'container'=>'',
			                    'echo' =>false
			                );
			                
			                $nav = wp_nav_menu($args);
						}
			                
						if(!empty($nav) || apply_filters('avf_execute_avia_meta_header', false))
						{
							echo "<nav class='sub_menu' ".avia_markup_helper(array('context' => 'nav', 'echo' => false)).">";
							echo $nav;
		                    do_action('avia_meta_header'); // Hook that can be used for plugins and theme extensions (currently: the wpml language selector)
							echo '</nav>';
						}
						
						
						//phone/info text	
						$phone			= $headerS['header_phone_active'] != "" ? $headerS['phone'] : "";
						$phone_class 	= !empty($nav) ? "with_nav" : "";
						if($phone) 		{ echo "<div class='phone-info {$phone_class}'><span>".do_shortcode($phone)."</span></div>"; }
							
							
			        ?>
			      </div>
		</div>

<?php } 
	
	
	
	$output 	 = "";
	$temp_output = "";
	$icon_beside = "";
	
	if($headerS['header_social'] == 'icon_active_main' && empty($headerS['bottom_menu']))
	{
		$icon_beside = " av_menu_icon_beside"; 
	}
	
	
	
	
	
	
?>
		<div  id='header_main' class='container_wrap container_wrap_logo'>
	
        <?php
        /*
        * Hook that can be used for plugins and theme extensions (currently:  the woocommerce shopping cart)
        */
        do_action('ava_main_header');
        
        if($headerS['header_position'] != "header_top") do_action('ava_main_header_sidebar');
		

		if( function_exists( 'gnmenu_setup' ) ){
			   
			    $output.="<div class='container-menu'>
						<ul id='gn-menu' class='gn-menu-main'>
							<li class='gn-trigger'>
								<a class='gn-icon gn-icon-menu'><span>Menu</span></a>
								<nav class='gn-menu-wrapper'>
									<div class='gn-scroller'>";

									$args = array(
									'theme_location' => $avia_theme_location,
									'depth'      => 2,
									'container'  => false,
									'menu_class'     => ' gn-menu',
									'walker'     => new GnMenu_Walker_Nav_Menu()
									);
			 
								if (has_nav_menu('menu-1')) {
									wp_nav_menu($args);
								}
			 	$output.= "</div><!-- /gn-scroller -->	</nav></li><li><a href=' " . echo esc_url( home_url( '/' ) ); . " ' title= ' ". bloginfo( 'name' ) . " ' rel='homepage'> " .  bloginfo( 'name' ) . "</a></li>

								<li><a class='codrops-icon codrops-icon-drop' href='#''><span>Back to the Codrops Article</span></a></li>
							</ul>
						</div><!-- /container -->"
								
			}
			else{

				 $output .= "<div class='container av-logo-container'>";
				 
					$output .= "<div class='inner-container'>";
						
						/*
						*	display the theme logo by checking if the default logo was overwritten in the backend.
						*   the function is located at framework/php/function-set-avia-frontend-functions.php in case you need to edit the output
						*/
						$addition = false;
						if( !empty($headerS['header_transparency']) && !empty($headerS['header_replacement_logo']) )
						{
							$addition = "<img src='".$headerS['header_replacement_logo']."' class='alternate' alt='' title='' />";
						}
						
						$output .= avia_logo(AVIA_BASE_URL.'images/layout/logo.png', $addition, 'span', true);
						
							if(!empty($headerS['bottom_menu']))
							{
								ob_start();
								do_action('ava_before_bottom_main_menu'); // todo: replace action with filter, might break user customizations
								$output .= ob_get_clean();
							}
							
						    if($headerS['header_social'] == 'icon_active_main' && !empty($headerS['bottom_menu']))
						    {
							    $output .= $icons;
						    }
						    
						
						/*
						*	display the main navigation menu
						*   modify the output in your wordpress admin backend at appearance->menus
						*/
						    
						    if($headerS['bottom_menu'])
						    { 
							    $output .= "</div>";  
								$output .= "</div>";
								
								if( !empty( $headerS['header_menu_above'] ))
								{
									$avia_config['temp_logo_container'] = "<div class='av-section-bottom-logo header_color'>".$output."</div>";
									$output = "";
								}
								
								$output .= "<div id='header_main_alternate' class='container_wrap'>";
								$output .= "<div class='container'>";
							}
						
							
							    $output .= "<nav class='main_menu' data-selectname='".__('Select a page','avia_framework')."' ".avia_markup_helper(array('context' => 'nav', 'echo' => false)).">";
							        $avia_theme_location = 'avia';
							        $avia_menu_class = $avia_theme_location . '-menu';
							        $args = array(
							            'theme_location'	=> $avia_theme_location,
							            'menu_id' 			=> $avia_menu_class,
							            'menu_class'		=> 'menu av-main-nav',
							            'container_class'	=> $avia_menu_class.' av-main-nav-wrap'.$icon_beside,
							            'fallback_cb' 		=> 'avia_fallback_menu',
							            'echo' 				=>	false, 
							            'walker' 			=> new avia_responsive_mega_menu()
							        );
							
							        $main_nav = wp_nav_menu($args);
							        $output .= $main_nav;
							        
							      
								    /*
								    * Hook that can be used for plugins and theme extensions
								    */
								    ob_start();
								    do_action('ava_inside_main_menu'); // todo: replace action with filter, might break user customizations
								    $output .= ob_get_clean();
								    
								    if($icon_beside)
								    {
									    $output .= $icons; 
								    }
								        
								    $output .= '</nav>';
								
								    /*
								    * Hook that can be used for plugins and theme extensions
								    */
								    ob_start();
								    do_action('ava_after_main_menu'); // todo: replace action with filter, might break user customizations
									$output .= ob_get_clean();
							
				
					 /* inner-container */
			        $output .= "</div>";
						
		        /* end container */
		        $output .= " </div> ";
		   		
		   		}

		   		//output the whole menu     
		        echo $output; 
		        
		        
		   ?>

		<!-- end container_wrap-->
		</div>
		
		<div class='header_bg'></div>

<!-- end header -->
</header>

FILE functions.php

/**
 * Load GnMenu.
 */
require get_template_directory() . '/includes/gnmenu-walker.php';

Actually I also tried to simplify the helper-main-menu.php, by deleting everything and adding only the core part I am interested in that is the one reported in my first question, but still didn’t work:

Thanks for any help you could provide

June 12, 2017 at 6:02 pm #806992

Yigit

Keymaster

Hi,

Unfortunately it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However if its really important for you to get this done, you can always hire a freelancer to do the job for you :)

Best regards,
Yigit

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.