“Page to Navigation Menu Adder” Plugin for Wordpress

“Page to Navigation Menu Adder” Plugin for WordPress

Navigating a WordPress site should be as seamless as possible for your visitors. But if you’ve ever struggled to add new pages to your navigation menu, you know how cumbersome it can be. Enter the “Navigation Menu Adder” plugin—a game-changer for anyone looking to simplify their WordPress site management.

Enhance Your WordPress site with the “Page to Navigation Menu Adder” Plugin

With this handy plugin, you can add a new page directly to your navigation menu from the page editing meta box. No more jumping between different settings or menus. It’s all about efficiency and ease, giving you more time to focus on creating content and enhancing your site’s user experience.

“Page to Navigation Menu Adder” Plugin for Wordpress
Download plugin (zip) »

If you’re not a fan of diving into the detailed coding stuff, just click on the download button above and install the plugin as you would do with any other WordPress plugin.

“Page to Navigation Menu adder” Plugin code

  1. Create a folder called “page-to-navigation-menu-adder”
  2. Add a file called “page-to-navigation-menu-adder.php”
  3. Inside it create folders “js” and “CSS
  4. Inside “js” folder add a file “nma-script.js”
  5. Inside “CSS” folder add a file “nma-style.css”

Step 1: Add this code to the “page-to-navigation-menu-adder.php” file

<?php
/*
Plugin Name: Page to Navigation Menu Adder
Description: Adds an option to the page editing meta box to directly add the page to a WordPress navigation menu.
Version: 1.0
Author: WP Simple Hacks
Author URI: https://wpsimplehacks.com
*/

if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly.
}

// Include necessary scripts and styles
function nma_enqueue_scripts() {
    wp_enqueue_script('jquery-ui-sortable');
    wp_enqueue_script('nma-script', plugin_dir_url(__FILE__) . 'js/nma-script.js', array('jquery'), '1.0', true);
    wp_enqueue_style('nma-style', plugin_dir_url(__FILE__) . 'css/nma-style.css', array(), '1.0');
    wp_localize_script('nma-script', 'nma_ajax', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('nma_nonce')
    ));
}
add_action('admin_enqueue_scripts', 'nma_enqueue_scripts');

// Add meta box to page editor
function nma_add_meta_box() {
    add_meta_box('nma_meta_box', 'Add to Navigation Menu', 'nma_meta_box_callback', 'page', 'side', 'high');
}
add_action('add_meta_boxes', 'nma_add_meta_box');

function nma_meta_box_callback($post) {
    $menus = wp_get_nav_menus();
    ?>
    <label for="nma_menu_select">Select Menu:</label>
    <select id="nma_menu_select" name="nma_menu_select">
        <?php foreach ($menus as $menu) : ?>
            <option value="<?php echo esc_attr($menu->term_id); ?>"><?php echo esc_html($menu->name); ?></option>
        <?php endforeach; ?>
    </select>
    <br><br>
    <label for="nma_parent_item_select">Select Parent Menu Item:</label>
    <select id="nma_parent_item_select" name="nma_parent_item_select">
        <!-- Options will be populated by JavaScript -->
    </select>
    <button type="button" id="nma_add_to_menu" class="button button-primary">Add to Menu</button>
    <div id="nma_menu_structure"></div>
    <input type="hidden" id="nma_post_id" value="<?php echo $post->ID; ?>">
    <?php
}

// Handle AJAX request to add page to menu
function nma_add_page_to_menu() {
    check_ajax_referer('nma_nonce', 'nonce');

    $page_id = intval($_POST['page_id']);
    $menu_id = intval($_POST['menu_id']);
    $parent_item_id = intval($_POST['parent_item_id']);

    if ($page_id && $menu_id) {
        $menu_item_data = array(
            'menu-item-object-id' => $page_id,
            'menu-item-object' => 'page',
            'menu-item-type' => 'post_type',
            'menu-item-status' => 'publish',
            'menu-item-parent-id' => $parent_item_id
        );
        wp_update_nav_menu_item($menu_id, 0, $menu_item_data);
        wp_send_json_success('Page added to menu.');
    } else {
        wp_send_json_error('Invalid menu or page ID.');
    }
}
add_action('wp_ajax_nma_add_page_to_menu', 'nma_add_page_to_menu');

// Handle AJAX request to delete menu item
function nma_delete_menu_item() {
    check_ajax_referer('nma_nonce', 'nonce');

    $menu_item_id = intval($_POST['menu_item_id']);

    if ($menu_item_id) {
        wp_delete_post($menu_item_id, true);
        wp_send_json_success('Menu item deleted.');
    } else {
        wp_send_json_error('Invalid menu item ID.');
    }
}
add_action('wp_ajax_nma_delete_menu_item', 'nma_delete_menu_item');

