How to render bricks page content manually?

How To
1

In a similar way that Wordpress renders page content like this:

echo apply_filters( 'the_content', $post_content );

Is it possible to render Bricks page content via the Code block? What I want to do is essentially get the page content (created with Bricks) from the database, and render it inside the Bricks Builder.

Here’s how I can get the Bricks content:

$post_content = $wpdb->get_var( $wpdb->prepare(
"SELECT meta_value 
FROM wp_postmeta 
WHERE post_id = %d 
AND meta_key = '_bricks_page_content_2'",
$post_ID
));

In other words, I want to insert a Bricks “Template” into my page, but manually (not with Bricks’s in-build “Template” block).

I realise that I could just put the $post_id into bricks_template shortcode, but the $post_id comes from a table that does not belong to the same website. Thus I need to retrieve the data using $wpdb.

2

I’ve figured out that I could replace the $elements variable inside the render_shortcode function inside of includes/template.php with this:

		if(!isset($attributes['db'])) {
			$elements = get_post_meta( $template_id, BRICKS_DB_PAGE_CONTENT, true );
		} else {
			$custom_prefix = 'wp2k_';

			$get_data = $wpdb->get_var( $wpdb->prepare(
				"SELECT meta_value FROM {$custom_prefix}postmeta WHERE post_id = %d AND meta_key = '_bricks_page_content_2'",
				$template_id
			));

			$elements = unserialize($get_data);

		}

This does import the content, but doesn’t import any of the classes or styling of course, so it’s probably a lot more involved that I’d like. Unless anyone has an easier and better suggestion, I think this might be one for the archive.

3

are you inside a multisite environment?
if so, you probably testet out the render_shortcode function in combination with switch_to_blog()?

I didn’t quite get it to work back when I last tried, but you will get some things rendered (if I remember correctly). I might try again when i have the time and let you know.

4

Nope, it’s not multisite, but thanks :+1:

5

thank you very much for ur code. it really helped.
i made some changes. some times the page is made by Gutenberg and some times with bricks. so this code can tell:


function dynamic_page_content_shortcode($atts) {
    ob_start();
    ?>
    <div id="dynamic-content-container">
        <div class="loading-spinner" style="display: none;">
            <div class="spinner"></div>
        </div>
        <div id="page-content-area">
            <p>choose one item on the list</p>
        </div>
    </div>

    <script>
    jQuery(document).ready(function($) {
        // تابع برای بارگذاری محتوای صفحه
        function loadPageContent(pageId) {
            if (!pageId) return;
            
            $('.loading-spinner').show();
            $('#page-content-area').css('opacity', '0.5');
            
            $.ajax({
                url: '<?php echo admin_url('admin-ajax.php'); ?>',
                type: 'POST',
                data: {
                    action: 'load_page_content',
                    page_id: pageId,
                    security: '<?php echo wp_create_nonce('load_page_content_nonce'); ?>'
                },
                success: function(response) {
                    $('#page-content-area').html(response).css('opacity', '1');
                    $('.loading-spinner').hide();
                },
                error: function() {
                    $('#page-content-area').html('<p>خطا در بارگذاری محتوا. لطفاً دوباره تلاش کنید.</p>').css('opacity', '1');
                    $('.loading-spinner').hide();
                }
            });
        }
        
        $(document).on('click', '.page-list-item', function(e) {
            e.preventDefault();
            var pageId = $(this).data('page-id');
            $('.page-list-item').removeClass('active');
            $(this).addClass('active');
            loadPageContent(pageId);
        });
    });
    </script>
    
    <style>
    .loading-spinner { text-align: center; padding: 20px; }
    .spinner {
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;
        width: 30px; height: 30px;
        animation: spin 1s linear infinite;
        margin: 0 auto;
    }
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    #page-content-area { transition: opacity 0.3s; }
    </style>
    <?php
    return ob_get_clean();
}
add_shortcode('dynamic_page_content', 'dynamic_page_content_shortcode');

function load_page_content_ajax() {
    global $wpdb;
    check_ajax_referer('load_page_content_nonce', 'security');
    
    $page_id = isset($_POST['page_id']) ? intval($_POST['page_id']) : 0;
    
    if (!$page_id) {
        wp_send_json_error('not valid.');
        die();
    }
    
    ob_start();
    
    // loads the style
    $css_url = esc_url_raw("https://www.yourwebsite.com/wp-content/uploads/bricks/css/post-{$page_id}.min.css?ver=" . time());
    echo "<link rel='stylesheet' id='bricks-page-custom-css-{$page_id}' href='{$css_url}' type='text/css' media='all' />";
    
    //cheks if the content is bricks
    $bricks_content = $wpdb->get_var($wpdb->prepare(
        "SELECT meta_value FROM {$wpdb->prefix}postmeta WHERE post_id = %d AND meta_key = '_bricks_page_content_2'",
        $page_id
    ));
    
    if ($bricks_content && !empty($bricks_content)) {
        // bricks page
        $elements = maybe_unserialize($bricks_content);
        echo \Bricks\Frontend::render_data($elements, $page_id);
    } else {
        // gutenburg page
        $post = get_post($page_id);
        
        if ($post) {
            echo apply_filters('the_content', $post->post_content);
        } else {
            echo '<p>صفحه مورد نظر یافت نشد.</p>';
        }
    }
    
    die();
}

add_action('wp_ajax_load_page_content', 'load_page_content_ajax');
add_action('wp_ajax_nopriv_load_page_content', 'load_page_content_ajax');

so on my page i use this shortcode:
[dynamic_page_content]
and beside that i have a html list like this:

<ul class="page-list">
        <li><a href="#" class="page-list-item" data-page-id="4111">page one</a></li>
        <li><a href="#" class="page-list-item" data-page-id="4818">page two</a></li>
        <li><a href="#" class="page-list-item" data-page-id="5004">page three</a></li>
        <li><a href="#" class="page-list-item" data-page-id="1399">page four</a></li>
    </ul>

as you see the id of each page is mentioned in each line

to use this code u need to make the css codes external, so go to : bricks → settings → performance → CSS loading method
and then “external files” and then “regenerate css files”

1 Like