Justin Cox's Mindless Chatter » WordPress

Easy Spoiler Tags in Wordpress with CSS

Justin — Sun, 14 Dec 2008 17:38:51 +0000

I’ve been known to spoil a few things in the past on Twitter and here on the blog. Sometimes my excitement prevents me from using better judgement. To try and counter that, at least here on the blog, I’ve created a simple spoiler tag.

On the site, the spoiler tag will simply black out the text in question. Should you want to read the spoiler, all you have to do is put your mouse on the text and all will be revealed. Check it out:

You’re reading this text and all is really cool but all of a sudden I decided to drop some really revealing information that you weren’t expecting. Now, thanks to the spoiler tag, you don’t have to see if you don’t want to.

Should you want to implement this on your own site, all you have to do is add the following CSS to your style.css template file:

.spoiler { background: #000; color: #000; }
.spoiler:hover { background: inherit; color: inherit; }

Then, the next time you decide to write something that could contain potentially spoilerific details, just wrap the text in a spoiler span:

Juicy information goes here.

I’m sure there are other things you could use this for, like making your blog posts look like something released under the Freedom of Information Act, but I’ll leave that up to you.

WordPress URL Shortcuts

Justin — Wed, 27 Aug 2008 17:09:14 +0000

I learned something today that might be beneficial to anyone who runs, or visits, websites running the very popular WordPress software package: it creates shortcuts. You see, I was attempting to type the url for my super secret stats page: http://www.justincox.com/mint/ but instead accidently typed in http://www.justincox.com/min. Instead of getting the 404 error, I was redirected to http://www.justincox.com/2008/mint-worry-free-money-management/. Curious, I attempted a few more ’shortcuts.’

/gen took me to /2008/generation-kill/

/aug took me to /2008/august-blog-o-rama/

/fresh took me to /2003/freshmen/

It looks like this only works with the actual post slugs and not the post title. For example, the Freshmen article originally had a slug of /forums-flashback/. Typing in /fresh returned a 404 error. When I typed in /forums it worked. After changing the slug to freshmen the /fresh shortcut found the article in question.

I’ve also tested this on Two Slashes and it works there too. We’re both running WordPress 2.6.1 so I don’t know if it goes further back, but I have only noticed this since upgrading a few days back.

Find any other cool ’shortcuts’ around here? Try out some word combinations in the URL bar and let me know what you come across in the comments below.