Tutorials
How to insert Ad Code in WordPress Pages or Posts creating a custom Shortcode

By Jeff,

Sometimes you might need to place some advertising code (or other javascript code) in your WordPress posts or pages – and trying to directly paste the code inside your editor can have uncertain results and it’s not comfortable at all – especially if you want to repeat the same advertising code block in several places.

Digging into the problem: the technical side [for curious people]

If you are using the BBE Theme, and it’s Live HTML editing interface, you might experience some annoyance as well, as these advertising Javascript code work by auto-replacing or (auto-prepending) themselves with the actual advertising.
Let’s see a practical example. A BBE Pro user, Craig, is experiencing this specific problem:

This is the code that I pasting:
<ins data-revive-zoneid=”674″ data-revive-id=”xxxxxxx”></ins>
<script async src=”//flow.aquaplatform.com/asyncjs.php“></script>
 
When I do a view source check after, it is changed to this and does not work:
<ins><iframe scrolling=”no” frameborder=”0″ width=”728″ height=”90″ style=”border: 0px; overflow: hidden;” kwframeid=”1″></iframe></ins>
<script async=”” src=”//flow.aquaplatform.com/asyncjs.php“></script>

What happened? Let’s take this as an opportunity to understand very roughly how actually the ad networks work. The original (first) JavaScript code (<script>) calls an external file (the asyncjs.php – don’t be fooled by the php extension, that’s only for the remote processing), that acts adding to itself an Iframe which contains the actual Advertising – after sending something maybe, like which site is calling the ad, the publisher data,  or the screen size.

The solution: how to embed those javascript code snippets peacefully

An easy solution is to profit of the fantastic ShortCodes – a super-useful concept of WordPress alllowing to define some “magic words” which translate onto your actual code – but leave your editor “clean”.
Shortcodes are also super useful for consistency – keeping your Ad code in a single point, and allow calling it quickly whenever you want.
Now you have two alternatives:

  • CODERS: define the shortcode with some easy php code, placing it in your child theme’s functions.php file – using the Shortcodes API. Not hard at all.
  • NEWBIES: use a simple plugin, we’ll go into that down here for your pleasure.

The easy way: using a plugin to manage your shortcodes

There are a number of plugins for accomplishing this – so my suggestion is just one, but there may be many paths to success
I’ve chosen to recommend you the WP-Snippets plugin – yes it’s old – but it seems to work great and it contains much less bloat compared to other ones I’ve found.
Defining the new snippet
Getting started is really easy: after installing and activating the plugin, you will see a new element (“Snippets“) in the wp-admin backend menu.
Select the “Add Snippet” menu element – then:

  1. Enter a title for your Snippet – eg My Ad Code
  2. Switch the content editor to the code view
  3. Paste your Advertising code into the content editor
  4. Hit the Publish button – and note the “slug” [look, below the title. Eg here: my-ad-code]

This is how this moment will look:
adding snippet
Calling the Snippet
While editing your page, be it with the standard WordPress content editing interface, or with the BBE Live HTML Editor, you can use the snippet shortcode specifying the slug of your newly created code snippet. The following screenshot should make things clear enough.
embedding the snippet
After saving, if you view the page the ad will finally show:
ad-test

  Filed under: Tutorials

Comments are closed for this post.