Customising the Ad Manager

Topics covered

• Changing how ads look
• Editing purchase templates
• Matching the purchase pages to your site
• Ad zone custom parameters and shortcodes
• Example: styling a text ad zone
• Language translations

Updated for OIO Publisher 3.6.0, October 2026.

Changing how ads look

Basic changes, such as ad size and the number of ads in a zone, are made in OIO Ad Manager > Ad Zones. To show the same ad zone slightly differently in different places, use custom parameters.

For more advanced changes, you have two options.

1. Style ads with CSS

OIO’s images/style/output.css file holds the CSS that positions ad zones. Banner, text and inline ads each have their own section in that file.

Every ad zone also has its own CSS ID, so you can style one zone without affecting the others:

#oio-{adtype}-{zone}

For example, banner ad zone 1 has the ID #oio-banner-1, and text ad zone 2 has #oio-link-2. See the text ad example below for a step-by-step walkthrough.

We recommend putting your CSS in your theme’s stylesheet or in Appearance > Customize > Additional CSS, so it isn’t replaced when you update OIO.

2. Override the display code with a hacks.php file

OIO loads a file called hacks.php from its main folder (if one exists) before its own display code. You can use it to define your own versions of the functions oiopub_banner_zone(), oiopub_link_zone() or oiopub_ad_slots(), and OIO will use yours instead.

Note: don’t copy the whole include/output.php file into hacks.php. That file defines a class that OIO loads anyway, so a full copy will stop your site with an error. Only add the functions you want to change. Updating OIO also removes hacks.php, so keep a copy and put it back after each update.

Editing purchase templates

The pages advertisers see when they buy an ad are built from two kinds of files, both in OIO’s templates folder.

1. Core templates

The templates/core folder holds the files for each page’s main content, such as the banner ad purchase form.

To change one of these files, first copy it from templates/core into templates/core_custom, then edit the copy. OIO uses files in core_custom in place of the originals, so the original stays untouched.

Keep a copy: updating OIO replaces the whole plugin folder, including core_custom. Save your core_custom files on your computer and copy them back after each update.

2. Theme folders

The other folders in templates, such as default, are themes. Each one has a header, a footer and a stylesheet that set the look of the purchase pages. See Matching the purchase pages to your site for how to make your own.

Matching the purchase pages to your site

OIO 3.6.0 comes with a redesigned default theme that works well on phones and fits most sites as it is. If you want the purchase pages to match your own branding:

1. Using your host’s File Manager or FTP, open wp-content/plugins/oiopub-direct/templates.
2. Copy the default folder and give the copy a new name, for example mytheme.
3. In WordPress, go to OIO Ad Manager > Settings > Themes and select your new theme.
4. On the same page, edit your theme’s header.tpl, footer.tpl and style.css. You can add your logo and site links to the header and footer, and change colors and fonts in the stylesheet. If a file name shows in red, your server won’t let WordPress edit it, so edit it with your host’s File Manager instead.

Tip: always work on a copy rather than the default theme itself, and keep a copy of your theme folder on your computer. Updating OIO replaces the whole plugin folder, so copy your theme folder back after each update.

If you would rather send advertisers to your own “Advertise” page first, enter its address in OIO Ad Manager > Settings > General, under Redirect Purchase links to Custom URL.

Older versions of OIO had a one-click “wordpress” theme option. It is no longer included, and the steps above replace it.

Ad zone custom parameters and shortcodes

You can change how an ad zone is displayed right in the ad code, without changing the zone’s settings.

1. Shortcodes (easiest)

Add these to any post, page or Shortcode block:

[oio_banner_zone zone="1" align="left"]
[oio_link_zone zone="1" list="true"]
[oio_purchase_link type="banner" text="Advertise here"]

The banner shortcode also accepts cols, rows, width, height, spacing and title. The text ad shortcode accepts cols, rows, align, list and title.

2. JavaScript ad code

This example shows banner ad zone 1 (zone=1), aligned left (align=left), with all empty ad slots shown (empty=-1). Replace example.com with your own site address.

<script type="text/javascript" src="https://example.com/wp-content/plugins/oiopub-direct/js.php?type=banner&zone=1&align=left&empty=-1"></script>

3. PHP ad code

This shows the same ad zone using PHP, for example in a theme template file:

<?php
if(function_exists('oiopub_banner_zone')) {
    $zone_id = 1;
    $options = array( 'align' => "left", 'empty' => "-1" );
    oiopub_banner_zone($zone_id, $options);
}
?>

4. Full list of options

These options work with both the JavaScript and PHP ad code:

These options control the HTML that OIO outputs:

Example: styling a text ad zone

In this example we turn a text ad zone into a tall “skyscraper” box (120 x 600 pixels) with three text ads, then restyle it with CSS. The aim is to show how much you can change a zone’s look.

1. Set up the zone

Go to OIO Ad Manager > Ad Zones, open a text ad zone and set:

• Display Format: No (this unlocks the width and height settings)
• Link Box Size: 120 width, 600 height
• Zone Grid: 1 column, 3 rows
• Description Length: 80 (or any length you like)

Save, then add three default ads at the bottom of the page so you can see how the zone looks. Place the zone on a page of your site.

2. Style the ads

Text ad zones have the CSS ID #oio-link-{zone}. This example uses zone 1. The CSS below changes the background color, the link color, size and weight, and the spacing around each ad:

/* The whole ad zone */
#oio-link-1 {
    background: #0b3d5c !important;
}
/* Each ad */
#oio-link-1 li .cell {
    padding: 8px !important;
}
/* The ad link */
#oio-link-1 li a {
    color: #ffd166 !important;
    font-weight: bold !important;
    font-size: 15px !important;
}
/* The ad link when the mouse is over it */
#oio-link-1 li a:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}
/* The ad description */
#oio-link-1 li .desc {
    color: #e6eef3 !important;
}

3. Common questions

Where should I put the CSS?
In your theme’s stylesheet, or in Appearance > Customize > Additional CSS. Avoid adding it to OIO’s own output.css file, because updates replace that file.

How do I style all my text ad zones at once?
Use .oio-link-zone instead of #oio-link-1.

Why does each line end with !important?
It makes sure your styles win over OIO’s built-in ones.

Where can I learn more about CSS?
The MDN CSS reference covers every CSS property.

Language translations

You can translate the text advertisers see from OIO Ad Manager > Settings > Languages. Edit an existing translation, or create one for any other language.

Your edits are saved in OIO’s lang folder, in files ending in _custom.php. Updating OIO replaces that folder, so keep a copy of those files and put them back after each update.

OIO 3.6.0 includes translations for:

• Danish
• Dutch
• Finnish
• French
• German
• Greek
• Italian
• Portuguese
• Spanish
• Turkish

The OIO admin area itself can’t be translated yet, only the text advertisers see.