create tabs inside template

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Mark / t31os

    (@t31os_)

    11 years ago

    PUT is for creating tabs from content posted into the content editor, you can still do that whilst using the front end plugin(i briefly tested it to be sure and it works).

    I’ll provide a very basic example, but please do check out the jQuery documentation to.

    http://jqueryui.com/tabs/

    If you click the view source button on that page, you’ll see the basic markup required to build sets of tabs, here’s an example.

    Eg.

    <div id="my-wordpress-tabs">
	<ul>
		<li><a href="#my-wordpress-tabs-1">Tab 1</a></li>
		<li><a href="#my-wordpress-tabs-2">Tab 2</a></li>
		<li><a href="#my-wordpress-tabs-3">Tab 3</a></li>
	</ul>
	<div id="my-wordpress-tabs-1">
		<p>Tab 1 content</p>
	</div>
	<div id="my-wordpress-tabs-2">
		<p>Tab 2 content</p>
	</div>
	<div id="my-wordpress-tabs-3">
		<p>Tab 3 content</p>
	</div>
</div>

    Along with the basic markup you need to create a jQuery call to the tabs function to convert the HTML into jQuery tabs.

    In WordPress, we don’t just go plonking code into the head of the document though(like you see in the example of the jQuery page) and we usually use noconflict wrappers for jQuery, so i’d suggest the following for the script part.

    Create a .js file, give it an appropriate name such as mytabs.js (or whatever) and place the following in that file.

    jQuery(document).ready(function($){
	$("#my-wordpress-tabs").tabs();
});

    Then make an appropriate enqueue for that file for the pages you’ll be using your tabs.

    wp_enqueue_script(  'my-jquery-tabs', 'URL_TO_JS_FILE_HERE', array( 'jquery-ui-core', 'jquery-ui-tabs' ), false, false );

    http://codex.wordpress.org/Function_Reference/wp_enqueue_script

    In terms of editing the User Frontend markup to support a tabbed layout, i’ll have to ask that you direct your questions to the author(my plugin won’t help you with this and thus this question isn’t really about it and more so about creating jQuery tabs yourself). I do hope i’ve provided some information so you can work from though, so i wish you the best of luck creating your own custom tabs.

    baignoire

    (@baignoire)

    10 years, 6 months ago

    hi there,
    i’m very interested in having my wpuf form in separate tabs.
    @ahikmahin : did you succeed in doing it ? could you provide explanations/code sample ?
    raf

    baignoire

    (@baignoire)

    10 years, 6 months ago

    hi there,
    coming back to tell i managed to display a form (add+edit) in tabs using wp-ui : http://wordpress.org/plugins/wp-ui/
    here’s how i did for anyone around interested :

    1 : on the add / edit pages , just put the standard shortcode
    “[wpuf_form_formId]” and “[wpuf_edit_formId]”

    2 : in the form edit page :

    – add a custom html as a first form element. don’t give it any title and in the content, put :

    </div></li></ul>
<div id="wp-tabs-1" class="wp-tabs wpui-styles wpui-tabs-vertical" data-style="wpui-light">
<h3 class="wp-tab-title">Tab 1 title</h3>
<div class="wp-tab-content">
<div class="wp-tab-content-wrapper">
<ul class="wpuf-form"><li style="display: none"><div>

    – put then the form elements you want to show in the first tab content

    – to set the second tab, include in the form an html element with an empty tilte and as content :

    </div></li></ul></div></div>
<h3 class="wp-tab-title">Tab 2 title</h3> <div class="wp-tab-content"><div class="wp-tab-content-wrapper">
<ul class="wpuf-form"><li style="display: none"><div>

    – then put the form fields you want to have in the second tab content

    – repeat the two previous steps to include as many tabs as you wish.

    – the last form element is an html field, no title and as content :

    </div></li></ul></div></div>
</div>
<ul class="wpuf-form"><li style="display: none"><div>

    and there you go (at least with the theme i tried it, which is twentythirteen) !

    only drawback : if you have required fields that are not in the active tab, the form will not have any action on submit (as it is supposed to do, since required fields are not filled) BUT the errros messages will not be seen by users as the will popup in hidden tabs… 🙁

    hope it helps
    raf

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘create tabs inside template’ is closed to new replies.

Tags