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?

Inspect element and check your console.

Nicolas
– Nicolas

2014-07-07 20:53:17 +00:00
Commented Jul 7, 2014 at 20:53 — Nicolas
– Nicolas, Commented Jul 7, 2014 at 20:53

Nicolas · Accepted Answer · 2014-07-07 20:55:38Z

1

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\')"

answered Jul 7, 2014 at 20:55

Nicolas

1,1531 gold badge17 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jared Cobb · Accepted Answer · 2014-07-07 20:53:46Z

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.

Collectives™ on Stack Overflow

How to Add HTML & Javascript to Wordpress Shortcode?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related