Create jQuery tabs inside your posts, pages or post types using simple shortcodes inside the post editor.
Show off your post content inside stylish jQuery powered tabs using one of 24 different jQuery UI themes or include your own custom stylesheet.
The plugin provides various filters to aid users, they are as follows
put_decide_has_tabs
: (bool) true/false value that determines whether to run the tabs script(runs inside a filter on the_content
)put_theme_dir
: (string) passes the theme directory uriput_stylesheet
: (string) name of the stylesheet to use for tabs CSSput_skins
: (array) passes the array of skins available to the pluginput_stylesheet_uri
: (string) the full stylesheet uri used (easier hook for custom stylesheets)put_prev_text
: (string) the text used for previous tab navigation(text not shown by default)put_next_text
: (string) the text used for next tab navigation(text not shown by default)put_nav_class
: (string) the classes applied to the prev and next navigation(second arg indicates prev or next text)put_trailing_linebreak
: (bool) true/false value to determine whether or not to add a trailing <br />
(linebreak) after each tab setA couple of actions are also available for when you’d rather just turn off skins and enqueue your own stylesheet
put_enqueue_css
: runs on front facing pages with tab sets when the Disable skins is enabledput_admin_enqueue_css
: runs on the plugin settings page when the Disable skins is enabledput
(post-ui-tabs) folder to the /wp-content/plugins/
directoryClick 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).
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).
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).
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.
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.
Add the following to your theme’s functions.php file.
add_filter( 'put_nav_class', '__return_empty_array' );
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'; }
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.
wp_enqueue_style
on the put_enqueue_styles
action, ie. the regular WP enqueuing method.You can, simply place the following code into your theme’s functions.php
file or a plugin.
add_filter( 'put_trailing_linebreak', '__return_false' );
post-tabs-ui.js
+ some additional small adjustments<br />
after each tabset(can be removed using the new put_trailing_linebreak
filter)put_decide_has_tabs
and put_stylesheet_uri
. put_
prefix.has_tabs
variable to public