Navigating a WordPress web site must be as seamless as potential on your guests. However for those who’ve ever struggled so as to add new pages to your navigation menu, you know the way cumbersome it may be. Enter the “Navigation Menu Adder” plugin—a game-changer for anybody seeking to simplify their WordPress web site administration.
Improve Your WordPress web site with the “Web page to Navigation Menu Adder” Plugin
With this useful plugin, you possibly can add a brand new web page on to your navigation menu from the web page modifying meta field. No extra leaping between totally different settings or menus. It’s all about effectivity and ease, providing you with extra time to give attention to creating content material and enhancing your web site’s person expertise.
For those who’re not a fan of diving into the detailed coding stuff, simply click on on the obtain button above and set up the plugin as you’d do with every other WordPress plugin.
“Web page to Navigation Menu adder” Plugin code
- Create a folder referred to as “page-to-navigation-menu-adder”
- Add a file referred to as “page-to-navigation-menu-adder.php”
- Inside it create folders “js” and “CSS
- Inside “js” folder add a file “nma-script.js”
- 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 Title: Web page to Navigation Menu Adder
Description: Provides an choice to the web page modifying meta field to straight add the web page to a WordPress navigation menu.
Model: 1.0
Creator: WP Easy Hacks
Creator URI: https://wpsimplehacks.com
*/
if (!outlined('ABSPATH')) {
exit; // Exit if accessed straight.
}
// Embody mandatory scripts and types
operate 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 field to web page editor
operate nma_add_meta_box() {
add_meta_box('nma_meta_box', 'Add to Navigation Menu', 'nma_meta_box_callback', 'web page', 'aspect', 'excessive');
}
add_action('add_meta_boxes', 'nma_add_meta_box');
operate nma_meta_box_callback($publish) {
$menus = wp_get_nav_menus();
?>
<label for="nma_menu_select">Choose Menu:</label>
<choose id="nma_menu_select" identify="nma_menu_select">
<?php foreach ($menus as $menu) : ?>
<choice worth="<?php echo esc_attr($menu->term_id); ?>"><?php echo esc_html($menu->identify); ?></choice>
<?php endforeach; ?>
</choose>
<br><br>
<label for="nma_parent_item_select">Choose Dad or mum Menu Merchandise:</label>
<choose id="nma_parent_item_select" identify="nma_parent_item_select">
<!-- Choices will probably be populated by JavaScript -->
</choose>
<button kind="button" id="nma_add_to_menu" class="button button-primary">Add to Menu</button>
<div id="nma_menu_structure"></div>
<enter kind="hidden" id="nma_post_id" worth="<?php echo $post->ID; ?>">
<?php
}
// Deal with AJAX request so as to add web page to menu
operate 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' => 'web 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('Web page added to menu.');
} else {
wp_send_json_error('Invalid menu or web page ID.');
}
}
add_action('wp_ajax_nma_add_page_to_menu', 'nma_add_page_to_menu');
// Deal with AJAX request to delete menu merchandise
operate 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 merchandise deleted.');
} else {
wp_send_json_error('Invalid menu merchandise ID.');
}
}
add_action('wp_ajax_nma_delete_menu_item', 'nma_delete_menu_item');
// Fetch menu construction
operate 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 gadgets.');
}
}
add_action('wp_ajax_nma_fetch_menu_structure', 'nma_fetch_menu_structure');
operate 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);
}
operate nma_build_menu_items_options($menu_items) {
$output = '<choice worth="0">No Dad or mum</choice>';
foreach ($menu_items as $menu_item) {
$output .= '<choice worth="' . $menu_item->ID . '">' . $menu_item->title . '</choice>';
}
return $output;
}
operate 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
operate nma_save_menu_order() {
check_ajax_referer('nma_nonce', 'nonce');
$order = $_POST['order'];
foreach ($order as $index => $merchandise) {
$item_id = intval($merchandise['id']);
$parent_id = intval($merchandise['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(doc).prepared(operate($) {
// Fetch preliminary menu construction
var initial_menu_id = $('#nma_menu_select').val();
fetchMenuStructure(initial_menu_id);
// Fetch menu construction on menu choice change
$('#nma_menu_select').on('change', operate() {
var menu_id = $(this).val();
fetchMenuStructure(menu_id);
});
$('#nma_add_to_menu').on('click on', operate() {
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;
$.publish(nma_ajax.ajax_url, {
motion: 'nma_add_page_to_menu',
page_id: page_id,
menu_id: menu_id,
parent_item_id: parent_item_id,
nonce: nonce
}, operate(response) {
if (response.success) {
alert('Web page added to menu.');
// Fetch and show up to date menu construction
fetchMenuStructure(menu_id);
} else {
alert('Error: ' + response.information);
}
});
});
$(doc).on('click on', '.nma-delete-menu-item', operate() {
var menu_item_id = $(this).information('id');
var nonce = nma_ajax.nonce;
$.publish(nma_ajax.ajax_url, {
motion: 'nma_delete_menu_item',
menu_item_id: menu_item_id,
nonce: nonce
}, operate(response) {
if (response.success) {
alert('Menu merchandise deleted.');
// Fetch and show up to date menu construction
var menu_id = $('#nma_menu_select').val();
fetchMenuStructure(menu_id);
} else {
alert('Error: ' + response.information);
}
});
});
operate fetchMenuStructure(menu_id) {
$.publish(nma_ajax.ajax_url, {
motion: 'nma_fetch_menu_structure',
menu_id: menu_id,
nonce: nma_ajax.nonce
}, operate(response) {
if (response.success) {
$('#nma_menu_structure').html(response.information.menu_structure);
$('#nma_parent_item_select').html(response.information.menu_items_options);
initSortable();
} else {
$('#nma_menu_structure').html('Error loading menu construction.');
}
});
}
operate saveMenuOrder() {
var order = [];
$('#nma_menu_structure ul li').every(operate(index, factor) {
var item_id = $(this).information('id');
var parent_id = $(this).dad or mum().closest('li').information('id') || 0;
order.push({ id: item_id, dad or mum: parent_id });
});
$.publish(nma_ajax.ajax_url, {
motion: 'nma_save_menu_order',
order: order,
nonce: nma_ajax.nonce
}, operate(response) {
if (!response.success) {
alert('Error saving menu order: ' + response.information);
}
});
}
operate initSortable() {
$('#nma_menu_structure ul').sortable({
connectWith: '#nma_menu_structure ul',
replace: operate(occasion, ui) {
saveMenuOrder();
}
}).disableSelection();
}
});Step 3: Add this code to the “nma-style.css” file
#nma_menu_structure {
margin-prime: 20px;
}
#nma_menu_structure ul {
checklist-type: none;
padding-left: 20px;
margin-left: 20px;
border-left: 1px dashed #ccc;
}
#nma_menu_structure li {
margin-backside: 5px;
padding: 5px;
border: 1px stable #ccc;
background-colour: #f9f9f9;
cursor: transfer;
place: relative;
}
.nma-menu-merchandise {
padding: 5px;
margin: 5px 0;
background-colour: #eee;
border: 1px stable #ddd;
}
.nma-delete-menu-merchandise {
place: absolute;
prime: 50%;
proper: 10px;
rework: translateY(-50%);
background-colour: #ccc;
colour: black;
padding: 0 5px;
cursor: pointer;
border-radius: 3px;
transition: background-colour: 0.5s ease;
}
.nma-delete-menu-merchandise:hover {
background-colour: darkred;
colour: white;
}Testing
1. Activate the Plugin: Go to the WordPress admin dashboard, navigate to the “Plugins” web page, and activate the Deactivate and Delete plugin.
2. Take a look at Fast Motion: Open the web page, go to any web page, and check out if it really works just like the GIF file I’ve shared under.
