Add tabbed menu to admin page

Question

I am very new to WordPress and here I want to create one admin page with tabs as shown in image

admin sections with tabs

How can I create such page with these tabs?

Vincent Wong · Accepted Answer · 2015-01-16 00:45:11Z

if you don't like this method. maybe you would like the follow code:
enter image description here you can try to put the follow code in your functions.php file-

     // Theme options
    /*
        get options & set default options
    */

if( !function_exists('share3h_theme_get_options') ) :

    function share3h_theme_get_options($option){
        $share3h_theme_options = get_option('share3h_theme_options');

        if( !$share3h_theme_options || array_key_exists($option, $share3h_theme_options) ) :

            $share3h_theme_default_options = array(

                's3h_title'                 =>      '0',
                's3h_keywords'          =>      '0',
                's3h_description'       =>      '0',
                's3h_headerlogo'        =>      '0',
                's3h_footerlogo'        =>      '0',
                's3h_qrcode'                =>      '0',

                's3h_banner_1'          =>      '0',
                's3h_banner_2'          =>      '0',
                's3h_banner_3'          =>      '0',
                's3h_banner_4'          =>      '0',
                's3h_banner_s1'         =>      '0',
                's3h_banner_s2'         =>      '0',
                's3h_banner_s3'         =>      '0',
                's3h_banner_s4'         =>      '0',

                's3h_copyright'         =>      '0',
                's3h_code_1'                =>      '0',
                's3h_code_2'                =>      '0',

                );

            add_option('share3h_theme_options', $share3h_theme_default_options, '');

            $result = $share3h_theme_options[$option];

        else:

            $result = $share3h_theme_options[$option];

        endif;

        return $result;

    }

endif;

/*
    entering form data
*/

