CODEWITHSUNDEEP
phpwordpress
jpganz18
jpganz18

Reputation: 5878

Is there any way to have a menu with images and a custom navwalker?

I am trying to create a menu with an image, title and description.

So far, the decription and title are working great, so, I found this plugin

https://wordpress.org/plugins/menu-image/

works very good and shows the image + the title, but not the description.

So, I guess I need, somehow to show the description without losing the image.

I create a custom navwalk, but seems like I cannot just call the attached image. Looking at the code of the plugin couldnt find anything that helps.

Any idea? have anybody done this before?

My navwalker so far looks like this:

<?php 
class Ext_Walker extends Walker {

    var $tree_type = array('post_type', 'taxonomy', 'custom');
    var $db_fields = array('parent' => 'menu_item_parent', 'id' => 'db_id');

    function start_el(&$output, $object, $depth = 0, $args = array(), $current_object_id = 0) {

        $classes = "";
        foreach ($object->classes as $cl){
            $classes.=" $cl";
        }

        $output .="<div class='col-lg-15 bottom-pad'>
                    <div class='vertical_item'>
                        <div class='col-lg-60'>
                            <div class='$classes'></div>
                        </div>
                        <div class='clear'></div>
                        <div class='desc_vertical'>
                            <h2 class='vertical_title'>{$object->title}</h2>";
                        if($object->post_content != ""){
                            $output .="<p class='item_description'>{$object->post_content}</p>";    
                        }else{

                        }   
        $output         .="</div>"; 
        $output .="<a href=".$object->url."><button class='btn btn-link'>View More</button></a>";
    }

    function end_el(&$output, $object, $depth = 0, $args = array()) {
        $output.='</div></div>';
    }

}
?>

Upvotes: 0

Views: 707

Answers (1)

user488187
user488187

Reputation:

When WordPress is creating the menu, it is creating the menu items with links of the form

<a>Some Title</a>

The Walker runs the title through the "the_title" filter. The plugin you reference does the same thing.

So there are at least two possibilities for accomplishing you want without developing your own Walker extension:

1) Extend the plugin

Since the plugin is using the the_title filter, you could add a filter of that type to add the description (the plugin is already adding an image). So

function add_description( $title, $id ) {
    if ( 'nav_menu_item' == get_post_type( $id ) ) {
        $title = '<span class="title">' . $title . '</span>;
        $title .= '<span class="desc">' . description from wherever you get it . '</span>;
    }

    return $title;
}
add_filter( 'the_title', 'add_description', 10, 2 );

This changes the text inside to link to be both title and description. You would want to check the post type, since the filter is called in other circumstances also.

2) Use just the filter

You could use a variant of the above filter to add both and image and the description, avoiding the need for the plugin. For example:

function add_img_and_desc( $title, $id ) {
    if ( 'nav_menu_item' == get_post_type( $id ) ) {
        // Get the image for the menu item (say in $img)
        $title = $img . '<span class="title">' . $title . '</span>;
        $title .= '<span class="desc">' . description from wherever you get it . '</span>;
    }

    return $title;
}
add_filter( 'the_title', 'add_img_and_desc', 10, 2 );

How you would get the image would depend on your approach. For example, it could be as simple as a switch statement that is based on the title.

Upvotes: 1

Related Questions