Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Extend WP_Customize_Image_Control class allowing access to files uploaded within the same context.
<?php
/**
* Customize Image Reloaded Class
*
* Extend WP_Customize_Image_Control allowing access to uploads made within
* the same context
*/
class My_Customize_Image_Reloaded_Control extends WP_Customize_Image_Control {
/**
* Constructor.
*
* @since 3.4.0
* @uses WP_Customize_Image_Control::__construct()
*
* @param WP_Customize_Manager $manager
*/
public function __construct( $manager, $id, $args = array() ) {
parent::__construct( $manager, $id, $args );
}
/**
* Search for images within the defined context
*/
public function tab_uploaded() {
$my_context_uploads = get_posts( array(
'post_type' => 'attachment',
'meta_key' => '_wp_attachment_context',
'meta_value' => $this->context,
'orderby' => 'post_date',
'nopaging' => true,
) );
?>
<div class="uploaded-target"></div>
<?php
if ( empty( $my_context_uploads ) )
return;
foreach ( (array) $my_context_uploads as $my_context_upload ) {
$this->print_tab_image( esc_url_raw( $my_context_upload->guid ) );
}
}
}
/**
* Example of inserting a section called "Branding" with a
* context-based image uploader
*/
$wp_customize->add_section( 'my_branding', array(
'title' => __( 'Branding', '' ),
'priority' => 30,
) );
$wp_customize->add_setting( 'my_logo', array(
'capability' => 'edit_theme_options'
) );
$wp_customize->add_control( new My_Customize_Image_Reloaded_Control( $wp_customize, 'my_logo', array(
'label' => __( 'Logo', '' ),
'section' => 'my_branding',
'settings' => 'my_logo',
'context' => 'my-custom-logo'
) ) );
?>
@chris207

This comment has been minimized.

Show comment Hide comment
@chris207

chris207 Mar 9, 2013

Thank you so much for this!!

chris207 commented Mar 9, 2013

Thank you so much for this!!

@native-apps

This comment has been minimized.

Show comment Hide comment
@native-apps

native-apps Apr 4, 2013

How do i implement this into the functions.php? Does this enable the image uploader in the WP Theme Customizer to store previously uploaded pics or the media library? Thank You for this code btw.. :)

How do i implement this into the functions.php? Does this enable the image uploader in the WP Theme Customizer to store previously uploaded pics or the media library? Thank You for this code btw.. :)

@native-apps

This comment has been minimized.

Show comment Hide comment
@native-apps

native-apps Apr 4, 2013

I added your code to my 'customize_register' add_action.. I don't notice any changes with the "WP_Customize_Image_Control" control setting. Do I need to change "$my_context_uploads" to a specific title? I found another source that demonstrates how to extend the WP_Customize_Control and works perfectly.... Can you offer a little bit more information on where & how to use this function?

I added your code to my 'customize_register' add_action.. I don't notice any changes with the "WP_Customize_Image_Control" control setting. Do I need to change "$my_context_uploads" to a specific title? I found another source that demonstrates how to extend the WP_Customize_Control and works perfectly.... Can you offer a little bit more information on where & how to use this function?

@native-apps

This comment has been minimized.

Show comment Hide comment
@native-apps

native-apps Apr 10, 2013

Apologies for excessive replies. Just trying to get the best out of this script. I'm not sure why, but when I create a custom image upload controller, and upload a logo, I only see previously uploaded custom backgrounds in the uploaded field. Just wondering if its possible that the logo will display in there as well. Not sure if I'm doing something wrong.

Also, is it possible to extend another tab for default images built in the theme as an option? Would work excellent for something like textures, but have the option to add new ones as well...

Thank You for this code. It has helped so far. Just not sure if I have it setup 100% properly yet...

Apologies for excessive replies. Just trying to get the best out of this script. I'm not sure why, but when I create a custom image upload controller, and upload a logo, I only see previously uploaded custom backgrounds in the uploaded field. Just wondering if its possible that the logo will display in there as well. Not sure if I'm doing something wrong.

Also, is it possible to extend another tab for default images built in the theme as an option? Would work excellent for something like textures, but have the option to add new ones as well...

