Creating a custom Dashboard widget in WordPress.
I made a help widget for a client so they see it righty away when logging into the backend of WordPress.
It is based on the resource links further below.
(It is somewhat primitive for the moment.)
/* Dashboard widgets */
add_action('wp_dashboard_setup', 'my_custom_dashboard_widgets'); function my_custom_dashboard_widgets() { wp_add_dashboard_widget('custom_help_widget', 'Get help to manage your web site', 'custom_dashboard_help'); }
function custom_dashboard_help() { echo '<p style="color: green;font-size: 18px;"><strong>Welcome to the backend of your WordPress web site!</strong></p> <p>Some helpful advice is located here:</p><h2> <a href="https://www.easywebdesigntutorials.com/" target="_blank" style="text-decoration: underline; font-weight:strong;">Link to the help page</a></h2> <p>Contact <a href="mailto:paaljoachim@hotmail.com">Paal Joachim</a> when questions arise.</p>'; }
Remove widgets in the Dashboard
The new custom widget shows up below all the other widgets in the Dashboard. I do not believe the client will find any of the default widgets useful so I might as well remove them.
// Remove unwanted dashboard widgets. Find the names by using Inspect Element. Find the ID tag of each widget. function remove_dashboard_widgets() { // Remove Welcome to WordPress! widget NB! It uses a different code. // https://codex.wordpress.org/Plugin_API/Action_Reference/welcome_panel remove_action( 'welcome_panel', 'wp_welcome_panel'); // Remove meta boxes to the left. // At a Glance widget remove_meta_box( 'dashboard_right_now', 'dashboard', 'normal' ); // Activity widget remove_meta_box( 'dashboard_activity', 'dashboard', 'normal' ); // Remove meta boxes to the right. // Quick Draft widget remove_meta_box( 'dashboard_quick_press', 'dashboard', 'side' ); // WordPress News remove_meta_box( 'dashboard_primary', 'dashboard', 'side' ); } add_action( 'wp_dashboard_setup', 'remove_dashboard_widgets' );
A custom Welcome Panel
The shorter version of the below welcome panel just adds a video play list below the existing links.
/***************************** *Add a custom Welcome Dashboard Panel *****************************/ function my_welcome_panel() { ?> <div class="getting-started"> <p align=center><?php _e( 'To learn more check out the below videos' ); ?></p> <h3 align=center><?php _e('Taking your first steps with WordPress' ); ?></p> <p align=center><iframe width="560" height="315" src="https://www.youtube.com/embed/VdvOGV2eIjE?list=PLD3AB608F62AC973C" frameborder="0" allowfullscreen></iframe></p> </div> <?php } //remove_action('welcome_panel','wp_welcome_panel'); add_action( 'welcome_panel', 'my_welcome_panel' );
The longer version which also needs some cleaning up.
Customizing the Dashboard Welcome Panel to look like this:
The code (as it looks like right now. I need to create the getting started tutorials though).
welcome-panel.php code to be added to the functions file or a plugin.
welcome-panel.css.
Resources:
https://codex.wordpress.org/Dashboard_Widgets_API
tutsplus: customizing the WordPress admin the dashboard
html5hive: how to create WordPress dashboard widgets
wpbeginner: how to add custom dashboard widgets in WordPress
markwilkinson: using the WordPress admin for lead generation
wpmudev: plugin welcome screen
smashingmagazine: advanced power tips for WordPress template developers reloaded
stackoverflow: how to style a php echo text
elegantthemes: 3 ways to make the WordPress dashboard more intuitive for your clients
This is exactly what i was looking for. Thanks a lot!!! I live in Cuba, so i can’t give you donation because here we dont have pay pal or that kind of cards, but i sent you a hug and my best wishes for this year!
Your welcome JM! Thanks for the hug and best wishes..:)