• Admin Bar
  • |
  • Dropdown Menu
  • |
  • PHP
  • |
  • WP Admin
  • |
  • WPCodebox

Quick Access Menu – Custom Dropdown for WP Admin Bar with Options Page

This PHP code creates a WordPress plugin named “Custom Admin Bar Dropdown.” The plugin adds a custom dropdown menu with configurable menu items to the WordPress admin bar. It includes a settings page where administrators can set the dropdown menu’s title and define its items (title and URL). The settings page allows for the dynamic addition and removal of menu items through a user-friendly interface.

Key Features:

  1. Custom Admin Bar Menu: Adds a customizable dropdown menu to the WordPress admin bar.
  2. Configuration Screen: This screen provides an interface in the WordPress admin area for configuring the dropdown menu’s title and items.
  3. Dynamic Menu Management: Allows administrators to add and remove menu items dynamically through the settings page.
  4. Manage Menu Link: The dropdown menu automatically includes a “Manage Menu” link as the last item, linking to the settings page.
  5. User Permissions: Ensures only users with the ‘manage_options’ capability can access and modify the settings.

This plugin is ideal for administrators who want to enhance the functionality of their WordPress admin bar with a custom, easily configurable dropdown menu.


Implementation Steps

  1. Open your theme’s functions.php file. Or Add a New Snippet in WPCodeBox
  2. Add the provided code snippet.
  3. Save the file and refresh your website to see the badges in action.

Type: PHP

<?php
/*
Plugin Name: Custom Admin Bar Dropdown
Description: Adds a custom dropdown menu to the admin bar with configurable menu items.
Version: 1.1
Author: Ruhani Rabin
Date: Sunday, June 09, 2024
*/

// Hook to add menu item to admin bar
add_action('admin_bar_menu', 'custom_admin_bar_dropdown', 100);

function custom_admin_bar_dropdown($wp_admin_bar) {
    // Get the menu title from the options table, default to 'Custom Menu'
    $menu_title = get_option('custom_admin_bar_title', 'Custom Menu');
    // Get the menu items from the options table, default to an empty array
    $menu_items = get_option('custom_admin_bar_items', array());

    // Add the main menu node to the admin bar
    $wp_admin_bar->add_node(array(
        'id'    => 'custom_admin_bar_dropdown',
        'title' => $menu_title,
        'href'  => '#',
    ));

    // Loop through each menu item and add it as a child node
    foreach ($menu_items as $item) {
        $wp_admin_bar->add_node(array(
            'id'     => sanitize_title($item['title']),
            'title'  => $item['title'],
            'href'   => $item['url'],
            'parent' => 'custom_admin_bar_dropdown',
        ));
    }

    // Add manage link as the last item
    $wp_admin_bar->add_node(array(
        'id'     => 'custom_admin_bar_dropdown_manage',
        'title'  => 'Manage Menu',
        'href'   => admin_url('options-general.php?page=custom-admin-bar-dropdown'),
        'parent' => 'custom_admin_bar_dropdown',
    ));
}

// Hook to add settings page
add_action('admin_menu', 'custom_admin_bar_settings_page');

function custom_admin_bar_settings_page() {
    // Add a settings page under the "Settings" menu
    add_options_page(
        'Custom Admin Bar Dropdown',
        'Admin Bar Dropdown',
        'manage_options',
        'custom-admin-bar-dropdown',
        'custom_admin_bar_settings_page_html'
    );
}

// HTML for settings page
function custom_admin_bar_settings_page_html() {
    // Check if the user has the required capability
    if (!current_user_can('manage_options')) {
        return;
    }

    // Save the settings if the form is submitted
    if (isset($_POST['custom_admin_bar_title'])) {
        update_option('custom_admin_bar_title', sanitize_text_field($_POST['custom_admin_bar_title']));
    }

    if (isset($_POST['custom_admin_bar_items'])) {
        $items = array_map(function($item) {
            return array(
                'title' => sanitize_text_field($item['title']),
                'url'   => esc_url_raw($item['url']),
            );
        }, $_POST['custom_admin_bar_items']);
        update_option('custom_admin_bar_items', $items);
    }

    // Get the current settings
    $menu_title = get_option('custom_admin_bar_title', 'Custom Menu');
    $menu_items = get_option('custom_admin_bar_items', array());

    ?>
    <div class="wrap">
        <h1>Custom Admin Bar Dropdown Settings</h1>
        <form method="post" action="">
            <table class="form-table">
                <tr valign="top">
                    <th scope="row">Menu Title</th>
                    <td><input type="text" name="custom_admin_bar_title" value="<?php echo esc_attr($menu_title); ?>" class="regular-text"></td>
                </tr>
            </table>

            <h2>Menu Items</h2>
            <div id="menu-items">
                <?php foreach ($menu_items as $index => $item): ?>
                    <div class="menu-item">
                        <label>Title: <input type="text" name="custom_admin_bar_items[<?php echo $index; ?>][title]" value="<?php echo esc_attr($item['title']); ?>"></label>
                        <label>URL: <input type="text" name="custom_admin_bar_items[<?php echo $index; ?>][url]" value="<?php echo esc_url($item['url']); ?>"></label>
                        <button type="button" class="remove-item">Remove</button>
                    </div>
                <?php endforeach; ?>
            </div>
            <button type="button" id="add-item">Add Item</button>
            <br><br>
            <?php submit_button(); ?>
        </form>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var addItemButton = document.getElementById('add-item');
            var menuItemsContainer = document.getElementById('menu-items');

            // Add new menu item input fields when "Add Item" button is clicked
            addItemButton.addEventListener('click', function() {
                var index = menuItemsContainer.children.length;
                var newItem = document.createElement('div');
                newItem.className = 'menu-item';
                newItem.innerHTML = `
                    <label>Title: <input type="text" name="custom_admin_bar_items[${index}][title]"></label>
                    <label>URL: <input type="text" name="custom_admin_bar_items[${index}][url]"></label>
                    <button type="button" class="remove-item">Remove</button>
                `;
                menuItemsContainer.appendChild(newItem);
            });

            // Remove menu item input fields when "Remove" button is clicked
            menuItemsContainer.addEventListener('click', function(event) {
                if (event.target.classList.contains('remove-item')) {
                    event.target.parentElement.remove();
                }
            });
        });
    </script>
    <?php
}
?>


More Codes

Dynamic Date Replace on WordPress Post Title, Excerpt, Content, Menu Items

“Dynamic Date Replace Plugin for WPCodeBox: Easily add dynamic date info to your WordPress site’s content, titles, and menu items with shortcodes!”

Enable Auto Update WordPress Plugins and Themes

Discover how to enable auto updates for WordPress plugins and themes with WPCodeBox. Add PHP snippets, save, and enjoy hassle-free updates!

Automatic Table of Content for Your WordPress Posts, Conditional Auto Insert before the First H2

Enhance long-form content readability with WPCodeBox’s Automatic Table of Contents before the first H2 header. Try it now and improve user experience!