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).
Related
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*/
I am making a new theme for WordPress using guide from this site https://www.taniarascia.com/developing-a-wordpress-theme-from-scratch.
The writer of tutorial the says that using <link href="" rel="stylesheet">
is not the most correct way to load scripts.
I am thinking to use wp_enqueue_style() and add_action() on function.php to load the .css file. I have already had three files, index.php, function.php, and style.css in my theme directory but I can't seem to make it work.
Below is the code I use to load the .css file:
<?php
function enqueue_my_styles(){
wp_enqueue_style('style', get_template_directory_uri().'/style.css');
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_styles' );
?>
Is your functions file named functions.php or function.php? This should be functions.php and is fundamental.
Your code looks correct, but could actually be shortened a little as in the twentyfifteen Wordpress template;
function twentyfifteen_scripts() {
// Load our main stylesheet.
wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' );
You'd use get_template_directory_uri() for loading a custom file within the template directory.
function my_custom_styles() {
wp_enqueue_style( 'my-custom-style', get_template_directory_uri() . '/custom-style.css');
}
add_action( 'wp_enqueue_scripts', 'my_custom_styles' );
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.
how do I actually add jQuery to html5blank wordpress theme by toddmotto?
I'm quite new to wordpress so I'm not really sure how does this work.
For normal html, I'll just link a script tag of jquery and another script tag with $(document).ready.. . . . . and start the jquery codes.
Would really love if someone who had experience using html5blank theme could shed some light.
Thanks much!
The WordPress recommends add jquery from WordPress itself.So you can add jquery using following way.
Add code to your current theme functions.php file.
function func_add_my_jquery() {
wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'func_add_my_jquery' );
I load all my scripts from functions.php by using wp_enqeue_script. This will avoid duplicate loading.
If you only want to load Query, you can do this by:
function load_my_scripts() {
wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'load_my_scripts' );
This will load the jQuery that follows WP. You can see other default scripts you can load here:
If you want to load other JS scripts, then you must use this:
function theme_name_scripts() {
wp_register_script( 'my-script', get_stylesheet_directory_uri() . '/js/my-script.js', array('jquery') );
wp_enqueue_script( 'my-script' );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
The array('jquery') is for dependencies and in this case means that jQuery must be loaded before this script can be loaded.
If you want to register a newer version of jQuery, you first have to deregister the loaded jQuery:
wp_deregister_script( 'jquery' );
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' );
}