Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question

2 Answers 2

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

share|improve this answer

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');
share|improve this answer
    
Please add an explanation to your answer: why could that solve the problem? –  toscho Jan 15 at 10:30

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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