Install WordPress on an Ubuntu VPS
5 minute read
CSS precomilers are all the rage these days. This is for a good reason, they are amazing! Almost everyone at this point has seen frameworks such as Bootstrap that fully utilize LESS or SASS to keep their code readable, simple, and organized. Using these precompilers with WordPress is easy too. There is only one extra step that is necessary but you will get used to it or you can use Grunt or Gulp to get around it (more on this later). For this post I will be using LESS. There is really no reason for this other then preference. For a lot of my projects I gank portions of Bootstrap (especially the mixins and grid) so I have a tendency to use LESS.
You can check out the LESS website for more information and a guide to the language itself.
sudo apt-add-repository ppa:chris-lea/node.js -y && sudo apt-get update && sudo apt-get install nodejs -y && sudo aptitude install npm -y && sudo npm install -g less
Basically, what we are doing here is adding the Node repository, installing Node, installing the Node Package Manager (npm), and then globally installing LESS. If you are running a different version of Linux for your server then you can Google how to install the LESS compiler. It's not hard and once you do it you can forget that you ever had to install Node in the first place. Five minutes of work is really worth the trouble in the long run.
First off, let's briefly look at the file structure to use when using LESS with WordPress.
/wp-content/themes/your-theme-name/ /style.css /less/ /style.less /normalize/ normalize.less /mixins/ /forms/ /single/ ...
I use something similar to the above when I am starting a new WordPress project. The style.css file will be compiled from the style.less file.
In my experience, it is best to keep style.less just for @imports. using this paradigm forces you to create more clean and readable code and also keeps you (and me) from being lazy and shoving styles in the wrong place due to haste. If you use a structure like this it is extremely simple to compile the LESS to the required style.css. As an example the following Gist is a snippet from the style.less for this site. One item worth noting is that the Theme Name portion at the top is very important and part of how WordPress knows that your theme exists. If you need a reference you can refer to the WordPress Theme Development page.
/* * Theme Name: RyanFrankel.com */ @import "variables.less"; @import "bootstrap/mixins.less"; @import "bootstrap/normalize.less"; // Bootstrap Core CSS @import "bootstrap/scaffolding.less"; @import "bootstrap/type.less"; @import "bootstrap/grid.less"; @import "bootstrap/buttons.less"; // Utilities @import "bootstrap/utilities.less"; @import "bootstrap/responsive-utilities.less"; /* MIXINS */ @import "mixins/tab-size/tab-size.less"; /* TYPE */ @import "type/type.less"; /* FORMS */ @import "forms/forms.less"; /* HEADER */ @import "header/header.less"; /* FOOTER */ @import "footer/footer.less"; /* SEARCH */ @import "search/search.less";
Once you have your style.less going it is really simple to add more styles to your site. For example, most sites these days use some sort of normalization CSS to aid in cross browser compatibility. If you wanted to add this file you simply add an import to the style.less file, add the directory, and then add the CSS to normalize.less. Since LESS is backwards compatible with CSS you wil never have an issue with cutting and pasting libraries of CSS code if you need to. I do recommend learning how to use LESS though because the syntax is much more readable and maintainable then pure CSS.
Once you have your basic file structure set up it comes time to compile your style.less into style.css. This style.css file will have all of your styles in it. I do not recommend compressing the style.css with the LESS compiler. Instead use W3 Total Cache to minify ALL of the sites CSS (including plugin CSS) into one big minified CSS file. To compile our style.less you should go to the command line, go into your themes directory, and then run the following command.
$ cd /wp-content/themes/your-theme-name/ $ lessc ./less/style.less > style.css
Uh, yeah, that's it. You will find that you have a new style.css and your theme shows in the WordPress Admin area.
After a while, you will grow a little tired of compiling the LESS all of the time. There are a few ways to do this automatically and I encourage you to check out Grunt and Gulp to help. Also, SASS has a companion library that does this too. For now though, we will simply create an alias so we can do with with just a few key strokes. I use 'rfless' as my command alias on this site, you can use whatever you can remember. Open you ~/.bashrc (assuming you are using bash) in your favorite editor and at the bottom add something like the following:
alias rfless='cd /your-wordpress-directory/wp-contnt/themes/your-theme-name/ && lessc less/style.less > style.css'
Now save the file and reload your bashrc with or log out and log back in. OK, you are all set. When you want to rebuild your style.css file all you have to do is:
Of course, you will use whatever command you created and not 'rfless'. If you want to though I would be flattered.
This might seem like a lot but once you have done this process once or twice it is very straightforward. It will save you tens or hundreds of hours during your workdays and all of the people that ever look at your code will thank you. I highly recommend this if you aren't already using some sort of CSS precompiler with WordPress. Feel free to leave any questions below.