Views 2.4 brings great looking front-end form elements for custom search and pagination, with improved GUI for inserting and editing elements. It also adds a grid generator to Toolset editors, which allows you to easily arrange View elements into columns.

Views Bootstrap output

All Views front-end form elements, like pagination and custom search, now default to using the Bootstrap markup and styling. However, this also works with themes not using Bootstrap, and if you prefer not to use it, you can select to do just that.

Front-end examples of the nice, out-of-the-box styling of custom search elements 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.

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 got revamped and will be using the same “look and feel” as all the other Views shortcodes.

Note that some related attributes are 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:

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 CSS class names.

What about the existing sites and Views?

For backward compatibility, all existing filter and extra elements (Submit, Reset buttons) will default to the Raw output mode. This mode is basically the same 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 preferred output style, which includes:

• Fully styled output, which produces HTML markup that is fully compatible with Bootstrap, 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.

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 the 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.
• 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.
• 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.

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 (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 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 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:

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.

Added the option to display the profile picture of the post author

The wpv-post-author shortcode now includes a new option to display the post author profile picture, with options to customize it (size, shape, alt text and default image when missing):

The new shortcode attributes are:

• The existing format attribute can now take the profile_picture value.
• profile-picture-size for the size, a number stating the size in pixels.
• profile-picture-shape for the shape, can be circle and square, defaults to circle. Includes a custom option in case you want to push your own custom CSS for this.
• profile-picture-alt for the alt attribute of the image HTML tag.
• profile-picture-default-url for the default image to use in case the current post author does not have any defined profile picture. Defaults to the one set in the WordPress settings.

Note that the wpv-user and wpv-current-user shortcodes also got this same kind of options.

Improved GUI for some shortcodes, by grouping attributes in the dialogs

When editing shortcode attributes using our GUI, sometimes two or more of those attributes are related to each other. Displaying them in a grouped way makes this relation much more visual.

In Views 2.4.0 we added a way to group such attributes together. For example, for the post featured image shortcode, we grouped the settings for custom size width and height, and for horizontal and vertical cropping:

Improved creation of Views sliders

When creating a View slider, we enable pagination with automatic AJAX transition for it. In this version, we went a little further and introduced two changes:

• The pagination settings will be set to display just one post per page, as that is the default for most sliders.
• The Limit & Offset section of the View will no longer be hidden by default: instead, it will be visible. It is fair and common that sliders do not include all the posts of a given post type.

Bugfixes

• Fixed a z-index problem with select2 instances on sorting settings in Views. When the content selection of the View is empty hence all settings should be blocked, the sorting settings were displaying a select2 dropdown in a way that was overriding the block.
• Fixed a z-index problem with select2 instances in the loop wizard for a View used as a layout cell. The select2 dropdown was being rendered behind the loop wizard dialog.
• Fixed the error messages on forms to manage the user password, as they were missing under some third party plugins combinations. We changed the error URL attribute for something else, because that seems to be a reserved word in WordPress.
• Fixed a compatibility problem with Visual Composer when used on a Content Template. In that case, some Visual Composer components, like the button one, could not properly set its URL attribute.
• Fixed an issue with notifications when a Content Template is assigned to the WooCommerce products single and archive pages.
• Fixed an issue in some query filters that included links to non existing documentation pages.
• Fixed an issue with the search in the Views, Content Templates and WordPress Archives backend listing pages. We normalized the method used to render the search box and manage the search term when submitted.
• Fixed an issue with the options frameworks integration, as sometimes the wpv-theme-option shortcode was not available in the Fields and Views dialog.