Thank You for this code. It has helped so far. Just not sure if I have it setup 100% properly yet...

@eduardozulian

This comment has been minimized.

Show comment Hide comment
@eduardozulian

eduardozulian Apr 11, 2013

@nativeimaging, you're welcome!

When adding the new control, are you using My_Customize_Image_Reloaded_Control or WP_Customize_Image_Control? 'Cause you should be using the first one.

$wp_customize->add_control( new My_Customize_Image_Reloaded_Control( $wp_customize, 'my_logo', array(
        'label'     => __( 'Logo', 'textdomain' ),
        'section'   => 'my_branding',
        'settings'  => 'my_logo',
        'context'   => 'my-custom-logo'
) ) );

Hope it helps!

Owner

eduardozulian commented Apr 11, 2013

@nativeimaging, you're welcome!

When adding the new control, are you using My_Customize_Image_Reloaded_Control or WP_Customize_Image_Control? 'Cause you should be using the first one.

$wp_customize->add_control( new My_Customize_Image_Reloaded_Control( $wp_customize, 'my_logo', array(
        'label'     => __( 'Logo', 'textdomain' ),
        'section'   => 'my_branding',
        'settings'  => 'my_logo',
        'context'   => 'my-custom-logo'
) ) );

Hope it helps!

@native-apps

This comment has been minimized.

Show comment Hide comment
@native-apps

native-apps Apr 29, 2013

Here's the Control I'm using:

//Logo Upload       
    $wp_customize->add_setting(
     'logo_upload', array(
        'default'        => '/wp-content/themes/usfcr/images/govkinex-logo.png',
        'transport'   => 'refresh',
    ) );

    $wp_customize->add_control(
     new My_Customize_Image_Reloaded_Control ( $wp_customize, 'logo_upload', array (
        'label'   => 'Logo Upload',
        'section' => 'logo_settings',
        'settings'    => 'logo_upload',
        'priority' => 5,

   ) ) );  

and here's the Extend I used from your code above. I changed a few names, but seems to still work the same. If I can get the previously images uploaded to display in its own category/history, I will send a donation. Thank You for your help! :)

