wp-enqueue-style - Read For Learn

How to maintain wp_enqueue_style dependencies set in parent theme style enqueuing

I’m sure you missed it but the dependency parameter should be an array and not a string. So your enqueue function should be: function child_enqueue_styles() { wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’, array(‘bootstrap’)); } or: function child_enqueue_styles() { wp_enqueue_style( ‘parent-bootstrap’, get_template_directory_uri().’/css/bootstrap.min.css’); wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’, array(‘parent-bootstrap’)); } Reference: wp_enqueue_style

My child theme CSS get called twice

You don’t need to enqueue your child theme’s stylesheet. The parent theme does that for you. TwentySeventeen has this line: wp_enqueue_style( ‘twentyseventeen-style’, get_stylesheet_uri() ); That’s still going to run, but twentyseventeen-style is now your child theme’s stylesheet. You just need to enqueue the parent theme’s stylesheet: /** Enqueue the parent and child theme stylesheets **/ … Read more

Remove specific CSS and JS from the head

When you look at the <style|script> tags in your head, you will notice the id attribute there. Example: id=’bootstrap-css’ This – in most cases – was added by a function hooked to wp_enqueue_scripts, wp_enqueue_styles or wp_register_scripts or wp_register_styles hook. In the worst case it was hooked to either the wp_head or the wp_print_scripts hook. In … Read more

The best way to add stylesheets to WordPress

To load scrpits only in front-end pages use: add_action( ‘wp_enqueue_scripts’, ‘my_front_end_scripts’ ); function my_front_end_scripts(){ wp_enqueue_script(‘script_handle’); wp_enqueue_style(‘style_handle’); } To load scripts only in login use: add_action( ‘login_enqueue_scripts’, ‘my_login_scripts’); function my_login_scripts(){ wp_enqueue_script(‘script_handle’); wp_enqueue_style(‘style_handle’); } To load scripts only in admin use: add_action(‘admin_enqueue_scripts’,’my_admin_scripts’); function my_admin_scripts(){ wp_enqueue_script(‘script_handle’); wp_enqueue_style(‘style_handle’); }

Remove a script from a template file using wp_dequeue_script

Script dequeuing calls should be added to the wp_print_scripts action hook, like so: add_action(‘wp_print_scripts’,’example_dequeue_myscript’); function example_dequeue_myscript() { wp_dequeue_script( ‘myscript’ ); } This is because scripts are typically enqueued on the wp_enqueue_script hook, which happens early in the wp_head process. The wp_print_scripts hook happens right before scripts are printed, and thus is latest in the process.

How do I load custom scripts and styles for a page?

Yes, you may add conditional tags to the wp_enqueue_scripts action. See the examples below: function load_assets() { wp_enqueue_style( ‘styles’, get_template_directory_uri() . ‘/css/styles.css’); // loads on any ‘page’ post type if( is_page() ){ wp_enqueue_script(‘main-js’, get_template_directory_uri() . ‘/js/main.js’); } // only loads on the page with a slug of ‘home’ if( is_page(‘home’) ){ wp_enqueue_script(‘home-js’, get_template_directory_uri() . ‘/js/home.js’); … Read more

Adding inline styles from a widget

Got it. So here’s how you insert a hover state halfway the processing of a page without violating the w3c rules. This is the code you don’t want your widget to produce: <div class=”mywidget”> <style>.mywidget a {color:red}, . mywidget a:hover {color:blue;}</style> <a>Link</a> </div> The following validates and is fairly elegant. In your widget generate the … Read more

Preload key requests using wp_enqueue

I am presuming you want to add this as resource hints on the HTML and not as an server push header. As preload is not supported by WP native wp_resource_hints function, you would need to create a custom function printing the preload tags and add somewhere in the beginning of head section of the HTML. … Read more

Adding style sheet to specific page

Utilize the wordpress conditional tags to selectively enqueue / load your stylesheets. This is best practice so you can call any dependancies as well. I’ve provided an example of this in practice. Often we only want to include styles for the front page and then style accordingly to your sub page: <?php // Is this … Read more

How to use wp_enqueue_style() and wp_enqueue_script() only when needed?

I have not tested it, but could is_main_query() (appeared in 3.3) be used here to test that the query being run is the query used to populate ‘the Loop’. (I’m not sure how it handles new WP_Query instances, though). The Codex says that it can be used on the pre_get_posts, but looking at the code … Read more

+ More