Whenever we find ourselves in the situation “there must be a way to overcome this hard-code“, jQuery comes to rescue…
The Result
The Code
The following code must be pasted at the end of the active Theme functions.php file.
Or it can be used in a custom plugin, which will make the code “theme-independent”.
add_action('admin_head-index.php', 'wpse_57350_script_enqueuer');
function wpse_57350_script_enqueuer()
{
// Check if Welcome Panel is being displayed
$option = get_user_meta( get_current_user_id(), 'show_welcome_panel', true );
if( !$option )
return;
?>
<style type="text/css">
/*
* Hide the Welcome Panel and the "dismiss" message at the bottom
*/
#welcome-panel {opacity:0.01;}
p.welcome-panel-dismiss {display:none}
</style>
<script type="text/javascript">
jQuery(document).ready( function($)
{
/*
* Left side image and text
* - changing CSS properties and raw Html content of the Div
*/
$('div.wp-badge').css('background-image','url(http://lifelabsnewyork.com/sitebuilder/images/brain-filled-173x192.jpg)');
$('div.wp-badge').css('color','#000000');
$('div.wp-badge').html('Custom Welcome');
// Right side H3 (change raw Html content)
$('div.welcome-panel-content h3').html('By StackExchange WordPress Answers');
// Right side paragraph (idem)
$('p.about-description').html('To be exact. The wp logo image (wp-badge.png) on the left, as well as the header next to it (.welcome-panel-content .about-description, .welcome-panel h3) and the text under it included in (.about-text, .about-description, .about-wrap li.wp-person a.web).');
/*
* Everything modified, fade in the whole Div
* The fade in effect can be removed deleting this and the CSS opacity property
*/
$('#welcome-panel').delay(300).fadeTo('slow',1);
});
</script>
<?php
}
Note that I’m being lazy and printing the Styles and Scripts directly in the admin header.
Please refer to the following Q&A on how to do it in a proper/formal fashion.
How do I enqueue styles/scripts on certain /wp-admin pages?
Where is the right place to register/enqueue scripts & styles