Tweaking WordPress CSS on the fly

There are four basic ways I know of to do development on a WordPress site:

  1. Make changes to the live site while visitors are coming and going (not recommended);
  2. Make changes to the site’s code base on a staging version, which can be difficult to set up unless you have a managed host such as WP Engine;
  3. Set up a local (on your computer) version of the live site (typically using Local by Flywheel, DesktopServer, Laravel Valet, MAMP, XAMPP, etc.), make your changes there, and then upload the changes to the server; and
  4. Use the “Styling Remote Websites“ feature of CodeKit.

Making changes to the live site is not recommended because anything you change will be immediately seen by your visitors, whether or not that change is good. You can also hose your site so that no one will see anything until you fix it.

Using a staging version is pretty sweet, but those who cannot afford managed hosting are going to need some serious technical proficiency with git to incorporate into your workflow.

Setting up a local development environment is pretty plush (depending on how you do it), but transferring posts and pages to your development environment can be a tremendous pain in the neck.

This leaves the “Styling Remote Websites“ feature of CodeKit, which is Mac-only. That makes it a great reason to buy an Apple computer. (Full disclosure: I am a stockholder in Apple, but I can assure you that I am completely unbiased in making this recommendation.)

Here’s how the “Styling Remote Websites“ feature of CodeKit works:

This feature is really handy when you are not even certain what CSS you have to address because you can add highlighting, eliminate elements from the page, and generally hack away at the CSS until you locate the specific area(s) where you want to make changes, and then fine-tune them to get just what you want.

With the new versions of WordPress, you can even add your custom CSS through the Dashboard (Appearance -> Edit CSS) so you are not touching your main theme style sheet(s).

You only have to transfer one file, set it up in the right subdirectory on your local machine, change a few settings in CodeKit, and you are off and running.

You will be the only one to see your changes until you commit them to the website so you can play around to your heart’s content.

It’s like magic.

Advertisement