Category Archives: Visual Composer

Building the right administration interface for every user

WordPress Stockholm meetup group, January 2017

When building websites a lot of work is put into the frontend of the site – with good reason! But often the experience for content editors and site administrators isn’t given as much thought. However WordPress has a wide array of tools to easily make great admin interfaces.

In this talk we’ll take a look at the ecosystem of administration tools available for WordPress, as well as the different types of users that are likely to use the backend of the sites you build.

Slides

Hide activation nag for Visual Composer and Ultimate Addons for Visual Composer

vc-nag

Updated 2016-04-26

Tired of the message “Hola! Please activate your copy of Visual Composer to receive automatic updates.”?

Here’s a quick way of turning it off. Put this in your themes functions.php file:

setcookie('vchideactivationmsg', '1', strtotime('+3 years'), '/');
setcookie('vchideactivationmsg_vc11', (defined('WPB_VC_VERSION') ? WPB_VC_VERSION : '1'), strtotime('+3 years'), '/');

Or, you can save the snippet below as stop-vc-nag.php, put it in your wp-content/plugins folder and activate the “Stop Visual Composer Activation Nag” plugin!

<?php
/*
Plugin Name: Stop Visual Composer Activation Nag
Plugin URI:
Description:
Version: 2016.04.26
Author: khromov
Author URI: https://snippets.khromov.se
License: GPL2
*/

add_action('admin_init', function()
{
    if(is_admin()) {
        setcookie('vchideactivationmsg', '1', strtotime('+3 years'), '/');
        setcookie('vchideactivationmsg_vc11', (defined('WPB_VC_VERSION') ? WPB_VC_VERSION : '1'), strtotime('+3 years'), '/');
    }
});

Disable Visual Composer Ultimate Addons nag

To disable this nag you have to add the lines below to your wp-config.php file:

define('ULTIMATE_NO_EDIT_PAGE_NOTICE', true);
define('ULTIMATE_NO_PLUGIN_PAGE_NOTICE', true);

Disable CSS3 animations for iOS devices in Visual Composer

Plugin was updated on 2014-10-28. Please use the new version below.

I’ve had huge issues with iOS devices in conjunction with Visual Composer.

When you add a lot of text and image animations, the page would crash on iPhone and iPad. So I set out to look for a way to disable CSS3 animations in VC for these devices. I found this post, which provided a solution. I wrapped it in a WordPress plugin which you can find below. Simply activate it on your site to make it run much more smoothly on iOS devices.

<?php
/*
Plugin Name: Visual Composer remove CSS3 animations
Plugin URI:
Description: Removes animations for iOS (Safari / Chrome)
Version: 2014.10.28
Author: khromov
Author URI: http://profiles.wordpress.org/khromov/
License: GPL2
*/

add_action('wp_footer', function()
{
?>
<script type="text/javascript">
/*
 * Tiny mobile detection script, courtesy of
 * https://github.com/markdalgleish/stellar.js/issues/37
 */
var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

/*
 * Overwrite original vc_waypoints function
 */
function vc_waypoints()
{
    if (typeof jQuery.fn.waypoint !== 'undefined')
    {
        jQuery('.wpb_animate_when_almost_visible:not(.wpb_start_animation)').waypoint(function()
        {
            /* For iOS, we will remove the animation by just unsetting the wpb_animate_when_almost_visible class */
            if (isMobile.iOS())
                jQuery(this).removeClass('wpb_animate_when_almost_visible');
            else
                jQuery(this).addClass('wpb_start_animation');
        },
        {
            offset: '85%'
        });
    }
}
</script>
<?php
}, 100);

Changing settings of built-in Visual Composer elements

If you are working with Visual Composer, you probably want to have some block settings set by default every time you create a block. For example, when you would create an Image gallery I wanted the gallery type to be set to “Flex slider slide”, the slides interval to be set to 10 seconds and the Image Size to be set to large. Thankfully you can do this via the very useful vc_map_update() function!

Here is an example that changes settings on the default Image Gallery block. You can use this in your themes functions.php file or a plugin.

add_action('init', function()
{
    //Get VC gallery shortcode config
    $shortcode_vc_gallery_tmp = WPBMap::getShortCode('vc_gallery');

    //Loop over config to find the condition we want to change
    foreach($shortcode_vc_gallery_tmp['params'] as $key => $param)
    {
        //We found our parameter to change, woop!
        if($param['param_name'] === 'img_size')
        {
            //Add standard value for gallery size
            $shortcode_vc_gallery_tmp['params'][$key]['value'] = 'large';
        }
        else if($param['param_name'] === 'interval')
        {
            //Add standard value for gallery transition
            $shortcode_vc_gallery_tmp['params'][$key]['std'] = 10;
        }
        else if($param['param_name'] === 'type')
        {
            //Add standard value for gallery easing
            $shortcode_vc_gallery_tmp['params'][$key]['std'] = 'flexslider_slide';
        }
    }

    //print_r($shortcode_vc_gallery_tmp);

    //VC doesn't like even the thought of you changing the shortcode base, and errors out, so we unset it.
    unset($shortcode_vc_gallery_tmp['base']);

    //Update the actual parameter
    vc_map_update('vc_gallery', $shortcode_vc_gallery_tmp);
}, 100);