Creating a Custom Theme Options Panel for WordPress
Posted on 18th June 2023
Introduction
WordPress is a popular content management system (CMS) which enables you to create a website or blog from scratch, or to improve an existing website.
One of the key advantages of WordPress is its extensibility – there are literally thousands of plugins and themes available which you can install to add new features and functionality to your site.
In this tutorial, we will be creating a custom theme options panel for a WordPress theme. This will enable us to add extra settings to our theme, which can be used to customize the appearance and behavior of the theme.
Creating the Theme Options Page
The first step is to create a new file in your WordPress theme called “theme-options.php”. This will be the file that contains the code for our theme options page.
In this file, we will first need to add the following code to create a new WordPress admin page:
This code creates a new admin page with the title “Theme Options” and the slug “mytheme_admin”. The mytheme_admin_page() function is used to display the content of our theme options page.
Adding Fields to the Theme Options Page
Next, we need to add some fields to our theme options page. We will use the WordPress Settings API to add these fields.
First, we need to register our settings. Add the following code to your “theme-options.php” file:
This code registers a new setting called “mytheme_options” with the WordPress Settings API. The mytheme_options_validate() function is used to validate the data entered by the user.
Next, we need to add the actual fields to our page. Add the following code to your “theme-options.php” file:
This code adds two new fields to our “Theme Options” page – “Field 1” and “Field 2”. The mytheme_field_1_render() and mytheme_field_2_render() functions are used to display the fields on the page.
Rendering the Fields on the Theme Options Page
Next, we need to write the code to actually render our fields on the page. Add the following code to your “theme-options.php” file:
<input type="text" name="mytheme_options[mytheme_field_1]" value="” />
<input type="text" name="mytheme_options[mytheme_field_2]" value="” />
This code renders our two fields on the page. The get_option() function is used to retrieve the data entered by the user.
Validating the Data Entered by the User
Finally, we need to write the code to validate the data entered by the user. Add the following code to your “theme-options.php” file:
This code validates the data entered by the user. The isset() function is used to check if the data has been entered, and if so, it is added to the $output array.
Conclusion
In this tutorial, we have created a custom theme options panel for a WordPress theme. This enables us to add extra settings to our theme, which can be used to customize the appearance and behavior of the theme.
The next step is to add a function to your functions.php file that will create the new sub-menu page. Add the following code to the bottom of your functions.php file:
function custom_theme_options_page() {
add_submenu_page( ‘themes.php’,
‘Custom Theme Options’, ‘Custom Theme Options’,
‘manage_options’, ‘custom-theme-options’,
‘custom_theme_options_page_display’ );
}
add_action( ‘admin_menu’, ‘custom_theme_options_page’ );
This code creates a new sub-menu page under the Appearance menu. The first parameter is the parent page, which we set to themes.php. The next parameter is the page title, followed by the menu title. The fourth parameter is the capability required to view the page, which we set to manage_options. The fifth parameter is a unique identifier for the page, which we set to custom-theme-options. The last parameter is the function that will display the page content.
The next step is to create the custom_theme_options_page_display() function that will output the HTML for the page. Add the following code to your functions.php file:
function custom_theme_options_page_display() {
echo ‘
Custom Theme Options
‘;
echo ‘
This is where you can customize your theme options
‘;
}
This code simply outputs a title and a paragraph on the page.
The next step is to add some form fields to the page so that users can input their options. WordPress provides a set of functions that can be used to output various form fields.
First, we need to add a function that will register our settings. Add the following code to your functions.php file:
function custom_theme_options_init() {
register_setting( ‘custom_theme_options’, ‘custom_theme_options’, ‘custom_theme_options_validate’ );
}
add_action( ‘admin_init’, ‘custom_theme_options_init’ );
The first parameter is a unique identifier for the settings page. The second parameter is the name of the option to be stored in the database. The third parameter is a callback function that will validate the settings.
Next, we need to create the custom_theme_options_validate() function that will be used to validate the settings. Add the following code to your functions.php file:
function custom_theme_options_validate( $input ) {
$output = array();
if ( isset( $input[‘logo’] ) && ! empty( $input[‘logo’] ) )
$output[‘logo’] = esc_url( $input[‘logo’] );
if ( isset( $input[‘favicon’] ) && ! empty( $input[‘favicon’] ) )
$output[‘favicon’] = esc_url( $input[‘favicon’] );
return $output;
}
This function simply checks if the logo and favicon fields have been filled in and if so, it validates the URL.
Now that we have registered our settings, we can add the form fields to our page. Add the following code to the custom_theme_options_page_display() function:
function custom_theme_options_page_display() {
echo ‘
Custom Theme Options
‘;
echo ‘
This is where you can customize your theme options
‘;
?>
| Logo | <input type="text" name="custom_theme_options[logo]" value="” /> |
|---|---|
| Favicon | <input type="text" name="custom_theme_options[favicon]" value="” /> |
<input type="submit" class="button-primary" value="” />
<?php
}
This code adds two form fields to the page, one for the logo and one for the favicon. It also outputs the necessary WordPress functions to save the settings.
The last step is to add some CSS to style the page. Add the following code to your style.css file:
#custom-theme-options {
width: 60%;
margin: 20px auto;
}
#custom-theme-options h1 {
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
}
#custom-theme-options p {
font-size: 12px;
color: #666;
}
#custom-theme-options table {
width: 100%;
}
#custom-theme-options th,
#custom-theme-options td {
padding: 10px;
border: 1px solid #ccc;
}
#custom-theme-options input[type="text"] {
width: 70%;
}
This code styles the page so that it is wider and has some padding. It also styles the table and input fields.
This is just a basic example of how to create a custom theme options page. You can add as many form fields as you like and style the page however you want.
