Layotter Documentation

 Show menu

Options

Options allow you to customize individual rows, columns, elements and whole posts. This will be useful, for example, if an editor wants to highlight a single row by giving it a custom background color. In this example we'll create a row option that can be used to assign an arbitrary CSS class name to any row.

Similarly to creating a new element type, you'll first create a form using ACF and then write a Wordpress filter that uses form data to customize a row's HTML output.

1. Creating the form

First, create a new ACF field group with a text field called class.

Screenshot

Set the location options for the field group to "Use with Layotter" "is equal to" "Use for row options".

Screenshot

A new button with a cog icon will appear on all rows. Click this button to change a row's options.

Screenshot

2. Writing the filter

Based on the newly created form, write a filter to process the fields' values.

Filters hooked to layotter/view/row will take two parameters: the HTML of all the contained columns (which you're about to wrap with your row markup), and an array with row options. The filter function must return the row's HTML.

function custom_layotter_row_view($content, $options) {
    if ($options['class']) {
        return '<div class="row ' . $options['class'] . '">' . $content . '</div>';
    } else {
        return '<div class="row">' . $content . '</div>';
    }
}

add_filter('layotter/view/row', 'custom_layotter_row_view', 10, 2);

The same goes for columns, elements and posts

Options for columns, elements and posts work the same way as row options, but the respective filter functions' parameters vary. See detailed info for all view filters.

The difference between element options and regular form fields is that options can be applied to any and all elements, while regular fields are only available to one specific element type.

To create options of any type, simply take a pick in a field group's location options, then look for the new cog button in the drag-and-drop editor.

Screenshot