Posted on by

Using Field Group Tabs with a Custom Template

The Field Group Tabs add-on adds tabs to the single record display, record and signup forms when you add the tabs=true attribute to the shortcode. What that does is select a default tabbed template for the form, and loads the necessary javascript and CSS to show the tabs. To use a custom template with the Field Group Tabs add-on, you need to alter your custom template so that it loads the resources needed and adds the HTML to the template.

This feature as added to Field Groups Tabs as of version 1.6, so make sure you are using the latest version of Field Group Tabs.

Altering Your Custom Template to Show the Tabs

For this tutorial, we will be using a template for the record edit shortcode, but the procedure is the same for the signup form template.  It’s also the same for the single record template, although there is no submit button, so you can skip that part for the single record template.

The tabs add-on works by making two additions to the template. At the top, it adds some javascript, some CSS, and the tabs control html to the template. This is all added with a single function call. The other addition is the “next/submit” button near the bottom of the template.

At the Top of the Template

The tabs add-on uses this code to add the tab control and everything needed to make the tabs work:

<?php pdb_field_group_tabs( $this ) ?>

This is added just after the $this->print_form_head() function call, like this:

The Submit Button

To place the next/submit button, you must replace the default submit button with a function that shows either the next or submit button, depending on the plugin settings and which tab is active. This is the code that prints out the next/submit button:

<?php pdb_field_group_tabs_submit_button( $this ) ?>

The tricky thing is, this button has to go inside the group <fieldset> so that each tab has it’s own button. We also have to remove the original <fieldset> for the submit button, since we won’t need it anymore.

This is a section of the default bootstrap record template where the submit button is shown:

We want to eliminate the whole final <fieldset> and place our button inside the group fieldset, like this:

I hope that is clear, it’s a little complicated, I know.

Now, Using the Custom Template

Now, we have our custom template, you’ll need to upload it to the templates folder in your theme directory (or wherever you have your plugin templates). In the shortcode, make sure you have the tabs=true attribute as well as the template=custom attribute to select your template. The “custom” in that attribute is the name of your template, make sure it matches the name you used when you saved your template. This is all explained in the Using Custom Templates article. For example:

[pdb_record template=custom tabs=true]

Leave a Reply