I am trying to add a bootstrap js script to my WordPress theme the "right" way but I'm not seeing a link to the js file in the head section of the webpage when it loads. I tried adding it to the header of the WordPress theme the "right" way but no luck. Now I'm trying in the functions.php file and still no luck.
function buns_bootstrap_run(){
wp_register_script('bootstrap-js', get_stylesheet_directory() . '/js/bootstrap.min.js', array('jquery'),'3.2.0', false);
wp_enqueue_script('bootstrap-js');
}
add_action('wp_enqueue_script', 'buns_bootstrap_run');
The action isn't named wp_enqueue_script, but wp_enqueue_scripts
add_action('wp_enqueue_scripts', 'buns_bootstrap_run');
There's a difference between the action that's called when scripts are to be enqueued, and the function that actually enqueues them
Related
Over the past few years, I have worked with many WordPress theme templates. I have now decided to take the next step of learning to create my own WordPress themes.
I am now at the stage whereby I am looking to use the Bootstrap feature, in order to make my website responsive. I understand how to transfer files from the Bootstrap website and place them on my server, however I am at a loss on how they work with my website. Here area few questions:
I have already created a '[theme-name].css' to style my website. Will the Bootstrap CSS file automatically override my theme CSS file (s)?
When I transfer the Bootstrap files to my server, do I simply add the contents of my own stylesheet, the Bootstrap CSS file or call both CSS files together using the 'function.php' file?
When I transfer the Bootstrap files to my server, do I have to rename any of the files?
At present, I am currently calling my stylesheets, by inserting the following code in my 'functions.php' file:
function [theme-name]_script_enqueue() {
wp_enqueue_style('customstyle', get_template_directory_uri() . '/css/[theme-name].css', array(), '1.0', 'all');
wp_enqueue_script('customjs', get_template_directory_uri() . '/js/[theme-name].js', array(), '1.0', true);
}
add_action( 'wp_enqueue_scripts', '[theme-name]script_enqueue' );
Referring to the above code, would I need to change the code to reflect the Bootstrap.css files or simply add another function for the Bootstrap files, so that they can both be called?
Apologies if my questions are using incorrect terminologies, as the Bootstrap functionality is a new set of files to me.
You should be able to just add another call to load the bootstrap css. Make sure you add bootstrap before your custom CSS.
See below
https://bootstrapbay.com/blog/customize-bootstrap/
You shouldnt need to rename any files providing you link them correctly in your function call.
I have been searching the web left right and center for a solution to get the wp_enqueue_style() function to work but I just can't get it.
Code Snippet
//Add some styles to the script
function sreub_enqueue_styles() {
//Use it!
wp_enqueue_style ( 'sreubmainstyle', plugin_dir_url(__FILE__) . 'sreubmainstyle.css' );
}
add_action( 'wp_enqueue_scripts', 'sreub_enqueue_styles' );
I have echoed the path I am using in the wp_enqueue_style function and it is correct but have no idea why the styles are not being applied when I put them in the CSS file?
Switch theme and try. or deactivate the plugin and active again. it should works. This code work for me.
function sreub_enqueue_styles() {
wp_enqueue_style( 'sreubmainstyle', plugin_dir_url( __FILE__ ). 'sreubmainstyle.css' );
}
add_action( 'wp_enqueue_scripts', 'sreub_enqueue_styles' );
Let's do a couple of checks first to determine where the root cause lies:
Check the path
Let's check the path specified to the enqueue instruction. The path you have says the CSS file is located in the same folder (and not a subfolder) as the PHP file that has the enqueue callback.
Is this the case?
Check to see where the CSS file is located in relationship to the PHP file. If it's in a subfolder or elsewhere, you will need to modify your pathing.
For example, let's say the CSS file is located in wp-content/your-plugin/assets/css/sreubmainstyle.css but the PHP file which enqueues it is located in say wp-content/your-plugin/load-assets.php, the URL path to the CSS file would need to absolute by including the full path.
Just double check. If the path is correct, then let's go to the next check.
Loading Before the theme's CSS
The theme's loads after the plugin. WordPress loads plugins first and then the theme. Your code is pre-registering the callback with a priority of 10. More than likely the theme is also using the default of 10. That means the plugin's CSS will load first into the <head>.
Check the <head> and see if where the stylesheet is loaded in relationship to the theme. Use Firefox or Chrome Dev Tools to inspect the HTML markup.
If you find it's not loaded into the DOM (meaning in the HTML markup, then we are back to an enqueue problem. If yes, then go to the next check.
Else, I suspect it's there but before the theme's ’style.css` file. If yes, continue reading this section.
You want your styles to come after the theme to ensure yours override the theme and take a higher precedence. In this case, you want to change the priority to something greater than the default of 10. To do this:
add_action( 'wp_enqueue_scripts', 'sreub_enqueue_styles', 50);
The 50 sets the priority higher, meaning it fires later.
Whoops, CSS is not in DOM
Looking in the HTML markup using Firefox or Chrome, you discovered that it did not even load. It's not there. Okay, you know that the path is right. Next did you load the file that is doing the enqueuing? And did you load it before WordPress fires the event to enqueue?
Check when you are loading the file.
try to run add_action( 'wp_enqueue_scripts', 'sreub_enqueue_styles' ); from the main file or make sure add_action( 'wp_enqueue_scripts', 'sreub_enqueue_styles' ); is run on the activation hook callback
Hi I have a WooCommerce plugin activated and a Mystile theme. I want to add a custom js file located at mystile/includes/js/custom-script.js. Ive read on how to add files through using wp_enque_script but it is not loading the js files when I view page source.
I have this code block on functions.php of my current theme which is Mystile, which should have added my custom js file
function add_custom_assets(){
//Load masonry CSS and JS files
wp_enqueue_script('masonry', get_stylesheet_directory_uri().'includes/js/custom-script.js',array('jquery'), '1', true);
}
add_action('wp_enqueue_scripts','add_custom_assets');
the above code does not work and I cannot see my JS file in source. I really dont know what I am doing wrong. I even tried wp_register_scripts but its the same thing.
The only change I did to the current theme was that I copied the templates folder from the woocommerce plugin directory to my current theme and renamed it woocommerce to override certain stuffs. Any suggestions
you should specify unique handles (so stuff don't get overridden)
function add_custom_assets(){
wp_enqueue_script('my-custom-script-handle', get_stylesheet_directory_uri().'includes/js/custom-script.js',array('jquery'), '1', true);
}
add_action('wp_enqueue_scripts','add_custom_assets');
This is not a ideal solution but a hack and it does work. Enqueue the script as wp_enqueue_style rather than wp_enqueue_script. It does load the script but is a very dirty solution. Still the question is open though
So I have xampp and currently trying to learn some Wordpress development. I've made a simple bootstrap page into Wordpress, but which ever page I put as my front page does not load any CSS, whilst the other pages work fine.
If I change the front page to a page that previously worked fine, it also loses the CSS.
https://i.gyazo.com/bcb75b7a7fa64cd99cb43bd1c3067324.png
https://i.gyazo.com/7184fec113c09755961088fa69191528.png
What am I doing wrong here? I am running everything locally on 127.0.0.1
Thanks in advance for helping me !
The proper way to add css in your files using WordPress to use the function wp_enqueue_style it will not override the css declaration but enqueue it
In your functions.php
function your_scripts() {
wp_enqueue_style( 'filjoseph-style', get_stylesheet_uri());
}
add_action( 'wp_enqueue_scripts', 'your_scripts' );
and putting this <?php wp_head(); ?>in your header.php before </head> in your head section, wordpress will ensure the style.css loaded properly.
I'm trying to enqueue a script directly from my child theme's header just after the wp_hook, but for the life of me it's not showing up - what gives?
// register your script location, dependencies and version
wp_register_script('jqtransform',
get_bloginfo('stylesheet_directory') . '/includes/jqtransformplugin/jquery.jqtransform.js', false);
// enqueue the script
wp_enqueue_script('jqtransform');
Here's the link.
Turns out I needed to add enqueue_script BEFORE the wp_head call, as well as use a different URL path thingamabob. Here's the final code:
function add_my_scripts(){
wp_register_script('jqtransform',
get_bloginfo('stylesheet_directory').'/includes/jqtransform/jquery.jqtransform.js', array('jquery'),'1.0');
wp_enqueue_script('jqtransform');
}
add_action('init', 'add_my_scripts');