Customize Your WordPress Dashboard Welcome Message
It seems that many of you don’t want to show the new feature called “Welcome Panel” since WordPress 3.3. I guess that those who do not want to display this message try to hide this box to their clients, that’s why I thought that instead of hiding it you should customize it and display it with your own content. To display a custom welcome message, we are going to create a small plugin. That way even when upgrading to a new version of WordPress the message shown will your message and not the default one.
Let’s get started!
Let’s Create A Plugin
To create a plugin, create a new folder under wp-content/plugins, and call it custom-dashboard-message. Within this folder create a file called custom-dashboard-message.php and open it in your code editor (by the way Coda 2 is great!). Simply paste this code in the newly created file:
<?php
/*
Plugin Name: Custom Dahsboard Message
Plugin URL: http://remicorson.com/
Description: A little plugin to modify default dashboard welcome message
Version: 0.1
Author: Remi Corson
Author URI: http://remicorson.com
Contributors: corsonr
*/
This code simply creates a plugin… yes i know, WordPress is too easy for you!
No we need to create a function that will remove the default dashboard message and add a new custom welcome message, to do so, add this code:
/**
* Hide default welcome dashboard message and and create a custom one
*
* @access public
* @since 1.0
* @return void
*/
function rc_my_welcome_panel() {
// our code will be placed here
}
add_action( 'welcome_panel', 'rc_my_welcome_panel' );
What this code does is hooking our custom rc_my_welcome_panel() function to the welcome_panel action. In other words, as soon as WordPress will load the welcome_panel action, our function will be loaded.
Hiding The Default Welcome Message
As our function is loaded when “welcome_panel” action is loading we need to hide the default WordPress welcome message. To do so, we are going to use a really simple method, it’s probably not the best but it’s working fine for pour example. We’ll do it using jQuery and the hide() function. Let’s add this code inside the function we created above:
<script type="text/javascript">
/* Hide default welcome message */
jQuery(document).ready( function($)
{
$('div.welcome-panel-content').hide();
});
</script>
Our Custom Welcome Message
If you go now to your dashboard (don’t forget to activate the plugin!), you’ll see a grey empty zone. This is the welcome message zone. And this is where we are going to add our content. This part is the simplest because your can place any content. In my example I started from the default content, from the wp_welcome_panel() default function. It’s easier just because it allows me to use already formatted content. So I just copied and pasted this function (find it under wp-admin/includes/dashboard.php) then edited it.
Here is what I placed in the function:
<div class="custom-welcome-panel-content">
<h3><?php _e( 'Welcome to your custom dashboard Message!' ); ?></h3>
<p class="about-description"><?php _e( 'Here you can place your custom text, give your customers instructions, place an ad or your contact information.' ); ?></p>
<div class="welcome-panel-column-container">
<div class="welcome-panel-column">
<h4><?php _e( "Let's Get Started" ); ?></h4>
<a class="button button-primary button-hero load-customize hide-if-no-customize" href="http://your-website.com"><?php _e( 'Call me maybe !' ); ?></a>
<p class="hide-if-no-customize"><?php printf( __( 'or, <a href="%s">edit your site settings</a>' ), admin_url( 'options-general.php' ) ); ?></p>
</div>
<div class="welcome-panel-column">
<h4><?php _e( 'Next Steps' ); ?></h4>
<ul>
<?php if ( 'page' == get_option( 'show_on_front' ) && ! get_option( 'page_for_posts' ) ) : ?>
<li><?php printf( '<a href="%s" class="welcome-icon welcome-edit-page">' . __( 'Edit your front page' ) . '</a>', get_edit_post_link( get_option( 'page_on_front' ) ) ); ?></li>
<li><?php printf( '<a href="%s" class="welcome-icon welcome-add-page">' . __( 'Add additional pages' ) . '</a>', admin_url( 'post-new.php?post_type=page' ) ); ?></li>
<?php elseif ( 'page' == get_option( 'show_on_front' ) ) : ?>
<li><?php printf( '<a href="%s" class="welcome-icon welcome-edit-page">' . __( 'Edit your front page' ) . '</a>', get_edit_post_link( get_option( 'page_on_front' ) ) ); ?></li>
<li><?php printf( '<a href="%s" class="welcome-icon welcome-add-page">' . __( 'Add additional pages' ) . '</a>', admin_url( 'post-new.php?post_type=page' ) ); ?></li>
<li><?php printf( '<a href="%s" class="welcome-icon welcome-write-blog">' . __( 'Add a blog post' ) . '</a>', admin_url( 'post-new.php' ) ); ?></li>
<?php else : ?>
<li><?php printf( '<a href="%s" class="welcome-icon welcome-write-blog">' . __( 'Write your first blog post' ) . '</a>', admin_url( 'post-new.php' ) ); ?></li>
<li><?php printf( '<a href="%s" class="welcome-icon welcome-add-page">' . __( 'Add an About page' ) . '</a>', admin_url( 'post-new.php?post_type=page' ) ); ?></li>
<?php endif; ?>
<li><?php printf( '<a href="%s" class="welcome-icon welcome-view-site">' . __( 'View your site' ) . '</a>', home_url( '/' ) ); ?></li>
</ul>
</div>
<div class="welcome-panel-column welcome-panel-last">
<h4><?php _e( 'More Actions' ); ?></h4>
<ul>
<li><?php printf( '<div class="welcome-icon welcome-widgets-menus">' . __( 'Manage <a href="%1$s">widgets</a> or <a href="%2$s">menus</a>' ) . '</div>', admin_url( 'widgets.php' ), admin_url( 'nav-menus.php' ) ); ?></li>
<li><?php printf( '<a href="%s" class="welcome-icon welcome-comments">' . __( 'Turn comments on or off' ) . '</a>', admin_url( 'options-discussion.php' ) ); ?></li>
<li><?php printf( '<a href="%s" class="welcome-icon welcome-learn-more">' . __( 'Learn more about getting started' ) . '</a>', __( 'http://codex.wordpress.org/First_Steps_With_WordPress' ) ); ?></li>
</ul>
</div>
</div>
<div class="">
<h3><?php _e( 'If you need more space' ); ?></h3>
<p class="about-description">Create a new paragraph!</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
</div>
</div>
You can simply edit this part of the code to create your content, add links, images, forms or whatever…
The Final Plugin Code
Here is the full plugin code, enjoy!
<?php
/*
Plugin Name: Custom Dahsboard Message
Plugin URL: http://remicorson.com/
Description: A little plugin to modify default dashboard welcome message
Version: 0.1
Author: Remi Corson
Author URI: http://remicorson.com
Contributors: corsonr
*/
/**
* Hide default welcome dashboard message and and create a custom one
*
* @access public
* @since 1.0
* @return void
*/
function rc_my_welcome_panel() {
?>
<script type="text/javascript">
/* Hide default welcome message */
jQuery(document).ready( function($)
{
$('div.welcome-panel-content').hide();
});
</script>
<div class="custom-welcome-panel-content">
<h3><?php _e( 'Welcome to your custom dashboard Message!' ); ?></h3>
<p class="about-description"><?php _e( 'Here you can place your custom text, give your customers instructions, place an ad or your contact information.' ); ?></p>
<div class="welcome-panel-column-container">
<div class="welcome-panel-column">
<h4><?php _e( "Let's Get Started" ); ?></h4>
<a class="button button-primary button-hero load-customize hide-if-no-customize" href="http://your-website.com"><?php _e( 'Call me maybe !' ); ?></a>
<p class="hide-if-no-customize"><?php printf( __( 'or, <a href="%s">edit your site settings</a>' ), admin_url( 'options-general.php' ) ); ?></p>
</div>
<div class="welcome-panel-column">
<h4><?php _e( 'Next Steps' ); ?></h4>
<ul>
<?php if ( 'page' == get_option( 'show_on_front' ) && ! get_option( 'page_for_posts' ) ) : ?>
<li><?php printf( '<a href="%s" class="welcome-icon welcome-edit-page">' . __( 'Edit your front page' ) . '</a>', get_edit_post_link( get_option( 'page_on_front' ) ) ); ?></li>
<li><?php printf( '<a href="%s" class="welcome-icon welcome-add-page">' . __( 'Add additional pages' ) . '</a>', admin_url( 'post-new.php?post_type=page' ) ); ?></li>
<?php elseif ( 'page' == get_option( 'show_on_front' ) ) : ?>
<li><?php printf( '<a href="%s" class="welcome-icon welcome-edit-page">' . __( 'Edit your front page' ) . '</a>', get_edit_post_link( get_option( 'page_on_front' ) ) ); ?></li>
<li><?php printf( '<a href="%s" class="welcome-icon welcome-add-page">' . __( 'Add additional pages' ) . '</a>', admin_url( 'post-new.php?post_type=page' ) ); ?></li>
<li><?php printf( '<a href="%s" class="welcome-icon welcome-write-blog">' . __( 'Add a blog post' ) . '</a>', admin_url( 'post-new.php' ) ); ?></li>
<?php else : ?>
<li><?php printf( '<a href="%s" class="welcome-icon welcome-write-blog">' . __( 'Write your first blog post' ) . '</a>', admin_url( 'post-new.php' ) ); ?></li>
<li><?php printf( '<a href="%s" class="welcome-icon welcome-add-page">' . __( 'Add an About page' ) . '</a>', admin_url( 'post-new.php?post_type=page' ) ); ?></li>
<?php endif; ?>
<li><?php printf( '<a href="%s" class="welcome-icon welcome-view-site">' . __( 'View your site' ) . '</a>', home_url( '/' ) ); ?></li>
</ul>
</div>
<div class="welcome-panel-column welcome-panel-last">
<h4><?php _e( 'More Actions' ); ?></h4>
<ul>
<li><?php printf( '<div class="welcome-icon welcome-widgets-menus">' . __( 'Manage <a href="%1$s">widgets</a> or <a href="%2$s">menus</a>' ) . '</div>', admin_url( 'widgets.php' ), admin_url( 'nav-menus.php' ) ); ?></li>
<li><?php printf( '<a href="%s" class="welcome-icon welcome-comments">' . __( 'Turn comments on or off' ) . '</a>', admin_url( 'options-discussion.php' ) ); ?></li>
<li><?php printf( '<a href="%s" class="welcome-icon welcome-learn-more">' . __( 'Learn more about getting started' ) . '</a>', __( 'http://codex.wordpress.org/First_Steps_With_WordPress' ) ); ?></li>
</ul>
</div>
</div>
<div class="">
<h3><?php _e( 'If you need more space' ); ?></h3>
<p class="about-description">Create a new paragraph!</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
</div>
</div>
<?php
}
add_action( 'welcome_panel', 'rc_my_welcome_panel' );
Good job.. very useful plugin
I think for personal web or blog you don’t need do that.
This method good for multiple user or multi author who have user role to see that welcome message zone.
I agree, amdhas
but it is really useful for community blogs :) with multi authors
Woooooowww I just love this plugin! This was exactly what I needed at the right time :D
One question. Is it possible to always show the welcome panel? So that the “dismiss button” will be hided, and people will see this panel every time they login.
Would be great!
Thanks in advance!
Thanks! Yes you can hide with CSS or simply delete the code that shows the message!
Nice – also worked as a tutorial for creating my first plugin! Now on to more complex ones….
I’m sorry, but can it be, that this plugin isn’t working in WP 3.5? Or is it me that’s doing something completely wrong? :)
Hi Claire, i’v tested with WP 3.5 and no problem. What kind of issue do you have ?
Excellent, thank you for this. This is a fantastic tool to personalise WordPress even further for clients without having to rely on third party plugins.
Keep up the good work!
You could use
remove_action( ‘welcome_panel’, ‘wp_welcome_panel’ );
why jquery?
If you do so, you remove completely the welcome panel.
Great tutorial.
How can I force this to display for all user roles?
I want this to show for Contributors on my site so they get the custom message.
Good job….but I have a question: how can I hide the “dismiss button” ????? Where can I find the code?
Hi Ali, i used it like this at the beggining of the function:
function rc_my_welcome_panel()
{?>
a.welcome-panel-close {display:none}
p.welcome-panel-dismiss {display:none}
…
Hi,
Instead of jquery I used:
div.welcome-panel-content { display:none; }
This stops the WordPress welcome appearing for a second or two during page load.
Thanks for sharing this great plugin.
Lee
thanks veeeery much for all your post!
Very useful!!
i would say using jquery is the wrong way of doing it, well, maybe not. it’s just personal taste in coding. i would just remove the default wordpress action to welcome panel:
remove_action( ‘welcome_panel’, ‘wp_welcome_panel’ );
hi David, i agree, it’s not the ideal solution, it’s A solution, but yes there are better ways to do it.
awesome plugin. you are great dude…
Thanks !
hi remi
good job.
i missing only one thing:
How can I show this for other user roles like “author”?
bye