Enej Bajgorić

ctlt-dev

oltdev

To add tabs to you post or pages just add this shortcode:
<pre><code>[tabs]
[tab title="title1"] tab content 
tab content 
[/tab]
[tab title="title2"] 
another content tab 
[/tab]
[/tabs]
</code></pre>
Here are the some attributes that the shortcode also excepts 
// default attributes 
 [tabs collapsible=true selected=’0′ event=’click’ position=’top’ ] 
 [tab title=”title1″] 
 tab content 
 [/tab] 
 [tab title=”title2″] 
 another content tab 
 [/tab] 
 [/tabs]
<ul>
<li>collapsible = true or false – weather the tabs should be allowed to be collapsed – this doesn’t work with twitter bootstrap </li>
<li>selected = integer for example – what tab should be selected. 0 means the first tab. 1 means the second tab etc. </li>
<li>event = ‘click’ or ‘mouseover’ – does do you user need to click on the tab or just mouse over to get to the content. Tip: Don’t use mouseover if you are concerned with mobile. </li>
<li>position = ‘top’ , ‘bottom’ , ‘left’, ‘right’ on what side do you want the tabs to appear. See screenshots for an example. </li>
<li>vertical_tabs = true or false – depreciated is the same as position = left</li>
</ul>
<h3>Sample CSS</h3>
Want to style the tabs a different way.
Here is some sample css to get you started. 
Another place to look for it would be the http://jqueryui.com/themeroller/, 
The shortcode used the jQuery UI to generate the tabs unless you are using the twitter bootstrap framework. 
See the FAQ on how to deal with that case.
<pre><code>/* =tabs
-------------------------------------------------------------- */
.tabs-shortcode.ui-tabs {
 padding:.2em;
 zoom:1;
 clear:both;
 background:#FFF;
 padding:0;
 margin:0;
}

.tabs-shortcode.ui-tabs-nav {
 list-style:none!important;
 padding:.2em 0 0!important;
 margin: 0!important;
}
.tabs-shortcode .ui-tabs-nav:after{
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
}
* html .tabs-shortcode .ui-tabs-nav { zoom: 1; } /* IE6 */
*:first-child+html .tabs-shortcode .ui-tabs-nav { zoom: 1; } /* IE7 */

.tabs-shortcode .ui-tabs-nav li {
 position:relative;
 float:left;
 border:1px solid #CCC;
 background:#EEE;
 list-style:none!important;
 z-index: 100;
 padding:0;
}

.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
 background:#FFF;
 color:#111;
}

.tabs-shortcode .ui-tabs-nav li:before {
 content:"";
}

.tabs-shortcode .ui-tabs-nav li a {
 float:left;
 text-decoration:none;
 padding:2px 1em;
 color:#333;
 border:none!important;
}

.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-selected a,
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-state-processing a {
 cursor: default;
}

.tabs-shortcode .ui-tabs-nav li a,
.tabs-shortcode.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a,
.tabs-shortcode.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
 cursor:pointer;
}

.tabs-shortcode .ui-tabs-panel {
 display:block;
 border-width:0;
 background:none;
}

.tabs-shortcode .ui-tabs-hide {
 display:none!important;
}

.tabs-shortcode.ui-tabs-panel {
 clear:both;
}
/* Position Top and Bottom */
.tabs-shortcode-top .ui-tabs-nav,
.tabs-shortcode-bottom .ui-tabs-nav{
 margin-left:0!important;
}
.tabs-shortcode-top .ui-tabs-nav li,
.tabs-shortcode-bottom .ui-tabs-nav li{
 position:relative;
 float:left;
 position:relative;
 float:left;
}

/* Position Top */
.tabs-shortcode-top .ui-tabs-nav{
 border-bottom: 1px solid #CCC;
}
.tabs-shortcode-top .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode-top .ui-tabs-nav li.ui-tabs-selected {
 padding-bottom:1px!important;
 border-bottom:0;
 margin:1px .3em -1px 0!important;
}
.tabs-shortcode-top .ui-tabs-nav li {
 border-bottom-width:0!important;
 margin:1px .3em 0 0!important;
}

/* Position Bottom */
.tabs-shortcode-bottom .ui-tabs-nav{
 border-top: 1px solid #CCC;
}
.tabs-shortcode-bottom .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode-bottom .ui-tabs-nav li.ui-tabs-selected {
 padding-top:1px!important;
 border-top:0;
 margin:-1px .3em 1px 0!important;
}

.tabs-shortcode-bottom .ui-tabs-nav li {
 border-top-width:0!important;
 margin:0 .3em 1px 0!important; 
}


/* Position Left and Right */
.tabs-shortcode-left .ui-tabs-nav,
.tabs-shortcode-right .ui-tabs-nav{
 width: 150px;
 margin: 0!important;
}

.tabs-shortcode-left .ui-tabs-nav li,
.tabs-shortcode-left,
.tabs-shortcode-right .ui-tabs-nav li,
.tabs-shortcode-right{
 position: relative;
 overflow: hidden;
}
.tabs-shortcode-left .ui-tabs-nav li,
.tabs-shortcode-right .ui-tabs-nav li{
 margin:0 0 0.3em 0;
 width: 100%;
}
.tabs-shortcode-left .ui-tabs-nav li a,
.tabs-shortcode-right .ui-tabs-nav li a{
 width: 100%;
}
.tabs-shortcode-left .ui-tabs-panel,
.tabs-shortcode-right .ui-tabs-panel{
 margin-left: 165px;
}

/* Position Left */
.tabs-shortcode-left .ui-tabs-nav{
 border-right: 1px solid #CCC;
 padding: 0 1px 10px 0!important;
}
.tabs-shortcode-left .ui-tabs-nav,
.tabs-shortcode-left .ui-tabs-nav li{
 float: left;
}
.tabs-shortcode-left .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode-left .ui-tabs-nav li.ui-tabs-selected {
 padding-right:1px;
 border-right:0;
 margin:0 1px 0.3em 0;
}

/* Position Right */
.tabs-shortcode-right .ui-tabs-nav{
 border-left: 1px solid #CCC;
 padding: 0 0 10px 1px!important;
}
.tabs-shortcode-right .ui-tabs-nav,
.tabs-shortcode-right .ui-tabs-nav li{
 float: right;
}
.tabs-shortcode-right .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode-right .ui-tabs-nav li.ui-tabs-selected {
 padding-left:1px;
 border-left:0;
 margin:0 0 0.3em 1px;
}
</code></pre>

Tabs Shortcode

Lets you add tabs to your post and pages using a shortcode.

OTWthemes

Easily create different kinds of Tabs for your WordPress site, vertical or horizontal. Insert Tabs anywhere in your site – page/post editor, sidebars, template files. No coding is required. It is all done in a nice and easy interface.
Tabs Options
<ul>
<li>Number of Tabs</li>
<li>Style – Horizontal or Vertical</li>
<li>Tabs Title </li>
<li>Tab 1/2/../10 Title</li>
<li>Tab 1/2/../10 Icon</li>
<li>Tab 1/2/../10 Icon URL </li>
<li>Tab 1/2/../10 Content</li>
<li>Custom CSS Class</li>
</ul>
Insert Tabs Anywhere in your site
Basically Tabs can be inserted anywhere in your site
<ul>
<li>Page/post WYSIWYG editor by using the buttion in the editor</li>
<li>In sidebars by using the OTW Shortcode Widget</li>
<li>In template files by using the tab’s shortcode and WordPress do_shortcode function</li>
</ul>
Custom styling
If you need to further style a tab here are your options:
<ul>
<li>Each tab shortcode has it’s unique CSS class that can be used to style all tabs.</li>
<li>Create a new class for each instance of a tab shortcode in its interface so you can style it individually.</li>
</ul>
Localization/Internationalization
This plugin comes Localization/Internationalization ready. It is following WordPress I18n standards.
Full version of the plugin
<blockquote>
Upgrade to the Pro version of this plugin – the fastes way to build your WordPress based site including regular updates and premium support: 
 <a href="https://1.envato.market/c/1246358/275988/4415?subId1=cm&subId2=2020&subId3=https%3A%2F%2Fcodecanyon.net%2Fitem%2Fcontent-manager-for-wordpress%2F7431829&u=https%3A%2F%2Fcodecanyon.net%2Fitem%2Fcontent-manager-for-wordpress%2F7431829" rel="nofollow ugc">Content Manager</a> | <a href="http://otwthemes.com/demos/1ts/?item=Content%20Manager&utm_source=wp.org&utm_medium=page&utm_content=upgrade&utm_campaign=cml" rel="nofollow ugc">Demo site</a>
</blockquote>
<ul>
<li>Custom Responsive Layouts – Build in Seconds</li>
<li>Front-end Editor – Edit your layouts and content in the front-end of your site</li>
<li>40+ Shortcodes with add/edit Interface, Custom and Imported Shortcodes</li>
<li>Insert Shortcodes Anywhere – Layouts, Page Editor, Sidebars, Template files</li>
<li>Insert Sidebars Anywhere – Layouts, Page Editor, Template files</li>
<li>WordPress Widgets Anywhere – Layouts, Page Editor, Template files</li>
<li>Content Sidebars</li>
<li>Support and Updates</li>
<li>Zero Coding Required</li>
</ul>

Tabs Shortcode and Widget

Create Tabs. Nice and easy interface. Insert anywhere in your site - page/post editor, sidebars, template files.

Tabs Shortcode vs Tabs Shortcode and Widget