Normally when a shortcode is used, it would trigger the WordPress magic that makes a shortcode a short code:
Now, if we wanted to show what shortcode was used to make that magic happen, we simply need to escape it like so:
and that renders:
we can even wrap it in a nice code tag to set it apart:
so far so good.
Now lets say we want to escape a bit of HTML! Well, lets first try simply wrapping it in the code tag:
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…
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?
<li>item 2 </li>
The HTML looks rockin’ but the shortcode… well that was just processed as normal. Hmm… lets try doing the double bracket thing:
<li>item 2 [expand title="trigger"]content[/expand]</li>
Wow! that totally worked. So there you have it: Problem solved!
[expand title="Pocket Calculator" id="kraftwerk" ]Target Content[/expand]
I’m the operator
With my pocket calculator
[expand title="Special Key" id="special_key" expanded="true"]Target Content[/expand]
By pressing down a special key, it plays a little melody.
Based on launch state the wrapping element will toggle classes between
border: 1px dotted green;
border: 1px dotted red;
[ expand title="read more" ]
<li>sub item one</li>
<li>sub item two</li>
<li>sub item three</li>
<p>a paragraph of text</p>
[ /expand ]
- first item
- second item
- sub item one
- sub item two
- sub item three
a paragraph of text
- third item
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:
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