Putting footer links into different columns

Question

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.

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.

<?php
    $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:

<ul>

<?php
    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 } ?>

</ul>

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>
</div>

In your css file:

#your_footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}