Are you a plugin developer? Do you want to create a setting page? In this article, You will know how to Create a Settings Options Page for a WordPress Plugin.
We have various needs to create a setting options page. Specifically for a plugin developer. We need to create advanced theme control, and special features Also, For plugin features control need to create a setting options page.
Let’s create custom settings options page:
Register Custom Option and Settings
We need to use WordPress Settings Page API to create a custom settings page. WordPress has a default function for options groups like register_setting().
Let’s see the code(Copy this code and paste it into function.php)
function wpk_settings_init(){
register_setting( 'wpk', 'wpk_options' );
add_settings_section(
'wpk_section_developers',
__( 'Tutorial by wpknifer.com.', 'wpk' ), 'wpk_section_developers_callback',
'wpk'
);
/*Text field*/ add_settings_field('wpk_text_field', 'Title', 'wpk_settings_input_field_callback', 'wpk', 'wpk_section_developers', array('label_for' => 'wpk_text_field'));
/*Select field*/ add_settings_field('wpk_select_field', 'Choose Option', 'wpk_settings_selects_field_callback', 'wpk', 'wpk_section_developers', array('label_for' => 'wpk_select_field'));
add_settings_field('wpk_upload_field', 'Choose Option', 'wpk_settings_upload_field_callback', 'wpk', 'wpk_section_developers', array('label_for' => 'wpk_upload_field'));
/*Textarea field*/ add_settings_field('wpk_textarea_field', 'Choose Option', 'wpk_settings_textarea_field_callback', 'wpk', 'wpk_section_developers', array('label_for' => 'wpk_textarea_field'));
}
add_action( 'admin_init', 'wpk_settings_init' );
/*Section description callback*/function wpk_section_developers_callback(){
?>
<p id="<?php echo esc_attr( $args['id'] ); ?>"><?php esc_html_e( 'Visit Our Website', 'wpk' ); ?></p>
<?php
}
Let’s break the code: We hook the first function into admin_init. On that function, We use the register_setting function which registers a setting and its data. Then, We use the add_settings_section() function for register section settings. It’s required for the settings page. Next, For add options field we use add_settings_field(). We have added four option fields.
And, next function wpk_section_developers_callback is the section descriptions callback function.
Add The Top Level Menu and Options Page:
At the moment, We have to add a top-level menu and options page. Let’s see the code.
Use this code in your function.php
/*Add Options page on menu*/function wpk_options_page(){
add_menu_page(
'WPK',
'WPK Options',
'manage_options',
'wpk',
'wpk_options_page_html'
);
}
add_action( 'admin_menu', 'wpk_options_page' );
Here we have used a callback function named “wpk_options_page_html”. Let’s see the callback function.
Use this code in your function.php:
/*Option Html Page callback*/function wpk_options_page_html() {
// check user capabilities
if ( ! current_user_can( 'manage_options' ) ) {
return;
}
if ( isset( $_GET['settings-updated'] ) ) {
// add settings saved message with the class of "updated"
add_settings_error( 'wpk_messages', 'wpk_message', __( 'Settings Saved', 'wpk' ), 'updated' );
}
// show error/update messages
settings_errors( 'wpk_messages' );
?>
<div class="wrap">
<h1><?php echo esc_html( get_admin_page_title() ); ?></h1>
<form action="options.php" method="post">
<?php
// output security fields for the registered setting "wpk"
settings_fields( 'wpk' );
// output setting sections and their fields
// (sections are registered for "wpk", each field is registered to a specific section)
do_settings_sections( 'wpk' );
// output save settings button
submit_button( 'Save Settings' );
?>
</form>
</div>
<?php
}If you have used those codes. Then you can reload your admin panel, We will see a callback function error that we have created on the admin init add_settings_field function. Let’s create some fields.
Add Custom Option field
We have registered three fields in the admin init. We can create input option fields using HTML, and PHP. Let’s create an option field.
Use this code in function.php
/*Field text input Callback*/function wpk_settings_input_field_callback( $args ){
$options = get_option( 'wpk_options' );
?>
<p>
<input type="text" name="wpk_options[<?php echo esc_attr($args['label_for']) ?>]" value="<?php echo esc_attr($options['wpk_text_field']) ?>" size="50" placeholder="Enter Title">
</p>
<span>This is example for wpknifer.com tutorial</span>
<?php
}
/*Media Upload button field*/function wpk_settings_upload_field_callback( $args ){
$options = get_option( 'wpk_options' );
if ( ! did_action( 'wp_enqueue_media' ) ) {
wp_enqueue_media();
}
?>
<script type="text/javascript">
jQuery(function($){
$('.wpk_upload_field').click(function(e){
e.preventDefault();
wpk_uploader = wp.media({
title: 'Custom image',
button: {
text: 'Use this image'
},
multiple: false
}).on('select', function() {
var attachment = wpk_uploader.state().get('selection').first().toJSON();
$('#wpk_profile_img').val(attachment.url);
})
.open();
});
});
</script> <?php if($options[$args['label_for']] != ''): ?> <img src="<?php echo esc_url($options[$args['label_for']]) ?>" max-width="400" alt="wpk-profile-img" style="max-width: 400px;"></br> <?php endif; ?> <a href="#" class="wpk_upload_field button button-secondary"><?php _e('Upload Image'); ?></a> <input type="text" name="wpk_options[<?php echo esc_attr($args['label_for']) ?>]" id="wpk_profile_img" value="<?php echo esc_url($options[$args['label_for']]); ?>" class="regular-text" /> <?php
}
function wpk_settings_selects_field_callback( $args ){ $options = get_option( 'wpk_options' ); ?> <select id="<?php echo esc_attr( $args['label_for'] ) ?>" name="wpk_options[<?php echo esc_attr($args['label_for']) ?>]"> <option value="html" <?php echo isset( $options[ $args['label_for'] ] ) ? ( selected( $options[ $args['label_for'] ], 'html', false ) ) : ( '' ); ?>> <?php esc_html_e( 'HTML', 'wpk' ); ?> </option> <option value="css" <?php echo isset( $options[ $args['label_for'] ] ) ? ( selected( $options[ $args['label_for'] ], 'css', false ) ) : ( '' ); ?>> <?php esc_html_e( 'CSS', 'wpk' ); ?> </option> </select> <?php
}
function wpk_settings_textarea_field_callback( $args ){ $options = get_option( 'wpk_options' ); ?> <textarea id="<?php echo esc_attr( $args['label_for'] ) ?>" name="wpk_options[<?php echo esc_attr($args['label_for']) ?>]" rows="5" cols="55"><?php echo isset($options[$args['label_for']])? $options[$args['label_for']]:''; ?></textarea> <?php
}Note: We have created three callback functions for three register fields. The four fields are Text input, Select, Media upload and Text area.
Conclusion
Creating a setting page is one of the common jobs for plugin developers. If you wanna develop a plugin. You must need to create a setting page. I think now can Create a Settings Options Page for a WordPress Plugin.
I hoop you have liked this article. Please drop a comment.
See More:
How to Create a Custom Metabox field in WordPress without a Plugin?
