WordPress, WPLMS, Visual Composer and full width content

I am working on a new website for a customer and we are using the WPLMS (WordPress Learning Management System) as a foundation. The packaged theme is based on Bootstrap.

The theme provides its own page-builder, but we prefer to use Visual Composer, as we built some custom VC-Addons to ease future page updates for our customer and custom content integration. Visual Composer provides some nice full-width addons, which are not working with the current theme layout. I decided to use a custom page template to allow Visual Composer to take over, where needed :)

ADDING A NEW PAGE TEMPLATE

New page template: page-vc-template.php

<?php
/*
Template Name: Visual Composer
*/
/* portalZINE NMN - www.portalzine.de */
get_header();

 

if ( have_posts() ) : while ( have_posts() ) : the_post();

 

$title=get_post_meta(get_the_ID(),'vibe_title',true);


if(vibe_validate($title)){

?>
<section id="title">
  <div class="container">
    <div class="row">
      <div class="col-md-9 col-sm-8">
        <div class="pagetitle">
          <h1>
            <?php the_title(); ?>

          </h1>
          <?php the_sub_title(); ?>

        </div>
      </div>
      <div class="col-md-3 col-sm-4">
        <?php

                    $breadcrumbs=get_post_meta(get_the_ID(),'vibe_breadcrumbs',true);

                    if(vibe_validate($breadcrumbs))

                        vibe_breadcrumbs(); 
                ?>

      </div>
    </div>
  </div>
</section>
<?php
}
 
    $v_add_content = get_post_meta( $post->ID, '_add_content', true );

  
?>
<section id="content" class="vc-template">
  <div class="inner">
<?php
 the_content();

?>
  </div>
</section>
<?php

endwhile;


endif;

?>
</div>
<div class="vc-template">
<?php
get_footer();

?>
</div>
 

Copy this to your WPLMS theme directory and select the template on page setup. I added an inner wrapper for the content to allow some options for media queries and for the footer, to kill any top margin.

MORE TWEAKS

You can even tweak this by adding a custom field. Allowing you to do some nice css switching :) and allowing you to go past the max width for the inner content.

$v_add_content = get_post_meta( $post->ID, '_add_content', true );
$pz_fullpage = get_post_meta(get_the_ID(),'pz_fullpage',true);
?>
<section id="content" class="vc-template <?php echo $pz_fullpage ;?>">
  <div class="inner">
<?php
 the_content();

?>
  </div>
</section>

ADDING SOME STYLE

Here some styles to enable the media queries again. Just add those to your main style.css or the  Visual Composer style popup, on the page you are editing.

section#content.vc,

section.vc#title{padding-top:82px;}

 

.vc-template .inner .vc_row{max-width:1080px;margin-left: auto;margin-right: auto;}

 

@media (min-width: 768px) {

 .vc-template .inner .vc_row{max-width:750px!important;margin-left: auto!important;margin-right: auto!important;}

}

@media (min-width: 992px) {

 .vc-template .inner .vc_row{max-width:970px!important;margin-left: auto!important;margin-right: auto!important;}

}

@media (min-width: 1200px) {

 .vc-template .inner .vc_row{max-width:1180px!important;margin-left: auto!important;margin-right: auto!important;}

}

.vc-template footer{margin-top:0!important}

The first style pushes the content down, so that its not hidden below the transparent header. Still tweaking this, but works nicely so far. This also allows me to use other full-width addons again, like Vc_Row Background Pro :)

ROUGH EXAMPLE :)

Cheers and enjoy
Alex

RELATED LINKS

• WPLMS (WordPress Learning Management System)
• Visual Composer
• Vc_Row Background Pro