Home › Forums › Backend Issues (wp-admin) › ACF admin CSS/JS not loading
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.
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
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 🙂
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!
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?
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.
The topic ‘ACF admin CSS/JS not loading’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.