X

Designing Ads

Create a Campaign

 The first step to design your Ads is creating a campaign. A campaign is defined by three parts:
  1. Campaign Information. The campaign’s name and description. This information will be presented to the buyers, so be as descriptive as possible.
  2. Ad Design. Ad type (Image/Link) and settings (Size, number, columns…).
  3. Contract Type. Select if you are selling by duration, page views or clicks, as well as your price.

That’s it. Now this campaign already defines a lot about your Ad.

Up next is how to put your Ad into your template, as well as how to customize it with CSS and JavaScript.

Integrate your Ads

 There are 3 ways to integrate AdPress Ads inside your templates:
  1. Widgets. The easiest way to do it. We already have an AdPress Widget, which you can use to drag and drop the widget to the sidebar of your choice. From there, change the title and select the campaign you want to run.
  2. ShortCodes. Another easy option. However, shortcodes are only useful inside a blog post or a page. Most of the time, this won’t be the case, as you’ll be looking for something that displays in every page or blog post without having to enter it every time.
  3. PHP Code. This involves editing your Theme templates. It’s relatively easy and straightforward if you have some experience with HTML and PHP, but otherwise it may be a little bit difficult.

Widget Integration

In order to use AdPress as a widget, your template has to have widget-compatible sidebars. Most templates have a right sidebar that’s customizable on your WordPress Appearance menu- premium options may have additional sidebars, too. Once you have a compatible template, you can add the AdPress widget more than once, as well as customize its title and the campaign it’ll display.

widget

ShortCodes Integration

If you plan to insert the Ad inside a blog post or page text, shortcodes are the way to go. You usually shouldn’t be doing this, however, as you’ll need to enter the code for every blog post you publish.

To insert your shortcode, use the following code:

[adpress campaign=5]

Each campaign has a unique ID. In the AdPress Campaigns page you can find the associated ID for each campaign.

Template Integration

Template Integration is definitely the most powerful option, but also the most difficult. This requires a level of expertise with HTML/CSS, as well as PHP. Here’s some code:

<?php
if (function_exists(display_campaign)) {
	display_campaign(1);
}
?&g t;

Customize Ad Appearance

Customizing Ad appearance is possible with AdPress. AdPress generates an HTML list (UL) where Ads are HTML items (LI), regardless of the kind of Ad you’re using.

This is a sample of the default generated code for an Image Ad Campaign:

<ul class="image-campaign">
  <li>
    <a href="http://adurl.com" target="_blank">
      <img src="http://siteurl.com/img1.png"/>
    </a>
  </li>
  <li>
    <a href="http://anotherad.com" target="_blank">
      <img src="http://siteurl.com/img2.png"/>
    </a>
  </li>
</ul>

With AdPress, it’s possible to change the generated code for the HTML items. This generated code can be found in AdPress->Settings->Image Ad for Image Ads and AdPress->Settings->Link Ad for Link Ads.

Editing HTML

The HTML can be found in the AdPress->Settings->Image Ad and AdPress->Settings->Link Ad. The following is the default code for both of them. Note that this HTML code is mixed with AdPress variables, and that these variables will be replaced when AdPress generates the Ads Code.

Default code for the Image Ad

<li>
	<a href="@url" target="_blank">
		<img src="@image_src"/>
	</a>
</li>
  • url The target ad’s URL
  • image_src The ad’s image source URL

Default code for the Flash Ad

<li>
	<div style="height: @banner_height; width: @banner_width; position: relative;">
		<a target="_blank" style="height: @banner_height; width: @banner_width;" href="@url"></a>
		<embed style="position: absolute;" type="application/x-shockwave-flash" src="@swf_src" quality="high" 
                wmode="transparent" height="@banner_height" width="@banner_width">
	</div>
</li>
  • url The target ad’s URL
  • swf_src The Flash banner source
  • banner_height The banner height (px)
  • banner_width The banner width (px)

Default code for the Link Ad

<li>
	<a href="@url" target="_blank">@link_text</a>
</li>
  • url The target ad’s URL
  • link_text The text of the Link Ad

Styling items with CSS

Beyond changing the HTML code, you can also edit and add styling to the generated HTML code. AdPress comes with the simple, default CSS styling.

CSS Code for the Image Ad

.image-campaign
{
	list-style: none;
}
.image-campaign li
{
	display: list-item;
	float: left;
	padding: 0;
	margin: 5px;
}

CSS Code for the Flash Ad

.flash-campaign
{
	list-style: none;
}

.flash-campaign li 
{
	display: list-item;
	float: left;
	padding: 0;
	margin: 5px;
}

.flash-campaign li div
{
  position: relative;
}

.flash-campaign li div a
{
  position: absolute; 
  z-index: 9999; 
  display: block;
}

CSS Code for the Link Ad

.link-campaign
{

}

.link-campaign li
{
	color: #777;
	font-size: 15px;
}

Adding JavaScript Effects

It’s possible to add JavaScript effects to the generated Ads code. AdPress has no special support for this, so you need to add the code yourself. AdPress Ads lists has a class. (image-campaign for Image Ads, and link-campaign for Link Ads).

;
(function($) {
  $(document).ready(function() {
    $('.image-campaign li').hover(function() {
      $(this).animate({
        'opacity':1
      });
    }, function() {
      $(this).animate({
        'opacity':0.5
      });
    });
  });
})(jQuery);

CTA Ads

It’s cool to have all your Ad Spots all the time, however, in the real world this happens very little. This is why we have made a CTA Ad feature. (CTA meaning Call To Action.)

This new feature, implemented in version 2.0, will help sell your vacant spots.

ad_cta

How does it work?

When there is an available spot in your campaign, AdPress will display your CTA Ad. This is typically an empty image with a text of “Advertise here” for both ad types.

The target URL of this Ad is a link that you can specify. It should be a landing page that gives the user information about advertising on your website, should they be interested.

Note that the CTA Ad only appears when there is are empty spots. Only one CTA Ad will be displayed.

Implementation

Click the Ad CTA Checkbox to enable this feature. If you are using an Image Ad, you’ll need to upload an image, and enter the target URL. If you are using a Link Ad, you’ll need to enter the ad text and also the target URL.