3.5 media manager add CSS / JS to new ‘tab’ iframe content

1 Views

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!

Read More

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?

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. 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
}