In some point of view when we developed a custom WordPress plugin or theme, we have to notify users for any urgent update, error or any custom message on WordPress admin section. All this done by admin_notices hook function.
In this post I am going to create a simple plugin to display custom message, but if you want then you can do it with functions.php file. But displaying a message every time is irritating the user, so in this plugin i also gives the functionality to hide your custom message with the Hide this notice button. This button completely hide your notice.
[php]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
/** * Plugin Name: Omnizz Custom Dashboard Message * Plugin URI: http://webomnizz.com * Description: Small Plugin to Create Custom Dashboard Message. * Version: 0.1 * Author: Jogesh Sharma * Author URI: http://webomnizz.com/blog */ class OCDashboard{ public function __construct() { add_action( 'admin_print_styles', array( $this, 'omAdminNotices' ) ); } public function omAdminNotices() { $display = get_option( 'om_cdm_settings' ); if( ! empty( $_GET['om_hide_notice'] ) ){ update_option( 'om_cdm_settings', $_GET['om_hide_notice'] ); return; } if( $display != 'true' ){ wp_enqueue_style( 'om_notice_style', plugins_url( '/om-dashboard-message/assets/css/custom_style.css' ) ); add_action( 'admin_notices', array( $this, 'customDashboardMessage' ) ); } } public function customDashboardMessage(){ ?> <div id="message" class="updated custom-welcome-panel-content wc-connect"> <h3><?php _e( 'Welcome to your custom dashboard Message!' ); ?></h3> <div class="button_section"> <a class="button-primary" href="<?php echo add_query_arg( 'om_hide_notice', 'true' ); ?>">Hide this notice</a> </div> </div> <?php } } $init = new OCDashboard(); |
As you see above plugin codes on line wp_enqueue_style( 'om_notice_style', plugins_url( '/om-dashboard-message/assets/css/custom_style.css' ) );, i have enqueue a custom style for our message. Below is the style for your message.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
.updated.custom-welcome-panel-content{ background: #EF653B; padding: 10px; border: 1px solid #D1370C; border-radius: 3px; } .custom-welcome-panel-content h3{ color: #ffffff; font-family: "Helvetica Neue",Helvetica,Arial,"Lucida Grande",Verdana,"Bitstream Vera Sans",sans-serif; font-size: 18px; line-height: 22px; margin: 10px 0 15px 0; } .custom-welcome-panel-content .button-primary, .custom-welcome-panel-content .button-primary:focus{ background: #0f817a; /* Old browsers */ background: -moz-linear-gradient(top, #0f817a 0%, #0f817a 44%, #0f817a 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0f817a), color-stop(44%,#0f817a), color-stop(100%,#0f817a)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #0f817a 0%,#0f817a 44%,#0f817a 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #0f817a 0%,#0f817a 44%,#0f817a 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #0f817a 0%,#0f817a 44%,#0f817a 100%); /* IE10+ */ background: linear-gradient(to bottom, #0f817a 0%,#0f817a 44%,#0f817a 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f817a', endColorstr='#0f817a',GradientType=0 ); /* IE6-9 */ font-size: 14px; border: 1px solid #01665F; } .custom-welcome-panel-content .button-primary:hover, .custom-welcome-panel-content .button-primary:active{ background: #73c4ba; /* Old browsers */ background: -moz-linear-gradient(top, #73c4ba 0%, #199e99 44%, #009187 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#73c4ba), color-stop(44%,#199e99), color-stop(100%,#009187)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #73c4ba 0%,#199e99 44%,#009187 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #73c4ba 0%,#199e99 44%,#009187 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #73c4ba 0%,#199e99 44%,#009187 100%); /* IE10+ */ background: linear-gradient(to bottom, #73c4ba 0%,#199e99 44%,#009187 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#73c4ba', endColorstr='#009187',GradientType=0 ); /* IE6-9 */ } |