Adding content to wordpress post with shortcode

Question

I am looking to add something like this http://jsfiddle.net/theimaginative/gA63t/ to a wordpress post. I have been trying to create a shortcode to insert this into a post but have been struggling with it. I can get a basic short code to work to add text just using a basic function but after searching google for hours I can't figure out how to have html and javascript as a part of the short code content.

Any help would be much appreciated. Thanks!

<div id="sliderone">
<div id="nav">
    <div id="navone" style="text-align: center;">This is a clickable title</div>
</div>
<div id="title"></div>
</div>

 <script type="text/javascript">

$('#navone').click(function () {
$('#title').html("<img src='http://placehold.it/350x350' alt='' />");
$('#sliderone').animate({
height: '450'
});
});

</script>

Chris Herbert · Accepted Answer · 2013-11-25 23:49:36Z

1

You can assign multi-line strings to a variable using PHP's HEREDOC syntax.

It would look something like this.

function addClickableTile(){

$content = <<<HEREDOC

<div id="sliderone">
<div id="nav">
    <div id="navone" style="text-align: center;">This is a clickable title</div>
</div>
<div id="title"></div>
</div>

 <script type="text/javascript">

$('#navone').click(function () {
$('#title').html("<img src='http://placehold.it/350x350' alt='' />");
$('#sliderone').animate({
height: '450'
});
});

</script>

HEREDOC;

return $content;

}

add_shortcode('addClickableTile','addClickableTile');

answered Nov 25, 2013 at 23:49

Chris Herbert

6,3253 gold badges23 silver badges31 bronze badges

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

2 Comments

Aurelia Over a year ago

For all options, OP should refer to the Wordpress Codex

Chris Herbert Over a year ago

Yes, the code above just dumps a string onto the page, it doesn't accept any arguments.

Collectives™ on Stack Overflow

Adding content to wordpress post with shortcode

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related