How to Make WordPress Admin Notices Actually Dismissible

WordPress 4.2 introduced a feature where admin notices can now be dismissed / removed from the admin page currently being viewed.

One caveat I discovered was, the dismissal do not persist across pages. That is, when you reload or navigate away from the current admin page to another, you will still see the notice.

I wrote a small library / plugin that elegantly solves this problem which i will be sharing to us. You can easily reuse it in your themes and plugins. And it is also pretty well documented.

Here is a link to the library on GitHub

How to Use it

Update: see the library README for an updated installation and usage guide.

Firstly, install and activate it by cloning / downloading to your WordPress wp-content/plugins directory.

Say you have the following markup as your admin notice

<br/>function sample_admin_notice__success() { ?> <div class="updated notice notice-success is-dismissible"> <p><?php _e( 'Done!', 'sample-text-domain' ); ?></p> </div> <?php<br/>}<br/>add_action( 'admin_notices', 'sample_admin_notice__success' );

function sample_admin_notice__success() {     ?>     <div class="updated notice notice-success is-dismissible">         <p> _e( 'Done!', 'sample-text-domain' ); ?></p>     </div>      add_action( 'admin_notices', 'sample_admin_notice__success' );

To make it hidden forever when dismissed, add the following data attribute data-dismissible="disable-done-notice-forever" to the div markup like so:

<br/>function sample_admin_notice__success() { ?> <div data-dismissible="disable-done-notice-forever" class="updated notice notice-success is-dismissible"> <p><?php _e( 'Done!', 'sample-text-domain' ); ?></p> </div> <?php<br/>}<br/>add_action( 'admin_notices', 'sample_admin_notice__success' );

function sample_admin_notice__success() {     ?>     <div data-dismissible="disable-done-notice-forever" class="updated notice notice-success is-dismissible">         <p> _e( 'Done!', 'sample-text-domain' ); ?></p>     </div>      add_action( 'admin_notices', 'sample_admin_notice__success' );

Note: the data-dismissible attribute must have a unique hyphen separated text which will serve as the key or option name used by the Options API to persist the state to the database. Don’t understand, see the following examples.

Examples

Say you have two notices displayed when certain actions are triggered; firstly, choose a string to uniquely identify them. E.g notice-one and notice-two

To make the first notice never appear forever when dismissed, its data-dismissible attribute will be data-dismissible="notice-one-forever" where notice-one is its unique identifier.

To make the second notice only hidden for 2 days, its data-dismissible attribute will be data-dismissible="notice-two-2" where notice-one is its unique identifier and the 2 the number of days it will be hidden.

To actually make the dismissed admin notice not to appear, use the is_admin_notice_active() function like so:

<br/>function sample_admin_notice__success1() {<br/>if ( ! is_admin_notice_active( 'notice-one-forever' ) ) { return; } ?> <div data-dismissible="notice-one-forever" class="updated notice notice-success is-dismissible"> <p><?php _e( 'Done 1!', 'sample-text-domain' ); ?></p> </div> <?php<br/>}<br/>add_action( 'admin_notices', 'sample_admin_notice__success1' );

function sample_admin_notice__success1() { if ( ! is_admin_notice_active( 'notice-one-forever' ) ) {         return;     ?>     <div data-dismissible="notice-one-forever" class="updated notice notice-success is-dismissible">         <p> _e( 'Done 1!', 'sample-text-domain' ); ?></p>     </div>      add_action( 'admin_notices', 'sample_admin_notice__success1' );

<br/>function sample_admin_notice__success2() {<br/>if ( ! is_admin_notice_active( 'notice-two-2' ) ) { return; } ?> <div data-dismissible="notice-two-2" class="updated notice notice-success is-dismissible"> <p><?php _e( 'Done 2!', 'sample-text-domain' ); ?></p> </div> <?php<br/>}<br/>add_action( 'admin_notices', 'sample_admin_notice__success2' );

function sample_admin_notice__success2() { if ( ! is_admin_notice_active( 'notice-two-2' ) ) {         return;     ?>     <div data-dismissible="notice-two-2" class="updated notice notice-success is-dismissible">         <p> _e( 'Done 2!', 'sample-text-domain' ); ?></p>     </div>      add_action( 'admin_notices', 'sample_admin_notice__success2' );

Cool beans. Isn’t it?

Read More

 admin notice, dismissible notices, notice, Plugin Development, WordPress

WordPress Customizer – Range Control with Selected Value Indicator

The WordPress customizer, formerly know as theme customizer allows administrator(s) and/or owner to customize and control the appearance of their WordPress powered website via an intuitive, click-and-drag interface.

The Customization API allows theme and plugin developers to customize and add controls to the “Appearance” → “Customize” admin screen.

In this tutorial, I won’t go over the steps on how to leverage or integrate customizer in your theme or plugin. Rather, i will be showing us how to create your own custom controls using a range input field as a case study.

By default, the customizer support all type of input fields including “range”. My gripe with the range input field is the lack of an indicator to show the current selected value. And this isn’t going to change anytime soon as the idea was rejected by WordPress core team.

I am not going to explain or step us through how the code work. Otto has that covered already.

Below is the PHP class for the range control.

<br/><?php<br/>class WP_Customize_Range_Control extends WP_Customize_Control<br/>{ public $type = 'custom_range'; public function enqueue() { wp_enqueue_script( 'cs-range-control', 'path/to/range-control.js', array('jquery'), false, true ); } public function render_content() { ?> <label> <?php if ( ! empty( $this->label )) : ?> <span class="customize-control-title"><?php echo esc_html($this->label); ?></span> <?php endif; ?> <div class="cs-range-value"><?php echo esc_attr($this->value()); ?></div> <input data-input-type="range" type="range" <?php $this->input_attrs(); ?> value="<?php echo esc_attr($this->value()); ?>" <?php $this->link(); ?> /> <?php if ( ! empty( $this->description )) : ?> <span class="description customize-control-description"><?php echo $this->description; ?></span> <?php endif; ?> </label> <?php }<br/>}

class WP_Customize_Range_Control extends WP_Customize_Control     public $type = 'custom_range';     public function enqueue()         wp_enqueue_script(             'cs-range-control',             'path/to/range-control.js',             array('jquery'),             false,             true         );     public function render_content()         ?>         <label>              if ( ! empty( $this->label )) : ?>                 <span class="customize-control-title"> echo esc_html($this->label); ?></span>              endif; ?>             <div class="cs-range-value"> echo esc_attr($this->value()); ?></div>             <input data-input-type="range" type="range" $this->input_attrs(); ?> value=" echo esc_attr($this->value()); ?>" $this->link(); ?> />              if ( ! empty( $this->description )) : ?>                 <span class="description customize-control-description"> echo $this->description; ?></span>              endif; ?>         </label>

And here is the JavaScript for range-control.js

<br/>(function ($) { $(document).ready(function ($) { $('input[data-input-type]').on('input change', function () { var val = $(this).val(); $(this).prev('.cs-range-value').html(val); $(this).val(val); }); })<br/>})(jQuery);

(function ($) {     $(document).ready(function ($) {         $('input[data-input-type]').on('input change', function () {             var val = $(this).val();             $(this).prev('.cs-range-value').html(val);             $(this).val(val);         });     }) })(jQuery);

Link to code on GitHub here

To use this range custom control class, add a control to your existing list of customizer controls like so:

<br/>$wp_customize->add_control( new WP_Customize_Range_Control( $wp_customize, 'content_font_size', array( 'label' => __('Font Size'), 'section' => 'section_id_to_use_here', 'settings' => 'content_font_size', 'description' => __('Measurement is in pixel.'), 'input_attrs' => array( 'min' => 10, 'max' => 80, ), ) )<br/>);

$wp_customize->add_control(     new WP_Customize_Range_Control(         $wp_customize,         'content_font_size',         array(             'label'       => __('Font Size'),             'section'     => 'section_id_to_use_here',             'settings'    => 'content_font_size',             'description' => __('Measurement is in pixel.'),             'input_attrs' => array(                 'min' => 10,                 'max' => 80,             ),         )

La Fin!

Read More

 customizer, Plugin Development, theme customizer, WordPress

How to Fix SVN Error “The HTTP method ‘MKCOL’ is not allowed on …”

I ran into the following error while trying to svn commit the code of this plugin to WordPress plugin repository.

The HTTP method ‘MKCOL’ is not allowed on …

Got to discover via this stackoverflow thread that the error was as a result of me trying to add or push a directory that already existed in the SVN repository.

Wheew!

Read More

 Plugin Development, Programming, SVN, Tools, WordPress