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');
Related
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
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
i want to hide few plugins style sheets to reduce load on our Index page and categories pages. Actually we want to display plugin style sheet only on Post not on other pages.
we have used following code in plugin, but it doesn't work. please help how to use it.
if( is_single() || is_singular('post') ) wp_enqueue_style('savrix-style.css');
If you are modifying your own plugin I see no reason your code wouldn't work. The is_single() condition is not needed, and will result in the stylesheet being loaded on custom post types and other singles that you don't intend.
However your wp_enqueue_style call is incomplete, so unless you have a wp_register_style call somewhere else defining the handle and URL of the stylesheet you need to change it to something along these lines:
if (is_singular('post')) {
wp_enqueue_style('savrix-style', plugins_url('savrix-style.css', __FILE__);
}
However, I get the impression that you are actually trying to remove a stylesheet included by a thirdparty plugin. It is generally a bad idea to modify a third-party plugin, as your modifications will be lost on the next update... it is very difficult to maintain that sort of modifications in the long run.
Instead make a new plugin and modify whatever you need from there.
What you want to achieve can be accomplished by:
Create a new folder in the wp-content/plugins folder, fx. my_load_reducer.
Inside that folder create a new file called my_load_reducer.php
Paste this in the file:
<?php
/*
Plugin Name: My Load Reducer
Description: Removes unneeded and unwanted stylesheets from other plugins
Version: 0.1
*/
//Use a class to avoid conflicts
class my_load_reducer {
function __construct() {
//Hook into wp_enqueue_scripts with a high priority
add_action( 'wp_enqueue_scripts', array($this, 'deregister_styles'), 1000 );
}
function deregister_styles() {
//Check that current post is not a single post
if (!is_singular('post')) {
//deregister the stylesheet - this removes the twentyfifteen
//main stylesheet - obviously you need to substitute the handle
//of the stylesheet you actually want to remove
wp_deregister_style( 'twentyfifteen-style' );
}
}
}
//Instantiate the class
$my_load_reducer = new my_load_reducer();
Activate the plugin through the wordpress admin.
You can remove perticular plugin css on selected page.
below code is remove plugin css to other pages and display only on post pages:
/*disable loading plugin css to page and load on post page*/
add_action('wp_print_styles', 'my_deregister_styles', 99999);
function my_deregister_styles()
{
if(!is_single())
{
wp_dequeue_style('plugin-css-handle');
wp_deregister_style('plugin-css-handle');
}
}
where 'plugin-css-handle' is perticular plugin's css handle which you want to remove.
I can't work on any specific theme file like header.php, footer.php OR function.php within theme directory.
Reason is project always need new theme and theme is get changes in each week.
So I want something like that will work on each theme, no matter which theme admin applied.
I tried wp_enqueue_script() but again I need work on theme's function.php file.
The only way to do this is to run wp_enqueue_script() from outside of the theme (i.e. NOT in functions.php). The only way you can do that is to use a plugin.
See: http://codex.wordpress.org/Must_Use_Plugins
Or: http://codex.wordpress.org/Writing_a_Plugin
Create a plugin by adding a .php file in the /wp-content/plugins/ directory, or possibly even better for this situation create a 'must use' plugin by creating a .php file in the /wp-content/mu-plugins/ directory.
The structure of this .php file should be something like the following:
<?php
/*
Plugin Name: Example Plugin
Description: Any functions that should persist even if the theme changes.
Author: Your Name
Version: 1.0
Author URI: http://yoururl.com
*/
function my_scripts() {
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
}
add_action('wp_enqueue_scripts', 'my_scripts' );
?>
You need to write a plugin that rewrites theme's sections. A good start for creating a plugin is here. If your themes shares the same Javascript you could try to add your things to those Js.
I'm creating a wordpess plugin and I need the stylesheet to be loaded onto the front-end (included in wp_head). The plugin's stylesheet is vital so it will show up on the front-end.
How can I achieve this?
I've tried several methods such as enqueing but it doesn't show up. Perhaps I'm placing the code in the wrong file?
As you can see below, I do enqueue the scripts and styles but it only shows up on the edit screens and not on the front-end like i need it too.
function input_admin_enqueue_scripts()
{
// register scripts
wp_register_script('input-icon_field', $this->settings['dir'] . 'js/input.js', array('input'), $this->settings['version']);
wp_register_style('input-icon_field', $this->settings['dir'] . 'css/input.css', array('input'), $this->settings['version']);
// scripts
wp_enqueue_script(array(
'input-icon_field',
));
// styles
wp_enqueue_style(array(
'input-icon_field',
));
}
try removing array from wp_enqeue_script
function input_admin_enqueue_scripts() {
// register scripts
wp_register_script('input-icon_field', $this->settings['dir'] . 'js/input.js', array('input'), $this->settings['version']);
wp_register_style('input-icon_field', $this->settings['dir'] . 'css/input.css', array('input'), $this->settings['version']);
// scripts
wp_enqueue_script('input-icon_field');
// styles
wp_enqueue_style('input-icon_field');
}
and add an action to this function like so
add_action('wp_enqueue_scripts', 'input_admin_enqueue_scripts');