Implementing WordPress Media Library Uploader into Theme Settings page? (3 posts)

  1. alexrogahn
    Posted 3 years ago #

    Okay, I really need some help with this. I'm on the verge on banging my head on a wall!

    I'm trying to learn to create my own theme settings page, and as a part of that, implement a file upload that makes use of WordPress' built in media library.

    I'm not well versed in PHP at all. I grasp some of it – the basics, but otherwise I'm shooting in the dark with it most of the time.

    The issue is I have the form set up to receive the upload and make the media uploader pop up, but if I click the upload button nothing happens. At all.

    The code I have is as follows – it's an attempt to amalgamate both this: http://www.sitepoint.com/wordpress-options-panel/ and this: http://www.webmaster-source.com/2010/01/08/using-the-wordpress-uploader-in-your-plugin-or-theme/

    I know it's probably going to be something really stupidly obvious, but I really can't get my head around all this stuff. I'll get it eventually!

    // Actions
    add_action('admin_menu', 'create_theme_options');
    function create_theme_options() {
    add_menu_page('ARv5 Options', 'ARv5 Options', 'administrator', __FILE__, 'build_theme_options');
    function build_theme_options() {
        <div class="wrap">
                <h2>ARv5 Theme Options</h2>
            <form method="post" action="options.php">
                <?php settings_fields('ARv5_group'); ?>
                <?php do_settings_sections(__FILE__); ?>
                <p class="submit">
                   <input name="Submit" type="submit" value="<?php esc_attr_e('Save Changes'); ?>" />
    function my_admin_scripts() {
    wp_register_script('my-upload', TEMPLATEPATH.'/_/lib/script.js', array('jquery','media-upload','thickbox'));
    function my_admin_styles() {
    if (isset($_GET['page']) && $_GET['page'] == __FILE__) {
        add_action('admin_print_scripts', 'my_admin_scripts');
        add_action('admin_print_styles', 'my_admin_styles');
    add_action('admin_init', 'register_and_build_fields');
    function register_and_build_fields() {
    register_setting('ARv5_group', 'ARv5', 'validate_setting');
    add_settings_section('main', '', 'section_cb', __FILE__);
    add_settings_field('test', '', 'test_setting', __FILE__, 'main');
    add_settings_field('logo', '', 'logo_upload_setting', __FILE__, 'main');
     function test_setting() {
    $options = get_option('ARv5');
    echo "<tr valign='top'>
    <th scope='row'>Testing, One-Two</th>
     <input name='ARv5[test]' type='text' value='{$options['test']}' />
     <br />Just testing the waters.
    function logo_upload_setting() {
        $options = get_option('ARv5');
    echo "<tr valign='top'>
    <th scope='row'>Upload Image</th>
    <td><label for='upload_image'>
    <input id='upload_image' type='text' size='36' name='upload_image' value='{$options['logo_upload_setting']}' />
     <input id='upload_image_button' type='button' value='Upload Image' />
     <br />Enter an URL or upload an image for the banner.
     function section_cb() {
    // blah
    function validate_setting($ARv5) {
    return $ARv5;

    The attached JS file is identical to the one found in the latter tutorial. I tried using many variations on that script but it never made a difference.

    I'm aware I could use the custom header function to achieve an easier way around a 'logo' upload, but this is just to teach myself the technique anyway :)

    Thanks in advance to anyone who can point me in the right direction.

    – Alex

  2. alexrogahn
    Posted 3 years ago #


  3. alexrogahn
    Posted 3 years ago #

    Nevermind, after doing further digging around I've found this http://wordpress.org/support/topic/howto-integrate-the-media-library-into-a-plugin?replies=4

    It seems the problem was that my PHP couldn't find the JS file. So instead of having it externally, I changed it to being internal, within the echoed HTML and it appears to have made it work. A few other tweaks and it's perfect for use within a theme options page.

Topic Closed

This topic has been closed to new replies.

About this Topic