Firstly we would like to thank STRAK for providing this snippet!

Styling your article section is an important part of building your online brand. WPBakery is a powerful page builder plugin for WordPress that allows you to create responsive web pages. In this article, we will walk you through the steps of setting up and configuring WPbakery for StoryChief so you can start creating your website right away.

Start configuring the WPBakery plugin

After installing our WordPress plugin you can add the following snippet to your theme function.
This function will transfer the story content to 2 WPBakery blocks. Why 2 blocks? WPBakery "vc_column_text" blocks remove javascript so we need to extract the javascript and place it in a second WPBakery "vc_raw_js" block. This is how it's done:

function custom_storychief_after_publish_action($story) {
    $post_id = $story['external_id'];
    $post_content = $story['content'];

    $post_content_without_javascript = preg_replace('/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/i', ' ', $post_content);

    // Add $post_content without javascript to vc_column_text
    $post_content = '[vc_section][vc_row][vc_column][vc_column_text]' . $post_content_without_javascript . '[/vc_column_text]';
    // Add javascript to vc_raw_js
    preg_match_all('/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/i', $post_content, $matches);
    if (isset($matches[0])) {
        foreach ($matches[0] as $key => $match) {
            $post_content .= '[vc_raw_js]' . base64_encode($match) . '[/vc_raw_js]';
        }
    }
    // Close VC column
    $post_content .= '[/vc_column][/vc_row][/vc_section]';

    //update post
    $new_post = array(
        'ID' => $post_id,
        'post_content' => $post_content,
    );

     // disable sanitation
    kses_remove_filters();
    // update post
    wp_update_post($new_post);
    // enable sanitation
    kses_init_filters();   
}

add_action('storychief_after_publish_action', 'custom_storychief_after_publish_action', 1);

Start configuring the WPBakery plugin

📚 Next steps