How to set up your website to participate in the SOPA/PIPA blackout

Edit: Since I wrote this, has added a setting to everyone’s Dashboard that’ll let us do all this automatically. For details, pleas either skip to the last section of this article, or read the official WordPress blog posting. I’ll be using the official WordPress method, but people can still use this page’s instructions if they want to customize anything in the ribbon or the blackout page. It can also be used before and after the WordPress tool, which will run only from 8am to 8pm.

In the middle of a forum discussion about how to black out your site, a gentleman from the UK asked us, essentially, “is SOPA really so bad? Why all the worry? We have similar laws on the books here already, and they’re almost never used.” (I’m paraphrasing.) That question carries with it an implicit trust of authority that we just don’t have in the US, born as it is out of a revolution that’s still in relatively recent historical memory.

So much of the distrust of SOPA and it’s Senate sibling, PIPA, is rooted in the simple fact that we don’t really trust our government. When the U.S. government gets unilateral power, the U.S. Government uses that power. And laws that put unilateral power in the hands of Big Content corporations–SOPA and its ilk would do that–make us shudder.

In response, people are planning to black out their sites tomorrow, on Wednesday 18 January 2012. The home of snarky banter, Reddit, is planning to go dark. At last report, Wikipedia was still on the fence.

There’s word that SOPA is dead, but that PIPA is not. Following the lead of many big sites that will continue as planned with the blackout, I’m going ahead with the blackout on the grounds the fight isn’t nearly over; these terrible twins aren’t the first such frightening bills that have been introduced to combat online piracy with a blunt instrument. Continuing to protest now may dissuade similar bills from being brought up in the future.

The purpose of this article isn’t to explain what SOPA is and why it’s bad for the internet and for free expression; that’s been done elsewhere, very well. What I am going to do do is explain how I’m blacking out my site, and how you can do it yourself, in terms a non-techie can follow. Julie, who considers HTML to be “technical”, has kindly offered to be the beta reader for this article, but if anything in this goes over your head, please do note it in the comments and I’ll clarify as needed.

If the tone of this article seems a little condescending to you, then congratulations! You’re a techie. I’ve organized everything so it’s easy to skim over the stuff you already know.

The difference between and

Maybe you did a little Googling on this, and you could ask:Wait a minute. I found that there’s a plugin for WordPress that’ll do all this automatically. Can’t I just use that?

Unfortunately, no. Your site is hosted on, which is a service the WordPress people put up for those of us without access to a web server. isn’t a blogging service like and Blogger, it’s a software package you install on your web server.

(For those of you with an honest-to-God site, here’s the plugin. Go wild!)

WordPress settings

I’ve spent a lot of time tweaking my site so it’s just right, now I’m supposed to undo all that?

It’d be nice if people were willing to inconvenience themselves to join this protest, but the reality of the situation is that the easier it is to join the blackout, the more people will join in.

Sure, you could change your WordPress theme to something dark, hide all your posts, and so on. And on Thursday, you’ll get to reverse all those changes.

But there’s no need to do that; computers exist to make our lives easier. (I think.) So here are two easy options.

How to install the Stop SOPA ribbon

The ribbon will appear on the upper-right hand corner of your site. It’ll stay there even when the user scrolls up or down. It’s a slightly subtler way to do the blackout. (I’m using it right now, and will keep it there until I black the site out at 12:01am on Wednesday from 8am to 8pm EST on Wednesday, which is apparently the “official” blackout times.)

(If you know how to set up a text widget in your sidebar, you can scroll down until you see the HTML code snippet at the bottom of this section. You can also dig into the WordPress forum thread where I got the code from if you like, and see further tweaks.)

Log into with your username.

At the top right corner of your screen, you’ll see your username. Hover your pointer over your username, then move your mouse to the name of the site where you want to install the ribbon. You’ll see a submenu appear; on that menu, click on “Dashboard”.

On the left side of the dashboard, there’s a menu. Hover your over “Appearance”, then “Widgets”, then click.

You’ll see an “Available Widgets” pane. Scroll down until you see a widget called “Text”. Click and drag it upwards, holding the cursor over the grey bar at the top of the screen, and the screen will scroll upwards. (You may have to jiggle the cursor up and down a few times.)

