Callout Boxes

plugin banner

Insert callout boxes in your posts and pages using shortcodes and Gutenberg blocks.

Author:Roel Magdaleno (profile at wordpress.org)
WordPress version required:5.0
WordPress version tested:5.8.0
Plugin version:0.3.2
Added to WordPress repository:04-08-2021
Last updated:18-10-2021
Warning! This plugin has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.
Rating, %:0
Rated by:0
Plugin URI:https://github.com/roelmagdaleno/wp-callout-b...
Total downloads:832
Active installs:70+
plugin download
Click to start download

The callout box includes an icon, and the post content. This plugin uses Heroicons and php-heroicons PHP package.

Icons

A callout box includes an icon that describes what’s the purpose of the callout box.

The plugin is using Heroicons so you can go to its website and see what icons are available to use within this plugin.

You can use solid and outline icons.

Types

A callout box can have multiple types:

  • primary
  • success
  • danger
  • warning

By default, the callout box is primary.

Icon Methods

The icon method can be 2 types:

  • solid
  • outline

By default, for shortcodes and Gutenberg the icon method is solid.

Shortcode

For WordPress Classic Editor or even Gutenberg, you can use the shortcode:

[wp-callout icon="check-circle" type="primary" method="solid"]
Welcome to WordPress. This is the post content.
[/wp-callout]

The shortcode supports 3 attributes:

  • icon. The icon to show in the callout box. (Default: check-circle)
  • type Callout box type. (Default: primary)
  • method (Default: solid)

Gutenberg Block

For Gutenberg users, you can use Callout Box block.

Every Gutenberg Callout Box, you can change the icon, type and method using the block properties.

Those properties are the same for the shortcode.

Then, you just type your callout box content inside the Gutenberg block.

Block Presets

When you insert a new Gutenberg Block Callout you can select 1 of the 4 presets installed in the plugin:

  • Information
  • Success
  • Danger
  • Warning

After you select one preset, your callout box will change its background color and icon.

Screenshots
ChangeLog