Hướng dẫn tạo menu admin trong WordPress chi tiết từ A–Z bằng hàm add_menu_page

Chắc bạn cũng đang thắc mắc làm thế nào để tạo được 1 menu admin của WordPress? Giống như khi bạn tạo một custom post type hay khi cài đặt một plugin thì sẽ có một menu item hiển thị lên trên trang admin. Hôm nay mình xin giới thiệu bạn đến một hàm có thể thêm một menu mà bạn mong muốn vào admin menu của WordPress:

add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position );

Hàm này cho phép chúng ta thêm 1 link liên kết vào trang admin với các thông số như

$page_title : là tiêu đề của menu

$menu_title : là tên của menu khi hiển thị trên thanh menu

$capability : đại khái theo mình hiểu cái này là bạn muốn chèn menu vào khu vực nào mình muốn chèn vào menu thì mình nhập là manage_options

$menu_slug : Là đường dẫn của menu ở ví dụ dưới đây mình để là menu-slug

$function : hàm này thực hiện các cộng việc bạn mong muốn khi vào menu. Bạn muốn hiển thị gì thì có thể nhập liệu vào đó. Dưới demo của mình là demo_function mình viết hàm demo function trả về giá trị 123123123

$icon_url : là icon của menu đó

$position : là vị trí hiển thị của menu.

Dưới đây là một ví dụ mình làm các bạn có thể copy đonạ mã dưới đây cho vào file function để xem xem kết quả

add_action( 'admin_menu', 'register_my_custom_menu_page' ); 
function register_my_custom_menu_page() { 
    // add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position ); 
    add_menu_page( 'Custom Menu Page Title', 'Custom Menu Page', 'manage_options', 'menu-slug', 'demo_function', 'dashicons-welcome-widgets-menus', 2 ); 
}
function demo_function(){
    echo '123123123';
}

Và đây là thành quả của mình ! Nếu bạn có thắc mắc gì hãy comment bên dưới mình sẽ giải đáp. Chúc các bạn thành công!

Tìm hiểu sâu hơn về các tham số quan trọng trong add_menu_page

Để làm chủ việc xây dựng giao diện quản trị chuyên nghiệp, bạn nên nắm rõ bản chất kỹ thuật của từng tham số trong hàm:

1. Quyền hạn truy cập ($capability)

Trong WordPress, hệ thống Roles & Capabilities kiểm soát việc người dùng nào được xem hoặc thao tác trên từng trang cụ thể. Thay vì gắn cứng cho mọi tài khoản, bạn nên chọn đúng capability tương ứng:

• manage_options: Chỉ dành cho Quản trị viên (Administrator). Dùng khi trang chứa cấu hình hệ thống, API keys hoặc cài đặt giao diện.
• edit_posts: Cho phép Biên tập viên (Editor) và Tác giả (Author) truy cập. Phù hợp nếu trang này phục vụ quản lý bài viết hoặc thư viện nội dung tùy biến.
• read: Mọi tài khoản đã đăng nhập đều có thể truy cập, phù hợp với các trang xem thông tin tài khoản hoặc hướng dẫn nội bộ.

2. Định danh trang ($menu_slug)

$menu_slug phải là duy nhất trên toàn bộ hệ thống WordPress để tránh xung đột với các plugin khác hoặc trang mặc định của core. Chuỗi này sẽ xuất hiện trên URL theo cấu trúc:

