ACF admin CSS/JS not loading

• justintoon

• September 5, 2013 at 6:58 am

ACF is working perfectly fine for me in my local environment, but on our staging server I’m running into a surprising issue. We use Capistrano to deploy sites to staging, using a custom script for WordPress sites. For those unfamiliar, Cap creates a releases folder and clones in a new copy of the associated Git repo to a new folder during each deploy; it then symlinks the most recent version to a folder called current, which is served publicly. When I load any of the pages within the Custom Fields menu option, ACF loads custom CSS and JS files — but instead of loading from the site root, ACF tries to use the absolute server path, all the way to server root, and as a result these files are not found. The missing JS is particularly critical as without it the page for creating and modifying field groups is impossible to use. I can’t really find any guidance on why this would be happening, and to be honest I’m not even sure how I would start searching.

Also worth noting is that I have my site configured with wp-content outside of the WordPress core folder; again, this all functions normally when working in a local environment. The server is also running Nginx, if that matters.

• Elliot

• September 5, 2013 at 12:35 pm

Hi @justintoon

Sorry mate, I have not used Capistrano before, or used WP with a modified folder structure.

Sounds like you may need to ask this q on stack exchange to find a dev that knows what to do.

Good luck

Cheers
E

• JonathanSoper

• January 17, 2014 at 2:50 pm

Hey @justintoon, I had the exact same problem, and this is what fixed it for me:

Starting on line 483 of acf.php, with //register acf scripts as the comment, you’ll see a series of arrays, look for the lines that start with $this->settings['dir'], for example:

'src' => $this->settings['dir'] . 'js/field-group.min.js',

And change each of those references to include the bloginfo url, like this:

'src' => get_bloginfo('url') . '/wp-content/plugins/advanced-custom-fields/js/field-group.min.js',

Do this replacement for lines 483-499, and also on lines 525-532, so that it’s loading your actual path to the files, instead of getting confused with the local path.

So here’s the end results for those two chunks of code:

lines 483-499:

// register acf scripts
$scripts = array();
$scripts[] = array(
'handle' => 'acf-field-group',
'src' => get_bloginfo('url') . '/wp-content/plugins/advanced-custom-fields/js/field-group.min.js',
'deps' => array('jquery')
);
$scripts[] = array(
'handle' => 'acf-input',
'src' => get_bloginfo('url') . '/wp-content/plugins/advanced-custom-fields/js/input.min.js',
'deps' => array('jquery')
);
$scripts[] = array(
'handle' => 'acf-datepicker',
'src' => get_bloginfo('url') . '/wp-content/plugins/advanced-custom-fields/core/fields/date_picker/jquery.ui.datepicker.js',
'deps' => array('jquery', 'acf-input')
);

lines 525-532:

// register acf styles
$styles = array(
'acf' => get_bloginfo('url') . '/wp-content/plugins/advanced-custom-fields/css/acf.css',
'acf-field-group' => get_bloginfo('url') . '/wp-content/plugins/advanced-custom-fields/css/field-group.css',
'acf-global' => get_bloginfo('url') . '/wp-content/plugins/advanced-custom-fields/css/global.css',
'acf-input' => get_bloginfo('url') . '/wp-content/plugins/advanced-custom-fields/css/input.css',
'acf-datepicker' => get_bloginfo('url') . '/wp-content/plugins/advanced-custom-fields/core/fields/date_picker/style.date_picker.css',
);

Hope that helps 🙂

• andyford

• November 16, 2014 at 11:03 am

I had this issue after migrating from local development to a Media Temple Grid server. @JonathanSoper’s fix worked for me (Thanks, Jonathan).

EDIT: I also had to modify ‘core/fields/wysiwyg.php’. I changed this line:
$plugins['code'] = apply_filters('acf/get_info', 'dir') . 'js/tinymce.code.min.js';
to this:
$plugins['code'] = get_bloginfo('url') . '/wp-content/plugins/advanced-custom-fields/js/tinymce.code.min.js';

But editing plugin files is less than ideal. Any chance we might see a fix for this at some point, @Elliot Condon?

Thanks!

• markmakes

• January 14, 2017 at 12:37 am

I’m having the same issue when migrating. In my acf.php file I only see assets being called like this:

‘src’ => acf_get_dir(‘assets/inc/datepicker/jquery-ui-1.10.4.custom.min.css’)

Replacing with:

‘src’ => get_bloginfo(‘url’) . ‘/wp-content/plugins/advanced-custom-fields/assets/inc/datepicker/jquery-ui-1.10.4.custom.min.css’)

But I get site-wide errors (front and backend) when using this. Ideas?

• scottsanders

• February 4, 2018 at 5:36 pm

I had the same issue here and dug a little deeper, hoping to avoid having to edit the plugin. For me, as with @andyford, the issue only occurred on my Media Temple environment. Their infrastructure was confusing the WordPress is_ssl() function, which was firing false at the time the asset urls were being generated (from functions used in ACF like content_url() and plugins_url()).

Good news is, there is a solution in the WordPress codex. Just add the following to your wp-config.php file:

if (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https') $_SERVER['HTTPS'] = 'on';

This solved my mixed-content issues without having to edit the plugin.