I am creating a menu like this https://squareup.com/ I have the html,css, and jquery ready. Now, I am trying to:

Create the menu items with it's sub-menu items via wp-admin -> appearance -> menus ( which I have done )

output the menu item with it's corresponding sub-menu items separately and dynamically.

        <?php if ( get_field('landing_hero_image') ): ?>
                <div class="menu" style="background-image: url(<?php the_field('landing_hero_image'); ?>);">
                    <a class="click-me">
                        main menu item
                <div class="hidden-content">
                    sub menu item associated with the main item
                <div class="banner" style="background-image: url(<?php the_field('landing_hero_image'); ?>);">
            <?php endif; ?>

So to summarize, how do I separate the output ( html ) menu items and their children?

Many thanks in advance.


Register the navigation menu location in your theme's functions.php file using the register_nav_menu() function, assign your custom menu to the location in Dashboard > Appearance > Menus, then use the wp_nav_menu() function in your theme's template files to print the menu's markup where appropriate.

Refer to the overview of Navigation Menus in the Codex.

  • I know how to do that, that does not answer my question. I did not ask how to register menus. – rlm Apr 15 '16 at 20:21
  • Yes it does. You are attempting to recreate functionality built-in to WordPress, which is counter-intuitive and unnecessary. The steps I've provided detail exactly how to produce the markup for your custom menu. If the result doesn't fit your needs, edit your question to indicate the problem. Please review the "How to Ask" page in our help center. – bosco Apr 15 '16 at 20:34
  • No it doesn't. I am simply asking how to divide a menu item with its sub menu items in html mark-up, but retain the parent child relationship and have the partent trigger the associative child container. I have created the menu, so in this case I don't need to register a new menu. Not sure how that is 'counter-intuitive and unnecessary. – rlm Apr 15 '16 at 20:38
  • Then don't register a new menu - you've clearly accomplished the registration step, move on to using wp_nav_menu() to print it out. You can achieve the same affect seen on the linked website without separating the parent/sub-menu markup. It is drastically easier to achieve the affect with CSS than to change the way WordPress prints menu HTML just to match that site's markup. – bosco Apr 15 '16 at 20:40
  • If you insist on separating items, look into the wp_get_navigation_menu_items() function, or maybe read up on creating your own Walker_Nav_Menu class. – bosco Apr 15 '16 at 20:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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