Back to Top

Blurred Spoilers (WordPress Plugin)

 

My first WordPress plugin, created to meet the specific needs of a client to globally show or hide spoiler text at the press of a button.

Note: this plugin requires WordPress Version: 3.9 or higher, and has been tested on WordPress 3.9.1 – 4.3

Download the latest version X.X Download Blurred Spoilers

A WordPress plugin that controls both the global and individual showing and hiding of spoiler text.

Spoiler text is wrapped between the shortcode tags [spoiler][/spoiler].

Optionally, through the admin panel the mouse over spoiler hint text can be changed and a SpoilerText button can be added to the TinyMCE editor to generate the spoiler shortcode [spoiler][/spoiler] tags.

The Hide Spoiler and Show Spoiler buttons are used to change the visibility of the spoiler text globally.

The defining of these buttons are defined in the following code block:

<div class="spoilerLinks">
    <h4>Spoiler Alert!</h4>
    <p>Have you already read all the books and/or don't care about spoilers? You can reveal/hide all the spoilers in the comments with the click of the buttons below.</p>
    <div align="center"><a href="#" id="showSpoilers">Show spoilers!</a>  <a href="#" id="hideSpoilers">Hide spoilers.</a></div>
</div>

The above code block is added manually to the “comments.php” file at the location following the:

<h2 class="comments-title"> </h2>

tags.

1. You can change the default mouse over spoiler hint text “Click to reveal/hide spoiler” to a custom value of your choosing.

2. You can add a SpoilerText button to the TinyMCE editor which generates the spoiler shortcode [spoiler][/spoiler] tags

Requires WordPress Version: 3.9 or higher.

Minimum requirements
   – WordPress 3.9+
   – PHP 5.x

The plugin can be installed in one of two ways:
1 – Using the zip file, from the Dashboard | plugins | add new | upload choose the blurred-spoilers.zip file and click Install Now
(or)
2 – Unzip the file and copy the blurred-spoilers folder to the /wp-content/plugins/ folder

In either case do not forget to Activate the plugin


Figure 1 – Blurred Spoilers Settings

 


 


Figure 2 – TinyMCE Editor ‘Spoiler Text’ Button

 


 


Figure 3 – Hidden Spoiler Text

 


 


Figure 4 – Spoiler Button Code Block

Q — How can I use the shortcode?
A — The shortcode can be used as shown: [spoiler]This is some spoiler text[/spoiler]

Q — How to implement the global showing/hiding of spoiler tags?
A — To globally show and hide spoiler text the “Comments” template MUST be modified by adding the following code after the

<h2 class="comments-title"> </h2>

tags.

<div class="spoilerLinks">
    <h4>Spoiler Alert!</h4>
    <p>Have you already read all the books and/or don't care about spoilers? You can reveal/hide all the spoilers in the comments with the click of the buttons below.</p>
    <div align="center"><a href="#" id="showSpoilers">Show spoilers!</a>  <a href="#" id="hideSpoilers">Hide spoilers.</a></div>
</div>

v0.1.2 – Initial Release (tested only on WordPress 3.9.1)

v0.1.3 – Minor change to CSS to fix button appearance on mobile devices

v0.1.4 – Minor change to JS and changed loading of javascript to be loaded in the header and to be jQuery dependent