add_action('customize_register', 'native_customize');
function native_customize($wp_customize) {
/**
    * Customize Image Reloaded Class
    *
    * Extend WP_Customize_Image_Control allowing access to uploads made within
    * the same context
    * 
    */
    class My_Customize_Image_Reloaded_Control extends WP_Customize_Image_Control {
        /**
        * Constructor.
        *
        * @since 3.4.0
        * @uses WP_Customize_Image_Control::__construct()
        *
        * @param WP_Customize_Manager $manager
        */
        public function __construct( $manager, $id, $args = array() ) {

        parent::__construct( $manager, $id, $args );

        }

        /**
        * Search for images within the defined context
        * If there's no context, it'll bring all images from the library
        * 
        */
        public function tab_uploaded() {
        $logo_uploads = get_posts( array(
            'post_type'  => 'attachment',
            'meta_key'   => '_wp_attachment_context',
            'meta_value' => $this->context,
            'orderby'    => 'post_date',
            'nopaging'   => true,
        ) );

        ?>

        <div class="uploaded-target"></div>

        <?php
        if ( empty( $logo_uploads ) )
            return;

        foreach ( (array) $logo_uploads as $logo_upload )
            $this->print_tab_image( esc_url_raw( $logo_upload->guid ) );
        }

    } 

Here's the Control I'm using:

//Logo Upload       
    $wp_customize->add_setting(
     'logo_upload', array(
        'default'        => '/wp-content/themes/usfcr/images/govkinex-logo.png',
        'transport'   => 'refresh',
    ) );

    $wp_customize->add_control(
     new My_Customize_Image_Reloaded_Control ( $wp_customize, 'logo_upload', array (
        'label'   => 'Logo Upload',
        'section' => 'logo_settings',
        'settings'    => 'logo_upload',
        'priority' => 5,

   ) ) );  

and here's the Extend I used from your code above. I changed a few names, but seems to still work the same. If I can get the previously images uploaded to display in its own category/history, I will send a donation. Thank You for your help! :)

add_action('customize_register', 'native_customize');
function native_customize($wp_customize) {
/**
    * Customize Image Reloaded Class
    *
    * Extend WP_Customize_Image_Control allowing access to uploads made within
    * the same context
    * 
    */
    class My_Customize_Image_Reloaded_Control extends WP_Customize_Image_Control {
        /**
        * Constructor.
        *
        * @since 3.4.0
        * @uses WP_Customize_Image_Control::__construct()
        *
        * @param WP_Customize_Manager $manager
        */
        public function __construct( $manager, $id, $args = array() ) {

        parent::__construct( $manager, $id, $args );

        }

        /**
        * Search for images within the defined context
        * If there's no context, it'll bring all images from the library
        * 
        */
        public function tab_uploaded() {
        $logo_uploads = get_posts( array(
            'post_type'  => 'attachment',
            'meta_key'   => '_wp_attachment_context',
            'meta_value' => $this->context,
            'orderby'    => 'post_date',
            'nopaging'   => true,
        ) );

        ?>

        <div class="uploaded-target"></div>

        <?php
        if ( empty( $logo_uploads ) )
            return;

        foreach ( (array) $logo_uploads as $logo_upload )
            $this->print_tab_image( esc_url_raw( $logo_upload->guid ) );
        }

    } 
@native-apps

This comment has been minimized.

Show comment Hide comment
@native-apps

native-apps Apr 29, 2013

Sorry, that code didn't paste properly. It's strange, I can upload a new logo image, and immediately see the image show in the Uploaded Tab. But when the Theme Customizer is reloaded, it only displays the Background or Featured Images previously uploaded, and not the logo.

Sorry, that code didn't paste properly. It's strange, I can upload a new logo image, and immediately see the image show in the Uploaded Tab. But when the Theme Customizer is reloaded, it only displays the Background or Featured Images previously uploaded, and not the logo.

@native-apps

This comment has been minimized.

Show comment Hide comment
@native-apps

native-apps Apr 29, 2013

AHA, WORKS!!! I needed to add " 'context' => 'my-custom-logo' " to the controller. Thank you for you help. I would've never figured that one out.:)

AHA, WORKS!!! I needed to add " 'context' => 'my-custom-logo' " to the controller. Thank you for you help. I would've never figured that one out.:)

@eduardozulian

This comment has been minimized.

Show comment Hide comment
@eduardozulian

eduardozulian May 2, 2013

Hahaha, exactly. Context is the key!

You're welcome, dude. Glad I could help. : )

Owner

eduardozulian commented May 2, 2013

Hahaha, exactly. Context is the key!

You're welcome, dude. Glad I could help. : )

@zanematthew

This comment has been minimized.

Show comment Hide comment
@zanematthew

zanematthew Dec 15, 2013

Nice, snippet! One would of thought this functionality would of been built into WP_Customize_Image_Control, then again, extending the class WP_Customize_Image_Control isn't that much code anyway.

Nice, snippet! One would of thought this functionality would of been built into WP_Customize_Image_Control, then again, extending the class WP_Customize_Image_Control isn't that much code anyway.

@zanematthew

This comment has been minimized.

Show comment Hide comment
@zanematthew

zanematthew Dec 15, 2013

Just curious, @eduardozulian the comments found here do not seem correct. Since if the $my_context_uploads is empty the method just returns.

Just curious, @eduardozulian the comments found here do not seem correct. Since if the $my_context_uploads is empty the method just returns.

@eduardozulian

This comment has been minimized.

Show comment Hide comment
@eduardozulian

eduardozulian Dec 27, 2013

@zanematthew, you're right. I did some test months ago and I kept getting all my attachments, but I don't think that's the expected pattern. Thanks!

Just updated the code with some examples too.

Owner

eduardozulian commented Dec 27, 2013

@zanematthew, you're right. I did some test months ago and I kept getting all my attachments, but I don't think that's the expected pattern. Thanks!

Just updated the code with some examples too.

@native-apps

This comment has been minimized.

Show comment Hide comment
@native-apps

native-apps Apr 19, 2014

Okay, back into extending the WordPress theme customizer extensions. I'm still using this snippet for uploading textures, backgrounds, and logos. I'm not sure if something changed, but I can' seem to remove the images after they are uploaded. However, I noticed the WordPress added some features to the Live Theme Customizer particularly for Header Images. I see new buttons for "Hide Image" "Randomize Suggested Images", and they also cued in the newer Media Uploader for the header images in the theme customizer.

My memory may be failing me, but I thought we could remove the images that were uploaded to our custom contexts? Or, maybe I have a little bad code where it's not showing up anymore? Just can't seem to remove the images that I've uploaded.

Okay, back into extending the WordPress theme customizer extensions. I'm still using this snippet for uploading textures, backgrounds, and logos. I'm not sure if something changed, but I can' seem to remove the images after they are uploaded. However, I noticed the WordPress added some features to the Live Theme Customizer particularly for Header Images. I see new buttons for "Hide Image" "Randomize Suggested Images", and they also cued in the newer Media Uploader for the header images in the theme customizer.

My memory may be failing me, but I thought we could remove the images that were uploaded to our custom contexts? Or, maybe I have a little bad code where it's not showing up anymore? Just can't seem to remove the images that I've uploaded.

@native-apps

This comment has been minimized.

Show comment Hide comment
@native-apps

native-apps Apr 19, 2014

Oops, discard that last comment. It reappeared. :) Love this snippet!!!

Oops, discard that last comment. It reappeared. :) Love this snippet!!!