[https://yourdomain.com/wp-admin/admin.php?page=menu-slug](https://yourdomain.com/wp-admin/admin.php?page=menu-slug)

Quy tắc đặt tên tốt nhất: chỉ dùng chữ cái viết thường, số và dấu gạch ngang (kebab-case), kèm tiền tố riêng của dự án (ví dụ: mybrand-settings).

3. Tùy biến biểu tượng menu ($icon_url)

WordPress hỗ trợ nhiều định dạng icon linh hoạt:

• Dashicons mặc định: Bạn vào trang Dashicons của WordPress Developer Resource, chọn icon ưng ý và copy tên class (ví dụ: ‘dashicons-chart-pie’, ‘dashicons-store’).
• Đường dẫn ảnh tùy chỉnh: Điền URL đầy đủ trỏ đến file ảnh PNG hoặc SVG (kích thước tối ưu khoảng 20×20 pixel).
• Chuỗi SVG Base64: Nhúng trực tiếp chuỗi data-uri để không phát sinh request tải ảnh rời.
• None: Đặt giá trị ‘none’ nếu bạn muốn tự viết CSS style riêng cho biểu tượng.

4. Vị trí hiển thị trên thanh điều hướng ($position)

WordPress bố trí các menu mặc định theo các mốc số nguyên cụ thể:

Lưu ý: Khi chọn vị trí, hãy sử dụng số thập phân (như 2.1 hoặc 59.5) thay vì số nguyên chẵn. Điều này giúp ngăn ngừa việc menu của bạn ghi đè hoặc xung đột vị trí với các menu mặc định của WordPress hoặc plugin thứ ba.

Tạo thêm menu con (Submenu)

Khi phát triển tính năng phức tạp, bạn thường cần gom nhiều trang cài đặt con vào cùng một mục menu cha. WordPress cung cấp hàm add_submenu_page để giải quyết việc này:

add_action( ‘admin_menu’, ‘register_custom_submenus’ );

function register_custom_submenus() {

    // Menu con 1

    add_submenu_page(

        ‘menu-slug’,                   // Slug của menu cha

        ‘Cài đặt nâng cao’,            // Page title

        ‘Nâng cao’,                    // Menu title

        ‘manage_options’,              // Capability

        ‘menu-slug-advanced’,          // Submenu slug

        ‘render_advanced_settings’     // Callback function

    );

}

function render_advanced_settings() {

    ?>

    <div class=”wrap”>

        <h1>Cài đặt nâng cao cho hệ thống</h1>

        <p>Tùy biến các tham số mở rộng tại đây.</p>

    </div>

    <?php

}

Chuẩn hóa giao diện trang Admin theo phong cách WordPress Core

Thay vì chỉ in chuỗi text đơn giản qua lệnh echo, trang quản trị nên tuân theo cấu trúc HTML chuẩn của WordPress để đảm bảo tính đồng bộ giao diện:

function demo_function() {

    // Kiểm tra quyền hạn trước khi render

    if ( ! current_user_can( ‘manage_options’ ) ) {

        return;

    }

    ?>

    <div class=”wrap”>

        <h1 class=”wp-heading-inline”>Trang Quản Lý Tùy Chỉnh</h1>

        <hr class=”wp-header-end”>

        <div class=”card” style=”max-width: 100%; margin-top: 20px;”>

            <h2>Cấu hình hệ thống</h2>

            <p>Trang này cho phép bạn quản lý các thiết lập riêng mà không làm ảnh hưởng đến cấu hình mặc định của theme.</p>

            <form method=”post” action=”options.php”>

                <table class=”form-table” role=”presentation”>

                    <tbody>

                        <tr>

                            <th scope=”row”><label for=”custom_api_key”>Mã API kết nối</label></th>

                            <td>

                                <input name=”custom_api_key” type=”text” id=”custom_api_key” value=”” class=”regular-text”>

                                <p class=”description”>Nhập mã khóa xác thực dịch vụ bên thứ ba.</p>

                            </td>

                        </tr>

                    </tbody>

                </table>

                <?php submit_button( ‘Lưu thay đổi’ ); ?>

            </form>

        </div>

    </div>

    <?php

}

Các class CSS như .wrap, .wp-heading-inline, .card, .form-table cùng hàm submit_button() giúp biểu mẫu hòa nhập liền mạch với toàn bộ bảng điều khiển WordPress, mang lại trải nghiệm chuyên nghiệp cho người quản trị website.