How to Use the Tabby Responsive Tabs Shortcodes

Posted OnMay 22, 2015     CategoryPlugins     CommentsNo comment

In this section of the guide to the Tabby Responsive Tabs plugin, we will look at how to use a shortcode to display the tabs in an existing post or page.

Step 1) Login to the WordPress Dashboard.

Step 2) From the left-hand sidebar, navigate to Posts -> All Posts.

Step 3) From the list of posts, hover over a post to display a sub-menu.

Step 4) Click the Edit hyperlink.


Adding Tabs

Step 5) Add the following code somewhere in the body of the post as follows:

[tabby title="First Tab"]
Tabby ipsum dolor sit amet, kitty sunbathe dolor, feed me.

[tabby title="Second Tab"]
Lay down in your way catnip stuck in a tree, sunbathe kittens.

[tabby title="Third Tab"]
sleep in the sink climb the curtains attack, give me fish.

Step 6) Click the Update or Publish (depending on current post status).

Step 7) Click the Preview Changes button to view the post.


The post should now display as follows:


Change Display

Step 8) To change how the tabs and accordion display on your site, you have two options:

  • Use the Tabby Responsive Tabs Customiser plugin which provides a very easy way to customise the display of your tabs without needing to edit any code (recommended).
  • Copy the contents of the plugin’s stylesheet into your child theme or custom styles plugin and make the changes to the copy as required. If you do this you will also need to prevent the built-in styles from loading by adding the following line to your child theme’s functions.php or a custom functionality plugin:
    <?php remove_action('wp_print_styles', 'cc_tabby_css', 30); ?>

Set Tab Options

  • Open

    The first (leftmost) tab panel will be open by default in Tab View and in Accordion View.

    If you want a specific tab other than the first tab to be open by default when the page first loads, you can add the parameter & value open=”yes” to the shortcode for that tab:


  • Icon

    The markup required to show an icon alongside a tab title can be added by using the icon attribute. Tabby responsive tabs does not add the icons files, you will also need to use a theme or plugin (such as the Tabby Responsive Tabs Customiser add-on) to add the icon files.


  • This adds a pseudo element before the tab table with the classes “fa” and “fa-cog”. Other icon font sets can be used if you ensure the CSS rules target the classes added by the plugin.

    The Tabby Responsive Tabs Customiser plugin can be used to add the Font Awesome files required to display the icons in the tab titles.

  • Controlling which Page Opens

    You can use a target URL parameter to set which tab will be open when the page initially loads. The value of this parameter is based on the tab title specified in the tabby shortcode, but formatted with punctuation & special characters removed and with dashes replacing the spaces.

    If you want to link to a Contacts page with a tab titled Phone Numbers open, the url you use to link to this page would look like:


    If you want a tab with the title ’email addresses’ to be open, the url would look like:


There is a fee associated with the Tabby Responsive Tabs Customiser plugin.
Visit CubeColour for additional details.

This concludes our guide of the Tabby Responsive Tabs plugin.


Leave a Reply

Your email address will not be published. Required fields are marked *

Send this to friend