• 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>&nbsp;';
                    $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)
  • Hi @titan33llb,

    I haven’t analyzed the whole code, but I noticed that the value returned from the wpb_get_id_terms_category() function will always be null, because the_category() does not return a value. This could be the cause of the issue.

    to display thumbnails and their respective categories in a WordPress menu I created a code for this.

    // Add Thumbnail Support to Categories
    function wpse_category_thumbnail( $menu_item, $category ) {
    if ( isset( $category->term_id ) ) {
    $thumbnail_id = get_term_meta( $category->term_id, ‘thumbnail_id’, true );
    if ( $thumbnail_id ) {
    $image = wp_get_attachment_image( $thumbnail_id, ‘thumbnail’ );
    $menu_item = ‘term_id ) ) . ‘”>’ . $image . ” . $category->name . ‘‘;
    }
    }
    return $menu_item;
    }
    add_filter( ‘walker_nav_menu_start_el’, ‘wpse_category_thumbnail’, 10, 2 );

    This code is 100% working and I’m still using it on Glitch Text Generator. Please add the above-mentioned code to your theme’s functions.php file.

    Please note that depending on your theme’s styling, you may need to modify the CSS to ensure the thumbnails are displayed properly within your menu.

    • This reply was modified 1 year, 6 months ago by layladecorly.
    Thread Starter titan33llb

    (@titan33llb)

    @psrpinto hi

    I couldn’t think of another way and wanted to find it using its ID. You have a number of solutions

    Thread Starter titan33llb

    (@titan33llb)

    @layladecorly hi

    I could not find function walker_nav_menu_start_el. Explain more….

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.