How to Create and Style Callout Boxes in WordPress

How to Create and Style Callout Boxes in WordPress

If you’re a regular reader of news sites or magazines, you’ll notice that they sometimes use something called “callouts” or a “blockquotes” to highlight key text.

These are a great way of breaking up long chunks of text and drawing the reader’s attention to key points and interesting quotes. They’re used a lot in interviews and will generally include the most interesting or controversial thing the interviewee said.

You may have also noticed that our new blog redesign includes new callout designs like this one, thanks to the talented WPMU DEV design and front-end team!

You can also use them for text that isn’t part of the main content, such as a call to action or advert. They’ll draw the reader’s eye and help you to increase the number of people who read all the way through a page or click onto another page you want to direct them to.

In this post, I’ll show you how to write a plugin that provides you with a shortcode for a simple callout.  The shortcode has one attribute, which is alignment, so you can choose whether to center your callouts or align them to the left or right so that the text wraps around them.

What You’ll Need

To follow this post you’ll need the following:

  • A code editor,
  • A development site you can test your work on, and
  • Access to your wp-content folder in WordPress.

I’m using a test site on my local machine to which I’ve added the dummy data provided by WordPress for testing – you can find this at the theme unit testing pages. But you could just type in your own dummy content, use real content or copy in some lorem ipsum text.

Note: I’ve uploaded the full code for this post to GitHub so you can check yours against it as you go along.

Setting up the Plugin

The first thing you’ll need to do is create your plugin. In your wp-content/plugins folder, create a new folder called wpmu-pretty-callouts. Inside that folder create two blank files: the main plugin file, called wpmu-pretty-callouts.php, and a stylesheet, called style.css.

Now open the PHP file you just created. Start by adding commented out text at the top that tells WordPress what this is:

This tells WordPress that this is a plugin and provides users with some information about it. You can edit yours to add your name and URI instead of mine.

Adding the Shortcode Function

Now let’s add the function that creates the shortcode. Start by creating this empty function:

This sets up your function and attaches it to the add_shortcode hook so it’ll run when that fires.

Now let’s populate the function. Firstly, we’ll set up our attribute for alignment. Inside the function, add this:

This sets up the align attribute which users can use to add left, right or center alignment. By default, this has a null value.

Below that, still inside your function, add the code to output the shortcode’s contents in your site:

This uses the ob_start() and ob_get_clean() functions to ensure that your content is output in the right place. Between these is code which adds the contents of the shortcode, wrapped in an aside element with a class of pretty-callout plus the attribute added as a class if it’s set. This means you can use this attribute for styling later on.

Note: For more on creating shortcode plugins, see our full guide to plugin creation.

Your full funciton will now look like this:

Now save your file and activate the plugin.

Let’s test how it works. Open a post in your site (or create a new one) and add some text. Above one of your paragraphs of text, add your shortcode.

Here’s mine:

[pretty-callout]This is a pretty callout. It looks great when you add a lot of text to it. Yay! Love it.[/pretty-callout]

Now save your post and take a look at it on your site. You’ll find that the text is added but it doesn’t really stand out yet:

Callout in text with no styling - looks like a normal paragraph

We need to add some styling. Let’s do that.

Adding a Stylesheet

The first thing to do is register the stylesheet you already created in your plugin folder. Go back to your main plugin file and add this function:

This registers the stylesheet in your plugin and enqueues it correctly so WordPress can use it.

Let’s add some basic styling to the stylesheet. Open your style.css file in your plugin and add this:

This adds some styling for our .pretty-callout class, without any alignment added. Now let’s take a look at how the callout looks in our site:

Callout with larger text than surrounding parapgraphs, in italics, with margins on the left and right

That’s looking better: the text is in italics, it’s larger than the rest of the content, and it’s got margins to make it stand out. Now let’s try adding styling for that align attribute.

Add this to your stylesheet:

This adds floats for the left and right aligned versions of the callout, as well as margins for those and for a centered version, which will be narrower than the default. This is more useful when you’re working with a full-width design.

Go back to your post and edit the shortcode, to add one of the attributes. I’m going to add right alignment:

[pretty-callout align="right"]This is a pretty callout. It looks great when you add a lot of text to it. Yay! Love it.[/pretty-callout]

Now update your post and take a look at it in your site:

callout with right alignment, text wrapping around it on the left, and margins

That looks even better! Now if you want to tweak your stylesheet you can, maybe varying the font or the text size. Alternatively, in your plugin file you could wrap the output text in a H3 tag or similar, to apply the styling given to H3 elements in your theme. The choice is yours!

Pretty Callouts Make Your Text More Appealing and are Easy to Implement

I hope you agree with me that this technique lets you add text that looks appealing and makes your posts easier for your visitors to read. I wouldn’t advise using callouts too much – add them sparingly for maximum impact. And now that you’ve built your own plugin to add pretty callouts, you can activate this on all of your sites and use it wherever you need to. Have fun!

Do you use callouts on your site? Have you noticed our newly redesigned callouts here on the blog? Let us know what you think in the comments below.