@zanematthew

This comment has been minimized.

Show comment Hide comment
@zanematthew

zanematthew Apr 26, 2014

@nativeimaging @eduardozulian seems since 3.9 was released a few things changed, mainly a bug arose, the "remove" option is now gone. Looking into a fix.

@nativeimaging @eduardozulian seems since 3.9 was released a few things changed, mainly a bug arose, the "remove" option is now gone. Looking into a fix.

@wesweat

This comment has been minimized.

Show comment Hide comment
@wesweat

wesweat Aug 28, 2014

hello,

i trying out your class and it act strange.

Right after i

require 'My_Customize_Image_Control.php';

and i save the new image options i get an error

Fatal error: Class 'WP_Customize_Image_Control' not found

And the Website is not loaded.

So after outcommenting
//require 'My_Customize_Image_Control.php';

the website loads correctly again.

What do i need to do to fix this?

Regards

wesweat commented Aug 28, 2014

hello,

i trying out your class and it act strange.

Right after i

require 'My_Customize_Image_Control.php';

and i save the new image options i get an error

Fatal error: Class 'WP_Customize_Image_Control' not found

And the Website is not loaded.

So after outcommenting
//require 'My_Customize_Image_Control.php';

the website loads correctly again.

What do i need to do to fix this?

Regards

@brianfeister

This comment has been minimized.

Show comment Hide comment
@brianfeister

brianfeister Oct 20, 2014

AHHHH!!! THIS IS AMAZING!

AHHHH!!! THIS IS AMAZING!

@fafshari

This comment has been minimized.

Show comment Hide comment
@fafshari

fafshari Nov 14, 2014

@wesweat You need to go into your functions.php and add it from there. Look at https://gist.github.com/eduardozulian/4739075/#comment-823136

Anyway, I'm writing to ask how to actually use this? I'm not sure what to put inside the context. Anything I put in doesn't seem to work. The Uploaded tab is still hidden.

@wesweat You need to go into your functions.php and add it from there. Look at https://gist.github.com/eduardozulian/4739075/#comment-823136

Anyway, I'm writing to ask how to actually use this? I'm not sure what to put inside the context. Anything I put in doesn't seem to work. The Uploaded tab is still hidden.

@luckyali55

This comment has been minimized.

Show comment Hide comment
@luckyali55

luckyali55 Jun 24, 2015

cool and time saved

cool and time saved

@robynlarsen

This comment has been minimized.

Show comment Hide comment
@robynlarsen

robynlarsen Mar 9, 2016

@eduardozulian thanks for this! Wicked to extend this capability. Any resources that might point out how to implement or grab the new CustomLogo in the header.php?

@eduardozulian thanks for this! Wicked to extend this capability. Any resources that might point out how to implement or grab the new CustomLogo in the header.php?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment