I have a custom menu :
function mfn_wp_nav_menu() {
$args = array(
'container' => 'nav',
'container_id' => 'menu',
'menu_class' => 'menu',
'fallback_cb' => 'mfn_wp_page_menu',
'depth' => 5,
'link_before' => '<span>',
'link_after' => '</span>',
);
}
And the input in HTML is :
<li id="id" class="class">
<a href="#" data-hash="">
<span>Start</span>
</a>
</li>
But I want to add data-letters="Link name", so for example :
<li id="id" class="class">
<a href="#" data-hash="">
<span data-letters="Start">Start</span>
</a>
</li>
Any Idea ?
You can extend the Walker menu class like this:
class MyMenu extends Walker {
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$output .= sprintf( "\n<li><a href='%s'%s><span data-letters='%s'>%s</span></a></li>\n",
$item->url,
( $item->object_id === get_the_ID() ) ? ' class="current"' : '',
$item->title,
$item->title
);
}
}
And apply it to your menu:
wp_nav_menu(array(
'menu' => 2, // menu id
'walker' => new MyMenu()
// your other options
));
See this example from the reference: here
Related
I use a CSS framework and a custom menu for wordpress :
<?php
$menuParameters = array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
'container' => false,
'echo' => false,
'items_wrap' => '%3$s',
'depth' => 0,
);
$output = strip_tags(wp_nav_menu($menuParameters),'<a>');
$output = preg_replace('/<a/', '<a class="nav-item"', $output);
echo $output;
?>
Result :
<div class="nav-right nav-menu">
<a class="nav-item" href="/">Page1</a>
<a class="nav-item" href="/"> Page2</a>
<a class="nav-item" href="/"> Page3</a>
</div>
And what I want : (If I'm on the page "Page 2")
<div class="nav-right nav-menu">
<a class="nav-item" href="/">Page1</a>
<a class="nav-item current-menu-item" href="/"> Page2</a>
<a class="nav-item" href="/"> Page3</a>
</div>
I don't find hook, walker_menu, or an other solution to add a class on the current menu (like "current-menu-item on the original Wordpress menu)
Any idea ?
Thank you !
Is there a reason why you want to use a different class when active? You could use :active
see: https://www.w3schools.com/cssref/sel_active.asp
Then your CSS would be like:
.nav-item :active{ background:yellow;}
Try something like the below
Add to your $menuParameters the current arg.
$menuParameters = array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
'container' => false,
'current' => max( 1, get_query_var('paged') ), // added this
'echo' => false,
'items_wrap' => '%3$s',
'depth' => 0,
);
$output = strip_tags(wp_nav_menu($menuParameters),'<a>');
$output = preg_replace('/<a/', '<a class="nav-item"', $output);
$output = preg_replace('/current', 'current-menu-item', $output); // added this
echo $output;
?>
If that doesn't work, play a little with the $output's second preg_replace or remove it and just refer to the active item when it has just the class current and not current-menu-item . If you remove it, i would expect the below result :
<div class="nav-right nav-menu">
<a class="nav-item" href="/">Page1</a>
<a class="nav-item current" href="/"> Page2</a>
<a class="nav-item" href="/"> Page3</a>
</div>
I'm creating theme with WordPress and I'm using default bootstrap navbar for navigation.
<ul class="nav navbar-nav navbar-right">
<li class="active"><a class="scroll" href="#home">HOME</a></li>
<li><a class="scroll" href="#about">ABOUT</a></li>
<li><a class="scroll" href="#services">SERVICES</a></li>
<li><a class="scroll" href="#team">TEAM</a></li>
<li><a class="scroll" href="#portfolio">PORTFOLIO</a></li>
<li><a class="scroll" href="#contact">CONTACT</a></li>
</ul>
I was using wp-bootstrap-nawalker https://github.com/twittem/wp-bootstrap-navwalker for creating my navigation dynamic.
wp_nav_menu( array(
'menu' => 'primary',
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav navbar-right',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker()
));
Which is working fine. But I can't see scroll class inside my anchor tags. I can't see any options in wp-bootstrap-navwalker to customize my anchor tags.
The Problem: I'm having scroll class in my anchor tags. <a class="scroll"></a>. Is there any way to put scroll class inside my anchor tags.
if you want to add class inside anchor tags, you need to edit bootstrap_navwalker.php ( lines 80 -94 )
$atts = array();
$atts['title'] = ! empty( $item->title ) ? $item->title : '';
$atts['target'] = ! empty( $item->target ) ? $item->target : '';
$atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : '';
$atts['class'] = 'scroll'; // class for anchor tag
// If item has_children add atts to a.
if ( $args->has_children && $depth === 0 ) {
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
$atts['data-toggle'] = '';
$atts['class'] = 'scroll dropdown-toggle'; // class for dropdown anchor tag
$atts['aria-haspopup'] = 'true';
} else {
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
}
wp-bootstrap-navwalker recently updated to 2.0.5, so you may want to update and the lines you need to modify may have changed.
I tried to add icons to left of the category names with the following codes;
/** Add Custom Field To Category Form */
add_action( 'category_add_form_fields', 'category_form_custom_field_add', 10 );
add_action( 'category_edit_form_fields', 'category_form_custom_field_edit', 10, 2 );
function category_form_custom_field_add( $taxonomy ) {
?>
<div class="form-field">
<label for="category_custom_order">Simge Kodu</label>
<input name="category_custom_order" id="category_custom_order" type="text" value="" size="40" aria-required="true" />
<p class="description">Dökümanda bulunan simgelerden birini seçip kodunu buraya girin.</p>
</div>
<?php
}
function category_form_custom_field_edit( $tag, $taxonomy ) {
$option_name = 'category_custom_order_' . $tag->term_id;
$category_custom_order = get_option( $option_name );
?>
<tr class="form-field">
<th scope="row" valign="top"><label for="category_custom_order">Simge Kodu</label></th>
<td>
<input type="text" name="category_custom_order" id="category_custom_order" value="<?php echo esc_attr( $category_custom_order ) ? esc_attr( $category_custom_order ) : ''; ?>" size="40" aria-required="true" />
<p class="description">Dökümanda bulunan simgelerden birini seçip kodunu buraya girin.</p>
</td>
</tr>
<?php
}
/** Save Custom Field Of Category Form */
add_action( 'created_category', 'category_form_custom_field_save', 10, 2 );
add_action( 'edited_category', 'category_form_custom_field_save', 10, 2 );
function category_form_custom_field_save( $term_id, $tt_id ) {
if ( isset( $_POST['category_custom_order'] ) ) {
$option_name = 'category_custom_order_' . $term_id;
update_option( $option_name, $_POST['category_custom_order'] );
}
}
?>
After that, i added the following codes to the theme. I want to use get_option function to get icons which belongs to each categories. However, i cannot get category id, so it cannot work. How can i get category id's? I mean, in the code, get_option('category_custom_order_{menu ID}' ), {menu ID} should return the each category id. Can you please help, thanks.
<?php
$defaults = array(
'theme_location' => 'menu',
'menu' => 'Üst Menü',
'container' => '',
'container_class' => '',
'container_id' => '',
'menu_class' => 'menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '<i class="fa '.get_option('category_custom_order_{menu ID}' ).' fa-fw"></i> ',
'link_after' => '',
'items_wrap' => '%3$s',
'depth' => 0,
'walker' => ''
);
wp_nav_menu( $defaults );
?>
I need your help. I need to add a specific class on the link that wordpress generates in the menu.
What should I edit?
The HTML output in my case is:
<nav class="nav" role="navigation">
<ul>
<li id="menu-item-8" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8">Sample Page</li>
<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9">Prova sample</li>
</ul></nav
the code in the header file that generate the menu is:
<!-- nav -->
<nav class="nav" role="navigation">
<?php html5blank_nav(); ?>
</nav>
<!-- /nav -->
You can do it through admin panel also
In Appearance > Menus, click the Screen Options tab
Under Show advanced menu properties, check CSS Classes
Now expand any menu item to reveal the CSS Classes (optional) text
input.
Enter your class name and save your menu to apply the class to the
menu item
http://sevenspark.com/how-to/how-to-add-a-custom-class-to-a-wordpress-menu-item
Adds a class <a class=>
https://codex.wordpress.org/Plugin_API/Filter_Reference/nav_menu_link_attributes
function add_specific_menu_location_atts( $atts, $item, $args ) {
// check if the item is in the primary menu
if( $args->menu == 'primary' ) {
// add the desired attributes:
$atts['class'] = 'menu-link-class';
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_specific_menu_location_atts', 10, 3 );
After creating some WordPress sites based on the Bootstrap framework, i've come up with a solution of easily manipulating the WordPress navigation output by initializing the classes you want. This will make sure your enduser will not be needed to add all the custom classes when the client add's a new menu item.
Maybe it could help someone;
https://github.com/nickkuijpers/WordPress-Extended-Bootstrap-Nav-Walker
Try edit html5blank_nav() function, in functions.php file
// HTML5 Blank navigation
function html5blank_nav()
{
wp_nav_menu(
array(
'theme_location' => 'header-menu',
'menu' => '',
'container' => 'div',
'container_class' => 'menu-{menu slug}-container',
'container_id' => '',
'menu_class' => 'menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul>%3$s</ul>',
'depth' => 0,
'walker' => ''
)
);
}
I created a theme in HTML using Zurb Foundation and then integrated it into a WordPress theme.
The primary nav section in my theme, in its most basic form is:
<dl>
<dd></dd>
<dd></dd>
<dd></dd>
</dl>
I configured wordpress's menu call as such:
wp_nav_menu( array(
'theme_location' => 'primary',
'menu' => '',
'container' => '',
'container_class' => '',
'container_id' => '',
'menu_class' => 'menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<dl id="tabnav" class="sub-nav">%3$s</dl>',
'depth' => 0,
'walker' => '') );
But in order to change the wrapping <li> that wordpress puts out to a <dd> I would need to write a custom walker.
I looked through some custom walkers and can see parts of the logic, but is creating a class every time I want to use custom html for a menu the only/most efficient way to go about it?
digwp provides an easier approach than the walker
create a function that builds the menu from scratch.
in your functions.php
// custom menu example # http://digwp.com/2011/11/html-formatting-custom-menus/
function clean_custom_menus() {
$menu_name = 'nav-primary'; // specify custom menu slug
if (($locations = get_nav_menu_locations()) && isset($locations[$menu_name])) {
$menu = wp_get_nav_menu_object($locations[$menu_name]);
$menu_items = wp_get_nav_menu_items($menu->term_id);
$menu_list = '<dl>' ."\n";
foreach ((array) $menu_items as $key => $menu_item) {
$title = $menu_item->title;
$url = $menu_item->url;
$menu_list .= "\t\t\t\t\t". '<dd>'. $title .'</dd>' ."\n";
}
$menu_list .= "\t\t\t". '</dl>' ."\n";
} else {
// $menu_list = '<!-- no list defined -->';
}
echo $menu_list;
}
and to call it in your theme:
<?php if (function_exists(clean_custom_menus())) clean_custom_menus(); ?>
so you would have to edit the $menu_name to your menu slug.
here's the source