// Fetch menu structure
function nma_fetch_menu_structure() {
    check_ajax_referer('nma_nonce', 'nonce');

    $menu_id = intval($_POST['menu_id']);
    $menu_items = wp_get_nav_menu_items($menu_id);

    if ($menu_items) {
        $menu_structure = nma_build_menu_structure($menu_items);
        $menu_items_options = nma_build_menu_items_options($menu_items);
        wp_send_json_success(array(
            'menu_structure' => $menu_structure,
            'menu_items_options' => $menu_items_options
        ));
    } else {
        wp_send_json_error('Error fetching menu items.');
    }
}
add_action('wp_ajax_nma_fetch_menu_structure', 'nma_fetch_menu_structure');

function nma_build_menu_structure($menu_items) {
    $menu_items_by_parent = array();
    foreach ($menu_items as $menu_item) {
        $menu_items_by_parent[$menu_item->menu_item_parent][] = $menu_item;
    }
    return nma_build_menu_tree($menu_items_by_parent, 0);
}

function nma_build_menu_items_options($menu_items) {
    $output = '<option value="0">No Parent</option>';
    foreach ($menu_items as $menu_item) {
        $output .= '<option value="' . $menu_item->ID . '">' . $menu_item->title . '</option>';
    }
    return $output;
}

function nma_build_menu_tree($menu_items_by_parent, $parent_id) {
    if (!isset($menu_items_by_parent[$parent_id])) {
        return '';
    }

    $output = '<ul>';
    foreach ($menu_items_by_parent[$parent_id] as $menu_item) {
        $output .= '<li id="menu-item-' . $menu_item->ID . '" class="nma-menu-item" data-id="' . $menu_item->ID . '" data-parent="' . $menu_item->menu_item_parent . '">' . $menu_item->title;
        $output .= ' <span class="nma-delete-menu-item" data-id="' . $menu_item->ID . '">X</span>';
        $output .= nma_build_menu_tree($menu_items_by_parent, $menu_item->ID);
        $output .= '</li>';
    }
    $output .= '</ul>';
    return $output;
}

// Save menu order
function nma_save_menu_order() {
    check_ajax_referer('nma_nonce', 'nonce');

    $order = $_POST['order'];
    foreach ($order as $index => $item) {
        $item_id = intval($item['id']);
        $parent_id = intval($item['parent']);
        wp_update_post(array(
            'ID' => $item_id,
            'menu_order' => $index,
            'post_parent' => $parent_id
        ));
    }
    wp_send_json_success('Menu order saved.');
}
add_action('wp_ajax_nma_save_menu_order', 'nma_save_menu_order');
?>

Step 1: Add this code to the “nma-script.js” file

jQuery(document).ready(function($) {
    // Fetch initial menu structure
    var initial_menu_id = $('#nma_menu_select').val();
    fetchMenuStructure(initial_menu_id);

    // Fetch menu structure on menu selection change
    $('#nma_menu_select').on('change', function() {
        var menu_id = $(this).val();
        fetchMenuStructure(menu_id);
    });

    $('#nma_add_to_menu').on('click', function() {
        var page_id = $('#nma_post_id').val();
        var menu_id = $('#nma_menu_select').val();
        var parent_item_id = $('#nma_parent_item_select').val();
        var nonce = nma_ajax.nonce;

        $.post(nma_ajax.ajax_url, {
            action: 'nma_add_page_to_menu',
            page_id: page_id,
            menu_id: menu_id,
            parent_item_id: parent_item_id,
            nonce: nonce
        }, function(response) {
            if (response.success) {
                alert('Page added to menu.');
                // Fetch and display updated menu structure
                fetchMenuStructure(menu_id);
            } else {
                alert('Error: ' + response.data);
            }
        });
    });

    $(document).on('click', '.nma-delete-menu-item', function() {
        var menu_item_id = $(this).data('id');
        var nonce = nma_ajax.nonce;

        $.post(nma_ajax.ajax_url, {
            action: 'nma_delete_menu_item',
            menu_item_id: menu_item_id,
            nonce: nonce
        }, function(response) {
            if (response.success) {
                alert('Menu item deleted.');
                // Fetch and display updated menu structure
                var menu_id = $('#nma_menu_select').val();
                fetchMenuStructure(menu_id);
            } else {
                alert('Error: ' + response.data);
            }
        });
    });

    function fetchMenuStructure(menu_id) {
        $.post(nma_ajax.ajax_url, {
            action: 'nma_fetch_menu_structure',
            menu_id: menu_id,
            nonce: nma_ajax.nonce
        }, function(response) {
            if (response.success) {
                $('#nma_menu_structure').html(response.data.menu_structure);
                $('#nma_parent_item_select').html(response.data.menu_items_options);
                initSortable();
            } else {
                $('#nma_menu_structure').html('Error loading menu structure.');
            }
        });
    }

    function saveMenuOrder() {
        var order = [];
        $('#nma_menu_structure ul li').each(function(index, element) {
            var item_id = $(this).data('id');
            var parent_id = $(this).parent().closest('li').data('id') || 0;
            order.push({ id: item_id, parent: parent_id });
        });

        $.post(nma_ajax.ajax_url, {
            action: 'nma_save_menu_order',
            order: order,
            nonce: nma_ajax.nonce
        }, function(response) {
            if (!response.success) {
                alert('Error saving menu order: ' + response.data);
            }
        });
    }

    function initSortable() {
        $('#nma_menu_structure ul').sortable({
            connectWith: '#nma_menu_structure ul',
            update: function(event, ui) {
                saveMenuOrder();
            }
        }).disableSelection();
    }
});

