Unable to get the menu items name and slugs in WordPress development

Question

I'm new to WordPress development. I have made a design of the nav menu. I want to create the menu from admin panel and want to get those menus at my front page of the website with my custom CSS. I'm able to create the menu and get those in my front page but can't understand how to get those menu items with my custom CSS and structure.

HTML STRUCTURE

<div class="col-12 log-menu">
         <ul>
           <li><a href=""><span title="Home">Home</span></a></li>  
           <li><a href="about"><span title="About">About</span></a></li>  
           <li><a href="#"><span title="Services">Services</span></a></li>  
           <li><a href="#"><span title="Careers">Careers</span></a></li>  
           <li><a href="#"><span title="Contact">Contact</span></a></li>  
         </ul> 
</div>

STYLE

.log-menu ul{
    list-style: none;
    margin: 0px;
    padding: 0px;
    float: right
}
.log-menu ul li{
    float: left;
    margin-right: 10px;
    margin-top: 35px;
    transform-style: preserve-3d;
}
.log-menu ul li a{
    color: #222;
    font-weight: 500;
    font-size: 20px;
    display: block;
    text-decoration: none;
    position: relative;
}


.log-menu ul li a span{
    display: block;
    padding: 10px 35px;
}

.log-menu ul li a span::before{
    content: attr(title);
    position: absolute;
    top: 0px;
    left: 0px;
    background: #f30000;
    color: #fff;
    padding: 10px 35px;
    transform-style: preserve-3d;
    transition: .3s;
    transform: rotateX(90deg) translateY(50px);
    transform-origin: bottom;
}
.log-menu ul li a span:hover::before{
    transform: rotateX(0deg) translateY(0px);
}

.log-menu ul li a span::after{
    content: attr(title);
    position: absolute;
    top: 0px;
    left: 0px;
    background: #fff;
    color: #262626;
    padding: 10px 35px;
    transform-style: preserve-3d;
    transition: .3s;
    transform: rotateX(00deg) translateY(00px);
    transform-origin: top;
}
.log-menu ul li a span:hover::after{
    transform: rotateX(90deg) translateY(-10px);
}

function.php

<?php 

/* CUSTOMIZED THEME */

function customize_register_nav_menu(){
    register_nav_menu('primary','Header Navigation Menu');
}

add_action('after_setup_theme', 'customize_register_nav_menu');

So my question is how can I get the menu items name as <li><a href=""><span title="Home">Home</span></a></li> title attr value and anchor tags value.

basically it will be from menus in your dashboard for which you should use wp_nav_menu() to get it in theme. developer.wordpress.org/reference/functions/wp_nav_menu — Manjunath
You need to create a custom nav walker to output the menu as custom html. codex.wordpress.org/Class_Reference/Walker#General_Menu_Example — joko13

Richard Richard · Accepted Answer · 2020-11-19T00:13:57

I just had this come up in a theme I was making. Here's how I did it, with a little loop that outputs the variables from your menu named 'primary':

<ul>
    <?php
    foreach (wp_get_nav_menu_items(get_term_by('name', 'main', 'nav_menu')->term_id) as $item) {
        $link = wp_make_link_relative($item->url);
        if (empty($link)) $link = '/';
?>
    <li><a href="<?= $link ?>"><?= $item->title ?></a></li>
<?php } ?>
</ul>

This loops through each menu item of your nav and pulls out the title and url as a relative link.

Unable to get the menu items name and slugs in WordPress development

1 Answers