WP Engine Compatiblity Conflict w/Visual Composer

Jonah /

Ever have one of those days where you start off with a plan to get a bunch of stuff done, you’re all energized and ready to work, and then all of a sudden some strange issue arises and consumes your whole day? Well, that happens to me at least once per month which is more than enough! I’m writing this post with the intention to hopefully save you the time I lost banging my head against the table all day yesterday.

Introduction

This post discusses a strange incompatibility with a specific Visual Composer element, the Post Grid and Post Masonry Grid, which both allow you to query and display your posts in a nice grid layout, and WP Engine, one of the best WordPress hosts out there.

The Problem

The problem I discovered was that your posts simply won’t load on WP Engine. I had everything working locally, but as soon as I pushed my code and tried to get things working the same way on WPE. Nada.

The Solution

I tried everything over the course of about 5 hours – I cleared caches, I looked for errors in the logs, I switched themes, I deactivated all my plugins, I turned off SSL, I hopped on live chat with WPE (their support is fantastic BTW!), and nothing worked. After ruling out the obvious potential outside culprits, I knew it had to be something specific to either WPE or the Visual Composer. I looked specifically at the template file the VC was using to display the posts for the elements, /wp-content/plugins/js_composer_theme/include/templates/shortcodes/vc_basic_grid.php

<?php
if ( ! defined( 'ABSPATH' ) ) {
	die( '-1' );
}
/**
 * Shortcode attributes
 * @var $atts array
 * @var $content - shortcode content
 * Shortcode class
 * @var $this WPBakeryShortCode_VC_Basic_Grid
 */
$this->post_id = false;
$css = $el_class = '';
$posts = $filter_terms = array();
$this->buildAtts( $atts, $content );

$css = isset( $atts['css'] ) ? $atts['css'] : '';
$el_class = isset( $atts['el_class'] ) ? $atts['el_class'] : '';

$class_to_filter = 'vc_grid-container vc_clearfix wpb_content_element ' . $this->shortcode;
$class_to_filter .= vc_shortcode_custom_css_class( $css, ' ' ) . $this->getExtraClass( $el_class );
$css_class = apply_filters( VC_SHORTCODE_CUSTOM_CSS_FILTER_TAG, $class_to_filter, $this->settings['base'], $atts );

wp_enqueue_script( 'prettyphoto' );
wp_enqueue_style( 'prettyphoto' );

if ( 'true' === $this->atts['btn_add_icon'] ) {
	vc_icon_element_fonts_enqueue( $this->atts['btn_i_type'] );
}

$this->buildGridSettings();
if ( isset( $this->atts['style'] ) && 'pagination' === $this->atts['style'] ) {
	wp_enqueue_script( 'twbs-pagination' );
}
if ( ! empty( $atts['page_id'] ) ) {
	$this->grid_settings['page_id'] = (int) $atts['page_id'];
}
$this->enqueueScripts();

$animation = isset( $this->atts['initial_loading_animation'] ) ? $this->atts['initial_loading_animation'] : 'zoomIn';

?><!-- vc_grid start -->
<div class="vc_grid-container-wrapper vc_clearfix">
	<div class="<?php echo esc_attr( $css_class ) ?>" data-initial-loading-animation="<?php echo esc_attr( $animation );?>" data-vc-<?php echo esc_attr( $this->pagable_type ); ?>-settings="<?php echo esc_attr( json_encode( $this->grid_settings ) ); ?>" data-vc-request="<?php echo esc_attr( apply_filters( 'vc_grid_request_url', admin_url( 'admin-ajax.php') ) ); ?>" data-vc-post-id="<?php echo esc_attr( get_the_ID() ); ?>" data-vc-public-nonce="<?php echo vc_generate_nonce( 'vc-public-nonce' ); ?>">
	</div>
</div><!-- vc_grid end -->

I could see that query was being handled via AJAX, but I couldn’t initially see why this would have any issue. My best guess without fully understanding what was going on in the template was that the admin_url function had something to do with it. So, I googled “admin_url wp engine” and came across a Github thread talking about an issue with a front end editor not working on WPE and using admin_url( ‘admin-ajax.php’, ‘relative’ ) instead of the plain admin_url( ‘admin-ajax.php’ ). So I modified the template file, changing the function on line 44, pushed it to WPE, and it worked!!!

The End

I’m not entirely sure why this worked or how it works, but most importantly it does. It looks like by using the ‘relative’ scheme in admin_url(), allows it to work on https, even though I wasn’t loading it on a secured page… Weird. If you have any insight feel free to leave it in the comments. I’ve reached out to both WPE and the VC author to let them know about the issue and hopefully provide a fix. Hopefully in the interim this little fix helps you out too!