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;
}

add_filter('content_block_post_type','filter_content_block_init');

Customizing

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(
&$this,
'addFrontCss',
), 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>";

 

6 replies
  1. Steve
    Steve says:

    As you predicted, I now want to use custom CSS on my content blocks for my footer. I need a little more info about where to inject that php though. I am in ' post-widget.php ' and I've tried putting...

    $post_custom_css = get_post_meta( $id, '_wpb_shortcodes_custom_css', true );
    echo "". $post_custom_css . "";

    in a few different places, but it doesn't seem to work. Any suggestions?

    Sorry to keep bothering you about this. I really want to get it working though.

    Thanks!

    Reply
  2. Steve
    Steve says:

    Hi! Been looking for a way to do this for a while, thanks for the post!

    I was curious, when you mentioned that first batch of code, what file should I add that to? Referring to the code...

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

    add_filter('content_block_post_type','filter_content_block_init');

    Thanks for your help!

    Reply
      • Steve
        Steve says:

        Thanks for your help. Could I add this code to a child theme instead somehow?

        From what I understand that will make it easier to keep my site up to date down the road without having to tamper with the code every time there is a theme update.

        Reply
  3. Svplim
    Svplim says:

    Visual composer is really a great tool for original layouts. Since I started using this plugin, I move me more.
    Anyway thank you for this info that will allow me to customize my footer as
    Thanks

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *