How to customize the notices

BasePress comes with 5 preset Notices: Default, Info, Success, Warning and Danger.
All notices except the Default one can be replaced or extra ones added via filters. The rendering of the notices can also be customized in case you need. We will show below the main possible customizations.

Add a custom notice#

//Add a custom notice
add_filter( 'basepress_notices', function( $items ){
	$items['custom'] = 'Custom';
	return $items;
});

Remove a preset notice#

//Remove a preset notice
add_filter( 'basepress_notices', function( $items ){
        //If the danger notice exists remove it
	if( isset( $items['danger'] ) ){
		unset( $items['danger'] );
	}
	return $items;
});

Replace the preset notices#

You can replace all preset notices except for the default one. Use the code below to replace the notices with your own:

//Replace the preset notices
add_filter( 'basepress_notices', function( $items ){
	return array(
		'tips-tricks' => 'Tips & Tricks',
		'no-forget'   => 'Do not forget',
		'extra'       => 'Extra notes'
	);
});

We are creating an associative array with the slug for the notice as key and a label as the value for each item.
The labels are used in list of notices in the Settings; you can set the actual titles displayed in the frontend in the Notices Settings.
If you are using the shortcode to add notices to your articles, you can use the notice slug to set the style for each notice:

[basepress-notice style="tips-tricks"]The notice message here[/basepress-notice]

How to disable the icon and title for a notice#

Let’s say your notices are displayed with icons and titles. Yet you would like to have the default notice with just the content. You can use the code below to disable the title and the icon for all Default notices.

add_filter( 'basepress_notice_data', function( $data){
	if( $data['style'] == 'default' ){
		$data['show_title'] = false;
		$data['show_icon'] = false;
	}
	return $data;
} );

How to render the notices with custom code#

BasePress notices have a very clean and simple look which should fit most projects. If you want to fully customize the rendering of your notices you can use the action hook below:

add_action( 'basepress_notice_output', function( $data ){
	/**
	 * $data is an array with the following entries:
	 * [
	 *   'style'      => string,      //the notice slug like default, info, success, warning, danger or your custom notice slug
	 *   'content'    => string,      //the content of the notice
	 *   'title'      => string,      //the title for the notice
	 *   'icon'       => string,      //the icon class name
	 *   'show_title' => bool,        //true/false as set in the BasePress Notices Settings
	 *   'show_icon'  => $show_icon   //true/false as set in the BasePress Notices Settings
	 * ]
	 */
	
	//Your custom rendering goes here.
        ...
});

How to change the colour of the Notices#

The notices are styled via CSS. If you are customizing the default notices or you are adding new ones you can change the colour via CSS like this:

.bpress-notice.is-style-info{
	background-color: #7ebdce;
	color: white;
}

You can target each notice with the class .bpress-notice.is-style-{notice-slug}.