New Check out the curated list of the finest design resources I've gathered for you! Take a look →

How to Create a Custom Menu Navigation with WordPress ACF

Creating a custom menu navigation with WordPress ACF can be a powerful way to enhance the user experience on your website. By following a few simple steps, you can easily customize your website’s menu to suit your specific needs and improve navigation for your visitors.

In this article, I will guide you through the process of creating a custom menu navigation with WordPress ACF. This solution is particularly useful for web developers or website owners looking to build a unique and user-friendly WordPress website.

Create Menu Navigation with WordPress ACF

Step 1: Register new menu options

Start by registering new menu options in your WordPress theme. This can be easily done with a few lines of code to add custom menu options to your website.

if (function_exists('acf_add_options_sub_page')) {
	acf_add_options_sub_page(array(
		'page_title' => 'Custom Menu',
		'menu_title' => 'Custom Menu',
		'parent_slug' => 'themes.php'
	));
}

By refreshing your admin dashboard, you will see the new menu options appear under the Appearance tab.

Register new menu options for custom menu navigation with WordPress ACF
Register new menu options for custom menu navigation with WordPress ACF

Step 2: Register new fields group called ‘Menu’

Register new fields group called ‘Menu’
Register new fields group called ‘Menu’

Use the Advanced Custom Fields (ACF) plugin to register a new fields group called ‘Menu’. This step will allow you to define the fields needed to create a customized menu navigation for your website.

Step 3: Register fields needed to create a menu

Register the necessary fields, such as repeaters and sub-repeater fields, to create a custom menu that supports child menus. Set conditions for when certain fields should appear to ensure a seamless navigation experience.

Register fields needed to create a menu
Register fields needed to create a menu

Step 4: Fill the new custom menu

Fill the custom menu with your desired content, such as menu items, links, and any other relevant information. This step will allow you to populate the menu with the necessary data to create a fully functional custom navigation.

Fill the new custom menu
Fill in the new custom menu

Step 5: Write the code to render the custom menu navigation with WordPress ACF

Copy and paste the code provided into your header.php file to render the custom menu navigation on your WordPress website. This code will ensure that the custom menu options and content you created are displayed correctly on the frontend of your website.

<?php if ( have_rows( 'menu_items', 'option' ) ) : ?>
  <!-- Custom Menu Start -->
  <div class="menu">
    <?php while ( have_rows( 'menu_items', 'option' ) ) : the_row(); ?>
    <?php
      $menu_label = get_sub_field( 'menu_label', 'option' );
      $menu_url = get_sub_field( 'menu_url', 'option' );
      $has_child = get_sub_field( 'has_child', 'option' );
    ?>

      <?php if (!empty($menu_label) ) : ?>
        <div class="menu-item <?php echo $has_child ? "menu-item__has_child" : ""; ?>">
          <a href="<?php echo $menu_url; ?>" class="menu-item__link">
          <?php echo $menu_label; ?>
          </a>
          
          <?php if ($has_child) : ?>
            <?php if ( have_rows( 'child_menu_items', 'option' ) ) : ?>
              <?php while ( have_rows( 'child_menu_items', 'option' ) ) : the_row(); ?>
                <?php 
                  $menu_child_label = get_sub_field( 'menu_label', 'option' );
                  $menu_child_url = get_sub_field( 'menu_url', 'option' );
                ?>

                <?php if ( !empty($menu_child_label) ) : ?>
                <div class="menu-item__child">
                  <a href="<?php echo $menu_child_url; ?>" class="menu-child-item__link">
                    <?php echo $menu_child_label; ?>
                  </a>
                </div>
                <?php endif; ?>
              <?php endwhile; ?>
            <?php endif; ?>
          <?php endif; ?>
        </div>
      <?php endif; ?>

    <?php endwhile; ?>
  </div>
  <!-- Custom Menu End -->
<?php endif; ?>

After following all the steps above, you should now have a custom menu that you can customize to your liking, depending on the website you are building.

Custom menu navigation with WordPress ACF
Custom menu navigation with WordPress ACF

By following these five easy steps, you can create a custom menu navigation with WordPress ACF that is tailored to your specific needs and enhances the overall user experience on your website. Whether you are building a new website or looking to improve an existing one, customizing your menu navigation can help you stand out and provide a more intuitive browsing experience for your visitors.

Remember, the key to success is to plan your menu structure carefully, fill it with relevant content, and test it thoroughly to ensure it works seamlessly on all devices. With WordPress ACF, you have the flexibility to create a unique and engaging menu navigation that sets your website apart from the rest.

If you found this tutorial helpful, be sure to check out my other WordPress website tutorials.

Rizwan Aritonang

An independent WordPress & Front-End Developer from Bandung, Indonesia.

Get In Touch

Leave a Comment