if( !function_exists('share3h_theme_backend') ) :

    function share3h_theme_backend(){
    ?>      
        <div class="wrap">

            <div id="icon-options-general" class="icon32"></div>
            <h2><?php echo __('Theme Setup', LANGUAGE_ZONE); ?></h2>
            <?php
            $active_tab = isset($_GET['tab']) ? $_GET['tab'] : 'general';
            if(isset($_GET['tab'])) $active_tab = $_GET['tab'];
            ?>

            <h2 class="nav-tab-wrapper">

            <a href="?page=theme_option&amp;tab=general" class="nav-tab <?php echo $active_tab == 'general' ? 'nav-tab-active' : ''; ?>"><?php _e('General', LANGUAGE_ZONE); ?></a>

            <a href="?page=theme_option&amp;tab=banner" class="nav-tab <?php echo $active_tab == 'banner' ? 'nav-tab-active' : ''; ?>"><?php _e('Banner', LANGUAGE_ZONE); ?></a>

            <a href="?page=theme_option&amp;tab=other" class="nav-tab <?php echo $active_tab == 'other' ? 'nav-tab-active' : ''; ?>"><?php _e('Other', LANGUAGE_ZONE); ?></a>

            </h2>

            <form method="post">
            <?php if($active_tab == 'general') { ?>

            <div id="poststuff" class="ui-sortable meta-box-sortables">
                <div class="postbox">
                <h3><?php _e('General Settings', LANGUAGE_ZONE); ?></h3>
                    <div class="inside">

                        <table class="form-table">
                            <tbody>

                            <tr>
                                <th scope="row"><label for="s3h_title"><?php echo __('Title', LANGUAGE_ZONE); ?></label></th>
                                    <td>
                                    <input name="s3h_title" id="s3h_title" value="<?php echo share3h_theme_get_options('s3h_title'); ?>" class="large-text" type="text">
                                    <p class="s3h_title"><?php echo __('SEO use.',LANGUAGE_ZONE); ?></p>
                                </td>
                            </tr>

                            <tr>
                                <th scope="row"><label for="s3h_keywords"><?php echo __('Keywords', LANGUAGE_ZONE); ?></label></th>
                                <td>
                                    <textarea name="s3h_keywords" id="s3h_keywords" rows="2" cols="50" class="large-text code"><?php echo share3h_theme_get_options('s3h_keywords'); ?></textarea>
                                    <p class="s3h_keywords"><?php echo __('SEO use.',LANGUAGE_ZONE); ?></p>
                                </td>
                            </tr>

                            <tr>
                                <th scope="row"><label for="s3h_description"><?php echo __('Description', LANGUAGE_ZONE); ?></label></th>
                                <td>
                                    <textarea name="s3h_description" id="s3h_description" rows="3" cols="50" class="large-text code"><?php echo share3h_theme_get_options('s3h_description'); ?></textarea>
                                    <p class="s3h_description"><?php echo __('SEO use.',LANGUAGE_ZONE); ?></p>
                                </td>
                            </tr>

                            <tr>
                                <th scope="row"><label for="s3h_headerlogo"><?php echo __('Header Logo', LANGUAGE_ZONE); ?></label></th>
                                <td>
                                    <input id="s3h_headerlogo" type="text" name="s3h_headerlogo" value="<?php echo share3h_theme_get_options('s3h_headerlogo'); ?>" size="50" />
                                    <input  class="button button-primary onetarek-upload-button" type="button" value="<?php echo __('Upload Image', LANGUAGE_ZONE); ?>" />
                                    <p><img src="<?php echo share3h_theme_get_options('s3h_headerlogo'); ?>" style="max-width:500px"></p>
                                </td>
                            </tr>

                            <tr>
                                <th scope="row"><label for="s3h_footerlogo"><?php echo __('Footer Logo', LANGUAGE_ZONE); ?></label></th>
                                <td>
                                    <input id="s3h_footerlogo" type="text" name="s3h_footerlogo" value="<?php echo share3h_theme_get_options('s3h_footerlogo'); ?>" size="50" />
                                    <input  class="button button-primary onetarek-upload-button" type="button" value="<?php echo __('Upload Image', LANGUAGE_ZONE); ?>" />
                                    <p><img src="<?php echo share3h_theme_get_options('s3h_footerlogo'); ?>" style="max-width:500px"></p>
                                </td>
                            </tr>

                            <tr>
                                <th scope="row"><label for="s3h_qrcode"><?php echo __('QR Code.', LANGUAGE_ZONE); ?></label></th>
                                <td>
                                    <input id="s3h_qrcode" type="text" name="s3h_qrcode" value="<?php echo share3h_theme_get_options('s3h_qrcode'); ?>" size="50" />
                                    <input  class="button button-primary onetarek-upload-button" type="button" value="<?php echo __('Upload Image', LANGUAGE_ZONE); ?>" />
                                    <p><img width="100" src="<?php echo share3h_theme_get_options('s3h_qrcode'); ?>" style="max-height:100px"></p>
                                </td>
                            </tr>

                            </tbody>
                        </table>

                    </div>
                </div>
            </div>

            <?php } if($active_tab == 'banner') { ?>

            <div id="poststuff" class="ui-sortable meta-box-sortables">
                <div class="postbox">
                <h3><?php _e('Banner Settings', LANGUAGE_ZONE); ?></h3>
                    <div class="inside">

                        <table class="form-table">
                            <tbody>

                            <tr>
                                <th scope="row"><label for="s3h_banner_1"><?php echo __('Image 1', LANGUAGE_ZONE); ?></label></th>
                                <td>
                                    <input id="s3h_banner_1" type="text" name="s3h_banner_1" value="<?php echo share3h_theme_get_options('s3h_banner_1'); ?>" size="50" />
                                    <input  class="button button-primary onetarek-upload-button" type="button" value="<?php echo __('Upload Image', LANGUAGE_ZONE); ?>" />
                                    <p><img src="<?php echo share3h_theme_get_options('s3h_banner_1'); ?>" alt="<?php echo __('Image', LANGUAGE_ZONE); ?>"  style="max-width:500px"></p>
                                </td>
                            </tr>

                            <tr>
                                <th scope="row"><label for="s3h_banner_2"><?php echo __('Image 2', LANGUAGE_ZONE); ?></label></th>
                                <td>
                                    <input id="s3h_banner_2" type="text" name="s3h_banner_2" value="<?php echo share3h_theme_get_options('s3h_banner_2'); ?>" size="50" />
                                    <input  class="button button-primary onetarek-upload-button" type="button" value="<?php echo __('Upload Image', LANGUAGE_ZONE); ?>" />
                                    <p><img src="<?php echo share3h_theme_get_options('s3h_banner_2'); ?>" alt="<?php echo __('Image', LANGUAGE_ZONE); ?>"  style="max-width:500px"></p>
                                </td>
                            </tr>

                            <tr>
                                <th scope="row"><label for="s3h_banner_3"><?php echo __('Image 3', LANGUAGE_ZONE); ?></label></th>
                                <td>
                                    <input id="s3h_banner_3" type="text" name="s3h_banner_3" value="<?php echo share3h_theme_get_options('s3h_banner_3'); ?>" size="50" />
                                    <input  class="button button-primary onetarek-upload-button" type="button" value="<?php echo __('Upload Image', LANGUAGE_ZONE); ?>" />
                                    <p><img src="<?php echo share3h_theme_get_options('s3h_banner_3'); ?>" alt="<?php echo __('Image', LANGUAGE_ZONE); ?>"  style="max-width:500px"></p>
                                </td>
                            </tr>

                            <tr>
                                <th scope="row"><label for="s3h_banner_4"><?php echo __('Image 4', LANGUAGE_ZONE); ?></label></th>
                                <td>
                                    <input id="s3h_banner_4" type="text" name="s3h_banner_4" value="<?php echo share3h_theme_get_options('s3h_banner_4'); ?>" size="50" />
                                    <input  class="button button-primary onetarek-upload-button" type="button" value="<?php echo __('Upload Image', LANGUAGE_ZONE); ?>" />
                                    <p><img src="<?php echo share3h_theme_get_options('s3h_banner_4'); ?>" alt="<?php echo __('Image', LANGUAGE_ZONE); ?>" style="max-width:500px"></p>
                                </td>
                            </tr>

                            <tr>
                                <th scope="row"><label for="s3h_banner_s1"><?php echo __('Image S1', LANGUAGE_ZONE); ?></label></th>
                                <td>
                                    <input id="s3h_banner_s1" type="text" name="s3h_banner_s1" value="<?php echo share3h_theme_get_options('s3h_banner_s1'); ?>" size="50" />
                                    <input  class="button button-primary onetarek-upload-button" type="button" value="<?php echo __('Upload Image', LANGUAGE_ZONE); ?>" />
                                    <p><img src="<?php echo share3h_theme_get_options('s3h_banner_s1'); ?>" alt="<?php echo __('Image', LANGUAGE_ZONE); ?>" style="max-width:500px"></p>
                                </td>
                            </tr>

                            <tr>
                                <th scope="row"><label for="s3h_banner_s2"><?php echo __('Image S2', LANGUAGE_ZONE); ?></label></th>
                                <td>
                                    <input id="s3h_banner_s2" type="text" name="s3h_banner_s2" value="<?php echo share3h_theme_get_options('s3h_banner_s2'); ?>" size="50" />
                                    <input  class="button button-primary onetarek-upload-button" type="button" value="<?php echo __('Upload Image', LANGUAGE_ZONE); ?>" />
                                    <p><img src="<?php echo share3h_theme_get_options('s3h_banner_s2'); ?>" alt="<?php echo __('Image', LANGUAGE_ZONE); ?>" style="max-width:500px"></p>
                                </td>
                            </tr>

                            <tr>
                                <th scope="row"><label for="s3h_banner_s3"><?php echo __('Image S3', LANGUAGE_ZONE); ?></label></th>
                                <td>
                                    <input id="s3h_banner_s3" type="text" name="s3h_banner_s3" value="<?php echo share3h_theme_get_options('s3h_banner_s3'); ?>" size="50" />
                                    <input  class="button button-primary onetarek-upload-button" type="button" value="<?php echo __('Upload Image', LANGUAGE_ZONE); ?>" />
                                    <p><img src="<?php echo share3h_theme_get_options('s3h_banner_s3'); ?>" alt="<?php echo __('Image', LANGUAGE_ZONE); ?>" style="max-width:500px"></p>
                                </td>
                            </tr>

                            <tr>
                                <th scope="row"><label for="s3h_banner_s4"><?php echo __('Image S4', LANGUAGE_ZONE); ?></label></th>
                                <td>
                                    <input id="s3h_banner_s4" type="text" name="s3h_banner_s4" value="<?php echo share3h_theme_get_options('s3h_banner_s4'); ?>" size="50" />
                                    <input  class="button button-primary onetarek-upload-button" type="button" value="<?php echo __('Upload Image', LANGUAGE_ZONE); ?>" />
                                    <p><img src="<?php echo share3h_theme_get_options('s3h_banner_s4'); ?>" alt="<?php echo __('Image', LANGUAGE_ZONE); ?>" style="max-width:500px"></p>
                                </td>
                            </tr>

                            </tbody>
                        </table>

                    </div>
                </div>
            </div>

            <?php } if($active_tab == 'other') { ?>

            <div id="poststuff" class="ui-sortable meta-box-sortables">
                <div class="postbox">
                <h3><?php _e('Other Settings', LANGUAGE_ZONE); ?></h3>
                    <div class="inside">
                        <table class="form-table">
                            <tbody>

                            <tr>
                <th scope="row"><label for="s3h_copyright"><?php echo __('Copyright', LANGUAGE_ZONE); ?></label></th>
                    <td>
                    <textarea name="s3h_copyright" id="s3h_copyright" class="large-text" type="text"><?php echo share3h_theme_get_options('s3h_copyright'); ?></textarea>
                </td>
            </tr>
            <tr>
                <th scope="row"><label for="s3h_code_1"><?php echo __('Code 1', LANGUAGE_ZONE); ?></label></th>
                <td>
                    <textarea name="s3h_code_1" id="s3h_code_1" rows="5" cols="50" class="large-text code"><?php echo share3h_theme_get_options('s3h_code_1'); ?></textarea>
                    <p class="s3h_code_1"><?php echo __('This can be used share code or other code, it will be loaded before  end of body tag.',LANGUAGE_ZONE); ?></p>
                </td>
            </tr>

            <tr>
                <th scope="row"><label for="s3h_code_2"><?php echo __('Code 2', LANGUAGE_ZONE); ?></label></th>
                <td>
                    <textarea name="s3h_code_2" id="s3h_code_2" rows="5" cols="50" class="large-text code"><?php echo share3h_theme_get_options('s3h_code_2'); ?></textarea>
                    <p class="s3h_code_2"><?php echo __('This can be used share code or other code, it will be loaded before  end of body tag.',LANGUAGE_ZONE); ?></p>
                </td>
            </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <?php } ?>
            <p class="submit"><input name="submit" id="submit" class="button button-primary" value="Save" type="submit"></p>
            </form>

        </div>
    <?php
    }

