How to create a Custom Menus in WordPress?

How to create a Custom Menus in WordPress?

Creating Custom Menus in WordPress is an easy task, In this article, you are gonna see “How to create Custom Menus in WordPress?”

Let’s do it Step-by-Step

Step 1: Register Menu in functions.php

I hope you will have some basics of creating custom themes in WordPress. If you have not please check “How to create a Custom Theme in WordPress?

<?php
function register_navwalker()
{
    require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}
add_action('after_setup_theme', 'register_navwalker');



if (!function_exists('theme_enquee_scripts')) {
    function theme_enquee_scripts()
    {
        // Styles
        wp_enqueue_style('bootstrap', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css');

        // Scripts
        wp_enqueue_script('jquery', get_template_directory_uri() . '/bootstrap/jquery-3.6.0.min.js');
        wp_enqueue_script('bootstrap_JS', get_template_directory_uri() .  '/bootstrap/js/bootstrap.min.js');
    }
}
add_action('wp_enqueue_scripts', 'theme_enquee_scripts');


add_theme_support('menus');
function wp_theme_setup()
{
    add_theme_support('post-thumbnails');

    register_nav_menus(array(
        'primary' => __('Primary Menu', 'primary menu'),
        'mobile-menu' => __('Mobile Menu Location', 'Mobile Menu'),
    ));
}
add_action('after_setup_theme', 'wp_theme_setup');

Step 2: Define Menu in header.php

After registering the menu in functions.php, we have to define navbar menus in header.php to display menus in header. So here is the example of code:

<!DOCTYPE html>
<html>

<head>
    <!-- Required meta tags always come first -->
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title><?php bloginfo('name'); ?></title>
    <?php wp_head(); ?>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
</head>

<body>
    <nav class="navbar container navbar-expand-lg navbar-light">
        <h1 class="h4 py-2 font-weight-bold mr-5">Engineer Jagat </h1><i class="far fa-hand-point-right"></i>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#primarymenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <?php
        wp_nav_menu(array(
            'theme_location'  => 'primary',
            'depth'           => 2,
            'container'       => 'div',
            'container_class' => 'collapse navbar-collapse',
            'container_id'    => 'primarymenu',
            'menu_class'      => 'navbar-nav  justify-content-between  primary-menu',
            'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
            'walker'          => new WP_Bootstrap_Navwalker(),
        ));
        ?>
    </nav>

Step 3: Create Menus in Dashboard

The final step is creating the menus in Dashboard. Go to Appearance and click on Menus.

Read More Articles related to WordPress Theme Development:

  1. How to create a custom theme in WordPress? Step by Step
  2. How to create a custom widget in WordPress? Step by Step
  3. How to get all WordPress posts from the Custom REST API with JavaScript? Step by Step




Copyright © 2020-2021 Engineer Jagat All rights reserved. Developed by Ravindra Rana