While continuing to drag: When you’re at the top of the screen, release the text widget into the “sidebar” tray. (If you miss, don’t worry, you can do this over again.)

Click the downward-pointing triangle at the right side of the text widget to expand it if need be. (It may automatically expand when you drop it in the tray.)

Paste this code into the widget. Don’t change the title.

<a target=”_blank” class=”stop-sopa-ribbon” href=””><img src=”; alt=”Stop SOPA” style=”position:fixed;top:0;right:0;z-index:100000;cursor:pointer;” /></a>

It should look like this when you’re done:

Click “Save” on the widget.

Go look at your site and you should see the ribbon.

Blacking out your entire site for the day

Follow the same instructions as above, but substitute the following code in the text widget:

<div align=”center” style=”position:fixed;width:100%;height:100%;top:0;right:0;z-index:100000;background-color:#000;-moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80);font-size:800%;font-weight:bold;padding-top:300px;”><a style=”color:#fff;” href=”; target=”_blank”>Stop SOPA</a></div>

It’ll make your site look like this:

Users who click on the words “Stop SOPA” will be taken to an infographic that explains what SOPA is.

Reverting the changes

Just delete the text widget and your site will revert to normal. (Open the widget if it’s closed, and click on “delete” at the bottom of the widget window.) If you had any posts scheduled to go up while the site is blacked out, you may need to republish them.

Hang in there, and we’ll see you all on Thursday, for Sara’s column, and Friday, when Ask Ceil returns! I’ll continue to update this as the infographic is updated.

Update: WordPress has made this even easier.


Note: All this is now sorta superfluous, as WordPress has implemented an easy solution. From the WordPress forums:

When you log into your dashboard go to Settings, then select Protest SOPA/PIPA. Once there, you’ll have three options:

  • Full blackout and ribbon
  • Ribbon only
  • None

A full blackout will black out your blog until 8 pm and will play a ribbon on your blog after 8 pm until January 24th.

A ribbon only will leave your site “readable” but will place a ribbon in the top right hand portion of your blog until January 24th.

Added after the blackout:

This worked well, and the blackout page is prettier. However, it only worked from 8am until 8pm; I used the solution on this page from 8pm until midnight.

Neil Fein is a freelance editor who loves his work, and specializes in novels. If you’ve written a manuscript or are getting close to finishing, you can get in touch with him here.

On the side, he’s the guitarist in the band Baroque & Hungry, he rides his bicycle as much as he can, and he paints when the mood strikes him.


27 thoughts on “How to set up your website to participate in the SOPA/PIPA blackout

  1. Aha! You used “blockquote” to display the code. I tore my hair out trying to use “code” or some variation thereof and failed. I finally resorted to uploading a pdf file and referring readers to that. Not at all what I wanted. I may edit the post now to change that.

    I like your basic explanation — with pictures. Anything to enable more people to go dark on Wednesday.

      1. @PiedType – I don’t understand. You don’t need to use code or blockquote tags in your text widget at all. Are you maybe trying to copy the code from the picture? Or are you going into the page’s source code? If the latter, it won’t work, since I used a convertor to get the code to display properly on the page.

        (Was going to reproduce the code here, but what works in the post itself is displaying oddly in the comments.)

  2. Or, rather:

    <div align=”center” style=”position:fixed;width:100%;height:100%;top:0;right:0;z-index:100000;background-color:#000;-moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80);font-size:800%;font-weight:bold;padding-top:300px;”><a style=”color:#fff;” href=”” target=”_blank”>Stop SOPA</a></div>

  3. Thanks for the easy to follow code! My site looks great!

    If you are using a Ning Network like mine ( you will need to create an adbox header and place the code inside of that. When you are finished displaying the code, go to Admin>>Settings>>Features Layout and uncheck the Instant Ad Box “Above Header”

    1. By the time I got back to the site (~11am EST), the WP blackout tool was working fine. Was there a hiccup earlier in the morning?

      I ended up using the text box tool after 8pm, when WP’s half-blackout shut down.

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your 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