Adding Code to WordPress Posts and the Power of Shortcodes

Have you ever tried pasting code (adsense code, paypal buttons, social buttons) into the WordPress editor only to have the code display in the post or page… Frustrating right?

With the right plugins, it is possible to paste code straight into your editor and have them displayed on the site.

Exercise caution though – adding code to your page or post may well stop your site from displaying correctly.

If you are really keen to add code to your posts or pages – you’re going to need a plugin that will allow php code to ‘execute’ and not be ignored.

I prefer to use the  Exec-PHP plugin – install and activate the plugin and any code will run.

To actually get the code into the post or page requires a little more work.  Go to the editing screen, and click on the html tab:

This will show the ‘code’ view of your entry.  Locate where you want to paste your code and paste it.

i.e To add code that will show the text ‘Hello World’ in your post, you would put

<?php
echo 'Hello World<br>';
?>

If you wanted to display a Javascript code, you would paste in the whole code from the <script> to the </script> in.

Not the best solution!

The wordpress editor removes the code tags if you click back on the Visual tab and it can really get messy trying to sort it out.

I think the best way to resolve this is to create Shortcodes to display the code.

Shortcodes are great!  They allow a site owner to create custom functions and ‘call’ those functions using text wrapped in square brackets (i.e [ gallery ], but without the spaces after the’[' and before the ']‘).  You just need to ‘tell’ WordPress what to do when it sees the text between those brackets.

There are lots of plugins already written that may do what your looking for – so before you embark on creating a shortcode, check out the WordPress repository first.

However, if you want to insert your own Optin Form or AdSense code or Affiliate code, creating your own shortcode could be the way to go.

One of the BEST way’s I’ve seen to do this, without having to delve into the themes functions.php file is to use a plugin called Custom Fields Shortcode.

Custom Fields are the boxes that generally appear under the editing box:

These fields can be set manually when you edit a post simply by clicking on the Enter New link and typing the name of the field you want to use.  In the value field, put the full code you want to use, and then click Add Custom Field:

Once you’ve added your Custom Field (and activated the Custom Fields Shortcode plugin), you call the code in your post by adding:

[ cf ]NewField[ /cf ]

Note: Remove the space after the ‘[' and before the ']‘ for this to work – I’ve added the spaces so the shortcode doesn’t actually run…..

That’s it – create a custom field in each post, add the code you want call whether that is php or javascript in the Value area of the custom field and call the custom field using the cf short code.