How to use wp_enqueue_style() in my WordPress theme?

Question

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'); ?>

lime-cat · Accepted Answer · 2012-08-09 17:57:59Z

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

EAMann · Accepted Answer · 2010-08-12 22:12:51Z

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.

Yes, but my header is not unique to the homepage. So if i add it in my header, its included in every page.
Mark, then you'd place the wp_enqueue_script() call inside an if( is_front_page() ) { ... } conditional statement. That would cause the script to only be added on the homepage, not on every pace.
@EAMann it is not really needed to create a function in this case see lime-cat' s answer. I

Chris Bauer · Accepted Answer · 2012-07-20 07:36:20Z

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

Mukesh Panchal · Accepted Answer · 2016-04-15 09:20:35Z

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

theking2 · Accepted Answer · 2022-11-15 14:42:45Z

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

Michael Davidson · Accepted Answer · 2023-12-16 17:01:25Z

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

Welcome to SO! Your reply is just code, so please, edit and give format as code. Besides, you should comment one answer with just code in order to explain it, maximum, when there are additional answers.

Collectives™ on Stack Overflow

How to use wp_enqueue_style() in my WordPress theme?

6 Answers 6

Comments

3 Comments

Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

3 Comments

Comments

Comments

Comments

1 Comment

Linked

Related