:
Hey! Let’s talk about how to create a WordPress Configuration Page, this is something I left uncovered in my last article about our «add to cart button counter» plugin. If a Plugin (or template) needs some configuration to work correctly, WordPress has a fairly straightforward «Settings API» to meet those requirements.
So, let’s Create a WordPress Configuration page with an example.
We are going to take the last plugin we created (Activation and Deactivation Hooks, a piece of cake), and we will add a couple of fields (options), a section, a group and an options page to accomplish our goal.
So, let’s assume that our plugin needs to meet these requirements:
* An input checkbox where the user can decide if they want to remove all the data created by the plugin when the user deactivates it.
* A list of «Blocked IP list» where we are going to set a comma separated IP list banned by our plugin, it means, that it is not going to count the «add to cart button click» coming from any of those IPs.
Here is the code to do it, and I commented it for better understanding.
(Remember that you can always leave some questions in our comments section)
<?php
/*
Plugin Name: Add To Cart Counter
Plugin URI: https:/webprogramo.com
Description: This is a Piece Of Cake Add To Cart button click counter to explain the Activation and Deactivation Hooks
Version: 1.0
Author: Alejandro Lopez
Author URI: http://3.235.17.196
License: GPL2
*/
// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
// Plugin constants, (Just to look a little smarter)
define( 'POC_VERSION', '1.0.0' );
define( 'POC_MAIN_FILE', __FILE__ );
define( 'ADD_TO_CART_CLICK', 'addtocart_click' );
class Piece_Of_Cake_Counter {
public function __construct(){
/**
* With this line (Action), we tell WordPress to execute 'our_plugin_custom_options'
* function to add our options page on the Settings Admin Menu.
*/
add_action( 'admin_menu', array( $this, 'our_plugin_custom_options' ));
/**
* In this action we are going to register our plugin settings sections, groups and fields
*/
add_action('admin_init', array( $this, 'our_register_settings' ) );
}
/**
* This is the function where we are going to execute the WordPress function to create our custom menu inside Admin Settings Menu
*
* @return void
*/
public function our_plugin_custom_options()
{
add_options_page(
'ATC Options', // Page title.
'ATC Options', // Menu title.
'manage_options', // The user capabilities needed to access this options page, manage_options is the Administrator capability.
'atc_options', // This is the menu slug (ID), it must be unique.
array( $this, 'our_content_custom_options' ) // This is the function to print the content on this option page
);
}
function our_register_settings(){
/**
* For each field (option) we are going to create we call this function "register_setting."
* The first argument is the field group name (ID), it is just a way to put related options together.
* The second argument is the field name as it will be stored on WordPress Options Table
* The third argument is a callback function we are going to use to validate and sanitize the input before letting WordPress create or update it.
*/
register_setting(
'atc_plugin_options',
'remove_add_to_cart_counter',
array( $this, 'remove_add_to_cart_counter_validation' )
);
register_setting(
'atc_plugin_options',
'add_to_cart_counter_banned_ips'
);
/**
* With this function, we create a settings section to put together our fields groups
*/
add_settings_section(
'our_first_section', // This is the section ID (unique).
'Main Settings', // This is the section title
array( $this, 'section_description' ), // This is a function callback to show some extra information or description inside the section.
'atc_options' // This is the page slug, it means the page where we are going to show this section of options. Do you remember the menu slug? Yes, this last parameter is that one, in this case, "atc_options."
);
/**
* Ok, I hope this is clear so far.
* With this two functions, we are going to match each one of our fields with our section settings and the options page
* There is a sixth parameter we are not going talk about here, it is an array of arguments for our callback function (third parameter)
*/
add_settings_field(
'remove_add_to_cart_counter', // This is the field ID.
'Remove all info on plugin deactivation', // This is the field title
array( $this, 'print_checkbox' ), // This is a function callback to print the HTML markup for this input
'atc_options', // This is the page ID (Menu slug)
'our_first_section' // This is the section ID.
);
// Same as before for our "add_to_cart_counter_banned_ips" field
add_settings_field(
'add_to_cart_counter_banned_ips',
'Banned IPs',
array( $this, 'print_textarea' ),
'atc_options',
'our_first_section'
);
}
/**
* This is the validation and sanitization function for remove_add_to_cart_counter field
*
* @param [type] $val
* @return void
*/
function remove_add_to_cart_counter_validation( $val ) {
if( isset( $val ) && $val === TRUE ) {
return true;
}
return false;
}
/**
* This is the function to create the checkbox input for remove_add_to_cart_counter field
*
* @param array $args
* @return void
*/
function print_checkbox( $args = array() ) {
// Get the option value, and a default of true if it doesn't exists
$value = get_option( "remove_add_to_cart_counter", true );
$checked = ( $value ) ? "checked" : "";
print "<input type=\"checkbox\" value=\"true\" name=\"remove_add_to_cart_counter\" id=\"remove_add_to_cart_counter\" {$checked} />";
}
/**
* This is the function to create the textarea input for add_to_cart_counter_banned_ips field
*
* @param array $args
* @return void
*/
function print_textarea( $args = array() ) {
// Get the option value, and a empty string as default if it doesn't exists
$value = get_option( "add_to_cart_counter_banned_ips", "" );
print "<textarea style=\"width: 80%;\" rows=\"8\" id=\"add_to_cart_counter_banned_ips\" name=\"add_to_cart_counter_banned_ips\">{$value}</textarea>";
print "<p>Comma separated IPs to exclude from the Click Counter</p>";
}
/**
* This is the section description, I explained this before.
*
* @return void
*/
function section_description() {
?>
<p>Hey, this is my section of options description, this is pretty easy, no?</p>
<?php
}
/**
* This is the HTML of our Options Page.
* @return void
*/
public function our_content_custom_options() {
?>
<div class="wrap">
<h1>Add to cart counter plugin, options page</h1>
<form method="post" action="options.php">
<?php
// As WordPress Says:
// Output nonce, action, and option_page fields for a settings page.
// Please note that this function must be called inside of the form tag for the options page.
settings_fields( 'atc_plugin_options' );
// This function prints the settings sections attached to this page
do_settings_sections( 'atc_options' );
submit_button();
?>
</form>
</div>
<?php
}
}
// Last, we just initialize the class, and the piece of cake add to cart button counter is done!
new Piece_Of_Cake_Counter();
And, that’s all!
I know, I know, maybe you are thinking, what? It is not easy! But, if you retake a look at the code you will see it is not that hard, just registering an options page, a section for that options page, a group in that section and fields in that group. And That’s it. =).
