DK PDF and WPBakery Visual Composer Version 4.12.1

Hi telemarwa,

I tried but due on how VC outputs the content, it’s not possible. DK PDF uses standard WordPress get_content() function, but what you get in VC is a bunch of shortcodes in raw format, not the output of the shortcode itself.

DK PDF is not compatible with Visual Composer. A plugin that I tested and works like a charm with DK PDF is Beaver Builder https://www.ads-software.com/plugins/beaver-builder-lite-version/

Thanks,
Emili

Hello telemarwa,

I solve this issue. You need to replace the_content(); below code in ‘dkpdf-index.php’ file in plugin ‘template’ folder.

File path : plugins/dk-pdf/templates/dkpdf-index.php

Code:

<?php 
 WPBMap::addAllMappedShortcodes();
 echo apply_filters('the_content', $post->post_content);
?>

• This reply was modified 7 years, 6 months ago by Anshul Gangrade.
• This reply was modified 7 years, 6 months ago by Anshul Gangrade.

Thank you very much for your help! Now it works! ??

Thanks worked for me, too. I only need the shortcode to add the button to where the page is still white. Now it is somehow in the black footer and the pdf has a black background color. I am using VC

Thanks for the fix @anshuln90

All my VC layouts however were collapsed into a single column like viewing on mobile b/c mPDF doesn’t render styles in @media it seems. So after hours of testing I added the following styles to the PDF CSS which seem to be working so far:

/* Visual Composer Styles */
.container-full {
  width: 100%;
}
.container,.container-full {
  margin: 0px 0px 0px 0px !important;
  padding: 0px !important;
}
.vc_column-inner {
    padding: 0 15px 0 15px;
}

