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

Create custom menu navigation with WordPress ACF

Are you looking to create custom menu navigation with WordPress ACF?

If so, you’re in the right place. In this article, I will guide you through the steps to easily create custom menu navigation with WordPress ACF.

This solution is particularly useful if you are building a WordPress website from scratch or converting a website from a different platform to WordPress.

Step 1: Register new menu options

To start, we need to register new menu options. This can be achieved easily with a few lines of code. Here’s my custom code:

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'
	));
}

Refresh your dashboard admin and click Appereance to see new sub menu that have finished registering

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’

The next step is to register a new fields group called ‘Menu’. This can be done using the Advanced Custom Fields (ACF) plugin. Here’s an image to guide you through the process:

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

Step 3: Register fields needed to create a menu

In this example, we will create a custom navigation that only supports one child menu. To achieve this, we need to register the necessary fields. Here’s an image to guide you through the process:

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

As you can see in the image above, I have created a repeater and subrepeater, and added a condition for the subrepeater to appear only when the ‘Has Child Field’ has a value of true.

Step 4: Fill the new custom menu

Once the fields are registered, we can start filling the new custom menu with our desired content. Here’s an image to guide you through the process:

Fill the new custom menu
Fill the new custom menu

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

After filling the menu with our desired content, we need to write the code to render the custom menu navigation. This can be achieved by copying and pasting the following code into your header.php file:

<?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 the steps above, you can build a WordPress website that suits your specific needs. 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