Specifying adult content

So the problem arises that you have content every now and again on your blog that is less than family-friendly, and you want an easy fix to not only specifying that it is NSFW, but you would also like to put in place a way of making the user click an acknowledging image or link to the effect that they know that what they are looking at is NSFW and only intended for audiences that are 18 years or older.

The most obvious solution to this would be to set aside a category for such postings (called something recognizable as being for the 18+ crowd, like +18 Only, or Adults Only), but you feel that that solution just isn’t enough.

So the first thing we are going to do is find your category ID. You can do this by click on Categories in the Posts box, and then finding your NSFW category. Mouse over the category and you’ll see a link at the bottom with a number. (cat_id=xxx). The xxx is your category ID and that’s the number we will be working with. Keep that number in your mind.

Now open up your single.php file in the theme editor, and in the loop, look for:

1

<?php the_content('Read more...'); ?>

This is where we are going to add our code. You’ll want to change it so it looks like this:

1
2
3
4
5
6
7
8
9
10

<?php if(in_category('xxx')){ ?>
<div align="center"><h3><a href="javascript:Effect.Combo('nsfw', {duration: 0.8});" title="Toggle mature content">++Toggle Mature Content++</a></h3></div>
<div id="nsfw" style="display:none;">
<?php } ?>
 
<?php the_content('Read more...'); ?>
 
<?php if(in_category('xxx')){ ?>
</div>
<?php } ?>

What the code is doing is one of 2 things. First, it’s inserting a div that will load as non-displayable when the page loads, and it will provide a link to open the div. It then closes the div below the content of the post. But we aren’t done yet. You’ll also need the javascript files that makes this effect actually work, which are combo.js, effects.js, and prototype.js. (Just right click each of those links and save them to your computer, then upload them to your theme template folder, preferably in a folder called “js”.)

You will then need to insert them into the header information of your header.php template file like so:

1
2
3
4

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/prototype.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/effects.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/combo.js"></script>
</head>

Now, if you want to use this trick on your front page or an archive page, follow the same steps for the single page, except instead of calling the div “nsfw”, you’ll want to use the code used to display the post id (this way, each div is given a unique identifier and doesn’t mess up the script.) It will look like this:

1
2
3
4
5
6
7
8
9
10

<?php if(in_category('xxx')){ ?>
<div align="center"><h3><a href="javascript:Effect.Combo('<?php the_ID(); ?>', {duration: 0.8});" title="Toggle mature content">++Toggle Mature Content++</a></h3></div>
<div id="<?php the_ID(); ?>" style="display:none;">
<?php } ?>
 
<?php the_content('Read more...'); ?>
 
<?php if(in_category('xxx')){ ?>
</div>
<?php } ?>

And there you have it. You can see this in action here.