How can I display thumbnails and their respective categories in a WordPress menu
-
hello!
I’m designing a WordPress theme, I’m having trouble designing a menu and I can’t display the thumbnail and its category.
This is my walker file:
<?php /** * Class Name: wp_bootstrap_navwalker_list_super * GitHub URI: https://github.com/twittem/wp-bootstrap-navwalker * Description: A custom WordPress nav walker class to implement the Twitter Bootstrap 2.3.2 navigation style in a custom theme using the WordPress built in menu manager. * Version: 1.4.5 * Author: Edward McIntyre - wpdesigner.ir * License: GPL-2.0+ * License URI: https://www.gnu.org/licenses/gpl-2.0.txt *Share by: https://wpdesigner.ir */ $args_1 = array( 'orderby' => 'name', 'order' => 'ASC', 'parent' => 0 ); class wp_bootstrap_navwalker_list_super extends Walker_Nav_Menu { /** * @see Walker::start_lvl() * @since 3.0.0 * * @param string $output Passed by reference. Used to append additional content. * @param int $depth Depth of page. Used for padding. */ function start_lvl( &$output, $depth = 0, $args = array() ) { $indent = str_repeat("\t", $depth); $output .= "\n$indent<ul class=\" dropdown-menu\">\n"; } /** * @see Walker::start_el() * @since 3.0.0 * * @param string $output Passed by reference. Used to append additional content. * @param object $item Menu item data object. * @param int $depth Depth of menu item. Used for padding. * @param int $current_page Menu item ID. * @param object $args */ function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) { $indent = ( $depth ) ? str_repeat( "\t", $depth ) : ''; /** * Dividers & Headers * ================== * Determine whether the item is a Divider, Header, or regular menu item. * To prevent errors we use the strcasecmp() function to so a comparison * that is not case sensitive. The strcasecmp() function returns a 0 if * the strings are equal. */ if (strcasecmp($item->title, 'divider') == 0) { // Item is a Divider $output .= $indent . '<li class="divider">'; } else if (strcasecmp($item->title, 'divider-vertical') == 0) { // Item is a Vertical Divider $output .= $indent . '<li class="divider-vertical">'; } else if (strcasecmp($item->title, 'nav-header') == 0) { // Item is a Header $output .= $indent . '<li class="nav-header">' . esc_attr( $item->attr_title ); } else { $class_names = $value = ''; $classes = empty( $item->classes ) ? array() : (array) $item->classes; $classes[] = 'menu-item-' . $item->ID; $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) ); //If item has_children add dropdown class to li if($args->has_children) { $class_names .= ' dropdown'; } $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : ''; $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args ); $id = $id ? ' id="' . esc_attr( $id ) . '"' : ''; $output .= $indent . '<li' .'>'; $atts = array(); $atts['title'] = ! empty( $item->title ) ? $item->title : ''; $atts['target'] = ! empty( $item->target ) ? $item->target : ''; $atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : ''; //If item has_children add atts to a if($args->has_children) { $atts['href'] = '#'; $atts['class'] = 'dropdown-toggle'; $atts['data-toggle'] = 'dropdown'; $atts['data-target'] = '#'; } else { $atts['href'] = ! empty( $item->url ) ? $item->url : ''; } $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args ); $attributes = ''; foreach ( $atts as $attr => $value ) { if ( ! empty( $value ) ) { $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value ); $attributes .= ' ' . $attr . '="' . $value . '"'; } } $item_output = $args->before; /* * Glyphicons * =========== * Since the the menu item is NOT a Divider or Header we check the see * if there is a value in the attr_title property. If the attr_title * property is NOT null we apply it as the class name for the glyphicon. */ if(! empty( $item->attr_title )){ $item_output .= '<a'. $attributes .'title="?????? ???? ???? ??"'.'><i class="' . esc_attr( $item->attr_title ) . '"></i> '; $show_list = 1; } else { $item_output .= '<a'. $attributes .'>'; } $item_output .= $args->link_before .'<img width="150" height="150" src="'.get_the_post_thumbnail_url().'" class="attachment-thumbnail size-thumbnail wp-post-image" alt="?????? ???? ???? ??? ???? ?????" decoding="async" title="'.$item->description.the_title().'" loading="lazy"><span><strong>'.apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after.'</strong><strong>'.wpb_get_id_terms_category(apply_filters( 'the_category', $item->ID ))."</strong>"; $item_output .= ($args->has_children) ? ' <span class="caret"></span></a>' : /*.the_title().'</strong><strong>'.*/'</strong></span></a>'; $item_output .= $args->after; $show_list = 1; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } } /** * Traverse elements to create list from elements. * * Display one element if the element doesn't have any children otherwise, * display the element and its children. Will only traverse up to the max * depth and no ignore elements under that depth. * * This method shouldn't be called directly, use the walk() method instead. * * @see Walker::start_el() * @since 2.5.0 * * @param object $element Data object * @param array $children_elements List of elements to continue traversing. * @param int $max_depth Max depth to traverse. * @param int $depth Depth of current element. * @param array $args * @param string $output Passed by reference. Used to append additional content. * @return null Null on failure with no changes to parameters. */ function display_element( $element, &$children_elements, $max_depth, $depth, $args, &$output ) { if ( !$element ) { return; } $id_field = $this->db_fields['id']; //display this element if ( is_object( $args[0] ) ) { $args[0]->has_children = ! empty( $children_elements[$element->$id_field] ); } parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output); } } ?>
And this function is wpb_get_id_terms_category which is located in functions.php
function wpb_get_id_terms_category($taxonomy) { $currentPost = the_category('','',$taxonomy); /* $terms = get_the_terms($currentPost->ID, $taxonomy); if (is_wp_error($terms)) { // @var \WP_Error $terms throw new \Exception($terms->get_error_message()); } $map = array_map( function ($term) use ($taxonomy) { return esc_attr($term->name); }, array_filter($terms, function ($term) { return $term->parent == 0; }) ); */ return $currentPost; }
But unfortunately, it does not work properly and only the thumbnail of the first post and the first post category are displayed for all lists
Viewing 4 replies - 1 through 4 (of 4 total)
Viewing 4 replies - 1 through 4 (of 4 total)
- The topic ‘How can I display thumbnails and their respective categories in a WordPress menu’ is closed to new replies.