1. Create the required files
Before theme customization, you should first create a customizable "Settings Options Page". The code to create the settings options page needs to be placed in the functions.php file in the theme directory. If our template is named "OptionPage", then the path to the functions file is: wp-contentthemesOptionPagefunctions.php.
We don’t need to ask wordpress to load it manually, wordpress will load it automatically when executing.
2. Create a setting options page
First of all, the first step is to create a blank page in the background for us to use. We implement this step through add_aaction. Actions can be executed at specific times when WordPress is executing. For example, when a menu is created in the control panel, admin_menu will be executed in response. Therefore, these can be leveraged to achieve the functionality we require. This is the most basic function for us to create options pages.
//?Set options page
function?themeoptions_admin_menu()
{
//?In the control panel Add settings option page link to the sidebar
add_theme_page("Theme Settings",?"Theme Options",?'edit_themes',?basename(__FILE__),?'themeoptions_page');
< p>}function?themeoptions_page()
{
//?Set the main functions of the options page
}
add_action('admin_menu',?'themeoptions_admin_menu'); >
themeoptions_admin_menu() adds a link in the sidebar of the control panel, pointing to the options page we created: themeoptions_page.
The parameters of add_theme_page()? are:
Page title: Theme settings
Menu title: Theme options (p.s. In order to distinguish the display, the page and menu titles I I named it differently)
Function: edit_themes;
Handle (handle): current file;
Executed function: themeoptions_page;
Now there is a "Theme Settings" menu in the sidebar of the background control panel, but it is still blank. The customized content we will implement later is created on this blank page.
3. Add options and fields
Now we can add our options and fields to the blank page we just created. You can style this page according to your needs, but for this tutorial we will use the default WordPress classes, which saves us time and looks more native.
The code for page content needs to be included in the ?themeoptions_page() function. First, we add a div container with class="wrap"; then, add a default icon in the header as the page title; and finally, design the form.
< h2>Theme settings
In the form, first we need to add a hidden The value used to check whether the update has been committed. Then add a submit button. Here I also use WordPress’s default button style.
The current effect is:
Now that we have created the basic structure of the settings options page, let's start to improve it based on the previously developed content:
First, we need to allow theme users Color scheme can be changed. For this, we need a dropdown list of available color schemes.
Secondly, to add the content of two advertising slots, we need to add two text boxes to enter the URL of the image and the URL of the advertising link.
Finally, the user can choose whether to display the search box. We do this by adding checkboxes.
The code is as follows: function?themeoptions_page()
{
//?This is the main function to generate the theme options page>
< input?type="text"?name="ad1image"?id="ad1image"?size="32"?value=""/>?Advertising image
< input?type="text"?name="ad2image"?id="ad2image"?size="32"?value=""/>?Advertising image
}
At this point, the content of the options page has been basically completed.
4. Database update
So far, we have created a theme options page. The next step is how to submit data to the WordPress database through POST. To do this, you need to create a new function function themeoptions_update(). This function will be called by themeoptions_page(), so add the following code at the top of the themeoptions_page() function. if?(?$_POST['update_themeoptions']?==?'true'?)?{?themeoptions_update();?}
The next step is to add an update function.
function?themeoptions_update(){//?Data update verification update_option('mytheme_colour',?$_POST['colour']);update_option('mytheme_ad1image',?$_POST['ad1image']) ;update_option('mytheme_ad1url',?$_POST['ad1url']);update_option('mytheme_ad2image',?$_POST['ad2image']);update_option('mytheme_ad2url',?$_POST['ad2url']);if ?($_POST['display_search']=='on')?{?$display?=?'checked';?}?else?{?$display?=?”;?}update_option('mytheme_display_search',? $display);}
5. Call the option to customize the theme
The default style file of our theme is style.css. If other color schemes are used, we need to create the corresponding style file , for example, blue.css, pink.css, and style.css in this example are gray by default.
In order to switch the color scheme style sheet, you need to add the following code to the theme header:
Add ad space images—Add the following code where you want to place ads:
Whether to display the search box—add the following code where the search box needs to be placed. It will be displayed when the user chooses to display the search box, otherwise it will not be displayed: