WordPress.org

Ready to get started?Download WordPress

Plugin Directory

Post UI Tabs

Create jQuery tabs inside your posts, pages or post types using simple shortcodes inside the post editor.

So how do i create tabs?

Click one of the simple to use tinymce buttons provided by PUT in the post editor, quick tags are also available in the text editor.

or

Use the following format to write them directly into the post editor.

[tab name="Your tab name 1"]Your tab content[/tab] 
[tab name="Your tab name 2"]Your tab content[/tab]
[tab name="Your tab name 3"]Your tab content[/tab]
[end_tabset]

NOTE: It is necessary for all tab sets end with the [end_tabset] shortcode, the tabs will not appear without this shortcode.
Please be aware that tab shortcodes can not be placed on the same line, this is a limitation of shortcode functionality in WordPress(and i do not wish to bloat this plugin with extra code to work around it).

Can i use HTML inside the tabs?

You may use any HTML the WordPress content editor usually allows inside the tab content, but not inside the tab names(which are sanitized seperately).

Can i use tabs in pages?

The plugin is not restricted to a particular kind of content, so yes pages, posts or custom post types(or at least any type that supports using the content editor).

Can i use other shortcodes inside the tab content?

Yes you should be able to, it has not been tested, but if you have any problems feel free to start a support topic right here in the WordPress.org forums.

Why do the tabs not look the same when i view them on the front facing side of my site?

It is possible your theme's stylesheet is applying CSS to some of the tabs elements, please feel free to start a support topic if you need help making adjustments.

How can i remove the UI classes from the next and previous links?

Add the following to your theme's functions.php file.

add_filter( 'put_nav_class', '__return_empty_array' );

When using text nav links how i can change the link text?

You can modify the previous and next link text using the following in your theme's functions.php file.

// Remove the UI classes(used by default to display nav icons)
add_filter( 'put_nav_class', '__return_empty_array' );

// Hook callback functions to the filters
add_filter( 'put_next_text', 'put_nav_next_text' );
add_filter( 'put_prev_text', 'put_nav_prev_text' );

// Callback to change the 'Next' text
function put_nav_next_text() { return 'Your next text'; }

// Callback to change the 'Previous' text
function put_nav_prev_text() { return 'Your previous text'; }

How do i include my own CSS in place of one of the jQuery UI themes?

Method one:
Using a stylesheet in your theme's directory(will work for child themes to)

add_filter( 'put_stylesheet_uri', 'my_custom_put_stylesheet' );

function my_custom_put_stylesheet( $uri ) {
    return get_stylesheet_directory_uri() . '/mycustom.css';
}

Method two:
Adding a filter from inside your own plugin file

add_filter( 'put_stylesheet_uri', 'my_plugin_put_stylesheet' );

function my_plugin_put_stylesheet( $uri ) {
    
    // If the stylesheet is in the plugin's main directory
    
    return plugins_url( '', __FILE__ ) . '/mycustom.css';
    // Eg. http://www.example.com/wp-content/plugins/your-plugin/mycustom.css
    
    
    // If the stylesheet is in a subdirectory of the plugin
    
    return plugins_url( 'dir', __FILE__ ) . '/mycustom.css';
    // Eg. http://www.example.com/wp-content/plugins/your-plugin/dir/mycustom.css
}

Method three:
Check the Disable skins option on the Post UI Tabs settings page and do either of the following.

  • Add your own CSS to your theme's stylesheet(typically style.css).
  • Call wp_enqueue_style on the put_enqueue_styles action, ie. the regular WP enqueuing method.

Can i remove the linebreak that Post UI Tabs after each tab set?

You can, simply place the following code into your theme's functions.php file or a plugin.

add_filter( 'put_trailing_linebreak', '__return_false' );

Requires: 3.1.0 or higher
Compatible up to: 3.6.1
Last Updated: 2013-4-30
Downloads: 38,467

Ratings

4 stars
4.7 out of 5 stars

Support

1 of 5 support threads in the last two months have been resolved.

Got something to say? Need help?

Compatibility

+
=
Not enough data

1 person says it works.
0 people say it's broken.

100,1,1 33,3,1
100,1,1
75,4,3
0,1,0
100,1,1
0,1,0 100,2,2
0,1,0 100,1,1
50,8,4
100,2,2
100,1,1
33,3,1 0,1,0
0,2,0
67,3,2 0,3,0
100,3,3
100,1,1
0,1,0
100,1,1
67,3,2
100,1,1
100,1,1
100,1,1