Skip to content

Instantly share code, notes, and snippets.

@igorveremsky
Last active October 6, 2017 15:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save igorveremsky/da27461f51c1516aebd301f1934de0ae to your computer and use it in GitHub Desktop.
Save igorveremsky/da27461f51c1516aebd301f1934de0ae to your computer and use it in GitHub Desktop.
Custom Style for Menu Item with Categories in Wordpress, connected with https://gist.github.com/igorveremsky/63692b1e4718849c3f93992bc7ad783e
<?php
class CustomStyleForMenuItemWalker extends Walker_Nav_Menu {
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
// add classes for menu item
$class_names = join( ' ', $item->classes );
$class_names = ' class="' .esc_attr( $class_names ). '"';
$output.= '<li id="menu-item-' . $item->ID . '"' .$class_names. '>';
//first get the current category ID
$cat_id = $item->object_id;
//then i get the data from the database
$cat_data = get_option("category_$cat_id");
//and then i just display my category image if it exists
$cat_custom_color = $cat_data['custom_color'];
// add attributes for link
$attributes = !empty( $item->url ) ? ' href="' .esc_attr($item->url). '"' : '';
$item_output = $args->before;
// add custom style for category
if ($cat_custom_color) {
$item_output .= <<<EOT
<style>
li#menu-item-{$item->ID}:after {
background: #{$cat_custom_color};
}
#site-sidebar #site-navigation .menu > li#menu-item-{$item->ID} a:hover,
#site-sidebar #site-navigation .menu > li#menu-item-{$item->ID}.current-menu-item > a {
color: #{$cat_custom_color};
}
</style>
EOT;
}
$item_output .= '<a'. $attributes .'>'.$item->title.'</a>';
$item_output.= $args->after;
$output.= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
wp_nav_menu( array(
'theme_location' => 'category',
'walker' => new CustomStyleForMenuItemWalker()
) ); ?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment