Review and tutorial: Callout Plugin for WordPress and Headway

One common design feature used in print media is the callout. That is, a box with a quote from the article intended to capture a main point and therefore draw the reader in.

Using callouts in your posts can and will garner more reader interest.

It’s not an inbuilt feature of WordPress, so a Mr D Lambert created an excellent one called Insert Callout. But the question is, will it work in Headway. Theoretically it should… So let’s find out

Using callouts in your posts can and will garner more reader interest. (We’ll use that quote for our callout).

To use the plugin, you simply wrap your callout in the plugin’s shortcodes. You can also style how your callouts will look from within the Settings menu.

So, did it work? Time to hit preview and find out…

Well, not the first time! Discovered it wouldn’t work until I’d saved the settings for the plugin, even though they already existed.

You can also have a title for your plugin (which I did have, but have turned off with display:none;), and the text within the shortcodes will not display in your post, so you will need to duplicate it.

Also, the callout will display on your page where it is in the content. This has an advantage that you can show your callout well before the quoted text.

I’ve also styled mine with a negative left margin so it breaks the frame of the content. Just a designer thing.

So, yes, yes, yes, the Insert Callout plugin for WordPress works just fine in Headway. It does use shortcodes, which aren’t an entirely user-friendly system, so you might find only your sharper users will use it.

But it does look hot! Give it a try.

Related posts:

http://blog.componentoriented.com D. Lambert

Looks fantastic, Chris! I like the negative offset – it looks great in this theme. I’ll keep plugging away at the usability stuff, but in the mean time, I’m glad it helps add a distinctive look to your posts.

One of the reasons I built this plugin in the first place was to display a box of this sort in a way that would appear in an RSS feed. I can see that this example came out *almost* right in your RSS feed — the display:none for the title didn’t come out right, and it looks like the margin on the surrounding paragraph isn’t present in the feed, so the box is adjoined tightly to the text, but the good news is that the callout is still visible as a callout.

Thanks for the review and testing – this sort of early feedback is quite helpful.
Francis

Chris,

While the photographs on the bottom left and right of the page look good, they make reading your site very frustrating because the readable area becomes much smaller.

When I come to your site, I verge between looking forward to your posts and dreading having to negotiate the photographs.

Pity, it considerably lessens the value of your site to me.

Francis
http://www.headwayhacks.com/how-add-callouts-headway-without-plugin/ How to Add Call-Outs to Headway without a Plugin | Headway Hacks

[...] Howard had an interesting idea for using the Callout Plugin with Headway. However, the more plugins you throw into the mix, the more anxious Headway gets. So I thought, why [...]
STEVE

on my screen it looks wicked …30″ dell…but if I move the site to my 17 ” viewsonic …I see what you mean the photos overlap both the sidebar and the blog content.
Chris

Thanks, Francis. As I said, not entirely practical. Have modified the CSS to they only appear on that particular post.

Steve’s right though, when you’ve got the real estate, they do look really cool.

I need a way to identify screen width and display them conditionally. Probably Javascript.
Chris

Thanks, Mr Lambert. Glad to promote such a great plugin.
Francis

Hi Chris,

Much better without the photographs! I’m sure they look great with a 30″ screen but with my 21″ screen it was causing problems.

Francis
Chris

For those who like to get their hands dirty, Corey of Headway Hacks has a great tute on how to do this without a plugin

http://www.headwayhacks.com/how-add-callouts-headway-without-plugin/
http://www.headwayhub.com/how-add-callouts-headway-theme-without-plugin/ How to Add Call-Outs to the Headway Theme without a Plugin | Headway Hub

[...] Howard had an interesting idea for using the Callout Plugin with Headway. I don’t like excessive plugins though, so I thought, why not ditch the plugin and get a more [...]
http://www.digicast.com.au/blog Marie-Claire Ross

Hello Chris,

I’m confused. How do you save the settings for the plugin?

Cheers,

Marie-Claire
Chris

Hi Marie-Claire

The only settings for this plugin are in the WP Settings, Insert Callout and are just the CSS.

The callout itself is saved in the post.

Does that help?
Albergmac

This looks very nice, Chris. You wrote, “You can also style how your callouts will look from within the Settings menu.” But I don’t see a settings capability within the Callouts plug-in.

Can you please show the css code you used to format this. And perhaps a screen shot of your WordPress panel that shows the callout.
http://www.xicom.biz/ web development services

Great to know the — in depth from this blog.This will really help for my forward steps to be taken.
http://www.register-domainname.in Register domain names

I have enjoyed a lot by reading your tutorial. Really good to read. Thanks for sharing.
http://www.register-web-domain.in Domain registration

Nice one is very open and very clear explanation of topic.Great work you have done by sharing them to all Keep up it
http://www.adsyou.com/ ??? ????? ?? ??????

I have enjoyed a lot by reading your tutorial. Really good to read.
http://www.webhostings.in/ Website Hosting

Thanks a lot for sharing this awesome review here.

three4one design

design is the face of your business

Review and tutorial: Callout Plugin for WordPress and Headway