bricks/frontend/render_data Filter

One of the many useful filters in Bricks is bricks/frontend/render_data which allows us to modify the rendered content for different areas like header, content, and footer before it is displayed on the frontend.

This article provides examples that show how the Bricks’ render_data filter can be used to automatically

  • link all occurrences of the text ACF Pro in Bricks content
  • bold all occurrences of a specific string like Company Name Inc.

Before:

After:

Add the following in child theme‘s functions.php or a code snippets plugin:

<?php 

add_filter( 'bricks/frontend/render_data', function( $content, $post, $area ) {
    // if the area of the page is not the content, return the content as is
    if ( $area !== 'content' ) {
        return $content;
    }

    // Replace every occurrence of 'ACF Pro' string with '<a href="https://advancedcustomfields.com/pro">ACF Pro</a>' in the content
    $content = str_replace( 'ACF Pro', '<a href="https://advancedcustomfields.com/pro">ACF Pro</a>', $content );

    // Return modified content
    return $content;
}, 10, 3 );

Bold all instances of a string

Before:

After:

<?php 

add_filter( 'bricks/frontend/render_data', function( $content, $post, $area ) {
    // if the area of the page is not the content, return the content as is
    if ( $area !== 'content' ) {
        return $content;
    }

    // Bold every occurrence of 'Company Name Inc.' in the content
    $content = str_replace( 'Company Name Inc.', '<strong>Company Name Inc.</strong>', $content );

    // Return modified content
    return $content;
}, 10, 3 );
Instant access to 390+ Bricks code tutorials with BricksLabs Pro

4 comments

Leave your comment