4

My code is here.The other options working perfectly so how i can register the image and save the link in database and image in wp library.

function register_team_show_case_setting() {
    //register our settings
        register_setting('my_team_show_case_setting', 'layout');
        register_setting('my_team_show_case_setting', 'color');

        register_setting('my_team_show_case_setting', 'image');
}
function submenu_callback() {
    ?>
    <div class="wrap">
        <h2>Team Showcase Setting</h2>
        <form method="post" action="options.php">
            <?php settings_fields('my_team_show_case_setting'); ?>
    <?php do_settings_sections('my_team_show_case_setting'); ?>
            <table class="form-table">
                <tr valign="top">
                    <th scope="row">Layout</th>
                    <td> 
                        <select class="select-box" name="layout" value="<?php echo esc_attr(get_option('layout')); ?> class="form-control">
                            <option></option>
                            <option value="Grid"  <?php if (get_option('layout') == "Grid") echo 'selected="selected"'; ?>>Grid</option>
                            <option value="Grid-without-tab"  <?php if (get_option('layout') == "Grid-without-tab") echo 'selected="selected"'; ?>>Grid-without-tab</option>
                            <option value="Row" <?php if (get_option('layout') == "Row") echo 'selected="selected"'; ?>>Row</option>
                        </select>
                    </td>
                </tr>
                <tr valign="top">
                    <th scope="row">Color Schema</th>
                    <td> 
                        <select class="select-box" name="color" value="<?php echo esc_attr(get_option('color')); ?> class="form-control">
                            <option value="orange" <?php if (get_option('color') == "orange") echo 'selected="selected"'; ?> >orange</option>
                            <option value="green" <?php if (get_option('color') == "green") echo 'selected="selected"'; ?>>green</option>
                            <option value="blue" <?php if (get_option('color') == "blue") echo 'selected="selected"'; ?>>blue</option>
                        </select>
                    </td>
                </tr>

                <tr valign="top">
                    <th scope="row">Background Image</th>       
                     <td> 
                     <input type="file" name="image" />

                    </td> 
                </tr> 

            </table>
    <?php submit_button(); ?>
        </form>
    </div>
    <?php
}
  • Hi, first thing I notice is that you registered 'image' but used a name for the field of 'logo' – Andy Macaulay-Brook May 28 '16 at 9:29
  • @AndyMacaulay-Brook i am not asking about spelling. i need functionality – rajwa766 May 28 '16 at 9:41
  • Well if they don't match how can WP know what to do with the input? – Andy Macaulay-Brook May 28 '16 at 9:43
  • @AndyMacaulay-Brook i have lot of code there thats why i have removed all of it and left this one. So its honest mistake while asking question.very disappoint to mins the secore – rajwa766 May 28 '16 at 9:48
  • The minus wasn't me – Andy Macaulay-Brook May 28 '16 at 10:01
8

The better title for this would be: How to use the WordPress media uploader to upload images into settings page.

1- Add the necessary scripts to show the media uploader:

add_action('admin_footer', function() { 

    /*
    if possible try not to queue this all over the admin by adding your settings GET page val into next
    if( empty( $_GET['page'] ) || "my-settings-page" !== $_GET['page'] ) { return; }
    */

    ?>

    <script>
        jQuery(document).ready(function($){

            var custom_uploader
              , click_elem = jQuery('.wpse-228085-upload')
              , target = jQuery('.wrap input[name="logo"]')

            click_elem.click(function(e) {
                e.preventDefault();
                //If the uploader object has already been created, reopen the dialog
                if (custom_uploader) {
                    custom_uploader.open();
                    return;
                }
                //Extend the wp.media object
                custom_uploader = wp.media.frames.file_frame = wp.media({
                    title: 'Choose Image',
                    button: {
                        text: 'Choose Image'
                    },
                    multiple: false
                });
                //When a file is selected, grab the URL and set it as the text field's value
                custom_uploader.on('select', function() {
                    attachment = custom_uploader.state().get('selection').first().toJSON();
                    target.val(attachment.url);
                });
                //Open the uploader dialog
                custom_uploader.open();
            });      
        });
    </script>

    <?php
    });

2- Embed the media uploader necessary scripts:

add_action('admin_enqueue_scripts', function(){
    /*
    if possible try not to queue this all over the admin by adding your settings GET page val into next
    if( empty( $_GET['page'] ) || "my-settings-page" !== $_GET['page'] ) { return; }
    */
    wp_enqueue_media();
});

3- Now add a clickable button next to your image field to call the media uploader:

<input type="file" name="logo" />
<button class="button wpse-228085-upload">Upload</button>

Once the uploader is working, you can now process the image field (input[name="logo"]) like any other settings field and save its value to your options.

Hope that helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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