Every shortcode the Participants Database uses has its own template. For the main shortcodes, there are several built-in templates that you can choose from.
These templates are not meant to be finished designs, but are simply different HTML structures that you can use as starting points. By adding your own CSS rules, you can get the final display appearance you want for your site. “Responsive” type templates will almost always require custom CSS to match the layout of your site or provide the best mobile device experience.
For some templates, you can use the “class” attribute to set several variations of the template.
All of these templates can be used as starting points to build your own custom templates, which is pretty easy, but it does require a working knowledge of HTML and php.
Selecting Templates
To select the template that a shortcode uses, add the “template” attribute to the shortcode, like this:
[pdb_list template=bootstrap ]
List Shortcode Templates
The list shortcode has 4 built-in templates to choose from.
- default – shows the list in a standard WordPress table. The number of columns is determined by the number of fields you have set up to show in the list.
- bootstrap – shows the list of records in a table, but with standard “bootstrap” formatting. Best used with themes based on Bootstrap.
- responsive – a template designed for responsive displays, meaning it tries to look good on a mobile display. Instead of using a table, the records are shown each as their own block of field values. This is so the display can “collapse” when viewed on a small screen.
- flexbox – this template uses the powerful Flexbox layout system implemented in modern browsers. This one is fairly technical to use, but it provides a lot of possibilities.
Single Record Shortcode Templates
There are 5 templates for the single record shortcode, 3 for showing the whole record and 2 special-purpose templates for showing a single value.
- default – uses a “DL” list HTML pattern to show the record values with field titles.
- bootstrap – uses a responsive “DL” list with standard bootstrap classes to work seamlessly with your bootstrap-based WP theme.
- flexbox – uses the powerful CSS3 flexbox system to present a responsive display for a record.
- single-value – special purpose template for using the single record shortcode inline to show a single value.
- bare-value – another special purpose template for showing a field value with no HTML.
Use of the last two templates is explained below.
Signup Form Shortcode Templates
The signup shortcode has two templates to choose from:
- default – a table-based layout
- bootstrap – a responsive layout using the bootstrap theme
Record Edit Form Shortcode Templates
The pdb_record shortcode has 3 built-in templates available:
- default – a table-based display where each row is a single field
- bootstrap – a responsive display based on the bootstrap theme
- tbody – another table-based theme that uses the tbody tag to present the field groups
Advanced Applications
Template Class Variations
Several templates are designed to be changed in how they work based on a classname. The “class” attribute of the shortcode can be used to add a classname (CSS class) to the outer wrapper of the shortcode display. These templates will change their display based on a classname.
For example, to set the template to hide the field titles, you would use the “hide-titles” class, like this:
[pdb_list class="hide-titles"]
Of course, this attribute can be combined with any other shortcode attributes you need to use. You can also use multiple classnames, for example:
[pdb_list class="hide-titles hide-blank"]
Which would provide both classes. Note that the classnames must be separated by a space character, and the value of the attribute must be wrapped in quotes.
Note: custom templates may not work as expected when using these additional classes.
List Template Class Variations
For the templates used in displaying the list, there are three class variations you can use:
- hide-titles – hides all the field titles
- hide-blank – hides fields that have no value
- flex-column – when using the flexbox template, this causes the fields to line up as columns instead of rows
Single Record Template Class Variations
For the single record display template, you can use the following class variations:
- hide-titles – hides all the field titles
- hide-blank – hides fields that have no value
- hide-empty-group – hides the entire group if the fields in the group are all empty
- show-blank – for templates that hide empty fields by default, this class will make them visible
- flex-row – when using the flexbox template, this causes the fields to line up as rows instead of columns, which is the default
Using Single Value Templates
The single value templates for the single record shortcode require some special setup to work properly.
First, you must tell it which field you want it to show, and you do this with the “fields” attribute. For example, to show the first name, you would use a shortcode like this:
[pdb_single template=single-value fields=first_name]
Determining Which Record the Value is From
If the single record shortcode is on a page where a single shortcode would normally work, any additional single shortcodes on that page will use the same record to show a value. This would include the single record page when accessed using the single record link. Also the signup thanks page, where a single record shortcode can be used to show values from the newly-created record.
For other pages, it will be necessary to to somehow tell the shortcode which record to use. If you can include the record id in the URL (such as would be seen in a single record link), that will work. Other ways to tell the shortcode which record to use are more complicated and would require either some inline php code or the use of a custom shortcode.
To tell the shortcode directly what record to use, use the “record_id” attribute, for example:
[pdb_single template=single-value fields=first_name record_id=123]
You can do that in your php code by using a do_shortcode call, filling in the record ID with your code.