I googled the same question but couldn't find the perfect answer, Can anybody make it clear on how to use LESS CSS in WordPress theme development? I don't want to rely upon online scripts.
I already tried https://github.com/sanchothefat/wp-less but no luck..
Your question is very broad? Too broad I think.
How does your develop process looks now? How do you want to compile your Less code.
Notice that Less code should be compiled into static CSS. Of course you can use the in browser version too, but in-browser compiling is not suitable for production.
Basically you should compile your Less into CSS first. You can compile styles.less into styles.css and upload that file into your wp-content/themes/yourthemes folder. Instead of styles.css you can use any other file and integrate in with the wp_enqueue_style function into your theme.
In the case that you want your Less code via the WordPress dashboard, you can install the WP Less to CSS plugin. This plugin compiles your Less code into a static CSS file as described above.
The JBST theme use the Less plugin describe above. You can also take a look at the Roots.io theme, which uses Less, npm and grunt to build.
A process that, for now, I use occasionally. I installed Koala, which creates CSS files from LESS on the fly. Then we create style.less and as we write code in it - through, for example, WinSCP upload to the server in the theme folder.
You can also use a copy of the site on a local server like OpenServer (OSpanel). With Koala create CSS automatically from LESS in theme folder on local server. After changes - upload them to the work server.
You can use Grunt.js to compile the file locally or some app lice CodeKit. Also you can use some wordpress plugins like this one: https://wordpress.org/plugins/wp-less/
I used that plugins before an it works fine.
Related
I am developing a WordPress Plugin. Which have the dynamic colors options from WordPress Backend.
Now, in a plugin, I am using the LESS file with variables to give the dynamic output to the users whenever they change the colors from Backend Admin Settings.
If anyone can help me with the tool that compiles the LESS file on the fly and make the CSS file.
OR
Can I use the LESS file directly in my WordPress enqueue_script?
Please suggest the best.
I've taken over the administration of a website. The developer before used GULP to track changes to the theme code. Unfortunately GULP is causing me more problems than it is helping me move forward, so I would like to know if there is a way to take GULP out of the theme again? The previous developer refuses to set up GULP for me. I only have access to the theme directly via WordPress or FTP. So now if I want to make adjustments to the CSS or the theme code, I have to do it on 3 files (that are named the same, but placed in 3 different folders), because the caching/mechanisms of GULP take effect in several places.
Since I'm not familiar with GULP I hope these information are enough for you to help me with that issue.
I have theme and I add sass and gulp in my theme. here are the list of file I have.
I would like to ask How can I run sass in my theme? I try to google it, but no right explanation how they did it. I found this also link, but no clear explanation. Please help me. I want to learn more about sass. If you have tutorial. please give me link.
sorry i didn't mention the OS I used. I used windows.
You have assets folder. All source files including .scss files must be there. Then add gulp task to compile scss. It will take files from assets folder and put them to dest folder (dest folder is for compiled resources). Then add link to compiled .css file from dest to wp header.
Tutorial.
Please follow steps mentioned here
Hope this helps you.
Also, look at setting up a child theme, then you can keep all your code isolated.
I'm hoping to use SASS with a new WordPress theme I'm using.
So far, I haven't been able to get it to work on my localhost using Windows. I'm assuming this is because I don't have Ruby installed, which is easy enough to install.
My question is this: If a user of my theme wants to develop their site on their localhost, will they also need to install Ruby?
If so, is there any way around this? I would prefer that users just download the theme and be able to use it without any other prerequisites.
Any info would be really appreciated.
Thanks!
SASS is just a preprocessor for CSS so you only need it on your system in order to process the SASS files into CSS.
One thing to note though, if you decide to minimize your CSS for the distribution of your theme, you will need to model your root SASS file with the following comments:
/*!
Theme Name: {Theme Name}
Theme URI:
Author: {Your Name}
Author URI:
Description:
Version: 0.1
License: GPL-3.0
License URI: https://www.gnu.org/licenses/gpl-3.0.en.html
Tags:
*/
The "!" after "/* is important as this will tell SASS that this comment is important and it will retain it no matter how you want your CSS output. If you do not, SASS can strip out all comments (which you normally want) but without that comment header, WordPress will not recognize your theme as a valid one.
You will need to install ruby on your local dev environment to build your SASS theme. Your theme available for download should just have the versioned .css files not the .scss build files, though it shouldn't hurt to include them.
I was wondering why .css file rewrite itself on Joomla.
I have bought Joomla template. In template manger under general settings I am using Development Mode On. If I use Development Mode OFF I am not able to change .css files.
For example: I am using theme which is located in t3-assets/dev/ theme i choose
When I use On mode I find section I want to change, it works. But after some time it rewrites it self. I was wondering how to prevent that if possible?
Some templates are overwritten alone , go to your server and take off the writing mode in the template folder.
My guess is that the template is using LESS, so CSS are compiled each time you modify LESS. If that is the case, you should not prevent it, but find the correct way to include your modifications (probably there's a "custom.less" or similar file for that).