Add a banner to the Dashboard

Workaround using jQuery DOM insertion.
Note the use of PHP Heredoc sintax to print the script.

function wpse_53035_script_enqueuer(){
    echo <<<HTML
    <script type="text/javascript">
    jQuery(document).ready( function($) {
        $('<div style="width:100%;text-align:center;"><img src="http://cdn.sstatic.net/wordpress/img/logo.png?v=123"></div>').insertBefore('#welcome-panel');
    });     
    </script>
HTML;
}
add_action('admin_head-index.php', 'wpse_53035_script_enqueuer');

This inserts the new div at the top before #welcome-panel. If you use the div #dashboard-widgets-wrap it prints in the same position (after <h2>Dashboard</h2> and before the widgets).
The welcome panel is normally hidden, but I’m not sure of its general behavior. I guess this depends on your tests.


[edit]
As a matter of fact, just inspect the page and insert wherever you want.


[edit 2]
Playing with the code…
The following version does a fade-in of the widgets wrap. It also adds the width and height in the image tag, so other elements don’t “jump” when the image finally loads.

function wpse_53035_script_enqueuer(){
    echo <<<HTML
    <style type="text/css">#dashboard-widgets-wrap {display:none;}</style>
    <script type="text/javascript">
    jQuery(document).ready( function($) {
        $('#dashboard-widgets-wrap').delay(1200).fadeTo('slow',1);
        $('<div style="width:100%;text-align:center;margin:8px 0"><img src="http://cdn.sstatic.net/wordpress/img/logo.png?v=123" width="483" height="43"></div>').insertBefore('#dashboard-widgets-wrap');
    });     
    </script>
HTML;
}
add_action('admin_head-index.php', 'wpse_53035_script_enqueuer');

Leave a Comment