Essentially I would like to drag each footer menu item to the column of my choice.

  1. I've created 3 widgets for each footer column, but I can't figure out how to separate the navigation menu items on the Widgets page.

  2. Would it be possible to bring the footer widgets over to Menus page and have them inside the Menu Structure, so I could just drag and drop the items in there?

Or maybe there is a better way of doing this? I would like to avoid using any plugins.

Thank you.

1 Answer 1


I would suggest you create your own menu for each menu you want to show in a column. This way, you only need to set the menus inside your widgets and will not face any problems. It is also ok for a menu to have just one item if needed.

1) You can not seperate a menu on the widgets page. This is not what the widget page was made for. Moreover, menus are meant to bring together multiple page links. So it is not intended to seperate them again. To be more clear: Why put the items inside of a menu (and bring them together) if you want to seperate them? Just create multiple menus.

2) With the help of a plugin, it is possible to add widets to your menus: https://wordpress.org/plugins/wp-widget-in-navigation/ But I don't know if it solves your problem.

When I got it the right way, you just want to have three seperate lists of menu items inside a three column layout. The easiest way is to create three menus and put them in your already existing footer widgets.

You can also adjust your footer.php file in your theme (make sure to use child theme if it is not a theme you created by yourself) and do not use widgets for that.

In the backend "Design" -> "Menus" if you hover the "delete menu" link, you will find the id of your menu.

With this menu id, you can get the items of the menu in your footer.php file.

    $menuID = '12'; // ID of your menu
    $primaryNav = wp_get_nav_menu_items($menuID); // get your menu items

You can then loop through your menu items:


    foreach( $primaryNav as $item ) {
        $link = $item->url; // get the url of item
        $title = $item->title; // get title of item

        <li class="item"><a href="<?php echo $link; ?>"><?php echo $title; ?></a></li>

<?php } ?>


Hope this helps!

Creating a three column layout is pretty easy:

<div id="your_footer">
    <div> <?php /* your foreach for menu with id... */ ?> </div>
    <div> <?php /* your foreach for second menu with id... */ ?> </div>
    <div> <?php /* your foreach for third menu with id... */ ?> </div>

In your css file:

#your_footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  • Hi, yes you got it right, that is what i want do to! I thought about doing it the same way, by creating 3 footer menus, and assigning them to different widgets as needed. Just hoped that there is a way to do it with one footer menu only (by separating the items). Not sure why you got downvoted as no one else has come forward with any better solution.
    – user188223
    Commented May 17, 2020 at 15:42
  • I also think this answer fits the title of your question and shows a way to achieve it... Sorry I can't help you with seperating the menu and call the individual parts in widgets. Maybe someone else will have an idea.
    – rank
    Commented May 17, 2020 at 16:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.