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!

One thought on “Adding a CSS File to WordPress”

  1. I once wanted to find the product key of my PC, so I searched how to do it on the web. All of the articles I found on how to get your product key were basically shilling some proprietary software product that charges an arm and a leg for something that I could probably just write myself if I only knew more about the Windows registry. Fortunately the trolls on 4Chan suggested several free utilities that did the same thing as these proprietary utilities and then some (it’s so weird how Internet trolls are always more helpful than the people claiming to be trying to help). I absolutely hate when I try to find out how to do some task on the computer and all I find is a bunch of people trying to sell me shit.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s