Whistles WordPress Plugin

Let’s hop in our time machine and go back to January 2009. Theme Hybrid was half a year into the WordPress theme game. Hybrid was quickly becoming one of the most popular themes in the WordPress ecosystem.

What were users demanding?

Tabs.

Tabs.

Tabs.

Can I get some tabs? Can I get a theme with some tabs on the side? A double order of tabs? Some tabs to go? I need me some tabs. And, some tabs on top. Please.

Really, folks were crazy about tabs in their WordPress themes back then. I’d done a few themes with tabs before then, but I knew I didn’t want to start building tabs for every theme I planned to build in the future. I honestly didn’t see the point in tabs for 95% of sites. So, I decided on a compromise: I would release a tabs plugin specifically for Hybrid users and style it in some of the more popular child themes.

Here’s the problem: the plugin sucked. Yeah, it saw several thousand downloads over the next six months before I officially put it on the WordPress plugin repository. Many people were ecstatic about it. I wasn’t particularly proud of that plugin.

The plugin has quietly faded out of existence for the most part over the last few years. I didn’t want to work on it; users found better solutions. But, I always kept a thought in the back of my mind that I’d do a real tabs plugin that rocked.

Earlier this year, I was taking a look over Hybrid Tabs’ code and thought of ways I could restructure it to make it useful. Basically, there was no way I was doing that. So, I scrapped the entire idea and made an outline of what I think a tabs plugin should be. I put the project on the backburner for a while though because of other responsibilities.

When I was asked a couple of weeks ago about using Hybrid Tabs with a theme other than Hybrid, I dusted off the old notebook and began writing the code for the tabs plugin I’d envisioned.

What I made wasn’t just a tabs plugin. It was Whistles.

Introducing Whistles

banner-772x250

Whistles takes the concept of a custom post type + taxonomy and mixes it with tabs, toggles, and accordions.

Basically, a “whistle” is just an arbitrary name for a piece of content that you’d like to group with some other content in some cool way, such as inside a group of tabs. I didn’t want to limit users to preset types of content, so I used a custom post type for saving individual whistles. Each whistle can then belong to one or more whistle groups. Whistle groups are then displayed as tabs, toggles, or accordions on the site.

What? Huh?

If that doesn’t make a lot of sense, let me break it down for you:

  • You create individual whistles just like posts/pages (Appearance > Whistles screen).
  • You add whistles to whistle groups just like post tags (Appearance > Whistles Groups screen).
  • You can display your whistles by using the “Whistles” widget and selecting how you want them to appear (tabs, toggle, accordion).
  • You can display whistles in the post/page editor via the “Add Whistles” media button.

The reason for doing things this way is for a number of reasons:

  • Users have near unlimited possibilities for what they want their whistle content to be. Anything you can add to the post editor can also be added as whistle content.
  • Data portability. You can take your whistles along for the ride with any theme without losing them.
  • Easy to style. Theme authors can roll their own CSS for this plugin easily.
  • Easy to extend. With just a little OOP knowledge, developers have an infinite number of ways they can extend this and do something other than just tabs, toggles, and accordions.

Download the plugin

You can find the plugin on the Whistles plugin page or on the WordPress.org page. You can also follow the plugin’s development on GitHub.

Here’s a couple of simple demos (you can do so much more with custom style rules though):

I hope you enjoy this release. I want to see some themes rolling their own styles for this.

Because I know this will most likely be necessary, let me just add this note. This plugin might not look that good with your theme. It’s next to impossible for a plugin such as this to look good with all themes or even most themes. It really needs custom style rules based on the design that you’re using. With that said, it should look decent in the current default WordPress themes.

16 Comments


  1. I like your technique with the get_post_field and the whistle_content filter applied on it instead of using the_content. Very clever 🙂


    1. bbPress does the same thing. It’s the best way to avoid other plugins adding stuff to the_content like share icons and so on.


  2. Justin, you are on such a roll these days, you deserve a wolf whistle!


    1. And, there’s still more to come…


  3. Very nice approach. I’d love to see this tied into the Content Blocks discussion for 3.9 – http://make.wordpress.org/ui/2013/09/04/ceux-sept-3-chat-notes-wireframes/ – as a way to make re-usable content which itself could include mixed media.

  4. ovidiu

    Sounds awesome but did I get this right, its just tabs for content, not for use in a sidebar?

    1. ovidiu

      Ah, let me add something to that: I’ve just spent a week searching for a plugin that lets me use other plugins in a tabbed widget. Still can’t find a good one. Do you maybe have something like that in the pipelines for non-hybrid based themes?


    2. It has a shortcode (actually a media button for inserting the shortcode). This will allow you to insert whistles into post content. It also has a widget, which will allow you to insert whistles in your sidebars.

      You can also insert other plugins into your whistle content, assuming those plugins have a shortcode. Even if they don’t, it’s typically trivial to create one. Essentially, you can add anything to the whistle content that you can add to post/page content.

      1. ovidiu In reply to Justin Tadlock

        ah, ok, so I can only insert widgets into the “whistle widget” if they got a short code. I’m looking for generic stuff like latest posts, latest comments and the likes.

        Will check it out and see if my needed widgets have short codes.

        If not, do you have, by any chance, a link to an article of yours where you talk about creating short codes?


  5. Kudos Justin!

  6. Wordpress Plugin Whistles zur Erstellung von Tab, Accordions und Toggles
  7. mma

    very nice!
    What about vertical tabs and responsive behaviour – or is this up to the theme developer?


    1. Yes, both of those things are up to the theme developer.

Comments are closed.