Tabs Shortcodes wordpress plugin resources analysis
| Download This Plugin | |
| Download Elegant Themes | |
| Name | Tabs Shortcodes |
| Version | 1.2 |
| Author | Phil Buchanan |
| Rating | 78 |
| Last updated | 2015-01-16 06:28:00 |
| Downloads |
4047
|
| Download Plugins Speed Test plugin for Wordpress | |
Home page
Delta: 0%
Post page
Delta: 0%
Home page PageSpeed score has been degraded by 0%, while Post page PageSpeed score has been degraded by 0%
Tabs Shortcodes plugin added 4 bytes of resources to the Home page and 27 bytes of resources to the sample Post page.
Tabs Shortcodes plugin added 0 new host(s) to the Home page and 0 new host(s) to the sample Post page.
Great! Tabs Shortcodes plugin ads no tables to your Wordpress blog database.Adds a few shortcodes to allow for tabbed content.
IMPORTANT: If you are not comfortable using WordPress shortcodes, this plugin may not be for you. Additionally, you must be able to edit your themes main stylesheet in order to add the necessary CSS.
Features
- Adds two shortcodes for adding a tabbed interface to your site
- Select a specific tab by URL
- No default CSS added (you will need to add your own)
- Only adds JavaScript on pages that use the shortcodes (and doesn't require jQuery)
The Shortcodes
The two shortcodes that are added are:
[tabs]and
[tab title=""]Basic Usage Example
[tabs]
[tab title="First Tab"]Content for tab one goes here.[/tab]
[tab title="Second Tab"]Content for tab two goes here.[/tab]
[tab title="Third Tab"]Content for tab three goes here.[/tab]
[/tabs]
This will output the following HTML:
<ul class="tabs">
<li><a href="#tab-1" class="active">First Tab</a></li>
<li><a href="#tab-2">Second Tab</a></li>
<li><a href="#tab-3">Third Tab</a></li>
</ul>
<section id="tab-1" class="tab active">Content for tab one goes here.</section>
<section id="tab-2" class="tab">Content for tab two goes here.</section>
<section id="tab-3" class="tab">Content for tab three goes here.</section>
Settings
There are no settings for the plugin. The only additional setup you will need to do is add some css to style the tabs however you'd like. Adding the CSS is very important as the tabs will not display as tabs until you do so.
Selecting a Tab by Default
You can select a tab by default by added the tab number as an option in the opening [tabs] shortcode like this:
[tabs open="2"]This will open the second tab when the page loads.
Selecting a Tab by URL
You can select a tab by default using a hash in the URL. Simply add #tab-1 after the trailing / of the URL to select tab number 1. Replace the number with the tab you'd like to select.
This example URL will select tab number 3:
http://domain.com/your-page/#tab-3
