Adding a CSS File to WordPress

Of all things in the world that are frustrating, Googling for how to do things in WordPress is the absolute worst.

I guess I’m not used to, like, search for stuff that’s popular. Because whatever you search for related to WordPress, the top ten answers are from content farms that wants to sell you something, and in addition to being sleazy, their answers are all wrong.

So you have to resort to The Dark Web (i.e., page two of the Google search results) before you get to something that seems to half-way make sense… and then it doesn’t. Not really.

OK, here’s my issue: I wanted to edit the CSS of a WordPress site with Emacs. Because editing the CSS in a text box in a browser is miserable, horrible and no good. If you Google this, you’ll find out that there’s a bunch of plugins that… allows you to edit the CSS in a text box in a browser.

I just want a file somewhere! That I can edit!

So, on the Dark Web, I found somebody with a solution: Just put the extra code in the theme! Or put the code in functions.php! But won’t those changes be overwritten when WordPress is upgraded? Sure!

*sigh*

So after going to The Even Darker Web (page three), and putting four different answers together, I now have a sustainable solution: CSS in a file, loaded in a way that won’t be overwritten when you upgrade WordPress.

Here’s how. Create the directory /var/www/html/wp-content/plugins/site-css. Put the following in the file site-css.php inside that directory:

<?php
/*
Plugin Name: Site CSS
Description: Site specific CSS
*/

function add_custom_css() {
  wp_enqueue_style("site-css", "/wp-content/plugins/site-css/site-css.css");
}

add_action("wp_enqueue_scripts", "add_custom_css");

Go to the WordPress admin panel, and choose “Plugins”. You’ll see a new plugin there called “Site CSS”. Activate it.

That’s it! You can now edit the file called /var/www/html/wp-content/plugins/site-css/site-css.css to your heart’s delight via Tramp in Emacs and tweak those little rounded CSS corners until they look… just… right:

Did you find this blog on page seventeen in Google? You’re welcome!