Adds a set of horizontal tabs which changes to an accordion on narrow viewports

Tabs and accordion are created with jQuery

Supports multiple sets of tabs on same page

Uses Semantic header and Content markup

Aria attributes and roles aid screen reader accessibility

Tabs and content are accessible via keyboard

The Tabby Responsive Tabs plugin is designed to be an easy and lightweight way to add responsive tabs to your content. There is no admin panel and experienced developers should be able to easily customise how the tabs display on their site by replacing the built-in CSS rules with a customised version (see note below for more details of this).

Optional Add-ons

The Tabby Responsive Tabs Customiser add-on adds a settings panel with several parameters for customising your tabs. to provide the easiest way to customise the display of your tabs without editing any code. You can use the default tabby styles or one of the included one-click presets as a starting point for customisation. It also enables you to easily add icons to your tab titles.

The Tabby Link to Tab add-on provides a simple shortcode to create links to specific tabs which can appear anywhere on the same page as the tabgroup without the page needing to reload.

Usage:

There are two shortcodes which should both be used [tabby] and [tabbyending]

[tabby title="tabname"]

replace tabname with the name of your tab.

Add the tab content after the shortcode.

Add a [tabbyending] shortcode after the content of the last tab in a tabgroup.

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); ?>

Additional Shortcode attributes

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:

[tabby title="My Tab" open="yes"]

If you use the ‘open’ shortcode parameter in one of your tab shortcodes, ensure that you only add it to single tab as having more than one tab open within a tab group is not supported.

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:

[tabby title="My Tab" icon="cog"]

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.

Controlling which tab is open when linking to the page

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:

yoursite.com/contact/?target=phone-numbers

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

Professional Support

If you need professional plugin support from me, the plugin author, you can contact me at WordPress Canvas.

Plugin Development

If you’re a theme author, plugin author, or just a code hobbyist, you can follow the development of this plugin on it’s GitHub repository.

Donations

Thank you so much for even considering supporting my work. If you have benefited from my WordPress plugins, or are appreciative of my customer support, and feel led to send me a monetary donation, please follow the link here. I am truly thankful for your hard earned giving.

]]>http://wpplugindirectory.org/wordpress-canvas-shortcodes/feed/0WordPress Shortcodeshttp://wpplugindirectory.org/wordpress-shortcodes/
http://wpplugindirectory.org/wordpress-shortcodes/#respondSun, 16 Feb 2014 14:57:05 +0000http://wpplugindirectory.org/wordpress-shortcodes/WordPress Shortcodes is a free WordPress plugin that brings an amazing set of beautiful and useful elements to your site. The plugin comes bundled with the full set of elements, all absolutely free of charge.

Eager to get a functioning example of how the shortcodes elements look and feel?

Look at some basic example shortcodes on the Stripefolio demo site. Note that the demo site only presents a limited subset, the best way to test the full set is to install the plugin and try it yourself!

If you want to take it to the next level and hugely improve the appearance of the elements and make them look more professional, you might want to consider purchasing the SlickPanel skin.

There are many different kinds of elements that cover for all your requirements. These include functionality for User Interface creation, Layout management, Lists, Buttons, Message boxes, smart links to easily link contents on your site without using full URLs but with IDs or names and a bunch of other useful tools such as the ability of adding hidden content in posts/pages, useful for making notes or comments.

Just use the intuitive shortcode editor to create a message box, error box or warning message on your site. Or create multi-column layouts, a fancy button, a highly stylized link card, a list of items with icons (like a feature list), or combine multiple nested shortcodes to create for instance a list of links or a list of buttons and much more.

The shortcode editor presents a very intuitive and easy to use interface, with many built-in presets that make inserting many commonly needed default shortcodes in your posts/pages a breeze! If you want you can also get over 30+ extra useful amazing presets for covering almost all needs.

The plugin offers all common jQuery UI functionality as well like jQuery UI Accordions, JQuery UI Tabs, jQuery UI buttons and so on. The UI tabs provide many different features including full SEO compatible selection of active tab without need for JavaScript.

The plugin also offers conditional shortcodes that allow to render content only based on certain conditions, such as only if the user is logged in or if the user is an administrator, an editor, author or has a custom capability or if the current post is password protected.