Views 2.4 and CRED 1.9, now available as beta releases, produce all front-end form elements that are fully Bootstrap compatible. This means they look good out-of-the-box with basically any theme.

The very purpose of this release is to allow you to make CRED forms, Views filters, and pagination look great the moment you insert them into your content. It will save you from struggling with styling these elements, to come up with something usable.

We want you to have the simplest route possible to achieving good looking sites. This is why, after deep research and discussion, we decided to go with the Bootstrap markup.

We tested all of this meticulously with numerous themes and it simply looks great. This is true even for themes that don’t load Bootstrap CSS at all. Naturally, you can still customize these elements to your liking.

Let’s go over all of the new features and changes in this beta release.

CRED Bootstrap output

The biggest change in CRED is the way how forms are auto-generated. All fields are generated with a new output attribute and the value “bootstrap”. This makes the fields render with Bootstrap-compatible HTML markup and CSS classes on the front-end.

Auto-generated CRED form with Bootstrap compatibility added
Auto-generated CRED form with Bootstrap compatibility added

Let’s see how a CRED form with all the standard fields looks like on the front-end, with some popular themes.

Twenty Seventeen Divi Genesis (with a Benson child theme)

What about existing sites and forms?

The new CRED version is, naturally, completely backwards compatible, which means that after updating to this version, the existing sites and forms will be output the same as before.

This is provided by the new setting called Load CRED Legacy style sheets on front-end, which is automatically checked for users upgrading the existing CRED installation. This option is unchecked for users with new installations.

New CRED settings for selecting which stylesheets are loaded on the front-end
New CRED settings for selecting which stylesheets are loaded on the front-end

As you can see, you now also have the Do not load CRED style sheets on front-end option. When this option is selected, no CRED stylesheet is loaded on the front-end, neither the new or the legacy one.

Finally, we removed the Use bootstrap option so from now on CRED will always use Bootstrap markup when creating new forms.

Views Bootstrap output

As mentioned, all Views front-end form elements, like pagination and custom search, now default to using the Bootstrap markup and styling.

Let’s see the front-end examples with some popular themes.

Twenty Seventeen Avada Genesis Divi

New user interface controls for inserting elements into Views

We decided to rework the entire GUI and workflow, although the initial elements look the same. The Filter editor toolbar still has the same buttons, but clicking on them opens a set of different dialogs.

New filter

The new dialog to select the filter to insert follows the same structure as the existing Fields and Views dialog: each set of filters is grouped into their own section, and we have a live search input for finding specific items on-the-fly.

The new dialog for inserting custom search filters
The new dialog for inserting custom search filters

Once you select the filter that you want to include, a different dialog will open offering all (and only) the relevant options for that front-end filter. We are using the same GUI as for each of the shortcodes added using the Fields and Views dialog, so it should already be familiar.

Edit filter

We also replaced the dialogs to edit front-end filter shortcodes with the same ones you get when creating the front-end filters, but populated with the values that the shortcodes are holding.

This should help in making the editing experience easier. Note that this will open the door, in the future, for editing any Views shortcode used inside a syntax highlighting editor.

Submit, Reset, Spinner

Likewise, the dialogs for inserting Submit, Reset, and Spinner controls to the form also got revamped and will be using the same “look and feel” as all the other Views shortcodes.

Note that some related attributes get grouped and that placing the cursor over one of the resulting shortcodes and clicking the Edit filter toolbar button will let you edit those elements directly.

New options for the output

All form dialogs include a new set of settings for the frontend output:

The new option to select the output style
The new option to select the output style

By default, the selected output style is Fully styled output. This setting produces HTML that is fully compatible with Bootstrap, while also looking good in the majority of the themes that we tested, out of the box.

This means that some filters might get a whole HTML structure around the shortcodes, while some other elements like the Submit button shortcode will only enforce some given classnames.

What about the existing sites and Views?

For backwards compatibility, all existing filter and extra elements (Submit, Reset buttons) will default to the Raw output mode. This mode basically means the output that Views used to have until now. For newly added filters or extra elements, the default option will be Fully styled output.

All in all, this means that existing sites are not changing, editing existing items should keep the settings that you do not change, and new items will get fully styled by default unless you change it when inserting them.

Bootstrap compatible output for pagination shortcodes

Views pagination controls changed to support Bootstrap compatible output as well. We added a new section to the pagination controls dialog that enables the selection of the prefered output style, which include:

  • Fully styled output, which produces HTML markup that is fully compatible with Bootstap, giving a nice looking style for the majority of the Bootstrap compatible themes.
  • Raw output, which produces the output that Views used to have until now, by retaining full backward compatibility.
New options for selecting the pagination output style
New options for selecting the pagination output style

In combination with the selected Fully styled output, all the pagination controls options produce Bootstrap compatible markup either by directly injecting the proper HTML markup and CSS classes around the shortcodes or by adding specific arguments to the shortcodes that produce the Bootstrap ready output using code, or by a combination of both.

