I don’t like ads on websites. You don’t like ads on websites. Yet, sometimes they help finance the cost of running the website, so you have to include them.
On one of my sites, just the monthly hosting cost is nearly $300, let alone the costs for developing content; ads help offset these costs.
Typically, adding ad code to your WordPress site means tinkering with your functions.php file and inserting code into the index.php and/or single.php files of your theme.
Eventually, it dawned on me that there is a better way: Do-It-Yourself plug-ins. Consolidating all or even most of the code for any given ad into its separate plug-in makes for much cleaner site organization, with the added benefit that the team in the front office can turn on and off individual ad campaigns without my having to go in and tinker with the theme code.
I realize that the thought of creating your own custom WordPress plug-in may seem overly-complicated and even a bit frightening. As it turns out, it’s not that bad.
Here’s how I do it.
First, create a folder in your plug-ins directory with the name of your plug-in. For the purposes of this tutorial, let’s say we are adding ad code from the Super Ad Code company. Because it is super, it has the main PHP file that any function must have, and it also has two JavaScript files (one for the head section and one for the footer) and its own style sheet file.
Inside the plug-ins directory, your new folder and file names might look something like this:
── super_ad_codes
│ ├── super.css
│ ├── super-ad.php
│ ├── super-footer-code.js
│ └── super-meta-code.js
Inside the super.css file, you might have style code that looks like this:
super-border { border-color: #BBBBBB; }
super-button
{
border-color: #000000;
background-color: #333333;
color: white;
}
Of course, you might not need a separate style sheet, and you might need only one JavaScript file. In that case, just include what you need.
We are going to use this function’s PHP file to call the various components of this ad. As I mentioned, this segregates this code from the code in your parent and child theme files, which I find to make maintenance easier all around.
Your super-ad.php file should follow this format:
<?php
/*
Plugin Name: Super ad codes
Plugin URI: https://www.example.com/
Description: This is our own custom plugin for including Super ads in our WordPress site
Version: 1.0
Author: Greg Raven
Author URI: https://www.example.com/
License: Taken
*/
function super_ad_codes() {
wp_register_style( 'super', plugins_url() . '/super_ad_codes/super.css', array( 'child-style' ), '20170727', 'screen' );
wp_enqueue_style( 'super' );
wp_register_script( 'super-meta-code', plugins_url() . '/super_ad_codes/super-meta-code.js', '', '20170727', '' );
wp_register_script( 'super-footer-code', plugins_url() . '/super_ad_codes/super-footer-code.js', '', '20170727', 'true' );
wp_enqueue_script( 'super-meta-code' );
wp_enqueue_script( 'super-footer-code' );
}
add_action( 'wp_enqueue_scripts', 'super_ad_codes' );
Your eyes are not deceiving you: The opening PHP tag is not closed. Note that we are telling WordPress to find these files based on the location of the plug-ins folder.
Again, if you do not use a separate style sheet, you will not need to register and enqueue it. Also, note that the meta code script is set to load in the page head, while the footer code script is set to load in the footer (that’s why the “true” statement is there).
Your super-footer-code.js file might contain code such as this:
window._super = window._super || [];
_super.push({
flush: true
});
And for the sake of example let’s say your super-meta-code.js file contains this code:
window._super = window._super || [];
_super.push({
article: 'auto'
});
! function(e, f, u, i) {
if (!document.getElementById(i)) {
e.async = 1;
e.src = u;
e.id = i;
f.parentNode.insertBefore(e, f);
}
}(document.createElement('script'),
document.getElementsByTagName('script')[0],
'//cdn.super.com/loader.js',
'super_loader_script');
if (window.performance && typeof window.performance.mark == 'function') {
window.performance.mark('super_ic');
}
Of course, you would get the actual JavaScript ad code from the company providing the ads. The code above does nothing and is for illustrative purposes only.
Your plug-in is now complete.
If this ad requires only the loading of one or two pieces of JavaScript, after you upload your plug-in to your server and activate it, the ads will start appearing on your site. Many ad campaigns work just this way.
However, you may run into situations where a scrap of code is needed in the body of the WordPress page or post, to make the ad appear in a certain position. In this instance, you will need another piece of code, which will also come from the company providing your ads. You will then need to add a call to this piece of code from your theme files.
Inside the folder for your child theme (you are using a child theme, right?), find the includes folder. If your child theme does not have one, create one.
Inside your includes folder, create a new super-ad-display.php file. Your child theme would then look something like this:
── child-theme
│ ├── includes
│ │ └── super-ad-display.php
The contents of the super-ad-display.php file might look something like this:
<!-- begin Super code; header and footer code in plugin -->
<div id="super-below-article-thumbnails"></div>
<script type="text/javascript">
window._super = window._super || [];
_super.push({
mode: 'thumbnails-a',
container: 'super-below-article-thumbnails',
placement: 'Below Article Thumbnails',
target_type: 'mix'
});
</script>
<!-- end Super code -->
Note that in the opening comment, I mention that there is additional code to be found in the plug-in. Months from now, this will save you from searching your header.php, footer.php, and function.php files in vain for the supporting code.
Finally, everything is set to include the ad in a specific location on your page — say, below the post. You might, for example, edit the single.php file in your child theme to include the following code:
<?php
// insert ad below the article
get_template_part( 'includes/super-ad-display' );
?>
Note that we are telling WordPress that the file to include is in the child theme.
Following this template, you should be able easily to create your own custom functions for WordPress to insert ads (or other content?) where you want it on your WordPress site.
Greg Raven’s WordPress Blog 