WordPress: Custom Plugin/Theme Settings
In some cases when creating a plugin or new theme for WordPress you may need to capture information from the website administrator. We can achieve the capture of this type of information using WordPress settings.
To set this up we must:
- Create a menu item for the admin
- Register our custom settings
- Create the admin options page code
Create a Menu Item for the Admin
In your themes functions.php file or plugins PHP file add the following:
1 2 3 4 5 6 7 8 9 10 11 |
// Custom Settings // create custom settings menu add_action('admin_menu', 'my_settings_create_menu'); function my_settings_create_menu() { //create new top-level menu add_menu_page('My Settings', 'My Settings', 'administrator', __FILE__, 'my_settings_settings_page' , 'dashicons-admin-settings', 81 ); //call register settings function add_action( 'admin_init', 'register_my_settings_settings' ); } |
First we tell WordPress we are adding a function called my_settings_create_menu when the admin_menu action is called.
Then in our new function we use the WordPress function add_menu_page to register a menu item and assign it with our perimeters. We can change the menu items page title, menu title, required access, slug, the function to call when the menu page loads, the icon, and the position it appears in on the menu. Note that we are telling WordPress to run the function called my_settings_settings_page when the page loads.
More information on the add_menu_page can be found on the WordPress codex here.
Next we prepare to register our custom settings with WordPress adding an action to call a function were going to create called register_my_settings_settings.
Register Our Custom Settings
Now we create the function we prepared for in the last step called register_my_settings_settings. In this function we are going to register our custom settings with WordPress using the register_setting WordPress function.
1 2 3 4 5 6 |
function register_my_settings_settings() { //register our settings register_setting( 'my-settings-group', 'new_option_name' ); register_setting( 'my-settings-group', 'some_other_option_1' ); register_setting( 'my-settings-group', 'some_other_option_2' ); } |
The register_setting has 3 allowable perimeters:
- option_group – A settings group name. Must exist prior to the register_setting call. This must match the group name in settings_fields()
- option_name – The name of an option to sanitize and save.
- sanitize_callback – (optional) A callback function that sanitizes the option’s value.
More information on the register_setting can be found on the WordPress codex here.
Create the Admin Options Page Code
Lastly we need to add code to the my_settings_settings_page function we told WordPress we were using when we created the menu item for the admin. Add the following code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
function my_settings_settings_page() { ?> <div class="wrap"> <h1>My Settings</h1> <form method="post" action="options.php"> <?php settings_fields( 'my-settings-group' ); ?> <?php do_settings_sections( 'my-settings-group' ); ?> <table class="form-table"> <tr> <th scope="row"><label for="new_option_name">New Option Name</label></th> <td> <input type="text" name="new_option_name" id="new_option_name" value="<?php echo esc_attr( get_option('new_option_name') ); ?>" /> <p class="description" id="tagline-description">In a few words, explain what this site is about.</p> </td> </tr> <tr> <th scope="row"><label for="some_other_option">Some Other Option</label></th> <td> <fieldset> <legend class="screen-reader-text"><span>Some Other Option</span></legend> <label for="some_other_option"> <input name="some_other_option_1" type="checkbox" id="some_other_option_1" value="1" <?php if(get_option('some_other_option_1')==1){echo('checked="checked"');}?> > Sample <br/> <input name="some_other_option_2" type="checkbox" id="some_other_option_2" value="1" <?php if(get_option('some_other_option_2')==1){echo('checked="checked"');}?> > Sample <br/> </label> </fieldset> </td> </tr> </table> <?php submit_button(); ?> </form> </div> <?php } |
After setting up the function we are going to use the same format WordPress uses when formatting its own pages. We start with <div class=”wrap”> tag and place the content inside starting with our title. After we start our form code. From here we tell WordPress about our settings group and let it know about our feilds. From this point forward we create the form as we normally would in HTML using the <?php echo esc_attr( get_option(‘new_option_name’) ); ?> code to pull in pre existing values. At the end of our form we use the <?php submit_button(); ?> to place the WordPress submit button then remember to close your form tag and the my_settings_settings_page function at the end.
View the Full Code Below
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
// Custom Settings // create custom settings menu add_action('admin_menu', 'my_settings_create_menu'); function my_settings_create_menu() { //create new top-level menu add_menu_page('My Settings', 'My Settings', 'administrator', __FILE__, 'my_settings_settings_page' , 'dashicons-admin-settings', 81 ); //call register settings function add_action( 'admin_init', 'register_my_settings_settings' ); } function register_my_settings_settings() { //register our settings register_setting( 'my-settings-group', 'new_option_name' ); register_setting( 'my-settings-group', 'some_other_option_1' ); register_setting( 'my-settings-group', 'some_other_option_2' ); } function my_settings_settings_page() { ?> <div class="wrap"> <h1>My Settings</h1> <form method="post" action="options.php"> <?php settings_fields( 'my-settings-group' ); ?> <?php do_settings_sections( 'my-settings-group' ); ?> <table class="form-table"> <tr> <th scope="row"><label for="new_option_name">New Option Name</label></th> <td> <input type="text" name="new_option_name" id="new_option_name" value="<?php echo esc_attr( get_option('new_option_name') ); ?>" /> <p class="description" id="tagline-description">In a few words, explain what this site is about.</p> </td> </tr> <tr> <th scope="row"><label for="some_other_option">Some Other Option</label></th> <td> <fieldset> <legend class="screen-reader-text"><span>Some Other Option</span></legend> <label for="some_other_option"> <input name="some_other_option_1" type="checkbox" id="some_other_option_1" value="1" <?php if(get_option('some_other_option_1')==1){echo('checked="checked"');}?> > Sample <br/> <input name="some_other_option_2" type="checkbox" id="some_other_option_2" value="1" <?php if(get_option('some_other_option_2')==1){echo('checked="checked"');}?> > Sample <br/> </label> </fieldset> </td> </tr> </table> <?php submit_button(); ?> </form> </div> <?php } |
Recent Comments