Extend WP_Customize_Image_Control WordPress
- SOLVED
I would like to add a Media Library tab to the WP_Customize_Image_Control.
The tutorial at [[LINK href="http://http://shibashake.com/wordpress-theme/how-to-add-the-media-manager-menu-to-the-theme-preview-interface"]]http://shibashake.com/wordpress-theme/how-to-add-the-media-manager-menu-to-the-theme-preview-interface[[/LINK]] addresses what I am attempting to achieve, but I am unable to get the code snippets to work with my existing code (see below).
Please could someone help me extend my existing code to add a Media Library tab to WordPress's default WP_Customize_Image_Control as per shibashake's tutorial. I guess this means creating and loading a new .js file in addition to extending my existing function.
I also note the solution may also require the addition of the wp_print_media_templates() function as per Neroth's comment.
My code so far ...
function mytheme_theme_customizer( $wp_customize ) {
/* Remove Default Controls */
$wp_customize->remove_section('static_front_page');
$wp_customize->remove_section('nav');
$wp_customize->remove_section('colors');
/* Add New Custom Image Control */
$wp_customize->add_section(
'mytheme_custom_image',
array(
'title'=>__('Custom Image','mytheme'),
'priority'=> 22,
)
);
$wp_customize->add_setting(
'mytheme_customizer_options[custom_image]',
array(
'capability' => 'edit_theme_options',
'type' => 'option',
'default' => '',
)
);
$wp_customize->add_control(
new WP_Customize_Image_Control(
$wp_customize,
'custom_image_control',
array(
'label' => __( 'Upload an Image', 'mytheme' ),
'section' => 'mytheme_custom_image',
'settings' => 'mytheme_customizer_options[custom_image]'
)
)
);
}
add_action( 'customize_register', 'mytheme_theme_customizer' );
Many thanks
Answers (3)
Dbranes answers:
I did take a look at the cool shibashake.com tutorial but I think there are few typos in it:
For example this line:
wp_enqueue_script('shiba-media-manager', get_template_directory().'/js/shiba-media-manager.js', array( ), '1.0', true);
should not contain <em>get_template_directory()</em>, one should instead use <em>get_template_directory_uri()</em> or <em>get_stylesheet_directory_uri()</em>.
Then this line:
var attachment = wp.media.shibaMediaManager.frame.state().get('selection').first(),
should end with a semicolon (;) not a comma (,).
Then there might be some "var" missing in <em>shiba-media-manager.js</em>.
I also got a problem with this line:
controller = wp.customize.control.instance(controllerName);
but I'm not sure how this could work.
So instead I modified it with a mix of the following sources:
<strong>a)</strong> http://shibashake.com/wordpress-theme/how-to-add-the-media-manager-menu-to-the-theme-preview-interface
<strong>b)</strong> https://gist.github.com/eduardozulian/4739075
You can check it out here :
PHP code for your <em>functions.php</em> file or as a plugin:
[[LINK href="http://pastebin.com/hGdYGT2N"]]http://pastebin.com/hGdYGT2N[[/LINK]]
Javascript code:
[[LINK href="http://pastebin.com/aTyNnfk7"]]http://pastebin.com/aTyNnfk7[[/LINK]]
to be placed in the file:
/wp-content/themes/YOUR_THEME/js/wpq.js
Here's a screenshot:
[[LINK href="http://i.imgur.com/TMASauQ.gif"]]http://i.imgur.com/TMASauQ.gif[[/LINK]]
I guess you can take it from here and modify it to your needs.
designbuildtest comments:
Many thanks Dbranes, your solution is fantastic.
On line 77 of [[LINK href="http://pastebin.com/hGdYGT2N"]][[/LINK]] I changed 'wpq_customize_styles' to 'wpq_add_scripts' and on line 25 of [[LINK href="http://pastebin.com/aTyNnfk7"]][[/LINK]] I removed the comma.
The only thing I couldn't get working was the ability to alternate/toggle between images in the Media Library model window. Images can be changed/swapped, but you first need to close then re-open the Theme Customiser. jQuery issue perhaps?
You have my vote for the full success fee amount ... I'd vote the full amount to you now, but that closes this question to further comments I believe?
Very much appreciated.
Cheers
designbuildtest comments:
Above should read....
On line 77 of [[LINK href="http://pastebin.com/hGdYGT2N"]]http://pastebin.com/hGdYGT2N[[/LINK]] I changed 'wpq_customize_styles' to 'wpq_add_scripts' and on line 25 of [[LINK href="http://pastebin.com/aTyNnfk7"]]http://pastebin.com/aTyNnfk7[[/LINK]] I removed the comma.
Dbranes comments:
Hey designbuildtest, great to hear it works for you.
Thanks for the corrections, I updated the files.
This show how easy it is to make mistakes when writing down some code from a working a solution ;-)
cheers
Dbranes comments:
<blockquote>The only thing I couldn't get working was the ability to alternate/toggle between images in the Media Library model window. Images can be changed/swapped, but you first need to close then re-open the Theme Customiser. jQuery issue perhaps?</blockquote>
yes, most likely, I will check it out.
Dbranes comments:
hopefully the version 0.3 of wpq.js will work
Dbranes comments:
i.e. [[LINK href="http://pastebin.com/aTyNnfk7"]]http://pastebin.com/aTyNnfk7[[/LINK]]
Dbranes comments:
ok, now the updated versions should work as expected (i.e. no need to refresh, at least on my install)
PHP: Version 0.4
[[LINK href="http://pastebin.com/aTyNnfk7"]]http://pastebin.com/aTyNnfk7[[/LINK]]
JS: Version 0.4
[[LINK href="http://pastebin.com/edit.php?i=hGdYGT2N"]]http://pastebin.com/edit.php?i=hGdYGT2N[[/LINK]]
Dbranes comments:
ps: This is the new JS part:
// When an image is selected, run a callback.
this.frame.on( 'select', function() {
// Grab the selected attachment.
var attachment = wp.media.shibaMediaManager.frame.state().get('selection').first();
// Add the selected attachment url to the image selector
var myurl = attachment.attributes.url;
var mypid = attachment.attributes.id;
var myid = controllerName + '_selected_image_' + mypid;
var mytarget = '#customize-control-' + controllerName + ' .medialibrary-target';
$('<a id="' + myid + '" href="#" class="thumbnail"></a>').hide().data("customizeImageValue", myurl ).append('<img src="' + myurl + '" />').appendTo( $( mytarget ) );
$( '#' + myid ).trigger( 'click' );
});
designbuildtest comments:
Fantastic. Many thanks for your great solution Dbranes.
Kyle answers:
Can you describe what issues you are running into with the tutorial? E.g. trouble with the scripts, or white screen of death, or anything haha
Kyle comments:
Just trying to get a hold of where you are and what is done, and needs to be done
designbuildtest comments:
Unfortunately I've had a bunch of problems and need someone to re-visit this from scratch with my existing function as the starting point. Cheers.
