Wordpress adds a custom topic setting page to a blog topic

What if I want to add a custom topic page to a topic?

Let's take a look at how Ryan's provides: how to add a settings page to a wordpress topic.

After reading this article, I believe we can add a theme settings page for the topic. Well, it seems that there are still some problems:

How do I add multiple settings pages to the top-level menu?
How can I add css and js to the settings page?
Do I have to write so much code in the functions file?
What are the complex business options for users to select document categories, custom pages, and image uploads?

OK. Let's solve the above problems:
First, let's look at the final effect:

First, let's look at the final effect:

 

 

 

 

 

Note: The following code is long. If you have intensive phobias, you may be cautious about it. If you are dizzy, you may download the code package and consider it as appropriate!
Download the source code package: options.zip
1. Add top-level menus and sub-menus

Add the following code to functions. php:

<? Php
    
// Add the setting menu. Note the writing method of add_menu_page and add_submenu_page.
// Reference: http://lizhenzhen8911.blog.163.com/blog/static/96400189201292442712309/
Add_action ('admin _ menu ', 'options _ admin_menu ');
Function options_admin_menu (){
Add_menu_page ('topic settings', 'topic settings', 'admin', 'base-settings', 'basesetable', '', 100 );
Add_submenu_page ('base-settings', 'Basic settings', 'Basic settings', 'admin', 'base-settings', 'basesets ');
Add_submenu_page ('base-settings', 'advanced settings', 'advanced settings', 'admin', 'advanced-settings', 'cedcedsetting ');
    }
    
// Load the setting file
Add_action ('admin _ head', 'optionfile ');
Function OptionFile (){
Require_once (get_template_directory (). '/inc/option. Php'); // code decoupling
    }
    
?>

Create an inc folder under the root directory of the topic, and add option. php to the folder. Add the following code:

<? Php/** topic settings update page **/
    
// Success prompt
Define ('successinfo', '<div class = "updated"> <p> <strong> settings are saved. </Strong> </p> </div> ');
    
// Basic settings
Function BaseSettings (){
If ($ _ POST ['update _ options'] = 'true '){
// Data Update Verification
Update_option ('text-demo', $ _ POST ['text-Demo']); // input
Update_option ('textarea-demo', $ _ POST ['textarea-Demo']); // textarea
Update_option ('Select-demo', $ _ POST ['Select-Demo']); // select
If ($ _ POST ['checkbox-Demo'] = 'on') {$ display = 'checked';} else {$ display = '';}
Update_option ('checkbox-demo', $ display); // checkbox
Echo SuccessInfo;
    }
Require_once (get_template_directory (). '/inc/base. Php'); // code decoupling
Add_action ('admin _ menu ', 'basesetable ');
    }
    
// Advanced settings
Function AdvancedSettings (){
If ($ _ POST ['update _ options'] = 'true '){
Update_option ('Categories-demo', $ _ POST ['categories-Demo']); // categories
Update_option ('pages-demo', $ _ POST ['pages-Demo']); // pages
Update_option ('upload-demo', $ _ POST ['upload-Demo']); // upload
Echo SuccessInfo;
    }
Require_once (get_template_directory (). '/inc/advanced. Php'); // code decoupling
Add_action ('admin _ menu ', 'cedcedsettings ');
    }
    
?>

Create base. php in the inc folder and add the following code:

<Div class = "wrap">
<H2> Basic settings <Form method = "POST" action = "">
<Input type = "hidden" name = "update_options" value = "true"/>
    
