HTML/JS Code in WordPress Posts & Pages

Sometimes, you want to enter a bit of HTML and/or JavaScript into a WordPress page or post.  You can switch to the HTML editor to do this, but very often WordPress will mess with your code when you switch back to the visual editor.  There are plugins which can disable this, but you dont’ necessary want to disable this globally on your site.

Say I want to insert a button which, when clicked, pops up an alert:

 

I could do this with HTML such as:

<button 
   onclick="alert('Careful on your way down the rabbit hole')">
   Take the red pill</button>

But how to get that code easily and reliably into you page?

I used the Custom Fields Shortcode plugin.  The plugin hasn’t been updated in quite a while, but it still works just fine on WP 3.4.2.

Update: Problem with WordPress 3.4.2

WordPress 3.4.2 Update unfortunately breaks custom fields, which prevents this plugin from working correctly.  Fortunately, there is a hotfix you can install.  Just install the hotfix plugin and you should be good to go.

 

Install and activate the Custom Fields Shortcode plugin, then go to a page or post and use the screen options at the top of the page to enable custom fields.  Custom fields are essentially just key/value pairs.

At the bottom of the page you’ll see a box for entering custom fields:

Enter a new key called ‘js’, and copy/paste the button HTML code from above for the value, and click Add Custom Field.

Now, on your page, just add (in the Visual editor):

 

[cf]js[/cf]

 

(no, that’s not Cold Fusion btw)

and voila, you should have a functioning button on your page.

 

Tagged , , . Bookmark the permalink.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>