How to insert javascript code into WordPress from plugin using shortcode


When we need to inserting Javascript blocks code programmatically into post, we know that WordPress autoescaping Javascript before write into tables. To make javascript inserting into post in WordPress, we can use shortcode. This feature meaning we define custom tag blocks in post and how to convert it tag. So, the tricks is we should define our javascript in shortcode and all needed content leave on block tags. It seem little confuse without any example right?

For instance, I want to inserting Scribd Javascript into WordPress post :

1
2
3
4
5
6
7
8
9
10
<script type=’text/javascript’ src=’http://www.scribd.com/javascripts/scribd_api.js’></script>
<div id=’get_documents’></div>
<script type="text/javascript">
 var scribd_doc = scribd.Document.getDoc(58965437, ‘key17fnch….’);
 scribd_doc.addParam( ‘jsapi_version’, 2 );
 scribd_doc.addParam( ‘width’, 550);
 scribd_doc.addParam( ‘height’, 300);
 scribd_doc.addEventListener( ‘docReady’, onDocReady );
 scribd_doc.write( ‘get_documents’ );
</script>

Then, we know that custom variable located in

1
scribd.Document.getDoc(58965437, ‘key17fnch….’);

So basically, we need to create template like this :

1
2
3
4
5
6
7
8
9
10
<script type=’text/javascript’ src=’http://www.scribd.com/javascripts/scribd_api.js’></script>
<div id=’get_documents’></div>
<script type="text/javascript">
 var scribd_doc = scribd.Document.getDoc(<CONTENT_LOCATED_HERE>);
 scribd_doc.addParam( ‘jsapi_version’, 2 );
 scribd_doc.addParam( ‘width’, 550);
 scribd_doc.addParam( ‘height’, 300);
 scribd_doc.addEventListener( ‘docReady’, onDocReady );
 scribd_doc.write( ‘get_documents’ );
</script>

So, let make some plugin which contain shortcode for this, eg :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function scribd_shortcode($atts = NULL, $content) {
    return "<script type=’text/javascript’ src=’http://www.scribd.com/javascripts/scribd_api.js’></script>
            <div id=’get_documents’></div>".'<script type="text/javascript">’.
            "var scribd_doc = scribd.Document.getDoc($content);
            var onDocReady = function(e){
                //
            }          
            scribd_doc.addParam( ‘jsapi_version’, 2 );
            scribd_doc.addParam( ‘width’, 550);
            scribd_doc.addParam( ‘height’, 300);
            scribd_doc.addEventListener( ‘docReady’, onDocReady );
            scribd_doc.write( ‘get_documents’ );
            </script>";
}

add_shortcode(‘scribd’, ‘scribd_shortcode’);

Now, in your post, you just add :

1
[scribd]contentID, key[scribd]

Easy right ? 🙂

Another good reference for shortcode in WordPress :
http://wplifeguard.com/how-to-use-wordpress-shortcode/


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.