7

How can I add 

<a href="javascript:function foo(){alert('hi');}" title="alert">
    Drag to your bookmarks bar
</a>

to my WordPress post?

I built a bookmarklet and I want to pass it through my blog, but WordPress is stripping out the javascript from my post when I save it.

Lucas
  • 523
  • 2
  • 10
  • 20
codeAnand
  • 990
  • 1
  • 8
  • 29

5 Answers5

1

Javascript in WordPress Single Pages and Posts

<script type="text/javascript">
<!--
// your code
//--></script>

Source: https://codex.wordpress.org/Using_Javascript

DanOPT
  • 128
  • 2
  • 13
0

The issue is likely to be caused at the browser end. Chrome's XSS was the problem for me and I solved it by adding the line header ("X-XSS-Protection: 0"); to wp-blog-header.php in the root folder of my installation. This may not be ideal as it applies across the whole site. It would probably be better to add it where it would only apply to the post/page which needs to render the bookmarklet.

Jamie Bull
  • 12,889
  • 15
  • 77
  • 116
0

This is old, but still relevant with Version 4.9.5 for wordpress, so I answer with my solution for this:

Wordpress filters out any Javascript you use in your Posts or pages, that is why your code gets lost. I did the following steps to add a "javascript:" Link:

  1. Add the Link you want to your post, use "#" as the href and add a id to the tag (in Text-Mode of the Editor):
<a href="#" id="idOfYourLink">This is my JS Link</a>
  1. Install a Custom Javascript Plugin. I used Simple Custom CSS and JS
  2. Add the Javascript you want with help from the plugin: 
jQuery(document).ready(function( $ ){
  function yourFunction() {
      alert("It works");
  }

  jQuery('#idOfYourLink').on("click", yourFunction);
});

The important part is adding the on-Handler to the Link you want to use. Now the Javascript is loaded right after the page got loaded. And a click on the link will call the function yourFunction

Iarwa1n
  • 460
  • 3
  • 12
0

I guess that wordpress editor is used to work with textual data/content. So, to add your js you can find plugin for adding custom js. Also you can add a Custom field to the posts. enter image description here

Let it be "custom_js" - the name of a field that would contain js code. And then edit theme post temlate, adding "echo" of custom_js.

<?php
//single.php
echo get_post_meta( get_the_ID(), 'custom_js');
?>
Ernest Rutherford
  • 301
  • 4
  • 9
0

I have no issues embedding that code in the HTML editor on my wordpress site. There is a problem with your javascript code- that defines a function, but never calls it. I have 

<a href="javascript:alert('hi');" title="alert">Drag to your bookmarks bar</a>

in a post, and I get the alert when click, as well as the bookmarklet.

David Souther
  • 8,125
  • 2
  • 36
  • 53
  • I have WP 3.2.1 installed and that link is turned into javascript:void(0); by WP – BZink Sep 06 '11 at 15:02
  • Interesting. I'll go through my settings again, but I didn't see anything to remove js in posts. Do you have any plugins that might be causing this? – David Souther Sep 06 '11 at 15:11
  • No, not that I can see. All of our plugins are related to social media. – BZink Sep 06 '11 at 15:30
  • Are you admin, or just contributor? – David Souther Sep 06 '11 at 15:38
  • Take a look at http://codex.wordpress.org/Using_Javascript#Javascript_in_Posts and http://plugins.trac.wordpress.org/wiki/TextControl but otherwise, I'm not seeing any settings... maybe something in your theme? I doubt that, but it's a possibility. – David Souther Sep 06 '11 at 15:41