What I’ll show you: How to add LESS to WordPress simply
Lesson time: one beers worth
Difficulty: Easy
Requirements: WordPress admin access, FTP access, an interest in using LESS for your website styling
Remember that Simpsons scene where Dr Hibbert tries to explain to Homer he requires open heart surgery? You know, this one:
Well that’s kind of what this lesson is about -I’m dumbing it down a shade and giving you the bare essentials for you to be able to add LESS to WordPress. In not time you will be able to Install and start using LESS for styling your website.
Okay straight into it aye?
How to add LESS to WordPress simply
1. Connect to your website via FTP
2. Open your theme folder and create a new folder called “lesscss”
3. There is only ONE file you need to download – and that file is “less.js” You can get it here: http://lesscss.org/#download-options
Hint: Right click on this link and save link as. Save it to desktop or somewhere easy to grab it. That is your less.js file.
4. Now put it in the “lesscss” folder you just added to your theme folder
5. Create a new file and name it “stylesheet.less” This is your first .less file! With a few extra steps you will be able to add less CSS code to this and it will do LESS things.
6. Open the “functions.php” file that is located in your theme folder. If you don’t have a “functions.php” file, create one just like you did the style.less file (except save it in your theme folder, not lesscss folder).
7. Insert this code into the “functions.php” file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function load_LESS() { $path = get_stylesheet_directory_uri() . '/lesscss/'; /* LESS stylesheet and less.js */ $output = "\n"."<!-- Loading LESS stylesheet and less.js -->"."\n"; $output .= '' . "\n"; $output .= '<script src="' . $path . 'less.js"></script>' ."\n"; /* Auto refreshing the page when saving the stylesheet */ $output .= "\n" . "<!-- Autorefresh for LESS.js -->" . "\n"; $output .= '<script>// <![CDATA[ ' . "\n"; $output .= ' less.env = "development";' . "\n"; $output .= ' less.watch();' . "\n"; $output .= ' // ]]></script>' . "\n\n"; /* Printing on page */ print $output; } if ( ! is_admin()) add_action( 'wp_head', 'load_LESS' ); |
8. Save that file and you should be good to go!
9. Open style.less and do some LESS things.
Please let me know if you were able to add LESS to WordPress simply by using these instructions, and let me know if you couldn’t get it to work – I’ll try and help you out. I Hope you can
Oh by the way, I got this info from another post. So if you need to install LESS and this isn’t working for you then head to this address: http://carlorizzante.com/development/quickly-use-less-wordpress-theme/
No Comment
You can post first response comment.