[FIXED] how to generate vc_shortcodes-custom-css? Visual Composer

Issue

A client of mine wants a "project of the month" feature on his Wordpress site. But with a archive page.

My idea was to create a custom post type and call it projects. In here the client can manage projects and make new ones.

With this piece of code i can take the content from the latest project post, and put that content on the main "project of the month" page, while all the past projects are on the archive page.

$latest_cpt = get_posts("post_type=projects&numberposts=1");
$my_postid = $latest_cpt[0]->ID; //This is page id or post id
$content_post = get_post($my_postid);
$content = $content_post->post_content;
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
echo $content;

This works ... but not really.

The project pages are build using visual composer. And some of the elements have background colors or padding. Visual composer gives these elements unique classes like

.vc_custom_1516702624245

And adds the custom style tag when the page loads. Something like this

<style type="text/css" data-type="vc_shortcodes-custom-css">
    .vc_custom_1516711125312 {
        padding-top: 75px !important;
        padding-bottom: 75px !important;
        background-color: #f3f5f6 !important;
    }

    .vc_custom_1516702624245 {
        background-color: #f3f5f6 !important;
    }

    .vc_custom_1516711013808 {
        margin-top: -106px !important;
    }

    .vc_custom_1516702490896 {
        padding-left: 50px !important;
    }

    .vc_custom_1516703325534 {
        margin-top: -15px !important;
    }

    .vc_custom_1516702744160 {
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
    }

    .vc_custom_1516702987431 {
        padding-right: 65px !important;
    }

    .vc_custom_1516709810401 {
        border-radius: 3px !important;
    }
</style>

The problem with my approach is that visual composer does not create the style tag for the post content that is being loaded.

So therefore a lot of minor styling details are lost.

Image: Page content on archive page (how it should look)

Image: Page content on "project of the month" page

TL:DR visual composer style not generating post_content

Solution

You can use part of the addShortcodesCustomCss function of Vc_base:

$shortcodes_custom_css = get_post_meta( $id, '_wpb_shortcodes_custom_css', true );
if ( ! empty( $shortcodes_custom_css ) ) {
    $shortcodes_custom_css = strip_tags( $shortcodes_custom_css );
    echo '<style type="text/css" data-type="vc_shortcodes-custom-css">';
    echo $shortcodes_custom_css;
    echo '</style>';
}

replacing $id with yours $my_postid and, if needed, the echo with $content .=

Answered By - Riccardo

Answer Checked By - Candace Johnson (PHPFixing Volunteer)