i'm new to wordpress theming and I currently try to implement a navigation menu using icons. The framework i use requires me to set specific class names to achieve the icon being displayed - so what i basically want is:
<ul>
<li class="blog">blog</li>
....
So the class should be equal to the content
I found the following in the wordpress docs
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){
if(is_single() && $item->title == "Blog"){
$classes[] = "special-class";
}
return $classes;
}
This is how I currently display my menu
wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) );
I'm kind of confused by the example given from the wordpress doc's since I cannot figure out the use of al the parameters or even where to place it.
I assume that you are registered your primary menu in functions.php.
After that you must put this code sample again in your functions.php.
What the code does is that it would launch the function special_nav_class for each menu item from primary-menu. As a parameter this function will receive the current menu item ( as post object ) and current classes applied for it as an array.
So, if you have menu with 5 elements, this function will run 5 times and each time it will receive current menu item and its classes array.
Basically something like this can do the job, if menu items are named properly:
function special_nav_class($classes, $item){
$classes[] = strtolower($item->title);
return $classes;
}
Related
I just search for hours to find a solution for my problem. I need to add a body class to my category page and want to apply this class also on all subcategories and posts of the parent category.
For example i want category --> subcategory --> post to have the same class "orange" in body tag of HTML so i can style it properly.
Thanks for any advice.
Sounds like you're putting in too much effort to get a class 'orange' when you can use one of the classes automatically provided to you.
A typical wordpress body class looks something like this
single single-listing postid-3259 custom-header header-image content-sidebar agentpress-pro-blue windows chrome override
There may be more or less but there is usually a class you can use to target a specific page ('postid-3259') or a group of pages ('single-listing').
Without seeing the page(s) you want to target I can't get more specific. Once you have your body class selected you can select any element on the page by adding more selectors.
If you're dead-set on adding an orange class this link may help.
https://css-tricks.com/snippets/wordpress/add-category-name-body_class/
You could utilize the body_class filter and some conditional tags to do this.
add_filter( 'body_class', 'add_parent_category_to_body_class' );
function add_parent_category_to_body_class( $classes ) {
if ( !is_category() && !is_single() ) {
return $classes;
}
$categories = get_the_category();
foreach ($categories as $category)
if ($category->category_parent == 0 ) {
$classes[] = $category->slug;
} else {
$parent = get_category($category->category_parent);
$classes[] = $parent->slug;
}
return $classes;
}
I want to add an additional menu item to my navigation via my functions.php
The code below works, but how can I add the CSS classes which are used in the navigation to the li element automatically without writing each class manually in the below stated function= There must be something like get_classes_for_li_elements() - does someone know how I can achieve this?
Thanks!
add_filter( 'wp_nav_menu_home_items', 'add_itemcart_to_menu' , 10, 2 );
function add_itemcart_to_menu( $items, $args ) {
$menu_item_li = '<li>My Item</li>';
return $items . $menu_item_li;
}
I would write something like
$menu_item_li = 'My Item';
or asign a class used by your theme
Hi im a web dev an im trying to get word press to use a 2nd navigation for my blog section. i have the main site all set up but what i want is when i hit the blog in my top nav to show a differnt navigation for the blog section. i have tried using the following code in the header.php
<?php
if (is_single('blog')){
wp_nav_menu(array('menu'=>'secondary' ));
}
?>
but this code does not seem to work even though the theme supports 2 navigations.
<nav class="Seo-nav">
<div class="Seo-nav-inner">
<?php
echo theme_get_menu(array(
'source' => theme_get_option('theme_menu_source'),
'depth' => theme_get_option('theme_menu_depth'),
'menu' => 'primary-menu',
'class' => 'Seo-hmenu'
)
);
get_sidebar('nav');
?>
the above code is the code i use to call my navigation. is there any way to get a specific page or pages to show the one menu? any help on this would be great. never had to make certain pages have different navigation before so this is a new one on me.
Like was said in comments earlier, you'll need Conditional Tags. Probably for you specifically, the is_page() conditional.
<?php
if (is_page('blog')) {
// Echo this menu on the blog slug page
wp_nav_menu(array(
'theme_location' => '[name_of_menu]'
));
} else {
// Otherwise, echo this one
wp_nav_menu(array(
'theme_location' => '[name_of_main_menu]'
));
}
See the codex for the wp_nav_menu attributes. Can print out the menu other ways, that's just the one I recommend.
Depending how you blog is set up, is_page('blog') may need to be is_home(), 'blog' == get_post_type(), or some other variation.
I think you can go here two ways.
One is to only show children of current page on the second like
function show_different_nav(){
global $post;
$sec_nav=wp_list_pages("child_of=".$post->ID);
return $sec_nav;
}
now call show_different_nav() in your template.
The other way would be to write an own filter. I modified the http://wordpress.org/plugins/get-different-menus/ in this case.
add_filter( 'wp_nav_menu_items', 'get_different_custom_menu_item_according_to_page_slug', 10, 2 );
function get_different_custom_menu_item_according_to_page_slug ( $items, $args ) {
$current_id=(int)$GLOBALS['post']->ID;
$current_slug=$GLOBALS['post']->slug;
$the_nmo = wp_get_nav_menu_object($current_slug);
if ($the_nmo==""){}else{
$menu_id=$the_nmo->term_id;
$items_2 = wp_get_nav_menu_items($menu_id);
$items="";
if ($args->theme_location == 'secondary') {
foreach ($items_2 as $item){
$link_page_id = (int)($item->object_id);
if ($current_id == $link_page_id){$cur=" current-menu-item current_page_item";}else{$cur="";
}
$items .= '<li class="menu-item menu-item-type-post_type menu-item-object-page'.$cur.'">'.$item->title.'</li>';
}
}
}
return $items;
}
In my opinion you need a menu for this called exactly the same as the page slug.
Hello I want to make a menu in wordpress. When menu item has class 'category' then add to this item submenu. How I can do it? I tried like this, but it only add class.
add_filter('nav_menu_css_class' , 'my_special_nav_class' , 10 , 2);
function my_special_nav_class( $classes, $item )
{
if($item->title == 'kategorie' )
{
$classes[] ='special-class';
}
var_dump($item->title);
return $classes;
}
You need wordpress Menu Walker for this. See Example from here.
Demo Tutorial
So after calling wp_nav_menu like:
<?php wp_nav_menu( array('menu' => 'Primary Menu' )); ?>
I end up with:
<li id="menu-item-1">
<li id="menu-item-2">
... ids like menu-item-1, menu-item-2, etc.
Is there some way to replace the numbers with the title of the page instead,so
menu-item-1 becomes menu-item-contact,
menu-item-2 becomes menu-item-store, etc?
You'll need to filter the ID using WordPress's nav_menu_item_id filter, which is applied in the nav-menu-template.php file. It takes three arguments, but the second one is what we need to actually get the title of the menu item, and turn it into something useful for the ID attribute. Here's a function to do that, which works for me in WordPress 3.4.1:
function custom_nav_menu_item_id($id, $item) {
$title = sanitize_title_with_dashes($item->title);
return 'menu-item-'.$title;
}
add_filter('nav_menu_item_id', 'custom_nav_menu_item_id', 10, 2);
This uses another WordPress function to sanitize the title into a string usable for the ID attribute (or any other HTML attribute).
Note that this function get's the menu item's title, which migth be different than the post or page title if you change it in the Menu panel from the admin.
Based on #Jeremy answer : I just add sanitize_title() to remove accents and special char.
function custom_nav_menu_item_id($id, $item) {
$title = sanitize_title_with_dashes(sanitize_title($item->title));
return 'menu-item-'.$title;
}
add_filter('nav_menu_item_id', 'custom_nav_menu_item_id', 10, 2);
/** for a better wp cleaning take a look # this gist and include it in your function.php */