Here is a code snippet that you can use to have your WordPress website generate Uikit navigation bar or navigation menu.

Once you include all the right files you just need to call my function and it will generate exactly what you want.

I built a couple of WordPress Menu walkers to help me generate menu layouts that fit into the Uikit front end framework.

The basic idea is that I want to have a function that I can call on any WordPress menu location and it would generate a menu such as these menu bars.

Here Is how I achieved this:

  • I includes UIkit js and CSS in the WP theme
  • I created a couple of menu walkers that generate the right html markup for the menus and the right CSS classes
  • Created a function that calls these menu walkers with the right wrappers and outer classes so the Uikit styles and JS applies to it
  • I called the function in my templates

1. Include Uikit in your theme

Do this any way you want just make sure all the CSS and JS files from the framework load with your child theme. Here is an example how you can do it. Where I have downloaded the resource files and load them locally from my theme.

<?php

/*
 * Load Uikit Resources
 * include this file in your functions.php
 * note I have downloaded the files and load them locally
 * you could also load them from a CDN 
 */
add_action( 'wp_enqueue_scripts', 'lhl_load_scripts_files' );

function lhl_load_scripts_files() {

    // uikit CSS
    wp_enqueue_style( 'urbi-uikit-css',  get_stylesheet_directory_uri() . '/uikit/dist/css/uikit.min.css', array(), '7.6' );

    // uikit js
	wp_register_script('uikit-js', get_stylesheet_directory_uri() . '/uikit/dist/js/uikit.min.js', 'jquery', '7.6' ,TRUE);
	wp_register_script('uikit-icons', get_stylesheet_directory_uri() . '/uikit/dist/js/uikit-icons.min.js', array('uikit-js'), '7.6' ,TRUE);

    wp_enqueue_script('uikit-js');
	wp_enqueue_script('uikit-icons');

}

2. Include the menu walker in your theme

Download these files and consider buying me a coffee.

https://github.com/lehelmatyus/wp-menu-walkers/tree/main/Uikit

Include the following two files in your theme. Here is what they do:

  • nav-walkers/lhl_uikit_nav_walker.php – includes the menu walker that will set up the Uikit menus
  • menus.php – has functions that call the menu walker the right way with necessary wrappers
    • has a code snippet for creating menu regions if you wish to use it
    • has 2 custom function
      • __urbi_nav_walker_print_menu_location to print out Uikit Menus
      • __urbi_navbar_walker_print_menu_location to print out Uikit Menu Bars

3. Call one or both of the custom functions in your theme

Just pass the menu location in the function and call it in your template files wherever you wish. Here is an example

<?php
// This is just an example how you can use it in your themes template files
// Feel free to delete this file
?>

<div class="uk-container">
    <nav class="uk-navbar-container" uk-navbar>
        <div class="uk-navbar-left">

            <a class="uk-navbar-item uk-logo" href="#">Lehel Matyus</a>

            <?php
               // print a nice menu bar
                __urbi_navbar_walker_print_menu_location('primary');
            ?>

        </div>
        <div class="uk-navbar-right">

        <div class="uk-navbar-item">
                <button class="uk-button uk-button-default">Button</button>
        </div>

        </div>
    </nav>
</nav>


<div>
    <div>
        Example Simple Menu
    </div>
    <div>
        <?php
            // prints a uikit menu
            __urbi_nav_walker_print_menu_location('footer-sitemap');
        ?>
    </div>
</div>

Cheers!

Lehel