Add javascript code inside posts in Wordpress with a plugin

Question

I know is a very general question (I've never before developped a plugin in wordpress), but I ask for some help to point in the right direction. I want to do something I think is quite simple: I've developped a widget for web that asks some information from a server. Basically the code the developper inserts in the web is something like this:

<div id="widget_wrapper"></div>
<script type="text/javascript" src="server/js/widget.js"></script>
<script type="text/javascript">
        var config = {
                item_id: 1,
                width: 500,
                heigth: 200
        };
init_widget(document.getElementById("widget_wrapper"), config);
</script>

I want to replicate this functionality with a plugin for wordpress. I want the user inserts some custom tag on his post (something like ), so the user can specify which element he want to access inside the tag. But I want the user can insert in posts, not like a widget on a side of his page. Someone could give me some tips to start developping it?

EDIT 1

I want it to work in Wordpress.com hosted blogs too, so the user can't simply paste javascript code to the post.

EDIT 2

For clarification: basically I want to do with the plugin is that the user can insert a tag in your post to do something similar to my widget for web: the user specifies a item_id you want to print the information in your post, and the server will returns the information in a iframe, which inserts into the div id="widget_wrapper". What would the plugin is that, once inserted a given (and that refers to a item_id) label, paint information in that space. enter image description here

Is there a reason you can't just add an element in the post <div id="widget_wrapper"></div>. (Note: this is just to match the code you've given, it might be better to do it by class as id's should only be used once). — DanielM
– DanielM, Commented Apr 23, 2014 at 16:19
There are tonnes of WP Plugin tutorials. Example: code.tutsplus.com/tutorials/… Please edit your post and tell us what the functionality of your plugin will be and what you want in widget_wrapper and where it will be on the page. Maybe an example of your current project or picture — ptimson
– ptimson, Commented Apr 23, 2014 at 16:33
I have edited my question specifying better what I want to achieve, hope this clarifies it. — Jesús Cerezuela Zaplana
– Jesús Cerezuela Zaplana, Commented Apr 23, 2014 at 16:54
Has your question be answered? Javascript should be included in the following way: stackoverflow.com/questions/9141885/… — ptimson
– ptimson, Commented Apr 23, 2014 at 19:01

Daniel Holmes · Accepted Answer · 2014-04-23 17:26:05Z

2

One way of achieving this would be through the use of shortcodes.

http://codex.wordpress.org/Shortcode_API

You can create a function in your plugin that is something like this...

add_shortcode('my_tag_name', 'process_my_shortcode');
function process_my_shortcode($atts)
{
   $item_id = $atts['item_id'];
   $output_html = '<div id="widget_wrapper"></div>'.
                  '<script type="text/javascript" src="server/js/widget.js"></script>'.
                  '<script type="text/javascript">'.
                  'var config = { item_id:'.$item_id.', width: 500, heigth: 200 };'.
                  'init_widget(document.getElementById("widget_wrapper"), config);'.
                  '</script>';

   return $output_html;
}

Now when a user writes the following in a post, it will be replaced by the code you want in the page.

[my_tag_name item_id="1"]

answered Apr 23, 2014 at 17:26

Daniel Holmes

1251 silver badge7 bronze badges

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

2 Comments

Jesús Cerezuela Zaplana Over a year ago

Thanks a lot for your reply, is there any problem in executing a plugin with some javascript embedded code like in your example, in a wordpress.com hosted blog? I've read a lot about Wordpress restrictions.

Daniel Holmes Over a year ago

From what I can see, no plugins or embedded javascript is allowed, which makes me wonder why anyone would use it! blog.crazyegg.com/2012/02/24/reasons-to-use-wordpress

Collectives™ on Stack Overflow

Add javascript code inside posts in Wordpress with a plugin

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related