I have a blog on Wordpress. I usually update my CSS file, the CSS file have a tag like:
<link rel='stylesheet' id='rit-style-css' href='https://www.lagaleramagazine.es/wp-content/themes/ri-maxazine/ri-maxazine/style.css?ver=5.2' type='text/css' media='all' />
You can see live here: https://www.lagaleramagazine.es
The problem is that the browser don't update my file, it's keeping the same version (5.2), so the changes that I did to the file didn't show.
I tried to search the CSS file on .php file on my theme but I can't get it to work.
If you visit the file with https://www.lagaleramagazine.es/wp-content/themes/ri-maxazine/ri-maxazine/style.css?ver=5.3 you will see a differente version that https://www.lagaleramagazine.es/wp-content/themes/ri-maxazine/ri-maxazine/style.css?ver=5.2.
I searched a solution but the problem is I can't find the CSS line tag on my Wordpress php files:
/css/style.css?v=<?php echo date('his'); ?>
(I don't know it this will work)
The best way I've found of forcing a stylesheet to enqueue the latest version is using the filemtime() function, which will use the modified date of the file as the latest version. That way it will be relatively cache friendly but also update when the style is.
e.g.
wp_enqueue_style( 'rit-style-css', get_stylesheet_directory_uri() . '/style.css', array(), filemtime( get_stylesheet_directory() . '/style.css' ) );
Make sure to put it in a function that's added to the wp_enqueue_scripts action if it's not already.
If you're working in a child theme or similar then you'll need to dequeue the file before enqueuing it again.
function example_update_stylesheet(){
wp_dequeue_style( 'rit-style-css' );
wp_enqueue_style( 'rit-style-css', get_stylesheet_directory_uri() . '/style.css', array(), filemtime( get_stylesheet_directory() . '/style.css' ) );
}
add_action( 'wp_enqueue_scripts', 'example_update_stylesheet', 100 ); /*Late priority*/
Related
I have a custom template that includes a specific folder where the CSS files are located:
WP\wp-content\themes\tema\css
It does not find the file when I add it to my HTML file like this:
<link rel="stylesheet" type="text/css" href="/wp-content/themes/tema/css/style.css">
I came across get_template_directory() but I don't know how to implement this so that I can access to my template folders?
The first thing to point out here is that get_template_directory() returns an absolute path instead of a URL.
Instead you will need to make use of either get_template_directory_uri() or get_stylesheet_directory_uri().
Your example would then look like this:
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/style.css">
The second thing to address is how you are adding your stylesheet. Wordpress has a very useful function that is optimised for adding stylesheets called: wp_enqueue_style().
Instead of manually adding your stylesheet to the header.php inside your theme directory, you can instead add it inside your functions.php file, like this:
add_action( 'wp_enqueue_scripts', 'so_my_custom_scripts' );
function so_my_custom_scripts() {
wp_enqueue_style( 'my-custom-stylesheet', get_template_directory_uri() . '/css/style.css', array(), '20180618' );
}
Add this inside your functions.php
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
function theme_name_scripts() {
wp_enqueue_style( 'st', get_stylesheet_directory_uri() . '/css/style.css', '', '0.0.1', 'all' );
}
Try tilde ~ to come to main root of website like this
<link rel="stylesheet" type="text/css" href="~/wp-content/themes/tema/css/style.css">
Both style.css and custom css file are not working in WordPress version 4.9.4.
Included wp_head() before ending of the <head> tag also
included wp_footer() before ending of the <body> tag.
functions.php file:
function theme_styles(){
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_style( 'boostrap', get_template_directory_uri() . '/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'theme_styles');
Rename function.php to functions.php
WordPress won't call the file if it's not named correctly.
I have some trouble making wp_enqueue_script and wp_enqueue_style work..
In the begining of functions.php file, I added this function :
<?php
require_once ....
[....]
add_action('wp_enqueue_scripts', 'my_enqueueScripts');
function my_enqueueScripts(){
wp_register_script('my_js_script', get_template_directory_uri().'/myDirectory/my_js.js', array('jquery'), '1.0', true);
wp_enqueue_scripts('my_js_script');
wp_register_style('my_css_script', get_template_directory_uri().'/myDirectory/my_css.css', false, '1.0', 'all');
wp_enqueue_style('my_css_script');
}
[....]
<?php
This does not work...
My scripts are not loaded and they are not in the "sources" files of my website page...
I tried to put my css file in templates/thetemplate/css/ and my js file on in templates/thetemplate/js/ but this does not solved the problem.
In the template header.php file, the wp_head(); call is here.
And in the footer.php file, the wp_footer(); is also here.
I don't know how to make this work....Do I miss something ?
Thanks in advance for your help...
Try this
add_action('wp_enqueue_scripts', 'my_enqueueScripts');
function my_enqueueScripts(){
wp_enqueue_script('my_js_script', plugins_url('/your-plugin-folder/your-subfolder/my_js.js'), array('jquery') );
wp_register_style( 'my_css_script', plugins_url('...' ) );
wp_enqueue_style( 'my_css_script' );
}
If it does not work something's wrong with your paths. The code above is correct but it doesn't locate the file using plugins_url() or get_template_directory_uri() properly. You could try debugging if you echo the two functions and analyze the urls/paths.
Edit:
If you are working with a theme and not a plugin plugins_url() might not work (I am not 100% sure).
I have created a child theme and have created a page-splash.php in the child theme and have also created a page-splash.css for this page, but somehow I am unable to load the page-splash.css for the page-splash.php file.
This is my code in the functions.php ( in the child theme folder)
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
function splash_enqueue_style() {
wp_enqueue_style( 'page-splash', get_template_directory_uri().'/css/page-spash.css' );
}
add_action( 'wp_enqueue_scripts', 'splash_enqueue_style' );
?>
I'd really appreciate your help on this.
What am I doing wrong??
I am working in localhost and will transfer these files to a working domain after things are working properly.
Couple of things, starting with the simplest -- You've got a typo in your page-splash.css file path. You've got it typed as page-spash.css
Additionally, there's probably no need to call two separate functions for this. You could enqueue both of those styles in one call like so:
function splash_enqueue_style() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
if(is_page_template('page-splash.php'){
//Path to your template.. if it's in a dir, include it before the file
wp_enqueue_style( 'page-splash', get_template_directory_uri().'/css/page-splash.css' );
}
}
add_action( 'wp_enqueue_scripts', 'splash_enqueue_style' );
Well, I kept on searching for answers and I have found it.
It seems that using wp_head() is important if you want to load all javascript
or css files and it started to work when I did that.
I am having an issue with loading some javascript in a child theme I am creating for one of my themes.
Essentially I do:
get_stylesheet_directory() . '/path/to/javascript.js'
which is what your suppose to do, But , as per the documentation, I am getting:
mysite.com/dev/home/path/to/wordpress/path/to/theme/path/to/js.js
which is causing it to not find the required file. because home is at the root of the site.
any ideas on what I can do to fix this?
get_stylesheet_directory() returns a server path. I'm pretty sure you want:
get_bloginfo('stylesheet_directory');
That will return a URL of your stylesheet directory in relation to your Wordpress Installation so you can load external assets like Javascript files that reside in your theme.
I think this will do the trick:
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri();?>/path/to/javascript.js"></script>
It's better to enqueue scripts and styles the WordPress way.
https://developer.wordpress.org/reference/functions/wp_enqueue_script/
https://developer.wordpress.org/reference/functions/wp_enqueue_style/
Put this in functions.php
add_action( 'wp_enqueue_scripts', 'enqueue' );
function enqueue() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_style( 'theme-style', get_stylesheet_directory_uri().'/css/theme.css' );
wp_enqueue_script( 'theme-scripts', get_stylesheet_directory_uri().'/js/theme.js' );
}