X

Congrats, You are Subscribed to Receive Updates.

How to Create Tabs in WordPress Settings Pages


Creating WordPress Tabs can be in different ways. We can create it with jQuery, and existing WordPress features, Bootstrap tabs. I already wrote an article to create tabs using Bootstrap. You can read it here. If you are interested to watch create tabs using WordPress features. Read the rest of the article to Create Tabs in WordPress Settings Pages.

I hope you read my previous article Create Custom Options in WordPress. With help of these options, we will create tabbed UI and categorize the options. Let’s get the complete code here in this article here. We are Creating Three Tabs (General, Social, Footer) with each one options per tabs.  Let’s create the Options page with help of the below code. we need three options to store each tab options separately.  So Here is the options.

 private $options_general;
 private $options_social;
 private $options_footer;

The Constructor and add_plugin_page remains same. We have not added any customization.
create-tabs-in-wordpress-settings-pages

The Admin render function will be changed like this.

 public function kv_admin_kvcodes() {
         $this->options_general = get_option( 'vaajo_general' );
         $this->options_social = get_option( 'vaajo_social' );
         $this->options_footer = get_option( 'vaajo_footer' ); $social_Screen = ( isset( $_GET['action'] ) && 'social' == $_GET['action'] ) ? true : false;

         $footer_Screen = ( isset( $_GET['action'] ) && 'footer' == $_GET['action'] ) ? true : false; ?>
         <div class="wrap">
         <h1>Kvcodes Settings</h1>
         <h2 class="nav-tab-wrapper">
         <a href="<?php echo admin_url( 'admin.php?page=kvcodes' ); ?>" class="nav-tab<?php if ( ! isset( $_GET['action'] ) || isset( $_GET['action'] ) && 'social' != $_GET['action'] && 'footer' != $_GET['action'] ) echo ' nav-tab-active'; ?>"><?php esc_html_e( 'General' ); ?></a>
         <a href="<?php echo esc_url( add_query_arg( array( 'action' => 'social' ), admin_url( 'admin.php?page=kvcodes' ) ) ); ?>" class="nav-tab<?php if ( $social_Screen ) echo ' nav-tab-active'; ?>"><?php esc_html_e( 'Social' ); ?></a> 
         <a href="<?php echo esc_url( add_query_arg( array( 'action' => 'footer' ), admin_url( 'admin.php?page=kvcodes' ) ) ); ?>" class="nav-tab<?php if ( $footer_Screen ) echo ' nav-tab-active'; ?>"><?php esc_html_e( 'Footer' ); ?></a> 
         </h2>
 
         <form method="post" action="options.php"><?php // settings_fields( 'vaajo_general' );
         if($social_Screen) { 
                 settings_fields( 'vaajo_social' );
                 do_settings_sections( 'vaajo-setting-social' );
                 submit_button();
         } elseif($footer_Screen) {
                 settings_fields( 'vaajo_footer' );
                 do_settings_sections( 'vaajo-setting-footer' );
                 submit_button();
         }else { 
                 settings_fields( 'vaajo_general' );
                 do_settings_sections( 'vaajo-setting-admin' );
                 submit_button(); 
         } ?>
         </form>
         </div> <?php
 }

We just added the feature to create the tabbed UI. Let’s move to functional area to create three options and handle the elements and create it.

  public function kv_options_init() { 
         register_setting(
            'vaajo_general', // Option group
            'vaajo_general', // Option name
            array( $this, 'sanitize' ) // Sanitize
        );

        add_settings_section(
            'setting_section_id', // ID
            'All Settings', // Title
            array( $this, 'print_section_info' ), // Callback
            'vaajo-setting-admin' // Page
        ); 
		 add_settings_field(
            'logo_image', 
            'Logo Image', 
            array( $this, 'logo_image_callback' ), 
            'vaajo-setting-admin', 
            'setting_section_id'
        );  		
		
	register_setting(
            'vaajo_social', // Option group
            'vaajo_social', // Option name
            array( $this, 'sanitize' ) // Sanitize
        );
        add_settings_section(
            'setting_section_id', // ID
            'Social Settings', // Title
            array( $this, 'print_section_info' ), // Callback
            'vaajo-setting-social' // Page
        );  
		
	add_settings_field(
            'fb_url', // ID
            'Facebook URL', // Title 
            array( $this, 'fb_url_callback' ), // Callback
            'vaajo-setting-social', // Page
            'setting_section_id' // Section           
        );
		
		
	register_setting(
            'vaajo_footer', // Option group
            'vaajo_footer', // Option name
            array( $this, 'sanitize' ) // Sanitize
        );
        add_settings_section(
            'setting_section_id', // ID
            'Footer Details', // Title
            array( $this, 'print_section_info' ), // Callback
            'vaajo-setting-footer' // Page
        );         

        add_settings_field(
            'hide_more_themes', 
            'Hide Find more themes at Kvcodes.com', 
            array( $this, 'hide_more_themes_callback' ), 
            'vaajo-setting-footer', 
            'setting_section_id'
        );
}

Now, Let’s Write the Call Back function for these three options. It’s even simple Don’t feel panic for writing the same functions again and again.

screenshot_2016-11-5-11-2-44

Finally, sanitize the variable and save it.

 public function sanitize( $input ) {
         $new_input = array();
         if( isset( $input['fb_url'] ) )
             $new_input['fb_url'] = sanitize_text_field( $input['fb_url'] );
 
         if( isset( $input['hide_more_themes'] ) )
             $new_input['hide_more_themes'] = sanitize_text_field( $input['hide_more_themes'] );
 
         if( isset( $input['logo_image'] ) )
             $new_input['logo_image'] = sanitize_text_field( $input['logo_image'] );

         return $new_input;
 }

Test that code with below downloadable Plugin.


If you really,  Enjoy this article, Please Subscribe and follow me on below Social sites.

commenter

About Varadharaj V

The founder of Kvcodes, Varadharaj V is an ERP Analyst and a Web developer specializing in WordPress(WP), WP Theme development, WP Plugin development, Frontaccounting(FA), Sales, Purchases, Inventory, Ledgers, Payroll & HRM, CRM, FA Core Customization, OpenCart Theme Development, PHP, HTML, CSS, jQuery, Bootstrap development and content SEO.

Comment Below

Your email address will not be published. Required fields are marked *

*

Current ye@r *

Menu

Sidebar

Subscribe E-mail Updates

Congrats, You are Subscribed to Receive Updates.

Advertisement

Category Posts