How to render bricks page content manually?

How To
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