View filters

View filters can be used to customize every bit of HTML that your site's visitors will ever see. They are also used to process options for your posts, rows, columns and elements.

It's recommended to read the introduction to options first.

layotter/view/post

The layotter/view/post filter is applied as a wrapper to the whole post, meaning the complete HTML code with rows, columns and elements will be run through this filter.

Options are received as an array where the keys are the field names that you've defined in the ACF field group, and the values are the contents of those fields.

// create a function that receives a post's HTML content and options
function custom_post_view($content, $options) {

    // if the apply_special_wrapper option was enabled for this post, wrap it in a special container
    if ($options['apply_special_wrapper']) {
        $content = '<div id="special-post-wrapper">' . $content . '</div>';
    }

    // return processed HTML
    return $content;
}

// hook the function to layotter/view/post
add_filter('layotter/view/post', 'custom_post_view', 10, 2);

Keys for all options fields will always be present (even if they're empty), so you won't have to run them through isset().

layotter/view/row

The layotter/view/row filter is applied as a wrapper to all rows. The options of the containing post are provided as an additional parameter.

// create a function that receives a rows's HTML content and options along with the parent post's options
function custom_row_view($content, $options, $post_options) {

    // if the apply_special_wrapper setting was enabled for this row, wrap it with a special CSS class
    if ($options['apply_special_class']) {
        $content = '<div class="row with-a-special-class">' . $content . '</div>';
    } else {
        $content = '<div class="row">' . $content . '</div>';
    }

    // return processed HTML
    return $content;
}

// hook the function to layotter/view/row
add_filter('layotter/view/row', 'custom_row_view', 10, 3);

Keys for all options fields will always be present (even if they're empty), so you won't have to run them through isset().

layotter/view/column

The layotter/view/column filter is applied as a wrapper to all columns. Additional parameters are the CSS class defined in the settings for the width of this column, as well as the options of the containing row and post.

// create a function that receives a columns's HTML content and options along with the parent row's and post's options
function custom_column_view($content, $class, $options, $row_options, $post_options) {

    // if the apply_special_wrapper setting was enabled for this column, wrap it with a special CSS class
    if ($options['apply_special_class']) {
        $content = '<div class="column with-a-special-class ' . $class . '">' . $content . '</div>';
    } else {
        $content = '<div class="column ' . $class . '">' . $content . '</div>';
    }

    // return processed HTML
    return $content;
}

// hook the function to layotter/view/column
add_filter('layotter/view/column', 'custom_column_view', 10, 5);

Keys for all options fields will always be present (even if they're empty), so you won't have to run them through isset().

layotter/view/element

The layotter/view/element filter is applied as a wrapper to all elements. Additional parameters are the options of the containing column, row and post.

// create a function that receives a columns's HTML content and options along with the parent row's and post's options
function custom_element_view($content, $options, $column_options, $row_options, $post_options) {

    // if the apply_wrapper setting was enabled for this element, wrap it with a special wrapper element
    if ($options['apply_wrapper']) {
        $content = '<div class="element-wrapper">' . $content . '</div>';
    }

    // return processed HTML
    return $content;
}

// hook the function to layotter/view/element
add_filter('layotter/view/element', 'custom_element_view', 10, 5);

Keys for all options fields will always be present (even if they're empty), so you won't have to run them through isset().