Step 3: Add this code to the “nma-style.css” file

#nma_menu_structure {
    margin-top: 20px;
}

#nma_menu_structure ul {
    list-style: none;
    padding-left: 20px;
    margin-left: 20px;
    border-left: 1px dashed #ccc;
}

#nma_menu_structure li {
    margin-bottom: 5px;
    padding: 5px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    cursor: move;
    position: relative;
}

.nma-menu-item {
    padding: 5px;
    margin: 5px 0;
    background-color: #eee;
    border: 1px solid #ddd;
}

.nma-delete-menu-item {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background-color: #ccc;
    color: black;
    padding: 0 5px;
    cursor: pointer;
    border-radius: 3px;
    transition: background-color: 0.5s ease;
}

.nma-delete-menu-item:hover {
    background-color: darkred;
    color: white;
}

Testing

1. Activate the Plugin: Go to the WordPress admin dashboard, navigate to the “Plugins” page, and activate the Deactivate and Delete plugin.

2. Test Quick Action: Open the page, go to any page, and try out if it works like the GIF file I’ve shared below.

“Page to Navigation Menu Adder” Plugin for Wordpress

Here are some of my favorite WordPress tools

Thanks for reading this article! I hope it's been useful as you work on your own websites and e-commerce sites. I wanted to share some tools I use as a WordPress developer, and I think you'll find them helpful too.

Just so you know, these are affiliate links. If you decide to use any of them, I'll earn a commission. This helps me create tutorials and YouTube videos. But honestly, I genuinely use and recommend these tools to my friends and family as well. Your support keeps me creating content that benefits everyone.

Themes: Over the past few years, I've consistently relied on two primary themes for all sorts of projects: the Blocksy theme and the Kadence Theme. If you explore this website and my YouTube channel, you'll come across numerous tutorials that delve into these themes. If you're interested in obtaining a 10% discount for both of these themes, then:

Code Snippets Manager: WPCodeBox allows you to add code snippets to your site. Not only that, but it also provides you with the capability to construct and oversee your WordPress Code Snippets library right in the cloud. You can grab it with the 20% discount here (SAVE 20% Coupon: WPSH20).

Contact forms: There are hundreds of contact forms out there but Fluent Forms is the one I like the most. If you need a 20% discount then use this link (save 20% coupon is WPSH20).

Gutenberg add-ons: If I need a good Gutenberg blocks add-on then Kadence Blocks is the one I have used the most. You’ll get a 10% discount with the coupon SIMPLEHACKS here.

Website migration: While building a website you probably need a good plugin that can help you with the migration, backups, restoration, and staging sites. Well, WpVivid is the one I have used for the last couple of years. If you use this link along with the WPSH20 coupon you’ll get a 20% discount.

Woocommerce extensions: There are a bunch of Woocommerce extensions that I like but the one that stands out is Advanced Dynamic Pricing. Once again, you’ll get a 20% discount if you use this link here (save 20% coupon is WPSH20)

Web Hosting: If you would like to have a really fast and easy-to-use managed cloud hosting, then I recommend Verpex Hosting (see my review here). By the way, this site is hosted in Verpex.)

To see all my most up-to-date recommendations, check out this resource that I made for you!

Do you want to thank me and buy me a beer?

Every donation is entirely welcome but NEVER required. Enjoy my work for free but if you would like to thank me and buy me a beer or two then you can use this form here below.

Donation Form (#2)

Tags
Janek T.
Janek T.

Improve this text: {CLIPBOARD}

- I have been passionate about Wordpress since 2011, creating websites and sharing valuable tips on using Wordpress and Woocommerce on my site.
- Be the first to receive notifications about new tutorials by subscribing to my Youtube channel .
- Follow me on Twitter here

Articles: 119

Related Posts