CODEWITHSUNDEEP
phpwordpress
jessegavin
jessegavin

Reputation: 75650

How to use wp_enqueue_style() in my WordPress theme?

I am building out my first WordPress site for a client. I really want to use LESS for CSS and found a WP plugin named WP-LESS.

Now, I am total WordPress newb, but it appears that this plugin requires me to use a function called wp_enqueue_style() to tell WordPress to process the .less file.

I can't figure out where I use this function. I looked in my header.php file in my theme directory and I see this.

<link rel="stylesheet" type="text/css" media="all"
  href="<?php bloginfo( 'stylesheet_url' ); ?>" />

Am I supposed to replace this code with something like this?

<?php wp_enqueue_style('mytheme',
  get_bloginfo('template_directory').'/style.less',
  array('blueprint'), '', 'screen, projection'); ?>

Upvotes: 22

Views: 69080

Answers (6)

Junaid Siddique
Junaid Siddique

Reputation: 1

If you enter this code correctly you must be see this function is exist or not in your index.php file wp_head(); & wp_footer(); if is not exist, you need to be add this function in your index file. you need to add this wp_head(); before haed tag, and another one add before body tag.

function load_style() {<br><br>
   wp_register_style( 'my_style', get_template_directory_uri(). '/css/my_style.css' );<br>
   wp_enqueue_style( 'my_style' );<br>
}<br>
// Register style sheet.<br>
add_action( 'wp_enqueue_scripts', 'load_style' );

For more details

Upvotes: 0

theking2
theking2

Reputation: 2813

To make sure the enqueue is done at the proper time use add_action().

So it would be something like the following in functions.php:

add_action( 'wp_enqueue_scripts', function() {
  wp_enqueue_style('main-style', get_template_directory_uri() . '/style.less');
});

Make sure to have a <?php wp_head(); ?> somewhere in your header.php.

btw no need to name the function, it can only a potential name clash or typo Preferably use a anonymous function

Final remark: Why not compile the .less files in the development environment and deploy the resulting .css file (minified or otherwise)?

Upvotes: 1

Mukesh Panchal
Mukesh Panchal

Reputation: 1966

Add below function in your theme function.php and you get style and script.

<?php
if ( ! function_exists( 'add_script_style' ) ) {
    function add_script_style() {
        /* Register & Enqueue Styles. */

        wp_register_style( 'my-style', get_template_directory_uri().'/css/my-style.css' );
        wp_enqueue_style( 'my-style' );

        /* Register & Enqueue scripts. */

        wp_register_script( 'my-script', get_template_directory_uri().'/js/my-script.js' );
        wp_enqueue_script( 'my-script');
    }
}
add_action( 'wp_enqueue_scripts', 'add_script_style', 10 );
?>

Upvotes: 5

lime-cat
lime-cat

Reputation: 137

wp_enqueue_style usage inside of the theme or the plugin:

wp_enqueue_style( 'my-style', get_template_directory_uri() . '/css/my-style.css', false, '1.0', 'all' ); // Inside a parent theme
wp_enqueue_style( 'my-style', get_stylesheet_directory_uri() . '/css/my-style.css', false, '1.0', 'all' ); // Inside a child theme
wp_enqueue_style( 'my-style', plugins_url( '/css/my-style.css', __FILE__ ), false, '1.0', 'all' ); // Inside a plugin

Upvotes: 30

Chris Bauer
Chris Bauer

Reputation: 51

Ran into this issue myself, and EAMann's tip almost worked. It might be the version of WordPress (3.4), although I'm not a php developer so I'm not sure, but I needed this below the function instead of what was provided:

add_action('wp', 'useLess');

Upvotes: 5

EAMann
EAMann

Reputation: 4146

Not quite, but almost. What you want to do is place a function in functions.php that queues your script.

So:

function addMyScript() {
    wp_enqueue_style('mytheme', get_bloginfo('template_directory').'/style.less', array('blueprint'), '', 'screen, projection');
}
add_action('wp_head', 'addMyScript');

Then make sure you have do_action('wp_head'); in your header.php file and it should work just fine.

Upvotes: 27

Related Questions