This means that:

  • Previous and Next page controls follow the first method, thus it encloses the shortcodes around proper HTML markup which is Bootstrap compatible. The result looks like the following:
    <ul class="pagination">
        <li class="page-item">
    		[wpv-pager-prev-page]
    			[wpml-string context="wpv-views"]Previous[/wpml-string]
    		[/wpv-pager-prev-page]
    	</li>
        <li class="page-item">
    		[wpv-pager-next-page]
    			[wpml-string context="wpv-views"]Next[/wpml-string]
    		[/wpv-pager-next-page]
    	</li>
    </ul>
  • Navigation controls using links, on the other side, are using the second method with the extra argument. If you add an output=”bootstrap” attribute to the shortcode, it will produce the proper HTML markup and also include the right class names for the Bootstrap compatible output.
  • Navigation controls using dots, followed the second method with the extra argument as well. The shortcode was simplified even more, containing only the output=”bootstrap” attribute, the links_type=”dots” attribute and the dots_size=”xs” attribute. The latter attribute can also be completely omitted or take values “sm”, “lg”, and “xl”  for different dot sizes.
  • Finally, Navigation controls using a dropdown, followed the case of the combination of the two methods, with both adding proper HTML markup around the shortcode while also adding an extra argument to the shortcode itself. The result looks like the following:
    Dropdown navigation controls
    <div class="form-inline">
    	<div class="form-group">
    		<label>[wpml-string context="wpv-views"]Go to page[/wpml-string]</label>
    		[wpv-pager-nav-dropdown output="bootstrap"]
    	</div>
    </div>

For the sake of Bootstrap compatible output, the Navigation controls using links also got a few extra options that are available for both Fully styled and Raw output, which include:

  • Option to Add Previous/Next page controls with the additional option to Include the Previous/Next links on the first and the last pages.
  • Option to edit the Previous and Next link text, which also allows those texts to be translatable using WPML.
New pagination controls options
New pagination controls options

New (Bootstrap) Grid row generator button for selected Toolset editors

So far, whenever you wanted to position the elements inside your CRED forms and Views, you had to resort to creating custom HTML structure and CSS styling.

We wanted to help and simplify this, which is why we added the option that allows you to easily generate Grid rows based on Bootstrap. Again, we chose Bootstrap because of its clean output and the fact that it works great with virtually any theme and setup.

No more need to bother writing custom div tags that you need to float, clear and whatnot. Simply click the Grid button, select a pre-defined grid structure and click to insert it.

The following image displays how you can easily group CRED form fields into nice grids, to improve the usability and visual appeal of your front-end forms.

CRED form fields easily arranged in a 3-column grid
CRED form fields easily arranged in a 3-column grid

The new Grid button is available in selected Toolset editors, which include:

  • Editors in Views, Content Templates and WordPress Archives edit pages (Filter editor, Loop output editor, combined editor, editors for inline Content Templates, content editor), while edited by themselves or as a Layouts cell.
  • Main form editors in CRED post forms and CRED user forms edit pages, while edited by themselves or as a Layouts cell. Note that this does not include notifications or any other editor: just the main form one.
  • Layouts Visual Editor cell, when in HTML mode – as the Visual mode can not work with HTML structures like the ones this produces.
The new Grid row generator button
The new Grid row generator button

The button will appear in the same location as the Fields and Views one, and when clicked a dialog will offer to insert some predefined Bootstrap row HTML structures:

Pre-defined Bootstrap row structures to choose from
Pre-defined Bootstrap row structures to choose from

The result is an HTML structure like this one:

Pre-defined Bootstrap row
<div class="row">
	<div class="col-sm-6">Cell 1</div>
	<div class="col-sm-6">Cell 2</div>
</div>

New filter shortcodes

Besides Bootstrap compatibility, we also added some new filter shortcodes and improvements.

wpv-control-postmeta

This shortcode will be used to render any frontend filter by a post custom field.

wpv-control-taxonomy

This shortcode will be used to render any frontend filter by a post taxonomy.

wpv-control-post-relationship and wpv-control-post-ancestor

Those new shortcodes match exactly the old wpv-control-set and wpv-control-item, and can take the same exact attributes.

We created them because of naming consistency, and the only thing we added is the output attribute to the wpv-control-post-ancestor shortcode, which defaults also to bootstrap.

Things that will go into the final version, not included in the beta

  • Fix a z-index problem with select2 instances on sorting settings in Views when they should be blocked.
  • Add a control to the Filter editor about creating Bootstrap inline forms.

Download and try

So, it’s a beta! The best way to test Views 2.4 and CRED 1.9 Beta1 is to create a new test site. Log in to your Toolset account, click on Downloads and then switch Select plugins (on the top-left of the Downloads page) to Beta.

Please feel free to test these betas with any theme out there, we would really like to hear how it is working out.

Feedback?

If you see any display issues with the new Bootstrap-based styling, please let us know, we want to address them and there is still enough time to do this before the official release.

Also, let us know if you like something or don’t like something. The point of an early beta release is to get your feedback and implement the necessary improvements and changes accordingly.