Escaping Shortcode Examples

Shortcodes

Normally when a shortcode is used, it would trigger the WordPress magic that makes a shortcode a short code:

trigger
content

Now, if we wanted to show what shortcode was used to make that magic happen, we simply need to escape it like so:
[[expand title=”trigger”]content[/expand]]
and that renders:
[expand title="trigger"]content[/expand]

we can even wrap it in a nice code tag to set it apart:
[expand title="trigger"]content[/expand]

so far so good.

HTML

Now lets say we want to escape a bit of HTML! Well, lets first try simply wrapping it in the code tag:

  • item 1
  • item 2
  • item 3

Hmm… no good. All that seems to have done is render the HTML in the special css of a code tag.

What about using Markdown! Let’s wrap the HTML in backticks and see what happens…

<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>

Perfect! It even added that monospace font that makes code look even more code-like.

Now for the test…

Shortcode and HTML

Since we are using HTML we need to use Markup… what happens when we add in the shortcode?

<ul>
<li>item 1</li>
<li>item 2

trigger
content
</li>
<li>item 3</li>
</ul>

The HTML looks rockin’ but the shortcode… well that was just processed as normal. Hmm… lets try doing the double bracket thing:

<ul>
<li>item 1</li>
<li>item 2 [expand title="trigger"]content[/expand]</li>
<li>item 3</li>
</ul>

Wow! that totally worked. So there you have it: Problem solved!

T(-) Countdown Control Wrapper Class Toggle


Notice: Undefined variable: style in /var/www/vhosts/spacedonkey.de/httpdocs/wp-content/plugins/t-countdown-control/t-countdown-control.php on line 617

Notice: Undefined variable: style in /var/www/vhosts/spacedonkey.de/httpdocs/wp-content/plugins/t-countdown-control/t-countdown-control.php on line 618

Notice: Undefined variable: cid in /var/www/vhosts/spacedonkey.de/httpdocs/wp-content/plugins/t-countdown-control/t-countdown-control.php on line 628

Notice: Undefined variable: cslug in /var/www/vhosts/spacedonkey.de/httpdocs/wp-content/plugins/t-countdown-control/t-countdown-control.php on line 631

Notice: Undefined variable: cname in /var/www/vhosts/spacedonkey.de/httpdocs/wp-content/plugins/t-countdown-control/t-countdown-control.php on line 644

Notice: Undefined variable: t in /var/www/vhosts/spacedonkey.de/httpdocs/wp-content/plugins/t-countdown-control/t-countdown-control.php on line 648

Based on launch state the wrapping element will toggle classes between tminus_countdown and tminus_launched

The css:

.tminus_countdown{
     border: 1px dotted green;
}

.tminus_launched{
     border: 1px dotted red;
}

Collapse-O-Matic Partially Highlighted Trigger Text

In this example we will try to make part of the trigger text bit special by highlighting it with a special color or class.

So the first step is to create our special class. Add the following to the plugin option page under custom css:
.whoopie{
color: red;
}

Next, we wrap the part of the trigger text we want highlighted in a span and assign the class. Be sure to use single quotes (‘) if the title element uses double quotes (“):
[expand title="This is <span class='whoopie'>really</span> special"]...[/expand]

The end results looks exactly like so:

This is really special
…and so are you.

This is what happens when you insert the CSS inline:

[expand title="Open: bold  green " swaptitle="Close"]Target Content[/expand]
[expand title="Open: bold" swaptitle="Close"]Target Content[/expand]
Open: bold green
Target Content
Open: bold
Target Content