.vc_col-lg-1,.vc_col-lg-10,.vc_col-lg-11,.vc_col-lg-12,.vc_col-lg-2,.vc_col-lg-3,.vc_col-lg-4,.vc_col-lg-5,.vc_col-lg-6,.vc_col-lg-7,.vc_col-lg-8,.vc_col-lg-9,.vc_col-md-1,.vc_col-md-10,.vc_col-md-11,.vc_col-md-12,.vc_col-md-2,.vc_col-md-3,.vc_col-md-4,.vc_col-md-5,.vc_col-md-6,.vc_col-md-7,.vc_col-md-8,.vc_col-md-9,.vc_col-sm-1,.vc_col-sm-10,.vc_col-sm-11,.vc_col-sm-12,.vc_col-sm-2,.vc_col-sm-3,.vc_col-sm-4,.vc_col-sm-5,.vc_col-sm-6,.vc_col-sm-7,.vc_col-sm-8,.vc_col-sm-9,.vc_col-xs-1,.vc_col-xs-10,.vc_col-xs-11,
.vc_col-xs-12,.vc_col-xs-2,.vc_col-xs-3,.vc_col-xs-4,.vc_col-xs-5,.vc_col-xs-6,.vc_col-xs-7,.vc_col-xs-8,.vc_col-xs-9{position:relative;min-height:1px;padding-left:0px;padding-right:0px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

.vc_col-xs-1,.vc_col-xs-10,.vc_col-xs-11,.vc_col-xs-12,.vc_col-xs-2,.vc_col-xs-3,.vc_col-xs-4,.vc_col-xs-5,.vc_col-xs-6,.vc_col-xs-7,.vc_col-xs-8,.vc_col-xs-9{float:left}
.vc_col-xs-11{width:91.66666667%}
.vc_col-xs-10{width:83.33333333%}
.vc_col-xs-9{width:75%}
.vc_col-xs-8{width:66.66666667%}
.vc_col-xs-7{width:58.33333333%}
.vc_col-xs-6{width:50%}
.vc_col-xs-5{width:41.66666667%}
.vc_col-xs-4{width:33.33333333%}
.vc_col-xs-3{width:25%}
.vc_col-xs-2{width:16.66666667%}
.vc_col-xs-1{width:8.33333333%}
.vc_col-xs-pull-12{right:100%}
.vc_col-xs-pull-11{right:91.66666667%}
.vc_col-xs-pull-10{right:83.33333333%}
.vc_col-xs-pull-9{right:75%}
.vc_col-xs-pull-8{right:66.66666667%}
.vc_col-xs-pull-7{right:58.33333333%}
.vc_col-xs-pull-6{right:50%}
.vc_col-xs-pull-5{right:41.66666667%}
.vc_col-xs-pull-4{right:33.33333333%}
.vc_col-xs-pull-3{right:25%}
.vc_col-xs-pull-2{right:16.66666667%}
.vc_col-xs-pull-1{right:8.33333333%}
.vc_col-xs-pull-0{right:auto}
.vc_col-xs-push-12{left:100%}
.vc_col-xs-push-11{left:91.66666667%}
.vc_col-xs-push-10{left:83.33333333%}
.vc_col-xs-push-9{left:75%}
.vc_col-xs-push-8{left:66.66666667%}
.vc_col-xs-push-7{left:58.33333333%}
.vc_col-xs-push-6{left:50%}
.vc_col-xs-push-5{left:41.66666667%}
.vc_col-xs-push-4{left:33.33333333%}
.vc_col-xs-push-3{left:25%}
.vc_col-xs-push-2{left:16.66666667%}
.vc_col-xs-push-1{left:8.33333333%}
.vc_col-xs-push-0{left:auto}
.vc_col-xs-offset-12{margin-left:100%}
.vc_col-xs-offset-11{margin-left:91.66666667%}
.vc_col-xs-offset-10{margin-left:83.33333333%}
.vc_col-xs-offset-9{margin-left:75%}
.vc_col-xs-offset-8{margin-left:66.66666667%}
.vc_col-xs-offset-7{margin-left:58.33333333%}
.vc_col-xs-offset-6{margin-left:50%}
.vc_col-xs-offset-5{margin-left:41.66666667%}
.vc_col-xs-offset-4{margin-left:33.33333333%}
.vc_col-xs-offset-3{margin-left:25%}
.vc_col-xs-offset-2{margin-left:16.66666667%}
.vc_col-xs-offset-1{margin-left:8.33333333%}
.vc_col-xs-offset-0{margin-left:0}

.vc_col-sm-1,.vc_col-sm-10,.vc_col-sm-11,.vc_col-sm-12,.vc_col-sm-2,.vc_col-sm-3,.vc_col-sm-4,.vc_col-sm-5,.vc_col-sm-6,.vc_col-sm-7,.vc_col-sm-8,.vc_col-sm-9{float:left}
.vc_col-sm-12{width:100%}
.vc_col-sm-11{width:91.66666667%}
.vc_col-sm-10{width:83.33333333%}
.vc_col-sm-9{width:75%}
.vc_col-sm-8{width:66.66666667%}
.vc_col-sm-7{width:58.33333333%}
.vc_col-sm-6{width:50%}
.vc_col-sm-5{width:41.66666667%}
.vc_col-sm-4{width:33.33333333%}
.vc_col-sm-3{width:25%}
.vc_col-sm-2{width:16.66666667%}
.vc_col-sm-1{width:8.33333333%}
.vc_col-sm-pull-12{right:100%}
.vc_col-sm-pull-11{right:91.66666667%}
.vc_col-sm-pull-10{right:83.33333333%}
.vc_col-sm-pull-9{right:75%}
.vc_col-sm-pull-8{right:66.66666667%}
.vc_col-sm-pull-7{right:58.33333333%}
.vc_col-sm-pull-6{right:50%}
.vc_col-sm-pull-5{right:41.66666667%}
.vc_col-sm-pull-4{right:33.33333333%}
.vc_col-sm-pull-3{right:25%}
.vc_col-sm-pull-2{right:16.66666667%}
.vc_col-sm-pull-1{right:8.33333333%}
.vc_col-sm-pull-0{right:auto}
.vc_col-sm-push-12{left:100%}
.vc_col-sm-push-11{left:91.66666667%}
.vc_col-sm-push-10{left:83.33333333%}
.vc_col-sm-push-9{left:75%}
.vc_col-sm-push-8{left:66.66666667%}
.vc_col-sm-push-7{left:58.33333333%}
.vc_col-sm-push-6{left:50%}
.vc_col-sm-push-5{left:41.66666667%}
.vc_col-sm-push-4{left:33.33333333%}
.vc_col-sm-push-3{left:25%}
.vc_col-sm-push-2{left:16.66666667%}
.vc_col-sm-push-1{left:8.33333333%}
.vc_col-sm-push-0{left:auto}
.vc_col-sm-offset-12{margin-left:100%}
.vc_col-sm-offset-11{margin-left:91.66666667%}
.vc_col-sm-offset-10{margin-left:83.33333333%}
.vc_col-sm-offset-9{margin-left:75%}
.vc_col-sm-offset-8{margin-left:66.66666667%}
.vc_col-sm-offset-7{margin-left:58.33333333%}
.vc_col-sm-offset-6{margin-left:50%}
.vc_col-sm-offset-5{margin-left:41.66666667%}
.vc_col-sm-offset-4{margin-left:33.33333333%}
.vc_col-sm-offset-3{margin-left:25%}
.vc_col-sm-offset-2{margin-left:16.66666667%}
.vc_col-sm-offset-1{margin-left:8.33333333%}
.vc_col-sm-offset-0{margin-left:0}

.vc_col-md-1,.vc_col-md-10,.vc_col-md-11,.vc_col-md-12,.vc_col-md-2,.vc_col-md-3,.vc_col-md-4,.vc_col-md-5,.vc_col-md-6,.vc_col-md-7,.vc_col-md-8,.vc_col-md-9{float:left}
.vc_col-md-12{width:100%}
.vc_col-md-11{width:91.66666667%}
.vc_col-md-10{width:83.33333333%}
.vc_col-md-9{width:75%}
.vc_col-md-8{width:66.66666667%}
.vc_col-md-7{width:58.33333333%}
.vc_col-md-6{width:50%}
.vc_col-md-5{width:41.66666667%}
.vc_col-md-4{width:33.33333333%}
.vc_col-md-3{width:25%}
.vc_col-md-2{width:16.66666667%}
.vc_col-md-1{width:8.33333333%}
.vc_col-md-pull-12{right:100%}
.vc_col-md-pull-11{right:91.66666667%}
.vc_col-md-pull-10{right:83.33333333%}
.vc_col-md-pull-9{right:75%}
.vc_col-md-pull-8{right:66.66666667%}
.vc_col-md-pull-7{right:58.33333333%}
.vc_col-md-pull-6{right:50%}
.vc_col-md-pull-5{right:41.66666667%}
.vc_col-md-pull-4{right:33.33333333%}
.vc_col-md-pull-3{right:25%}
.vc_col-md-pull-2{right:16.66666667%}
.vc_col-md-pull-1{right:8.33333333%}
.vc_col-md-pull-0{right:auto}
.vc_col-md-push-12{left:100%}
.vc_col-md-push-11{left:91.66666667%}
.vc_col-md-push-10{left:83.33333333%}
.vc_col-md-push-9{left:75%}
.vc_col-md-push-8{left:66.66666667%}
.vc_col-md-push-7{left:58.33333333%}
.vc_col-md-push-6{left:50%}
.vc_col-md-push-5{left:41.66666667%}
.vc_col-md-push-4{left:33.33333333%}
.vc_col-md-push-3{left:25%}
.vc_col-md-push-2{left:16.66666667%}
.vc_col-md-push-1{left:8.33333333%}
.vc_col-md-push-0{left:auto}
.vc_col-md-offset-12{margin-left:100%}
.vc_col-md-offset-11{margin-left:91.66666667%}
.vc_col-md-offset-10{margin-left:83.33333333%}
.vc_col-md-offset-9{margin-left:75%}
.vc_col-md-offset-8{margin-left:66.66666667%}
.vc_col-md-offset-7{margin-left:58.33333333%}
.vc_col-md-offset-6{margin-left:50%}
.vc_col-md-offset-5{margin-left:41.66666667%}
.vc_col-md-offset-4{margin-left:33.33333333%}
.vc_col-md-offset-3{margin-left:25%}
.vc_col-md-offset-2{margin-left:16.66666667%}
.vc_col-md-offset-1{margin-left:8.33333333%}
.vc_col-md-offset-0{margin-left:0}

.vc_hidden-lg{display:none!important}
.vc_col-lg-1,.vc_col-lg-10,.vc_col-lg-11,.vc_col-lg-12,.vc_col-lg-2,.vc_col-lg-3,.vc_col-lg-4,.vc_col-lg-5,.vc_col-lg-6,.vc_col-lg-7,.vc_col-lg-8,.vc_col-lg-9{float:left}
.vc_col-lg-12{width:100%}
.vc_col-lg-11{width:91.66666667%}
.vc_col-lg-10{width:83.33333333%}
.vc_col-lg-9{width:75%}
.vc_col-lg-8{width:66.66666667%}
.vc_col-lg-7{width:58.33333333%}
.vc_col-lg-6{width:50%}
.vc_col-lg-5{width:41.66666667%}
.vc_col-lg-4{width:33.33333333%}
.vc_col-lg-3{width:25%}
.vc_col-lg-2{width:16.66666667%}
.vc_col-lg-1{width:8.33333333%}
.vc_col-lg-pull-12{right:100%}
.vc_col-lg-pull-11{right:91.66666667%}
.vc_col-lg-pull-10{right:83.33333333%}
.vc_col-lg-pull-9{right:75%}
.vc_col-lg-pull-8{right:66.66666667%}
.vc_col-lg-pull-7{right:58.33333333%}
.vc_col-lg-pull-6{right:50%}
.vc_col-lg-pull-5{right:41.66666667%}
.vc_col-lg-pull-4{right:33.33333333%}
.vc_col-lg-pull-3{right:25%}
.vc_col-lg-pull-2{right:16.66666667%}
.vc_col-lg-pull-1{right:8.33333333%}
.vc_col-lg-pull-0{right:auto}
.vc_col-lg-push-12{left:100%}
.vc_col-lg-push-11{left:91.66666667%}
.vc_col-lg-push-10{left:83.33333333%}
.vc_col-lg-push-9{left:75%}
.vc_col-lg-push-8{left:66.66666667%}
.vc_col-lg-push-7{left:58.33333333%}
.vc_col-lg-push-6{left:50%}
.vc_col-lg-push-5{left:41.66666667%}
.vc_col-lg-push-4{left:33.33333333%}
.vc_col-lg-push-3{left:25%}
.vc_col-lg-push-2{left:16.66666667%}
.vc_col-lg-push-1{left:8.33333333%}
.vc_col-lg-push-0{left:auto}
.vc_col-lg-offset-12{margin-left:100%}
.vc_col-lg-offset-11{margin-left:91.66666667%}
.vc_col-lg-offset-10{margin-left:83.33333333%}
.vc_col-lg-offset-9{margin-left:75%}
.vc_col-lg-offset-8{margin-left:66.66666667%}
.vc_col-lg-offset-7{margin-left:58.33333333%}
.vc_col-lg-offset-6{margin-left:50%}
.vc_col-lg-offset-5{margin-left:41.66666667%}
.vc_col-lg-offset-4{margin-left:33.33333333%}
.vc_col-lg-offset-3{margin-left:25%}
.vc_col-lg-offset-2{margin-left:16.66666667%}
.vc_col-lg-offset-1{margin-left:8.33333333%}
.vc_col-lg-offset-0{margin-left:0}
.vc_el-clearfix-lg{clear:both}

I’d be curious if this works for others.

Hi everyone. I’m returning to this because I found a simpler way of accomplishing this without having to paste in a ton of CSS code. I’ve included the fix from @anshuln90 above.

File path : plugins/dk-pdf/templates/dkpdf-index.php

replace this:

<link type="text/css" rel="stylesheet" href="<?php echo get_bloginfo( 'stylesheet_url' ); ?>" media="all" />

with this:
‘
<?php
global $post;
$vc_enabled = get_post_meta($post->ID, ‘_wpb_vc_js_status’, true);
if($vc_enabled){
echo ‘<link type=”text/css” rel=”stylesheet” id=”js_composer_front-css” href=”‘. vc_asset_url( ‘css/js_composer.min.css’ ) .'” media=”all” />’;
}
?>
<link type=”text/css” rel=”stylesheet” href=”<?php echo get_bloginfo( ‘stylesheet_url’ ); ?>” media=”all” />
‘
this adds the the VC stylesheet if the page has it enabled.

then replace this:

<div class="dkpdf-content">
<?php the_content(); ?>
</div>

with this:

<div class="dkpdf-content vc_non_responsive">                        
<?php 
WPBMap::addAllMappedShortcodes();
echo apply_filters('the_content', $post->post_content);
?>
</div>

the vc_non_responsive class tells VC to ignore the responsive commands so that columns aren’t stacked in the print view.

Then add this custom CSS in the Custom CSS settings or if you have a @media print query in your child theme CSS. You may not have to do this but for me it fixes some width rendering issues on columns with mPDF.

	/*------
    Visual Composer Styles 
    ------------------------------*/
    .vc_non_responsive .vc_row .vc_col-sm-1, .vc_non_responsive .vc_row .vc_col-sm-10,
	.vc_non_responsive .vc_row .vc_col-sm-11, .vc_non_responsive .vc_row .vc_col-sm-12,
	.vc_non_responsive .vc_row .vc_col-sm-2, .vc_non_responsive .vc_row .vc_col-sm-3,
	.vc_non_responsive .vc_row .vc_col-sm-4, .vc_non_responsive .vc_row .vc_col-sm-5, 
	.vc_non_responsive .vc_row .vc_col-sm-6, .vc_non_responsive .vc_row .vc_col-sm-7, 
	.vc_non_responsive .vc_row .vc_col-sm-8, .vc_non_responsive .vc_row .vc_col-sm-9 {
        padding-right: -0.000001px !important; 
        padding-left:  -0.000001px !important;
     }
	 .vc_non_responsive .vc_row .vc_column-inner {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }

Hope this helps.

Hi contemplate,

Thank you very much, I really apreciate this, that’s the beauty of open source ??

I’ll do some tests and try to implement this to next release.

Thanks,
Emili

@dimaniko here is one other slight addition for adding the Custom CSS styles that Visual Composer creates. They should already be printed in the wp_head if that is enabled in the settings but in case it is disabled or if you want to add this to the DK PDF Generator since the wp_head is not called for every loaded page/post try adding this in the loop:

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

I haven’t had success with these edits and working with the latest versions of WP Bakery (5.4.4). I was wondering if an update for DK PDF will soon incorporate removing shortcodes for VC / WP Bakery. With the popularity of the builder, maybe you could work in some admin option to deal with all the shortcodes.

OK, I actually did get this to work with VC. I missed one important step at the beginning of the thread.

@dinamiko – Can you please do everyone the favor of merging this into a proper and official update? I know a lot of people are trying to get this working with VC.

Thanks!