I have a custom menu that is structured by a parent-child-subchild-and so on hierarchy. On each parent menu item (of which only six exist) there is a special picture I want to show in the corner of the website.
I now need a way to set a condition like this (this is fantasy-code of course):
if (current_parent_menu_item == "Home") : echo "Picture01"; endif;
if (current_parent_menu_item == "About") : echo "Picture02"; endif;
and so on...
I have no idea how I could access or ask for the current parent menu item.
Can anyone help?
Thanks a lot!
Sebastian
You should be using a walker class for this kind of stuff. Here is a simple walker class that you can use
class MyWalker extends Walker_Nav_Menu
{
function display_element ($element, &$children_elements, $max_depth, $depth = 0, $args, &$output)
{
// check, whether there are children for the given ID and append it to the element with a (new) ID
$element->hasChildren = isset($children_elements[$element->ID]) && !empty($children_elements[$element->ID]);
return parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
}
function start_el(&$output, $item, $depth, $args)
{
global $wp_query;
// you know can access $item->hasChildren to do anything you want..
}
}
If you just want to get over it, then you should use jquery to add the html to the parent element. You can do something like this.
jQuery(document).ready(){
jQuery('ul#id > li').prepend('<img src="#" alt="">');
}
Related
I've a WordPress website and am trying to add a custom search option in the website's home page as well in the header section. Unfortunately I can't see any option to include it from the website's dashboard and decided to follow the link to create a custom one as follows:
Tutorial Link - Custom Search
and this is the code that I've tried same as the tutorial:
add_action('tickercontainer','add_search_to_footer'); //Guessinghere I've to declare the div class
function add_search_to_footer() {
get_search_form();
}
function SearchFilter($query) {
if ( !is_admin() && $query->is_search ) {
$query->set('post_type', 'post'); //OR USE 'PRODUCT'
}
return $query;
}
add_filter('pre_get_posts','SearchFilter');
function storefront_search_form_modify( $html ) {
return str_replace( array('Search …','Search'), array('WooCommerce Hooks, Storefront Theme, Google AdWords...','Search Article'), $html );
}
add_filter( 'get_search_form', 'storefront_search_form_modify' );
function new_nav_menu_items($items) {
$searchicon = '<li class="search"><i class="fa fa-search" aria-hidden="true"></i></li>';
$items = $items . $searchicon;
return $items;
}
add_filter( 'wp_nav_menu_additional-resources_items', 'new_nav_menu_items' );
Though I am not sure what I am missing here and would expect some ideas to implement in an appropriate way.
Note: Right now, after including the code above, I can't see the search option in the website.
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)); ?>
I am implementing a theme in Wordpress. This theme has a top navigation menu with horizontal sub menus under each parent item. It puts an "active" class on current parent items currently been viewed (otherwise it won't show it's children sub menu items). I have somehow managed to maintain "active" class on current parent items by using these two function in functions.php.
/**
* Wp Nav Menu Customizer.
*/
function special_nav_class($classes, $item){
if( in_array('current-menu-item', $classes) ){
$classes[] = 'active ';
}
return $classes;
}
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
class SH_Last_Walker extends Walker_Nav_Menu{
function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
$id_field = $this->db_fields['id'];
//If the current element has children, add class 'sub-menu'
if( isset($children_elements[$element->$id_field]) ) {
$classes = empty( $element->classes ) ? array() : (array) $element->classes;
$classes[] = 'has-sub-menu';
$element->classes =$classes;
}
// We don't want to do anything at the 'top level'.
if( 0 == $depth )
return parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
//Get the siblings of the current element
$parent_id_field = $this->db_fields['parent'];
$parent_id = $element->$parent_id_field;
$siblings = $children_elements[ $parent_id ] ;
//No Siblings??
if( ! is_array($siblings) )
return parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
//Get the 'last' of the siblings.
$last_child = array_pop($siblings);
$id_field = $this->db_fields['id'];
//If current element is the last of the siblings, add class 'last'
if( $element->$id_field == $last_child->$id_field ){
$classes = empty( $element->classes ) ? array() : (array) $element->classes;
$classes[] = 'last';
$element->classes =$classes;
}
return parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
}
}
But now my problem is that when i click on sub menu or child of any parent menu item it successfully takes me to the child page but removes "active" class from parent and puts it on children (because it is the currently viewed page). I don't want it to put this class to children, i want it to be there (on parent item) whenever it's children are being viewed.
Any help would be much appreciated.
if you want to the dropdown grand-grand parent to be active when child menu item is active, then you can check for current-menu-ancestor or current-page-ancestor.. in your case, i think current-menu-ancestor check is most favorable.
function special_nav_class($classes, $item){
if( in_array('current-menu-item', $classes) || in_array('current-menu-ancestor', $classes) ){
$classes[] = 'active ';
}
return $classes;
}
I hope this would help, have a nice day :)
If all you want is to add some style or other properties by targeting the parent element then WordPress Provides you built-in classes for it for example:
when you are on a child page you can see classes like current-menu-parent current-page-parent current_page_parent current_page_ancestor these added to the parent page by WordPress you can choose any of these to target the parent element.
When you click on sub menu item WordPress will add .current-menu-item class to that sub menu item and .current-menu-parent class to the parent menu item of that sub menu item. You can style those specific classes according to your needs.
I've created a wordpress menu with wp_nav_menu.
my structure looks like:
Page
Category
Page
Page
Page
If I open a post in "Category", there is no "current" class on the top level of the menu – only on "Category". Nesting only with pages works fine on multi level menus.
Is there a way to fix that?
1) Either write a custom walker http://codex.wordpress.org/Function_Reference/wp_nav_menu#Using_a_Custom_Walker_Function to add a current class when that category is called;
2) Or, (not the most elegant): find your page ID for the menu item you want - 1000 in the example below - to highlight as current, select that category - is_category - and then add the current class - addClass - with jQuery:
<?php if (is_category('my-category')) { ?>
<script type="text/javascript">
jQuery(function($) {
$(document).ready(function() {
$('#menu-main-menu li.menu-item-1000').addClass('current-menu-item');
}); });
</script>
<?php } ?>
ahh... found the solution in the wordpress codex. this works fine for me:
add_filter( 'wp_nav_menu_objects', 'add_menu_parent_class' );
function add_menu_parent_class( $items ) {
$parents = array();
foreach ( $items as $item ) {
if ( $item->menu_item_parent && $item->menu_item_parent > 0 ) {
$parents[] = $item->menu_item_parent;
}
}
foreach ( $items as $item ) {
if ( in_array( $item->ID, $parents ) ) {
$item->classes[] = 'menu-parent-item';
}
}
return $items;
}
How could I remove classes from the body element in Wordpress?
Default:
body class="page page-id-7 page-template-default logged-in"
What I'm looking for:
body class="page-id-7"
On Post's:
body class="postid-40"
This is how you find something like this out:
Find the relevant function by looking in a theme file, in this case header.php
Look this function up in the Wordpress Codex (http://codex.wordpress.org/Function_Reference/body_class)
Is there any examples that look similar to what I want to do? Yes:
// Add specific CSS class by filter
add_filter('body_class','my_class_names');
function my_class_names($classes) {
// add 'class-name' to the $classes array
$classes[] = 'class-name';
// return the $classes array
return $classes;
}
So basically, to remove all classes, just add this to functions.php:
add_filter('body_class','my_class_names');
function my_class_names($classes) {
return array();
}
t
4. But I want to keep page id and post id - how can I do that? Because you don't know on what index in the array that you can find this information on, and searching through the array is lame, you need to first empty the array like we did above, and then add the stuff you really want. How do you get the right information, that is, page id and post id? This is step five.
(5) At the bottom of the codex page you will find a link to the source code. This is the link you'll find: http://core.trac.wordpress.org/browser/tags/3.2.1/wp-includes/post-template.php If you look at the function, you'll see it uses a function which simply populates the same array that we can manipulate with aforementioned filter. By looking how they do it, you can do it too.
add_filter('body_class','my_class_names');
function my_class_names($classes) {
global $wp_query;
$arr = array();
if(is_page()) {
$page_id = $wp_query->get_queried_object_id();
$arr[] = 'page-id-' . $page_id;
}
if(is_single()) {
$post_id = $wp_query->get_queried_object_id();
$arr[] = 'postid-' . $post_id;
}
return $arr;
}
Hopefully this code works. If it does not, try to figure out what's wrong by following the steps above. I hope I helped at least a little bit :)
currently working code to remove and add a class
//remove body class
add_filter('body_class', function (array $classes) {
if (in_array('class_name', $classes)) {
unset( $classes[array_search('class_name', $classes)] );
}
return $classes;
});
// Add specific CSS class by body.
add_filter( 'body_class', function( $classes ) {
return array_merge( $classes, array( 'class-name' ) );
} );