Last active
October 6, 2017 15:12
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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