Ad Overlay Anything for WordPress - show your ads on top of anything, including embedded videos, images, or blocks of text.


Thank you for purchasing Ad Overlay Anything!

What is it?

Ad Overlay Anything can show your ads on top of anything, including embedded videos, images, or blocks of text. Increase your ad exposure and site revenue by placing relevant ads directly over your most important content! You may use Ad Overlay Anything as a WordPress plugin or include it directly in your own web pages without WordPress.

How will it help your site?

Ads are not effective unless they are seen, right? If your website visitors aren't seeing the advertisements you are placing then you are missing out on potential sales and income.

Ad Overlay Anything allows you to place ads directly where your visitors are going to be looking, thereby boosting your ad views and click through ratios.

It also allows you to tailor your advertisements and tie them to particular pieces of content. If a visitor to your website is viewing certain content, for example, then they are more likely to be interested in products or services relating to that content. Tailoring your advertisements this way allows you to drastically increase your conversion rates and truly make the most out of your advertising space.

  1. Download the Ad Overlay Anything zip file from Envato to your computer.
  2. From the WordPress admin menu, select Plugins -> Add New.
  3. Click on the 'Upload Plugin' button at the top.
  4. Select the Ad Overlay Anything zip file you downloaded and click 'Install Now'.
  5. Enter the server's FTP details to upload and install the zip file.
  6. After sucessfully uploading, click on 'Activate Plugin'.
  7. You may now access the options in WordPress admin menu for Ad Overlay Anything.
  1. Download the Ad Overlay Anything zip file from Envato to your computer.
  2. Unzip the file into its own folder.
  3. Upload the folder to your server in a sub-directory of your site, such as '/ad-overlay-anything'.
  4. You are now able to include the AOA functionality in your own web pages. See the documentation for details and the file 'aoa_php_example' for demo code.

This screen is available in WordPress only.

This screen is available in WordPress only. Remember to use the Text editor if copying in ad code!

Inserting an Ad Overlay around content is rather straightforward with the [aoa] shortcode. You may use the aoa shortcode button in the visual editor or just enter it manually if you need extra options.

Example AOA shortcode

The Ad will be retrieved from the database by its Id and processed.

Shortcode parameters will override any value from the database.

Example AOA shortcode with parameters

This section is if you're using PHP for webpages and not using WordPress. Without WordPress you'll have to do a little more work but if you built your site with PHP it should be rather straightforward.

  1. Include jquery in your page.
  2. Include the AOA javaScript in your page.
  3. Include the AOA CSS in your page.
  4. Use PHP to call the AOA function to wrap your content with your Ad Overlay.

In your AOA folder there is the file aoa_php_example.php with comments:

<html>
<header>

<!-- You can load a local copy of jQuery, or load it from Google -->
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>

<!-- Load the AOA javaScript functions from where you installed AOA -->
<script type='text/javascript' src='http://www.yoursite.com/ad-overlay-anything/js/aoa-functions.js'></script>

<!-- Set the AOA javaScript variables only if using these options -->
<script type='text/javascript'>
/* <![CDATA[ */
var AoaCloseTimer = "5"; /* Hide the Close button/text on Ads for X seconds */
var AoaCloseAfter = "10"; /* Close Ads automatically after X seconds */
/* ]]> */ </script>

<!-- Load the AOA style sheet -->
<link href='http://www.yoursite.com/ad-overlay-anything/css/style.css' rel='stylesheet' type='text/css'/>

</header>
<body>
<h1>AOA Example with PHP</h1>

<!-- The overlay will automatically fill the parent container, so set this parent container to the width of the video. -->
<div style='width: 640px;'>

<?php

/* Require the AOA code from where you installed AOA */
require_once( sprintf( "%s/ad-overlay-anything/aoa.php", dirname(__FILE__) ) );

/* Set the variables to use for an Ad Overlay: */
$ad = array(
      'content' => '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- Sidebar 250x250 --> <ins class="adsbygoogle" style="display:inline-block;width:250px;height:250px" data-ad-client="ca-pub-4147479728045447" data-ad-slot="7950969153"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>',
      'class' => 'myCustomClass',
      'close' => 'Close Ad',
      'percent' => '100',
      'cookie' => '0',
);

