A better way to build admin pages and options for you plugins/themes.
Clone or download this repo and put inside of your theme/plugin
cd wp-content/plugins/my-plugin
git clone https://github.com/luizbills/better-wordpress-admin-api/
Include the framework/init.php
file in your plugin or functions.php
include_once 'path/to/better-wordpress-admin-api/framework/init.php';
// page details
$page_args = [
'menu_name' => 'Your Page',
// page slug
'id' => 'your-page-id',
// automatically prefix all field ids
'prefix' => 'your_prefix_',
// use "parent" parameter to create as a sub-menu
//'parent' => 'themes.php',
// more options...
//'icon' => 'dashicons-admin-post',
//'position' => 10,
//'capability' => 'manage_options',
];
// create the page
$your_page = wp_create_admin_page( $page_args );
// add fields
// field details
$field_args = [
'type' => 'text',
'id' => 'your_text_field',
'label' => 'Your Text field',
'desc' => 'Your field description. **You can use markdown here**.',
'props' => [
// optional tag properties
'placeholder' => 'type something...'
],
//'default' => 'hello world',
];
// creates a text field
$your_page->add_field( $field_args );
Generates:
// get your page instance
$your_page = wp_get_page_instance( 'your-page-id' );
// get a field value
$your_text_value = $your_page->get_field_value( 'your_text_field' );
// or with your prefix used above on $page_details (but it is not necessary)
$your_text_value = $your_page->get_field_value( 'your_prefix_your_text_field' );
// or just put all together
$your_text_value = wp_get_page_field_value( 'your-page-id', 'your_text_field' );
More at examples folder.
text
(text-based inputs: text, email, url, ...)select
checkbox
(single checkbox)checkbox_multi
(multiple checkboxes)radio
hidden
(for input[type="hidden"])code
(code editor powered by ace)html
(useful to create your own field template)color
(color picker)content
(default WordPress TinyMCE editor)
-
Color picker -
TinyMCE editor -
Fields Documentation -
Multiple checkboxes -
Upload field - Redesign
-
Found a bug? Report it on GitHub Issues and include a code sample. Please state which version of WordPress your are using.
-
Before submitting a Pull Request, if you are modifying some JavaScript or CSS file run:
npm run minify
(requires NodeJS)
More details:
- install NodeJS
- open your terminal in the root of this repository
- run
npm install
- then run
npm run minify
to update the minified assets.
Pro tip: add
define( 'WP_DEBUG_SCRIPT', true );
to yourwp-config.php
when you're coding some PR.
GPL v2
Made with ❤ in Brazil