How to Create Custom Form in WordPress Admin Panel

How to Create Custom Form in WordPress Admin Panel

In case you run a business website, or if you own a blog, you must be aware of the importance of healthy interaction between the site and the users. There are several different ways to interact with users. However, the easiest way is to build up a simple WordPress custom form. With some basic knowledge of coding, you can build up a custom form in the admin panel of WordPress.

In this article, we would be discussing what exactly are WordPress custom admin pages and how to create custom form in WordPress admin panel. Keep on reading to understand more about it.

What are Custom Pages in WordPress Admin Panel?

A WordPress admin dashboard is basically the first page that you see after you log in. The side menu can be used to navigate to the other admin pages, such as plugins, appearance, users, settings, and so on. One can also see some new menu items after a theme or a WordPress custom admin page plugin is activated, which redirects to a new admin page. This can be the control panel of the theme, the settings page of a plugin, a simple document page, or just a page that displays the status of the website. In this regard, the custom admin page plays a constructive role. It allows the developer to extend the admin rights with some new options and create a WordPress admin form validation.

Process to Add WordPress Custom Form in Admin Panel

For adding a WordPress custom form in the admin panel, two things are required. These are as follows:

1. An admin menu (add_menu_page function)
2. Page content (custom function)

For adding a new menu item in the admin panel, the following function can be used:

add_menu_page (string $page_title,
string $menu_title, string $capability,
string $menu_slug, callable $function = ”,
string $icon_url = ”, int $position = null)

Following are some details about these functions to understand them better:

1. $page_title: This function contains the text that is to be displayed in the title tag of the custom page after one selects the menu. The page title needs to be meaningful, as it is quite important. Taking an example, if the custom admin page is the options page for a plugin, it could be titled as “My Plugin Options”. The title needs to be such that it can be easily translated. Therefore, it is a good idea to use _ function like: _ (‘My Plugin Options’, ‘my-plugin-textdomain ‘)

2. $menu_title: This function represents the text that would be used in the menu. This can basically be referred to as a child function to the page_title function.

3. $capability: This represents the capability which is required for the menu to be easily displayed to the end-user. Taking an example, if this has some general options for the website, the manage_option function could be one of the best choices. It should be set carefully to avoid any security issues. You can check out the Roles and Capabilities page in WordPress to see the proper capability for the custom admin page.

4. $menu_slug: This function stands for the slug name that represents this menu. It needs to be unique for the menu page, and include only lowercase alphanumeric, underscores, and dashes for being compatible with the sanitize_key() function. This is then utilized as a parameter in the custom admin page URL.

5. $function: This is the function to be called if you want to display the content output for the page. Taking a simple example, one can make use of the following code for displaying a header in the custom page of the admin panel:

function my_admin_page_contents() {
?>
<h1>
< ?php esc_html_e(‘Welcome to my custom admin page.’, ‘my-plugin-textdomain’ );
</h1>
<?php
}

6. $icon_url: This is the icon URL that is to be used in this menu. One can use an encoded SVG, an image, or dash icons.

• To use an image in the menu, all you need to do is pass the image URL in it.
• If you are looking for icons such as WordPress defaults that have distinct colors on the hovers, you can simply pass an SVG file that is encoded.
• One can also utilize existing WordPress icons. Just search for a suitable icon from the DashIcons page in WordPress and pass over the class name such as dashicons_schedule as URL argument of the icon.
• Additionally, you can also use the none value for leaving the div.wp-menu-image empty. This way, the icon can be added through CSS.

7. $position: This function defines the position in which the menu order should appear. Following is the numbers list of the default admin menus:

• 2 – Dashboard
• 4 – Separator
• 5 – Posts
• 10 – Media
• 15 – Links
• 20 – Pages
• 25 – Comments
• 59 – Separator
• 60 – Appearance
• 65 – Plugins
• 70 – Users
• 75 – Tools
• 80 – Settings
• 99 – Separator

For example, in case you want to display the menu after Separator, the number 4 should be used.

One needs to know that a submenu can be added to the existing submenu or a newly added menu with the help of the following functions:

• add_posts_page: For adding a submenu in the Posts menu
• add_pages_page: For adding a submenu in the Pages menu
• add_media_page: For adding a submenu in the Media menu
• add_comments_page: For adding a submenu in the Comments menu
• add_theme_page: For adding a submenu in the Themes menu
• add_plugin_page: For adding a submenu in the Plugins menu
• add_users_page: For adding a submenu in the Users menu
• add_management_page: For adding a submenu in the Tools menu
• add_options_page: For adding a submenu in the Options menu

All of these are wrapped under the add_submenu_page function, hence can be used similarly:

add_submenu_page( string $parent_slug, string $page_title,
string $menu_title, string $capability,
string $menu_slug, callable $function = ‘‘);

This way, a custom page is built in the admin panel. Further, we would be talking about how to add custom styles and scripts for the content.

How to Add Styles and Scripts to WordPress Custom Pages in the Admin Panel

Styles can be put after page content in the following way:

function load_custom_wp_admin_style($hook) {
// Load only on? page=mypluginname
if ($hook! = ‘toplevel_page_mypluginname’) {
return;
}
wp_enqueue_style(‘custom_wp_admin_css’,
plugins_url(‘admin-style.css’, __FILE__) );
}
add_action(‘admin_enqueue_scripts’, ‘load_custom_wp_admin_style’ );

This code would load the admin-styles.css file in the mypluginname page. The reason of doing this is that the loading style in the admin pages can lead to unwanted changes in the other admin pages such as unwanted change in the text size of the dashboard.

In case you are not sure of your $hook name, you can find out the hook name using the following code:

function load_custom_wp_admin_style($hook ) {
wp_die($hook );
}
add_action(‘admin_enqueue_scripts’, ‘load_custom_wp_admin_style’ );

It is a good idea not to use wp_die while editing a file in the plugin editor. This can cause loss of access to the admin panel till the time it is removed.

The default registered styles can be used in WordPress in the following manner:

function load_custom_wp_admin_style( $hook ) {
// Load only on? page=mypluginname
if ($hook! = ‘toplevel_page_mypluginname’ ) {
return;
}
// Load color picker styles.
wp_enqueue_style(‘wp-color-picker’ );
}
add_action(‘admin_enqueue_scripts’, ‘load_custom_wp_admin_style’ );

Conclusion

The above was a simple tutorial about how to create a simple custom form submit in WordPress and add styles and scripts to it.

Author Bio:

Swathi S, an indispensable member of the Stan Ventures SEO team, is the current outreach specialist at the organization. Known for her way with words, Swathi is a frequent blogger who keeps a tab on the latest SEO updates and guest posting services at the firm.

You can reach her at Facebook | Linkedin