Tell me more ×
WordPress Answers is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.
up vote 1 down vote favorite

Whilst (patiently) waiting for proper documentation and/or a few tutorials on the new media uploader I'm still using the media_upload_tabsfilter to add a tab to the uploader. Here's my (working) code:

<?php

add_filter( 'media_upload_tabs', 'olab_add_media_tab' );
function olab_add_media_tab( $tabs ) {
    $tabs['bildarkiv'] = __( 'Bildarkiv', 'bildarkiv' );
    return $tabs;
}

add_action( 'media_upload_bildarkiv', 'olab_tab_content' );
function olab_tab_content() {
  ?>
  <h1>WOOT!</h1>
  <?php
}

add_action( 'print_media_templates', 'obab_enqueue_admin_stuff' );
function obab_enqueue_admin_stuff() {
  wp_register_style( 'bak-css', plugins_url( 'css/main.css', __FILE__ ) );
  wp_enqueue_style( 'bak-css' );
  wp_enqueue_script( 'bak-js', plugins_url( 'js/app.js', __FILE__ ), 'jquery' );
}

This all works, but the content of the tab is enclosed in an iFrame which means that my enqueued scripts + styles do precisely nothing!

I don't mind the iFrame I suppose, but I can't find a way to attach CSS / JS to the <head> of the iFrame. Any inline JS is stripped out when the iFrame is rendered.

Anyone know about this?

share|improve this question
The new media uploader using backbone.js, so you need to look into how you can customise scripts written in this language in order to perform the changes you wish to make. – Ollie Jan 4 at 9:16
I know it's written in backbone + underscore! There just isn't any (WordPress specific) documentation. The media-view.js is 4290 lines long! I need a little help there! – Richard Sweeney Jan 4 at 12:07

1 Answer

up vote 2 down vote accepted

You need to en-queue your styles and scripts in your media upload hook and then clal wp_iframe function. Just do it like this and it will work:

<?php

add_filter( 'media_upload_tabs', 'olab_add_media_tab' );
function olab_add_media_tab( $tabs ) {
    $tabs['bildarkiv'] = __( 'Bildarkiv', 'bildarkiv' );
    return $tabs;
}

add_action( 'media_upload_bildarkiv', 'olab_tab_iframe' );
function olab_tab_iframe() {
    wp_register_style( 'bak-css', plugins_url( 'css/main.css', __FILE__ ) );
    wp_enqueue_style( 'bak-css' );

    wp_enqueue_script( 'bak-js', plugins_url( 'js/app.js', __FILE__ ), 'jquery' );

    wp_iframe( 'olab_tab_content' );
}

function olab_tab_content() {
    ?>
    <h1>WOOT!</h1>
    <?php
}
share|improve this answer
Works great, thanks! – Richard Sweeney Jan 4 at 12:39

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.