CODEWITHSUNDEEP
wordpressvisual-composer
Ryan
Ryan

Reputation: 75

Wordpress Visual Composer inside Shortcode won't acknowledge custom CSS

I am using a content block plugin which allows me to use content frequently as a shortcode. The content editor for the shortcode content blocks uses Visual Composer. When I use a created shortcode for a block on a page, most everything works fine except any custom css that is defined in the visual composer shortcode.

For example:

[vc_column_inner width="1/3" css=".vc_custom_1463660338922{background-image: url(/circlebg.png) !important;}”]

The custom css class is defined in the div created in the fronted source, but the definition does not appear in the header. This does work if I do this same process on the page itself without using a shortcode for the content. I believe this has something to do with functions.php. I've changed this function to the following (in bold), but still nothing is recognized :

if(!function_exists('qode_visual_composer_custom_shortcodce_css')){
function qode_visual_composer_custom_shortcodce_css(){
if(qode_visual_composer_installed()){

if(is_page() || is_single() || is_singular('portfolio_page') || is_singular('content_block')){
$shortcodes_custom_css = get_post_meta( qode_get_page_id(), '_wpb_shortcodes_custom_css', true );
if ( ! empty( $shortcodes_custom_css ) ) {
echo '<style type="text/css" data-type="vc_shortcodes-custom-css-'.qode_get_page_id().'">';
echo $shortcodes_custom_css;
echo '</style>';
}
$post_custom_css = get_post_meta( qode_get_page_id(), '_wpb_post_custom_css', true );
if ( ! empty( $post_custom_css ) ) {
echo '<style type="text/css" data-type="vc_custom-css-'.qode_get_page_id().'">';
echo $post_custom_css;
echo '</style>';
}
}
}
}
add_action('qode_visual_composer_custom_shortcodce_css', 'qode_visual_composer_custom_shortcodce_css');
}

Anyone come across this before?

Thank you!

​

Upvotes: 0

Views: 2100

Answers (2)

Mauro Altamirano
Mauro Altamirano

Reputation: 111

I solved this using the parseShortcodeCustomCss method of the visual_composer class, it's the one used by Visual Composer itself to include the styles in the header or footer.

My solution:

$shortcodeContent = '[vc_column_inner width="1/3" css=".vc_custom_1463660338922{background-image:url(/circlebg.png)!important;}”]';
$shortcodes_custom_css = visual_composer()->parseShortcodesCustomCss( $shortcodeContent );
if ( ! empty( $shortcodes_custom_css ) ) {
    $shortcodes_custom_css = strip_tags( $shortcodes_custom_css );
    $output .= '<style type="text/css" data-type="vc_shortcodes-custom-css">';
    $output .= $shortcodes_custom_css;
    $output .= '</style>';
    echo $output;
}
echo apply_filters( 'the_content', $shortcodeContent );

Upvotes: 2

ttn_
ttn_

Reputation: 346

You can try this code:

    Vc_Manager::getInstance()->vc()->addShortcodesCustomCss($page_id);
    $the_post = get_post($page_id);
    echo apply_filters('the_content', $the_post->post_content);

It works for me

Upvotes: 1

Related Questions