/* Set the string variable of what will be wrapped in the Ad Overlay: */
$wrap = '<iframe width="640" height="360" src="https://www.youtube.com/embed/DNPto4GFwx4?feature=oembed" frameborder="0" allowfullscreen></iframe>';

/* Call the AOA function to return a string with the wrap content and the Ad Overlay. */
$str = aoa_wrap( $ad, $wrap );

/* Display the wrap content and the Ad Overlay */
echo $str;
?>

</div>

</body>
</html>

Result: YouTube video with Ad Overlay:

Result: YouTube video with Ad closed:

  1. The overlay is wider than the content. What is happening?
  2. The post has a blank space where the video and overlay should be. What is happening?
  3. The ad is off center. What is happening?
  4. Can I call AOA directly in my WordPress theme instead of using shortcodes?
  5. My theme uses custom code to display content instead of WordPress. What can I do?
  6. I see the overlay but no ad. What is happening?
  7. Can I make the overlay ads more like YouTube?
  8. Can I only show ads under certain conditions?
  1. The overlay is wider than the content. What is happening?

    The overlay automatically fills up its parent container. If the parent width is not defined, the browser will display it all full width. Consider this post content:

    
    <h3>Amazon Ad over video without defined width</h3>
    [aoa id=14]<iframe width="640" height="480" src="https://www.youtube.com/embed/uuZE_IRwLNI frameborder="0" allowfullscreen></iframe>[/aoa]see? iframe element takes up entire width...
    

    Although the iframe is given dimensions, the parent element defaults to the entire width, which the overlay wraps around:

    That's just how html is displayed. If the content you want to overlay does not have a parent element with fixed width, we can give it one. Here are two examples:

    1. We can wrap what we want to overlay in a div element with a defined width, like so:
      
      <h3>Amazon Ad over video without defined width</h3>
      <div style='width:640px'>
      [aoa id=14]<iframe width="640" height="480" src="https://www.youtube.com/embed/uuZE_IRwLNI frameborder="0" allowfullscreen></iframe>[/aoa]
      </div>see? iframe element takes up entire width...
      
    2. We could also edit the Ad and give it an additional CSS class, such as 'aoa_video640'.

      then use custom CSS to change what we want:
      
      .aoa_video640 {
              width: 640px;
      }
      

    In both cases the results match:


  2. The post has a blank space where the video and overlay should be. What is happening?

    Most likely, your theme is using the .video-container CSS trick to make embedded content responsive. Since the trick involves setting the parent container's height to 0, AOA inherits the height of 0 and nothing shows. Don't panic, the fix is easy.

    1. Look at the page source and verify the embedded content is wrapped in a container like .video-container
    2. Look in your theme's CSS file for .video-container and see what padding percentage it is using (for instance a 16:9 ratio will be using a padding of 56.25%). For examle, the theme Hueman uses the code:
      
      .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
      
    3. Use Custom CSS in the Main Settings to tell the AOA wrapper to use the same padding. Example:
      
      .video-container .aoa_wrap {
          padding-bottom: 56.25%;
      }
      
    and the result is


  3. The ad is off center. What is happening?

    Most likely, your theme is using the CSS trick of making iframe widths to be 100%, overwriting the ad's default iframe width. When this happens the iframe element now spans the entire width of the overlay and cannot be centered. To fix this, use the style attribute to set the max width and height of the ad unit. This will take precedence over the theme's CSS rule.

    Example: If the original ad unit is

    <iframe src="http://linktobanner" width="300" height="250" scrolling="no" border="0" marginwidth="0" frameborder="0"></iframe>

    You would change it to

    <iframe src="http://linktobanner" width="300" height="250" scrolling="no" border="0" marginwidth="0" style="max-width:300px;max-height:250px;" frameborder="0"></iframe>

  4. Can I call AOA directly in my WordPress theme instead of using shortcodes?

    Yes, you can call the AOA shortcode function directly.
    • function aoa_shortcode( $atts, $anything=null )
      • $atts is an array of AOA parameters:
        • id - The ID of the AOA ad. The database values will be used the default, but can be overridden with the other parameters below.
        • status - Change the status of the ad to 0 or 1. For instance, if the ad is inactive in the database, you can force it to be active so it will display.
        • content - Change the content of the ad - will be used instead of the ad content in the database.
        • close - Change the close text of the ad - will be used instead of the close text in the database.
        • percent - Change the percent chance of showing the ad - will be used instead of the percent chance in the database.
        • class - Change the additional CSS class of the ad - will be used instead of the additional CSS class in the database.
      • $anything is a string of code with the ad will overlay.

    Example:

    
    <?php
        // always check if plugin is active first:
        include_once( ABSPATH . 'wp-admin/includes/plugin.php' );
        if ( is_plugin_active( 'ad-overlay-anything/ad-overlay-anything.php' ) )
        {
    	$aoa = new Ad_Overlay_Anything();
    	// what the ad will overlay:
    	$anything = '<iframe width="560" height="315" src="https://www.youtube.com/embed/WGJmwPd5oNs" frameborder="0" allowfullscreen></iframe>';
    	// choose a random ad, set a 50% chance of ad showing:
    	$wrap = $aoa->aoa_shortcode( array( 'id' => '0', 'percent' => 50 ), $anything );
    	echo $wrap;
        }
    ?>
    


  5. My theme uses custom code to display content instead of WordPress. What can I do?

    It's another take on the dreaded theme lock-in effect, but with some coding knowledge you can overcome any obstacle the theme throws at you. We can insert the AOA shortcode around the theme's custom code, but you should first create a child theme so any changes made won't be lost when the theme is updated.

    Unfortunately, each theme is different, so it is impossible to show a one-size fits all solution.


    Example #1 - VideoTube

    VideoTube theme takes the custom video field and just echoes it to the screen, bypassing WordPress, so AoA cannot hook in. Thankfully they do use a custom filter, so we can hook into that with this Code Snippets and use the AoA shortcode:

    
    add_filter( 'videotube_player', 'aoa_videotube_player');
    
    function aoa_videotube_player( $video ) {
        return do_shortcode('[aoa id="0"]' . $video . '[/aoa]');
    }
    
    

    Note: VideoTube uses the CSS trick to make embedded content responsive, so add this custom CSS code in the AOA Main Settings:

    
    .player .aoa_wrap { padding-bottom: 56.25%; }
    

    Example #2 - deTube

    deTube theme takes the custom video field and just echoes it to the screen, bypassing WordPress, so AoA cannot hook in. Thankfully they do use a custom filter, so we can hook into that with this Code Snippets and use the AoA shortcode:

    
    add_filter( 'dp_video_filter', 'aoa_dp_video_filter' );
    
    function aoa_dp_video_filter( $video ) {
        return do_shortcode('[aoa id="0"]' . $video . '[/aoa]');
    }
    

    Example #3 - Herald

    Herald theme takes the custom video field and just echoes it to the screen, bypassing WordPress, so AoA cannot hook in. Thankfully they do use a custom filter, so we can hook into that with this Code Snippets and use the AoA shortcode:

    
    add_filter( 'hybrid_media_grabber_media', 'aoa_hybrid_media_grabber_media' );
    
    function aoa_hybrid_media_grabber_media( $video ) {
        return do_shortcode('[aoa id="0"]' . $video . '[/aoa]');
    }
    

    Example #4 - Dooplay

    Dooplay theme takes the custom video field and just echoes it to the screen, bypassing WordPress, so AoA cannot hook in. Thankfully they do use a custom filter, so we can hook into that with this Code Snippets and use the AoA shortcode:

    
    add_filter( 'doo_player_ajax', 'aoa_doo_video_filter' );
    
    function aoa_doo_video_filter( $video ) {
        return do_shortcode('[aoa id="0"]' . $video . '[/aoa]');
    }
    
    Dooplay uses a CSS trick to make the video responsive, so be sure to add this custom CSS code in AoA Main Settings:
    
    .pframe .aoa_wrap {
        padding-bottom: 56.25%;
    }
    

    Example #5 - True Mag

    This example is specific to the theme True Mag, which uses *cough* over 900 lines of custom code to show a single post. Luckily, there is one block of code they use to insert a sociallocker shortcode, so we're going to piggy back on that. These changes will allow you to set a custom meta field 'aoa_id' for each post to specify which ad to show, with the default being 0 (a random ad) if not set. If 'aoa_id' is set to < 0 then no ad will be shown.

    Original True Mag theme file single-inbox.php, lines ~381 - 400, and header-single-video.php, lines ~440-459

    
                            <?php
                                                    //social locker
                                                    $player_html=ob_get_contents();
                                                    ob_end_clean();
    
                                                    //for new shortcode
                                                    ob_start();
                                                    if($social_locker || $video_ads=='on' || $video_ads_id !== ''){
                                                            if(class_exists('video_ads') && ($video_ads=='on' && $video_ads_id !== '' )){
                                                                    if($video_ads_id=='0'){$video_ads_id='';}
                                                                    $player_html = '[advs id="'.$video_ads_id.'"]'.$player_html.'[/advs]';
                                                            }
                                                            if($social_locker){
                                                                    $id_text = tm_get_social_locker($social_locker);
                                                                    $player_html = '[sociallocker '.$id_text.']'.$player_html.'[/sociallocker]';
                                                            }
                                                            echo do_shortcode($player_html);
                                                    }else{
                                                            echo $player_html;
                                                    }
    

    New child theme file single-inbox.php, lines ~381 - 400, and header-single-video.php, lines ~440-459.

    
                            <?php
                                                    //social locker
                                                    $player_html=ob_get_contents();
                                                    ob_end_clean();
    
    #AOA change
    $aoa_id = get_post_meta( $post->ID, 'aoa_id', true ); 
    if (empty($aoa_id)) $aoa_id = 0;
    if ($aoa_id > 0) $player_html = '[aoa id="' . $aoa_id . '"]' . $player_html . '[/aoa]'; 
    
                                                    //for new shortcode
                                                    ob_start();
                                                    if($social_locker || $video_ads=='on' || $video_ads_id !== ''){
                                                            if(class_exists('video_ads') && ($video_ads=='on' && $video_ads_id !== '' )){
                                                                    if($video_ads_id=='0'){$video_ads_id='';}
                                                                    $player_html = '[advs id="'.$video_ads_id.'"]'.$player_html.'[/advs]';
                                                            }
                                                            if($social_locker){
                                                                    $id_text = tm_get_social_locker($social_locker);
                                                                    $player_html = '[sociallocker '.$id_text.']'.$player_html.'[/sociallocker]';
                                                            }
                                                            echo do_shortcode($player_html);
                                                    }else{
                                                            echo do_shortcode($player_html); #AOA change
                                                    }
    

    I only added/changed the two sections with the # AOA change comment.


  6. I see the overlay but no ad. What is happening?

    This is most likely your theme (such as TrueMag) is using CSS to force ALL iframe behaviour to be absolute, which could get mixed up with the overlay (also absolute). To fix this, we can use CSS to set iframes back to their default behaviour within the aoa container:

    
    .aoa_wrap .aoa_content iframe { position:relative !important; top:auto !important; left: auto !important; }
    

    If your theme (also TrueMag) forces ALL iframe width/height to be 100% as well, your iframed ads will not be centered on the overlay. To fix this, we can use CSS to set the ad content's width/height back to match your ad's original width/height. For example:

    
    .aoa_wrap .aoa_content iframe { width: 350px !important; height: 250px !important; }
    

    Another possible reason is you are using Ad Block or similar.

  7. Can I make the overlay ads more like YouTube?

    Yes if you know the size of the ad, you can use CSS to size the overlay to match and position it. Here is an example for the above 300x250 ad using the additional CSS class aoa_300x250.

    
    .aoa_300x250 .aoa_overlay { max-width: 300px; max-height: 250px;    top:50%; left: 50%; transform: translate(-50%, -50%);  }
    

    Screenshots:

  8. Can I only show ads under certain conditions?

    Yes, AoA supports hooks so you can make additional checks and make changes to the ad to be shown if needed. Here is an example to only show the ad if the user is not logged in to WordPress (aka a guest).

    
    add_filter( 'aoa_shortcode_atts', 'aoa_additional_check' );
    
    // Array $atts contains info on the ad about to be shown via a shortcode
    function aoa_additional_check( $atts ) {
      if ( is_user_logged_in() ) {
    	return null;	// do not show AoA ad
      }
      return $atts;		// do show AoA ad
    }