Visual Composer not showing specific page styles

Question

When I view regular page from visual composer, it works fine like this:

http://vrshealth.com/qc2

Margins, backgrounds, etc are all working.

I needed to make a custom post type "quality-check" and am using archive-quality-check.php to display this and the vc-custom-xxxx styles are not loading for some reason:

http://dev-vrshealth.pantheonsite.io/quality-check/

I did some research and the only thing I could find is that page-specific VC styles don't work with Ajax-loaded pages. But it is not loaded through ajax.

Here is the relevant code from archive-quality-check.php which displays if you haven't already chosen a product lot # to display:

  <?php if ($_SERVER['REQUEST_METHOD'] != 'POST'): ?>

    <div class="col-xs-12 col-md-12" id="page-content">
    <?php
        $post_id4098 = get_post(4098);
        $content = $post_id4098->post_content;
        $content = apply_filters('the_content', $content);
        $content = str_replace(']]>', ']]>', $content);
        WPBMap::addAllMappedShortcodes();
        echo do_shortcode($content);
    ?>
    </div>

I feel like I must be missing something here, like a function to output metadata or some type of custom css, but I can't find any documentation which explains how.

Answer 1

Had the same problem. Just insert this before echoing content.

get_post_meta( $id, '_wpb_shortcodes_custom_css', true  )

Worked for me on latest WP and VC versions.

Answer 2

The answer that Laurent gave worked great for me! However I would suggest creating a function for it in your functions.php file. Maybe something like this:

  function vc_custom_css($id) {
        $shortcodes_custom_css = get_post_meta( $id, '_wpb_shortcodes_custom_css', true );
        if ( ! empty( $shortcodes_custom_css ) ) {
            echo '<style type="text/css">';
            echo $shortcodes_custom_css;
            echo '</style>';
        }
    }

Then you can just use vc_custom_css($yourPostID); whenever it is required.

Answer 3

Hi I had the same issues, so I have searched in the pluggin, and finaly this works for me :

$vcM = Vc_Manager::getInstance();
$vc = $vcM->vc();
$vc->addShortcodesCustomCss($pop_up_id);

Answer 4

The issue with vc-custom-xxxx styles described in this topic happening to me quite frequently, with various WordPress Themes.

I have tried an approach with function from the second answer. However there is still the issue, when loading page preview via "Preview changes" button. The style' meta data does not updated unless you manually re-save the page before viewing the preview.

The most correct answer was given by Pierre Mar, but I'd like to put a small note on it. You need to replace $pop_up_id with your current post id.

The final function would look like:

function vc_echo_custom_css($post_id) {
     $vcM = Vc_Manager::getInstance();
     $vc = $vcM->vc();
     $vc->addShortcodesCustomCss($post_id);
}

Include it in your Child's theme functions.php file, and then you can call it from any template like:

vc_echo_custom_css(4098);