How to Add HTML & Javascript to Wordpress Shortcode?
Question
I have a snippet of HTML that I would like to make into a Wordpress shortcode. This is the snippet.
<div class="small-12 large-7 columns">
<article id="text-39" class="panel widget widget_text">
<div class="textwidget">
<div class="row">
<div class="h3 regular-font">Have Questions?</div>
<div class="h5">TALK TO US 800.810.8412</div>
<a href="http://www.oakwoodsys.com/email-us"><div class="button help-email left">Email Us</div></a>
<!-- BEGIN OLARK CHAT LINK -->
<a href="javascript:void(0);" onclick="olark('api.box.expand')"><div class="button help-chat left">Chat Now</div></a>
<!-- END OLARK CHAT LINK -->
</div>
</div>
</article>
</div>
I've added this to my functions.php and it outputs the code properly when I add [chat] to a page in Wordpress.
// Chat/Email Shortcode
function chat_shortcode() {
return '<div class="small-12 large-7 columns">
<article id="text-39" class="panel widget widget_text">
<div class="textwidget">
<div class="row">
<div class="h3 regular-font">Have Questions?</div>
<div class="h5">TALK TO US 800.810.8412</div>
<a href="http://www.oakwoodsys.com/email-us"><div class="button help-email left">Email Us</div></a>
<!-- BEGIN OLARK CHAT LINK -->
<a href="#">Chat Now</div></a>
<!-- END OLARK CHAT LINK -->
</div>
</div>
</article>
</div>';
}
add_shortcode('chat', 'chat_shortcode');
However, when I change the live chat link from # to javascript:void(0);" onclick="olark('api.box.expand') , the entire site breaks. How can I make the link work properly?
2 answers
solution1
1 ACCPTED 2014-07-07 20:55:38
Your return statement opens and closes using '' so when you use them in your onclick your break the syntax (you close the return statement).
Try this,
onclick="olark(\'api.box.expand\')"
solution2
0 2014-07-07 20:53:46
You've built your string with single quotes (inside chat_shortcode() ) so when you added the additional onclick code, and it contained single quotes, you escaped out of the first string you were building. Try this:
return <<<HTML
<div class="small-12 large-7 columns">
<article id="text-39" class="panel widget widget_text">
<div class="textwidget">
<div class="row">
<div class="h3 regular-font">Have Questions?</div>
<div class="h5">TALK TO US 800.810.8412</div>
<a href="http://www.oakwoodsys.com/email-us"><div class="button help-email left">Email Us</div></a>
<!-- BEGIN OLARK CHAT LINK -->
<a href="#">Chat Now</div></a>
<!-- END OLARK CHAT LINK -->
</div>
</div>
</article>
</div>
HTML;
This is called a PHP Heredoc and it allows you to use single quotes and double quotes without escaping the characters in your string. It also has the added benefit of being able to automatically parse any PHP variables you might wish to be injected. I prefer this method for readability and most editors give you syntax highlighting.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.