Display custom message on wordpress admin

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.

Admin Notices

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]

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

.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 */
}

 

Posted by Jogesh Sharma

Jogesh Sharma is a web developer and blogger who loves all the things design and the technology, He love all the things having to do with PHP, WordPress, Joomla, Magento, Durpal, Codeigniter, jQuery, HTML5 etc. He is the author of this blog.