How to use wp_enqueue_style() in my WordPress theme?

1 Views

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.

Read More

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'); ?>
Post Views: 1

Related posts

Leave a Reply

6 comments

  1. 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

  2. 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.

  3. 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 );
?>

  4. 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');

  5. 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)?

  6. 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() {

    wp_register_style( ‘my_style’, get_template_directory_uri(). ‘/css/my_style.css’ );
    wp_enqueue_style( ‘my_style’ );
    }
    // Register style sheet.
    add_action( ‘wp_enqueue_scripts’, ‘load_style’ );

    For more details