Hi I am using wordpress for the first time. I am trying to incorperated the walker class into my project which is located at
D:\wamp\www\SgsOnline\wp-content\themes\storefront\inc\functions\walker.php
I've included my class in my functions as
require get_template_directory() . '/inc/functions/walker.php';
And I am trying to call it in my header like :
function storefront_primary_navigation() {
?>
<nav id="site-navigation" class="main-navigation " role="navigation" aria-label="<?php esc_html_e( 'Primary Navigation', 'storefront' ); ?>">
<button class="menu-toggle" aria-controls="primary-navigation" aria-expanded="false"><?php echo esc_attr( apply_filters( 'storefront_menu_toggle_text', __( 'Navigation', 'storefront' ) ) ); ?></button>
<?php
wp_nav_menu(
array(
'theme_location' => 'primary',
'container_class' => 'primary-navigation',
'menu_class'=>'nav navbar-nav navbar-left nav-tabs',
'walker' => new Walker_Nav_Primary()
)
);
?>
</nav><!-- #site-navigation -->
<?php
}
But I am getting a error :
Fatal error: Class 'Walker_Nav_Primary' not found in
D:\wamp\www\SgsOnline\wp-content\themes\storefront\inc\structure\header.php
on line 65
This is oblivious wrong because it is looking in the wrong place for the class.
If anyone has any experience with this would be great
Regards
UPDATE
here is the class code
<?php
/* Collection of walker classes*/
class Walker_Nav_Primary extends Walker_Nav_menu {
function start_lvl( &$output, $depth){ //ul
$indent = str_repeat("\t", $depth );
$submenu = ($depth > 0) 'sub-menu' : ''; //Detect if the lvls is a submenu
$output .= "\n$indent<ul class=\"dropdown-menu$submenu depth_$depth\">\n";
}
/*
function end_lvl(){ // close ul
}
Not used at the moment
function start_el(){ // li, a, span
}
function end_el(){ // closing li, a, span
}
*/
}
At first glance it appears that file path is incorrect. / is unix directory separator but you need to use \ for Windows.
$path_elements = array(get_template_directory(), 'inc', 'functions', 'walker.php');
require join(DIRECTORY_SEPARATOR , $path_elements);
Walker_Nav_Primary has a syntax error in shorthand if-else statement (missing question mark after logical expression).
$submenu = ($depth > 0) ? 'sub-menu' : '';
I believe the issue is how you reference your walker...
'walker' => new Walker_Nav_Primary()
should just be...
'walker' => new Walker_Nav_Primary
no () needed.
If there was an issue with how you include your walker.php file that would error first as functions.php is run before your header.php.
Related
In Wordpress, how can I add a button or div into all sub-menu li's using wp_nav_menu?
This is my current code:
<?php wp_nav_menu(array(
'theme_location' => 'main_menu',
'items_wrap'=>'%3$s',
'container' => false
)); ?>
This is my desired output:
<li class="submenu">
<a>Link 1</a>
<ul>
<li><a>Link 2</a></li>
</ul>
<button type="button">Click Me!</button>
</li>
So, Custom Walkers are a bit of a pain to work with, until you understand them.
The below custom walker code should get you what you need. Add this to your theme's functions.php file:
class Custom_Button_Walker extends Walker_Nav_Menu {
// We only care about the "end level" part of the menu, where closing </ul> tags are generated
public function end_lvl( &$output, $depth = 0, $args = array() ) {
// This is from WP core code
$indent = str_repeat("\t", $depth);
// This line ensures we only add it on the proper level
$button = (0 == $depth) ? "{$indent}<button type=\"button\">Click Me!</button>\n" : '';
// This line is modified to include the button markup
$output .= "{$indent}</ul>\n{$button}";
}
}
To use the custom walker, modify your wp_nav_menu call like so:
wp_nav_menu( array(
'theme_location' => 'main_menu',
'items_wrap' =>'%3$s',
'container' => FALSE,
'walker' => new Custom_Button_Walker()
));
How to add active class to my anchor in Wordpress? Current code is below:
$args = array(
'theme_location' => 'primary',
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'menu_class' => 'nav navbar-nav navbar-right'
);
wp_nav_menu( $args );
I get this output for each menu item:
<li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42">
Services
</li>
But I want the 'a' tag to have an 'active' class, like I have shown below:
<li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42">
<a class="active" href="http://localhost:8888/axial/services/">Services</a>
</li>
Yes it's possible, try code below:
function add_class_to_href( $classes, $item ) {
if ( in_array('current_page_item', $item->classes) ) {
$classes['class'] = 'active';
}
return $classes;
}
add_filter( 'nav_menu_link_attributes', 'add_class_to_href', 10, 2 );
Just paste this code into functions.php file:
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class ($classes, $item) {
if (in_array('current-menu-item', $classes) ){
$classes[] = 'active ';
}
return $classes;
}
You can do this with CSS.
you can use current-menu-item class which is added by default.
/*you have to add the active menu item styles like this*/
a{
padding:5px;
font-family:arial;
color:#333;
text-decoration:none;
}
.navbar-right ul li{
display:inline-block;
list-style-type:none;
border:1px solid #bbb;
padding:5px;
}
.navbar-right li.current-menu-item > a {
color:#fff;
background:#bbb;
/*you can add the active anchor styles here*/
}
<nav class="navbar-right">
<ul>
<li class="current-menu-item">Home</li>
<li class="menu-item">About</li>
<li class="menu-item">Contact</li>
</ul>
</nav>
Today most of the time we have to deal with dropdown menus in wordpress so,just to improvise the above answer, you can use:
add_filter('nav_menu_css_class', 'add_active_class', 10, 2 );
function add_active_class($classes, $item) {
if( $item->menu_item_parent == 0 && in_array('current-menu-item', $classes) ) {
$classes[] = "active";
}
return $classes;
}
you can add active class for child elements using the below code:
add_filter('nav_menu_css_class', 'add_active_class', 10, 2 );
function add_active_class($classes, $item)
{
if( in_array( 'current-menu-item', $classes ) ||
in_array( 'current-menu-ancestor', $classes ) ||
in_array( 'current-menu-parent', $classes ) ||
in_array( 'current_page_parent', $classes ) ||
in_array( 'current_page_ancestor', $classes ))
{
$classes[] = "active";
}
return $classes;
}
I also face the same problem and after searching many page I could only find the solution that I have to set it using jquery code. so I find a unique class addition in my page ".current_page_item" you might have the same or ".current_menu_item" etc.. so just include the following jquery code to your footer and your page will work fine.
$(".current_page_item a").addClass("active");
Do hop this will solve your problem.
You can add "nav-link" class to all anchor tags while having the "active" class on current menu item only by using this code.
/**
* Add CSS class for "<a>" tags in menu
*/
function your_theme_add_menu_link_class( $classes, $item ) {
$classes['class'] = "nav-link"; // Add class to every "<a>" tags
if ( in_array('current_page_item', $item->classes) ) {
$classes['class'] = 'nav-link active'; // Add class to current menu item's "<a>" tag
}
return $classes;
}
add_filter( 'nav_menu_link_attributes', 'your_theme_add_menu_link_class', 10, 2 );
Looking for your help and advices.
I have a list of links to single in Wordpress. I need to place class active only to li of active page.
Should be like on this image
But it is:
My wp-code:
<ul class="inline-list medium-6 large-4 skill-items">
<?php
$id = get_the_ID();
// echo $id;
$class;
$skills = new WP_Query( array(
'post_type' => 'skills',
'order' => 'ASC'
));
if ($skills->have_posts()) : while ($skills->have_posts()) : $skills->the_post();
// echo $post->ID;
if( $id == $post->ID) {$class = 'active';} else {$class = '';}
?>
<li class="<?php echo $class; ?>"><?php the_title(); ?></li>
<?php endwhile; endif; wp_reset_query();
?>
</ul>
That's not the proper way to do a menu in Wordpress. You should use wp_nav_menu instead of doing a custom WP_Query.
First, in functions.php add the following to register a new menu:
add_action('after_setup_theme', 'register_my_menu');
function register_my_menu() {
register_nav_menu('skills_menu', __( 'Skills menu', 'your-theme-name' ));
}
Then log in your administration, you will see that new menu placement under Appearance > Menu. Create a new menu for that placement - you have the possibility to automatically add top level new pages to this menu.
Then in your template add the following in order to display the menu:
<?php wp_nav_menu(array('theme_location' => 'skills_menu')); ?>
Wordpress will automatically handle the active class by adding current-menu-item to the appropriate li. No need for any filter for that.
Found an answer for my question using Javascript/jQuery
jQuery(document).ready(function($){
var pgurl = window.location.href;
$("ul.skill-items li").each(function(){
if($(this).find('a').attr("href") == pgurl || $(this).find('a').attr("href") == '' )
$(this).addClass("active");
})
});
pgurl contains your current url. After that for each item we are looking for anchor and its link. Then we are comapring those links, and if their are equal, we add class active to li
You may try this:
function my_alter_classes_on_li( $classes, $item ){
global $post;
if( in_array( $post->post_type, $classes ) ) $classes[] = 'current-menu-item';
return $classes;
}
add_filter( 'nav_menu_css_class', 'my_alter_classes_on_li', 10, 2 );
I need add to my menu extra icon before text. So I read in documentation that I need implement custom Walker_Nav_Menu. After some analyzing, I recognize I could implement my custom walker accord with decorator pattern. I have very small expirience in php especially wordpress. My code works weird. Look at it:
class Walker_nav_menu_Decorator extends Walker_Nav_Menu{
public $menu;
public static $index = 0;
function __construct() {
$menu = new Walker_Nav_Menu();
}
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
if($item->title == "Main Menu"){
$args->before = "TEST";
}
echo $index;
$index+=1;
parent::start_el($output, $item, $depth, $args, $id);
}
}
It doesn't echo $index at all oO. Additionally add extra "TEST" word before each menu item. How should I do it properly and why this version doesn't work?
My class is in my functions.php file and I'm calling my menu here:
wp_nav_menu( array( 'theme_location' => 'main_menu', 'container' => 'nav' ,'container_class' => 'menu', 'walker' => new Walker_nav_menu_Decorator() ) );
your $index is static so don't call it directly but by
echo self::$index;
self::$index+=1;
I am using the following override in my functions.php
function wp_nav_menu_attributes_filter($var) {
return is_array($var) ? array_intersect($var, array('current-menu-item')) : '';
}
add_filter('nav_menu_css_class', 'wp_nav_menu_attributes_filter', 100, 1);
add_filter('nav_menu_item_id', 'wp_nav_menu_attributes_filter', 100, 1);
add_filter('page_css_class', 'wp_nav_menu_attributes_filter', 100, 1);
This removes the class tag that wordpress adds to a menu item. Now what I need to do is actually put in my own class name into the li tag instead, can anyone fill me in quickly on how to do that, I have scoured google and maybe I am searching for it wrong or what not or I just cannot understand the hook system with the functions.php file....
Using the above make my html output as...
<ul id="menu-homemenu" class="list-group special">
<li>Biography</li>
<li>Selected Works</li>
<li>Contact Us</li>
</ul>
Of course after I posted a comment I figured it out...sigh hate when this takes all evening to get it...this question pointed me in the right direction - How to add custom HTML to wp_nav_menu?
I added this class..
class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$output .= "<li class='list-group-item'>".esc_attr($item->title)."";
}
function end_el( &$output, $item, $depth = 0, $args = array() ) {
$output .= "</li>\n";
}
}
Then added this to my array where I called my nav inside my template...
<?php wp_nav_menu(array('menu' => 'HomeMenu','menu_class' => 'list-group special','menu_id' => '','walker' => new Custom_Walker_Nav_Menu)); ?>