How to add a new menu


I am using Beans and I modified the footer with text on the right and I want to put a menu on the left and I managed that with:

beans_modify_action_callback( 'beans_footer_content', 'beans_child_footer_content' );

The problem is that I can't find a solution to insert the uk-acitve in the css.


Hey Mike, welcome to Beans Community 🙂

It is a bit difficult to give you an accurate answer without seing how you add your menu in your callback but if you are using wp_nav_menu() function, you may add 'beans_type' => 'navbar' to your arguments. Beans as 3 types of menu, navbar, sidenav (used in the Core Menu Widget) and offcanvas. So in your footer callback you could do:

wp_nav_menu( array(
 'beans_type' => 'navbar',
 // Your other arguments...
) );

This will automatically add the necessary UIkit classes. Refer to wp_nav_menu() documentation regarding the other WP arguments available.

Hope that helps,


Hi Thierry, thanks for the fast answer.

Here is the code I would like to output:

 <div class="uk-grid uk-text-small" data-uk-grid-margin>

        <div class="uk-width-large-1-2">
          <p class="uk-text-muted"><!-- Trade Marks --></p>
        </div>

        <div class="uk-width-large-1-2">
          <!-- For large devices we want the menu to be right aligned -->
          <div class="uk-align-right uk-visible-large">
            <!-- Footer Nav -->
            <ul class="uk-subnav uk-subnav-line">
              <li><a href="tac.php" title="Terms of Use">Terms of Use</a></li>
                <li><a href="privacy.php" title="Privacy Policy">Updated Privacy Policy</a></li>
                <li><a href="contact.php" title="Contact">Contact</a></li>
                <!-- Language Dropdown Nav -->
                <li data-uk-dropdown="{mode:'click'}" aria-haspopup="true" aria-expanded="false">
                 <a href="#" title="Language">Language: English <i class="uk-icon-caret-down"></i></a>
                    <div class="uk-dropdown uk-dropdown-up uk-dropdown-small">
                     <ul class="uk-nav uk-nav-dropdown">
                 <li><a href="http://fr.example.com" title="Français"><img src="France_Flag.png" alt="Français" width="28" height="28"> &nbsp; Français</a></li>
                 <li class="uk-nav-divider"></li>
                  <li><a href="http://de.example.com" title="Deutsch"><img src="Germany_Flag.png" alt="Deutsch" width="28" height="28"> &nbsp; Deutsch</a></li>
                 <li class="uk-nav-divider"></li>
                  <li class="uk-active"><a href="http://example.com" title="English"><img src="English_Flag.png" alt="English" width="28" height="28"> &nbsp; English</a></li>
                </ul>
           </div>
                </li>
            </ul>
          </div>

          <!-- For small devices we do not want the menu to be right aligned -->
          <div class="uk-hidden-large">
            <!-- Footer Nav -->
            <ul class="uk-subnav uk-subnav-line">
             <li><a href="tac.php" title="Terms of Use">Terms of Use</a></li>
                <li><a href="privacy.php" title="Privacy Policy">Updated Privacy Policy</a></li>
                <li><a href="contact.php" title="Contact">Contact</a></li>
                <!-- Language Dropdown Nav -->
                <li data-uk-dropdown="{mode:'click'}" aria-haspopup="true" aria-expanded="false">
                 <a href="#" title="Language">Language: English <i class="uk-icon-caret-down"></i></a>
                    <div class="uk-dropdown uk-dropdown-up uk-dropdown-small">
                     <ul class="uk-nav uk-nav-dropdown">
                 <li><a href="http://fr.example.com" title="Français"><img src="France_Flag.png" alt="Français" width="28" height="28"> &nbsp; Français</a></li>
                 <li class="uk-nav-divider"></li>
                  <li><a href="http://de.example.com" title="Deutsch"><img src="Germany_Flag.png" alt="Deutsch" width="28" height="28"> &nbsp; Deutsch</a></li>
                 <li class="uk-nav-divider"></li>
                  <li class="uk-active"><a href="http://example.com" title="English"><img src="English_Flag.png" alt="English" width="28" height="28"> &nbsp; English</a></li>
                </ul>
                    </div>
                </li>
            </ul>
          </div>

        </div>
 </div>

I if I insert the code above it works perfectly fine but what's the point of implementing a dynamic website if every time a link is modified it should be edited in the functions.php

This is what I've made so far...

// New Footer Menu
function register_my_menu() {
 register_nav_menu( 'footer-menu',__( 'Footer Menu' ) );
}
add_action( 'init', 'register_my_menu' );

// Overwrite the footer content.
beans_modify_action_callback( 'beans_footer_content', 'beans_child_footer_content' );

function beans_child_footer_content() {

 ?>
  <div class="uk-grid uk-text-small" data-uk-grid-margin>

        <div class="uk-width-large-1-2">
      <p class="uk-text-muted"><!-- Trade Marks --></p>
   </div>

    <div class="uk-width-large-1-2 uk-clearfix">

      <!-- For large devices we want the menu to be right aligned -->
     <?php 
            wp_nav_menu( array( 
        'menu' => 'Footer Menu',
        'menu_class' => 'uk-subnav uk-subnav-line',
       'container' => 'div',
       'container_class' => 'uk-align-right uk-visible-large',
       'echo' => true,
       'fallback_cb' => false,
       'theme_location' => 'footer-menu'
     ) ); 
            ?>

            <!-- For small devices we do not want the menu to be right aligned -->
         <?php 
            wp_nav_menu( array( 
        'menu' => 'Footer Menu',
        'menu_class' => 'uk-subnav uk-subnav-line',
       'container' => 'div',
       'container_class' => 'uk-hidden-large',
       'echo' => true,
       'fallback_cb' => false,
       'theme_location' => 'footer-menu'
     ) ); 
            ?>
   </div>

  </div>
    <?php
}

I didn't manage to insert the Language Dropdown Nav. Any suggestions ?

Thanks again for the fast response and keep up the excellent work! Uikit Framework is my favourite and Beans as far as I used it, is pretty great.


Hi Mike,

Great job so far. I would suggest not to use twice wp_nav_menu() (unecessary memory usage) if the purpose is only to change the container_class. Instead I would replace all container classes with uk-align-medium-right which would align it right from medium breakpoint and higher. If you really need to have it from large breakpoint, I'd write a custom utility class tm-align-large-right and add the following in your style.less

@media (min-width: @breakpoint-large) {

    .uk-align-medium-right {
        float: right;
    }

}

Regarding your menu style (dropdown etc.), as I mentioned in my previous answer I'd suggest to add 'beans_type' => 'navbar' in your wp_nav_menu() arguments as follow (I removed unnecessary arguments set by default):

wp_nav_menu( array( 
    'menu' => 'Footer Menu',
    'menu_class' => 'uk-subnav uk-subnav-line',
    'container' => 'div',
    'container_class' => 'uk-align-medium-right', // Or custom tm-align-large-right class.
    'theme_location' => 'footer-menu',
    'beans_type' => 'navbar'
) ); 

Happy coding,


Hello Thierry,

Thanks for the quick response. Worked like a charm. Also the css class was great... I don't realize how I didn't thought of that until now.

Write a reply

Login or register to write a reply, it's free!