Brackets – > script everything

Unfortunately Dropbox changed their policy on accessing documents publicly, so this process no longer works. Left for posterity. A more effective way of managing the stylesheets within WordPress is by using the new Brackets editor and Dropbox. If you want to be able to manage your CSS styles with git and yet also want to automatically manage the minification of your CSS files as well as the transfer of your stylesheets to your WordPress installations, then read on as to how we manage this. STEP ONE First, if you haven't already got a free copy of Brackets, go and get it. I'll wait. STEP TWO After installing Brackets, click on File > Extension Manager and then select the Available tab. In the search box enter the word Minify and then click the Install button next to the Minifier extension. Install Minifier extension in Brackets STEP THREE Copy your existing style.css file from your theme's WordPress editor and copy its contents into a new Brackets file. When we return to this file we will eliminate the majority of its content, bar the theme's comment box. STEP FOUR Save the new CSS file in Brackets to a location on your computer. I use a location within my Sites folder on my Mac OSX (eg. ~/Sites/location/CSS/) You should also upload any CSS dependant images into this same directory. My WordPress theme has a couple of little icons which are referenced in its CSS, so I need to create and upload those files into the same area where I have stored my CSS file (eg. ~/Sites/location/CSS/images/). STEP FIVE Once you have copied your CSS file, create a minified version of it. In Brackets simply click on Edit > Minify. For ease of automation you can also select Edit > Minify on Save which will save any edits to the initial minified file created. (I will note that the minified file will need to be created first using Edit > Minify before you can use the Minify on Save command – it doesn't seem to work if you select it first and then save your CSS file.) STEP SIX Ensure you have Dropbox installed and opened and that you have the Public folder synced onto your computer (you can always check by looking into your Dropbox's settings and on the Advanced tab clicking on the "Selective Sync" button and seeing what is selectively synced from Dropbox to your computer). We will now symlink the CSS files into this folder. Open up terminal and run the following command: $ ln -s ~/Sites/location/CSS/* ~/Dropbox/Public/MySite/CSS/ Where ~/Sites/location/CSS/* is the location of your existing stylesheets and images, and ~/Dropbox/Public/MySite/CSS/ is the location of where you would like to have the stylesheets and images publicly accessed. Please note that the last folder in the Dropbox Public folder should not be created – the symlink command should create it for you. STEP SEVEN Get the public link from within Dropbox and wrap it in a style sheet link tag. Get the public link in Dropbox by right-clicking on folder and selecting Copy public link Where https://dl.dropboxusercontent.com/u/00000000/css/main.min.css represents your public link from Dropbox. STEP EIGHT Copy the stylesheet link tag into an area within your WordPress where you can insert information into your theme's header. Check to make sure your stylesheet is loading from this source, by inspecting the header section of your website and identifying the link tag – if in Chrome even select the link to ensure the stylesheet is being loaded. STEP NINE Go back to your theme's WordPress editor and remove all CSS details that have been inserted into your stylesheet from Dropbox. This should just leave you with the theme's comments identifying the name, author and other details of the stylesheet. Voila! Now you can edit your stylesheet directly from your computer and any edits saved are automatically sent to your live WordPress sites! Be careful with this – you may want to implement a versioning control system such as git just to protect anything untoward that may happen.