Ytukyg

By default, as everybody knows, Wordpress create a nav structure when you use the default menu function.

I have 10 items "li" (one per category) in the primary menu, and i'm trying add a different image into each "li". But I wish:

• Maintain the links to the categories into the ahref


• The content should be included into the ahref

Summarizing:

I want transform this

<li class="casilleroCat">

    <a href="https://categoryurl.com">Name of category2</a>

</li>

<li class="casilleroCat">

    <a href="https://categoryurl2.com">Name of category2</a>

</li>

into this

<li class="casilleroCat">

    <a href="https://categoryurl.com">

        <img src="https://url.com/customimage1.jpg" alt="name of cateogry"> 

        <br>

        <span>Name of category</span>

    </a>

</li>

<li class="casilleroCat">

    <a href="https://categoryurl2.com">

        <img src="https://url.com/customimage2.jpg" alt="name of category2"> 

        <br>

        <span>Name of category2</span>

    </a>

</li>

For that, I tried adding the following code in functions.php

/** FIRST, I CREATED THE MENUS **/

function register_my_menus() {

  register_nav_menus(

    array(

      'header-menu' => __( 'Header Menu' )

    )

  );

}

add_action( 'init', 'register_my_menus' );

And now, i'm lost because i don't know what it's the best way to achieve this. Because if I add a code like this i'll lost the links created automatically by WordPress and I have to create a different function for each image.

function add_customHTML($items, $args) {

    if ($args->theme_location == 'Header Menu') { 



        // My html

        $item = '<li class="casilleroCat">

                    <a href="https://categoryurl.com">

                       <img src="https://url.com/customimage1.jpg" alt="name of cateogry"> 

                       <br>

                       <span>Name of category</span>

                   </a>

               </li>';

        $items = $item.$items;

    }

  return $items;

}

add_filter( 'wp_nav_menu_items', 'add_customHTML', 10, 2 );

Finally, I achieved with this snippet

function clean_custom_menus() {

    $menu_name = 'header-menu'; // specify custom menu slug

    if (($locations = get_nav_menu_locations()) && isset($locations[$menu_name])) {

        $menu = wp_get_nav_menu_object($locations[$menu_name]);

        $menu_items = wp_get_nav_menu_items($menu->term_id);



        $menu_list = '<nav>' ."n";

        $menu_list .= "tttt". '<ul>' ."n";

        foreach ((array) $menu_items as $key => $menu_item) {

            $title = $menu_item->title;

            $url = $menu_item->url;

            $menu_list .= "ttttt". '<li class="casilleroCat"><a href="'. $url .'"><img src="imagen'. $a++ .'.jpg"><br><span>'. $title .'</span></a></li>' ."n";

        }

        $menu_list .= "tttt". '</ul>' ."n";

        $menu_list .= "ttt". '</nav>' ."n";

    } else {

        // $menu_list = '<!-- no list defined -->';

    }

    echo $menu_list;

}

And calling the function in the page with this code

<?php wp_nav_menu( array( 'theme_location' => 'extra-menu' ) ); ?>