I'm bursting my brains out. I just can't figure out why my custom stylesheets/scripts won't load.
The stylesheet/scripts are properly enqueued (see below) but for some reason, if I load the stylesheet on my browser, or check in the browser console. it would return a 404
enqueued via
wp_enqueue_style('libraries', get_template_directory_uri() . '/assets/build/css/libraries.css');
wp_enqueue_style('site', get_template_directory_uri() . '/assets/build/css/site.css');
I have also checked file permissions, and theme and file folders are set to 770.
What do you think is the issue?
Try with get_theme_file_uri() like this:
wp_enqueue_style ( 'site', get_theme_file_uri('/assets/build/css/site.css'), ... );
Here the link to the documentation of this function:
https://developer.wordpress.org/reference/functions/get_theme_file_uri/
Related
I don't know why I'm having this issue. I'm new to wordpress and I am following along with a 'freecodecamp' tutorial(youtube) on how to make a custom wordpress theme from scratch.
In the video, the instructor is enqueueing his style sheet using the functions.php file. Here is the exact code he is using...
Click here for code image
<?php
function followandrew_register_style() {
wp_enqueue_style('followandrew-bootstrap', get_template_directory_uri() . "/style.css", array(), '1.0', 'all');
}
add_action('wp_enqueue_scripts', 'followandrew_register_style' );
?>
Click here for error image
Visual Studios is prompting this error as soon as I write out the commands...
"Undefined function 'wp_enqueue_style', and undefined function 'add_action'.
I am including "wp_head()" inside my front-page.php to output the stylesheet.
Everything else is working fine. I am able to see my basic html setup when posting in inside the "front-page.php". My wordpress is connected correctly and I have access to the backend admin.
If I hardcode the path to the style sheet inside of front-page.php, it works fine.
So basically, any functions or commands I try to run inside the functions.php file are coming back undefined!
Nevermind, it looks like everything is working fine. I just had the wrong source path for the custom css link.
VS code is still displaying the undefined error but everything is working.
Best 5 hours Ive ever wasted :)
I developed my WP WooCommerce shop locally with XAMPP and finally got around to upload my site.
1) How do you make edits to your CSS when the site is live and online?
Do you use Appearance > Theme Editor to make changes to your style.css file that is saved in your child theme or is there a plugin that is "better" than the default one?
Is there a shortcut for commenting lines out?
Or do you have an identical version locally that is synced to the uploaded version and do the edits locallly and upload the final edited style.css file?
I'm not sure what the best workflow is.
2) I find myself making changes and nothing happens on the live site. Do I have to clear the cache and than login again to get into my WP dashboard? Seems very tedious... I searched the forum and found that you can do something with this line
wp_enqueue_style( '_s-style', get_stylesheet_uri(), array(), time() );
can someone elaborate how and where to use it? does it go into the functions file?
Use this line your functions.php
function yourthemename_style_nscripts(){
wp_enqueue_style( '_s-style', get_stylesheet_uri(), array(), time() );
}
add_action('wp_enqueue_scripts', 'yourthemename_style_nscripts');
otherwise,
open your functions.php then find your yourthemename_style_nscripts function then paste it.
I'm currently working on an option page (ACF Pro v5) for wordpress that dynamically generates a css file. When I'm testing this locally it works fine; only on a live server the dynamic css couldn't generate by wordpress.
Am I missing something? Is there something white the rights that wordpress can't write the file. I've a clean custom-style.css placed in the right folder with chmod 777.
This is the code I've written in my functions.php:
function generate_options_css() {
$ss_dir = get_stylesheet_directory();
ob_start(); // Capture all output into buffer
require($ss_dir . '/styles.php'); // Grab the custom-style.php file
$css = ob_get_clean(); // Store output in a variable, then flush the buffer
file_put_contents($ss_dir . '/Library/css/custom-styles.css', $css, LOCK_EX); // Save it as a css file
} add_action( 'acf/save_post', 'generate_options_css' ); //Parse the output and write the CSS file on post save
wp_enqueue_style( 'custom-styles', get_template_directory_uri() . '/Library/css/custom-styles.css' );
May be your live server is running with a child theme and your local setup has no child theme. This is why your local version is working and the live is not working. The most probable reason is that you are using both funtions get_template_directory_uri() and get_stylesheet_directory(); and both will point to the same '/Library/css/custom-styles.css' file only if your current active theme is not a child theme.
So, it is wiser to use any one based on your demand and not both together :)
I have a problem with a WordPress site.
When I am trying to update page content or edit css file, changes not appearing in front-end. It looks like cache problem, but I empty my cache every time and nothing helps. I should wait some hours or try another browser to see changes that I've made.
I am not using any cahce plugins and don't know why content changes take so long to go live.
Please help me.
This is standart browser cache for CSS and JS files. You can reload page with CTRL+SHIFT+R buttons. If you want to display your new CSS for all users, you need to change the version of CSS-file in your theme. Read More: https://codex.wordpress.org/Function_Reference/wp_enqueue_style
I am facing this kind of issues these days too, what I do is, in the
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
in $ver i place php function time() it changes after every second, I think this technique is best for development purpose.
so the final enque will be
wp_enqueue_script( 'myscript', filesourse/file.js, array(''), time(), true );
for the style you can also use time() at the $ver position
wp_enqueue_style( 'mystyle', filesourse/file.css, array(''), time(), 'all' );
Hope this will work for you too,
If you have cache folder in your rootfolder rename it and try,because your all site configuration store that cache folder in root folder.
I am attempting to load a script using wp_enqueue_style following the advice on the Wordpres Codex, but the script doesn't seem to be included in the source. Is this the correct way to do it?
function load_scripts() {
wp_enqueue_style('bootstrap.css', get_template_directory_uri() . '/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'load_scripts');
Your action and function looks fine from here. The wp_enqueue_scripts hook should work perfectly for both stylesheets and scripts.
Have you tried echoing something out in the function to see if it's actually being called at all? I.e:
function load_scripts() {
echo "Does this output to the actual page?";
wp_enqueue_style('bootstrap.css', get_template_directory_uri() . '/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'load_scripts');
If it's not, you might have a problem with your placement of the code, but if you keep everything in functions.php and outside of any other scope this shouldn't be a problem.
Another thing that can cause this behaviour is if you have already registered a stylesheet or script with the same handle ("bootstrap.css" in this case). The first argument in the wp_enqueue_style() function is just a handle for internal dependency management and should be unique, try renaming it to something else and see if that fixes your problem.
Okay, first step is to ensure you are using the correct path of the CSS file.
Add the following line in the functions.php of your theme or other appropriate place.
print( get_template_directory_uri() . '/css/bootstrap.min.css' );
This should print the URL of your desired stylesheet on top of the page. Copy and paste this URL in a new tab, if it opens a stylesheet then you are good to go. Otherwise, there is a mistake in the path.
Second step is to ensure that wp_head() is being called on the page you are displaying. It can be placed in your header template or top of archives/post files etc. This function actually renders the styles and scripts on the page.
Without wp_head(), its basically useless to enque anything as you can add links and scripts manually if you know the exact paths.
Note that in admin mode there is a special hook 'admin_enqueue_scripts'. So, if there is need to load CSS in both modes, it should be done on two hooks.
function load_scripts() {
wp_enqueue_style('bootstrap.css', get_template_directory_uri() . '/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'load_scripts');
add_action('admin_enqueue_scripts', 'load_scripts');
You are trying to enqueue style on wp_enqueue_scripts hook.
Try wp_print_styles.
add_action('wp_print_styles', 'load_scripts');
Also try to register style, first.
in case you don't want to use wp_head(); in your template, you could also include your styles directly:
<link rel="stylesheet" href="<?php echo get_theme_file_uri( 'style.css' ); ?>">
beware though: wp_head() includes tons of stuff (scripts, styles,...), by wordpress itself as well as most plugins, so only omit it if you know what you're doing.
Register the style first:
function register_plugin_styles() {
wp_register_style('my-plugin', plugins_url('my-plugin/css/plugin.css'));
wp_enqueue_style('my-plugin');
}
http://codex.wordpress.org/Function_Reference/wp_register_style
Do that way. Dont try to enqueue directly. And put code into functions.php of course.
Fist confirm path of the css file is correct or not if is it a correct try with below code :
function load_scripts() {
wp_enqueue_style('load-custom-css-new', get_template_directory_uri() . '/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'load_scripts');
or Go with this URL.
https://developer.wordpress.org/reference/functions/wp_enqueue_style/
I had the same problem. Although I have implemented this many times before, I lost many hours to find out what went wrong with this.
Because I made my own themes, I had declared this file unit as “fuctions.php” (I lost the -n- letter).
So, besides all the things described above you should also consider, take a good look at the file name and confirm that is “functions.php” (not fuctions, not function etc).
This might be also the reason for you.
I had the same issue. I fixed it by hard refreshing the page with Ctrl + F5 to clear cache and the css loaded normally.
If you are protecting the directory with .htpasswd, the https call generated by get_stylesheet... will fail, and you might lose some time chasing that one.