endif;

/*
    submit form data
*/

if( !function_exists('share3h_theme_form')) :

    function share3h_theme_form(){

        //array_key_exists('submit', $_POST) ? $submit = $_POST['submit']:$submit = NULL;
        //isset($_POST['submit'])? $submit=$_POST['submit'] : $submit = NULL;

        if($_POST['submit']):
            $share3h_theme_new_options=array();
            $share3h_theme_options=get_option('share3h_theme_options');

            foreach($share3h_theme_options as $key=>$value){

                if($_POST[$key]==''){
                    $share3h_theme_new_options[$key]=$value;
                }else{
                    $share3h_theme_new_options[$key]=$_POST[$key];
                }

            }

            update_option('share3h_theme_options', $share3h_theme_new_options);

        endif;

        echo share3h_theme_backend();
    }

endif;

/*
    set menu
*/

if( !function_exists('share3h_theme_menu') ) :

    function share3h_theme_menu(){
        add_options_page(__('Theme setup', LANGUAGE_ZONE), __('Theme setup', LANGUAGE_ZONE), 'read', 'theme_option', 'share3h_theme_form');
    }

endif;

add_action('admin_menu', 'share3h_theme_menu');

Please add an explanation to your answer: why could that solve the problem? — fuxia, Commented Jan 15, 2015 at 10:30

Vincent Wong · Accepted Answer · 2015-01-15 10:04:18Z

0

You can use OptionTree plugin https://wordpress.org/plugins/option-tree/
It also can been worked in theme mode. enter image description here

answered Jan 15, 2015 at 10:04

Vincent Wong

1711 gold badge2 silver badges7 bronze badges

Add a comment |

Stack Exchange Network

Add tabbed menu to admin page

2 Answers 2

Your Answer

Not the answer you're looking for? Browse other questions tagged
admin
wp-admin
or ask your own question.

Hot Network Questions

Add tabbed menu to admin page

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged adminwp-admin or ask your own question.

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
admin
wp-admin
or ask your own question.