Develop a Plugin to Create Custom Admin Page in WordPress 😎

Creating a custom admin page in the WordPress Dashboard can be a powerful way to extend the functionality of your WordPress site.

Whether you want to display custom data, and settings, or perform specific actions, having your own admin page can make managing your site more efficient.

In this guide, I'll walk you through the process of creating a custom admin page in WordPress via code.

I will show you how to develop a simple and lightweight plugin to create a custom admin page in your WordPress Dashboard.

Create a Plugin

We need to create only 3 files - content.php, index.php and style.css.

Create the Admin Menu Page in index.php

To add a new admin menu page, you can use the add_menu_page function. Place this code inside your plugin file:

First I added the CSS file to style the Admin page, Then created the admin page menu and uploaded an icon, at last - I included content.php file.

<?php
/*
Plugin Name: Custom Admin Page
Description: Create a custom admin page in WordPress.
Version: 1.0
Author: jemee
*/
/* Add CSS file */
function custom_admin_page_styles() {
    wp_enqueue_style('custom-admin-page-styles', plugin_dir_url(__FILE__) . 'style.css');
}

add_action('admin_enqueue_scripts', 'custom_admin_page_styles');

/*Create the Admin Menu Page*/

function custom_admin_page_menu() {
    add_menu_page(
        'Custom Admin Page',
        'Custom Page',
        'manage_options',
        'custom-admin-page',
        'custom_admin_page_callback',
        'wpadminify-bucket.s3.amazonaws.com/wp-content/uploads/2023/09/23025755/folder.png', 
        20 // Position in the menu
    );
}

add_action('admin_menu', 'custom_admin_page_menu');
/* Add Content File */

include('content.php');

?>

• 'Custom Admin Page' is the title of your page.
• 'Custom Page' is the menu label.
• 'manage_options' specifies the user role that can access this page.
• 'custom-admin-page' is the unique slug for your page.
• 'custom_admin_page_callback' is the function that will generate the page content.

Add and Modify Admin Page Content in content.php

Define the callback function custom_admin_page_callback to generate the content of your custom admin page. This function outputs the HTML for your admin page. You can customize the content as needed.

function custom_admin_page_callback() {
    ?>
    <div class="wrap">
        <h2>Custom Admin Page</h2>
        <p>Welcome to your custom admin page. You can add your content here.</p>
    </div>
    <?php
}

Here is the preview of the Custom WordPress admin page.

Styling Your Admin Page in style.css

You remember we've already enqueued a stylesheet in our index.php called style.css. Remember to create a CSS file named "style.css" in the same folder as your plugin file.

Here is the CSS code you need to put for better logo alignment. You can input any type of CSS for better customization of your WordPress admin page.

#toplevel_page_custom-admin-page a .wp-menu-image img{
    width: 25px;
    height: 25px;
}

Adding Functionality

Now that you have created the admin page, you can add functionality like form submissions, database interactions, or any other actions your page should perform.

Testing Your Custom Admin Page

Activate your plugin in the WordPress admin, and you should see your custom admin page under the "Custom Page" menu in the dashboard.

Easy Alternative Method

Don't know how to write code, then you can try WP Adminfy Plugin. It comes with an Admin Page module. With the help of this module, you can easily create any type of admin page using any page builder you prefer.

In conclusion, creating a custom admin page in the WordPress Dashboard via code is a valuable skill for WordPress developers and site administrators. By following the steps outlined in this guide, you can extend the functionality of your WordPress Dashboard experience to your specific needs.