Reverse Engineering Visual Composer for footer design

The Visual Composer drag and drop content manager for wordpress is one the most used component for WORDPRESS. It is not perfect but is used all around the world and many third party  plugins enhance its default capabilities. I have one specific use for this component that's not easily documented : using visual composer for designing footers is something that can be easily achieved thanks to the Custom Post Widget plugin that creates a new content block custom post type that can now be included in sidebars via widget.

Activating and configuring

First thing to do is install and configure plugins. A little trick is necessary here : by default, visual composer is activated only on page post type. After you have activated Visual Composer and Custom Post Widget, you can go and check out visual composer role manager settings. You will see that you can activate visual composer for some post types, but you will not find content blocks : this is because the Custom Post Widget defines content blocks as private, whereas Visual Composer only accepts public custom post types. Fortunately, someone has thought about it and you will find here a piece of code that makes content blocks public.

function filter_content_block_init()
$content_block_public = true;
return $content_block_public;



At this stage you can create content blocks, activate visual composer for content blocks and include them in sidebar using the content block widget !! very nice !! But one specific hack remains to include : if for example you want to use background for rows, visual composers uses specific custom styles inserted in the html head. But when you use the widget, html head is the head of any page and custom visual composer styling is not included, and you cannot benefit from extra styling features. So here is some clue that I fond out via reverse engineering.

have a look at you js_composer folder : the initPage function (line 128) from class-vc-base.php add an action to the wp_head . This is the key to the process. You need to include addFrontCss from the footer now

add_action( 'wp_head', array(
), 1000 );

the function addFrontCss itself calls addShortcodesCustomCss function, which gets some post custom meta value  : the only way to combine best of both worlds is to reuse this function in the ooter display function, which would be in the custom-post-widget plugin folder, in the  post-widget.php file, function widget : add the following code before the shortcode rendering :

//wave201603 compatibility with visual composer styles
if (function_exists('vc_set_as_theme')) { $id=$content_post -> ID;
$obj = visual_composer();
$obj->addShortcodesCustomCss($content_post -> ID );

or alternatively, use the code straight from Visual Composer's addShortcodesCustomCss function. [UPDATE : ] This last method turned out to be more reliable because it includes the style sheet on all pages, where as the previous method from visual composer class only works on pages where visual composer is actually being used for main page content...

$post_custom_css = get_post_meta( $id, '_wpb_shortcodes_custom_css', true );
echo "<style>". $post_custom_css . "</style>";