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?
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