<Table class = "form-table">
<Tbody>
<Tr valign = "top">
<Th scope = "row"> <label for = "text-demo"> text example </label> </th>
<Td>
<Input type = "input" name = "text-demo" id = "text-demo" class = "regular-text" value = "<? Php echo get_option ('text-Demo');?> "/>
<P class = "description"> description </p>
</Td>
</Tr>
<Tr valign = "top">
<Th scope = "row"> <label for = "textarea-demo"> textarea example </label> </th>
<Td> <textarea name = "textarea-demo" id = "textarea-demo" class = "large-text"> <? Php echo get_option ('textarea-Demo');?> </Textarea> </td>
</Tr>
<Tr valign = "top">
<Th scope = "row"> <label> Select example </label> </th>
<Td> <select name = "select-demo">
<? Php $ color = get_option ('Select-Demo');?>
<Option value = "gray" <? Php if ($ color = 'gray ') {echo 'selected' ;}?>> Gray </option>
<Option value = "blue" <? Php if ($ color = 'Blue ') {echo 'selected' ;}?>> Light blue </option>
</Select> </td>
</Tr>
<Tr valign = "top">
<Th scope = "row"> <label for = "checkbox-demo"> checkbox example </label> </th>
<Td> <input type = "checkbox" name = "checkbox-demo" id = "checkbox-demo" <? Php echo get_option ('checkbox-Demo');?> /> Anyone can register </td>
</Tr>
</Tbody>
</Table>
<P> <input type = "submit" class = "button-primary" name = "admin_options" value = "update data"/> </p>
</Form>
</Div>

Create advanced. php under inc and add the following code:

<Div class = "wrap">
<H2> Advanced Settings <Form method = "POST" action = "">
<Input type = "hidden" name = "update_options" value = "true"/>
    
<Table class = "form-table">
<Tbody>
<Tr valign = "top">
<Th scope = "row"> select document category </th>
<Td>
<? Php wp_dropdown_categories (array ('name' => 'categories-demo', 'hide _ empty' => 0, 'orderby' => 'name ', 'show _ count' => 1, 'selected' => get_option ('Categories-Demo'), 'hierarchical '=> true, 'show _ option_none '=> 'All category', 'echo' => 1);?>
</Td>
</Tr>
<Tr valign = "top">
<Th scope = "row"> select page </th>
<Td> <? Php wp_dropdown_pages (array ('name' => 'Pages-Demo');?> </Td>
</Tr>
<Tr valign = "top">
<Th scope = "row"> Image Selection & image Upload </th>
<Td> <input type = "text" name = "upload-demo" value = "<? Php echo get_option ('upload-Demo');?> "/> <A id =" upload-demo "class =" cp_upload_button button "href =" # "> upload </a> </td>
</Tr>
</Tbody>
</Table>
<P> <input type = "submit" class = "button-primary" name = "admin_options" value = "update data"/> </p>
</Form>
</Div>
<? Php wp_enqueue_media ();?> <! -- Must -->
<Script>
// Call the media repository to upload images
JQuery (document). ready (function (){
Var upload_frame;
Var value_id;
JQuery ('. cp_upload_button'). live ('click', function (event ){
Value_id = jQuery (this). attr ('id ');
Event. preventDefault ();
If (upload_frame ){
Upload_frame.open ();
Return;
    }
Upload_frame = wp. media ({
Title: 'Select image ',
Button :{
Text: 'insert ',
},
Multiple: false
});
Upload_frame.on ('select', function (){
Attachment = upload_frame.state (). get ('selection '). first (). toJSON ();
JQuery ('input [name = '+ value_id +'] '). val (attachment. url );
// JQuery ('IMG '). attr ("src", attachment. url); // preview the image
});
    
Upload_frame.open ();
});
});
</Script>

Note that in the wordpress background, the control of jQuery is not handed over to $, so you cannot directly use $ Instead. For details, refer to how to use JQuery in the wordpress plug-in background interface.

2. Add custom css and js

To add custom css and js, you can use the add_action ("admin_print_styles") function in the main function File (functions. php). The example is as follows:

// Background custom option style
Add_action ("admin_print_styles", "OptionsStyle ");
Function OptionsStyle (){
Wp_enqueue_style ("admin_css", get_template_directory_uri (). "/inc/options.css ");
    }

Over! The above code only describes a general process, and the code is decoupled to facilitate secondary development and maintenance. If an error is found or a better implementation method is available, please do not hesitate to inform us.