• Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

Easy Web Design Tutorials

WordPress Tutorials and more

  • Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

17 June - 2015 By Paal Joachim 2 Comments
Last updated on: June 20, 2016

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.)

Custom Dashboard Widget WordPress

Custom Dashboard Widget

/* 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:

Custom Dashboard Welcome Panel

Custom Dashboard Welcome Panel

 

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

Share this:

  • Email

Categories: Developer, How to, WordPress

Paal Joachim Romdahl

I enjoy teaching and creating tutorials. As well creating web sites.
I help people gain WordPress knowledge through my easy to follow tutorials and specialized training. Contact me for more information on how I can improve your WordPress skills and to help get your web site quickly up and running.

Comments

  1. JM says

    3 February - 2016

    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!

    Reply
    • Paal Joachim says

      3 February - 2016

      Your welcome JM! Thanks for the hug and best wishes..:)

      Reply

Leave a Comment Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2021 · By Easy Web Design Tutorials · Built on the Genesis Framework · WordPress · Log in · ⇪

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.