Introduction

For theme that do not have built-in banner ads in the header, you may still wish to add a banner to the right of your logo. This is not recommended for all themes and may require additional custom styling that we do not provide.  We recommend you try out any of the available Ad plugins for WordPress that may make managing your ads and placing them in the theme a lot easier to maintain.

This is a Mod

This is considered a modification, so do it at your own risk! Make a backup of your existing file so you can replace it if something goes wrong and you need to start over.  Modified files WILL probably be replaced by a theme update at some point so keep note of your changes for future reference or see our guides below. Please note that we cannot assist you with modifying your theme or support problems you encounter as a result!

If you are modifying a theme as part of a client project, the following are really important!

How to Modify Your Theme the Right Way

How to Track Update Changes and Maintain Modifications



The Solution

  1. Go to Appearance → Editor
  2. Click on Theme Header (header.php)
  3. Locate the code for your logo, which typically starts with <div class=”logo”>
    • The easiest way to do this is to hit Ctrl+F/Cmd+F to open the search field in the browser and search for “logo”
  4. Add your custom markup after the closing </div> of the logo container. Your ad container must have a custom class. The below example is using Gigawatt ad shows a simple markup for a banner image using a class of “header_ad”.
<div class="logo">
       <h1>
          <a href="<?php bloginfo('url'); ?>">
              <?php if(get_option("ocmx_custom_logo")) : ?>
                    <img src="<?php echo get_option("ocmx_custom_logo"); ?>" alt="<?php bloginfo('name'); ?>" />
              <?php else : ?>
                    <?php bloginfo('name'); ?>
              <?php endif; ?>
          </a>
     </h1>
</div>
<div class="header_ad">
         <a href="http://www.obox-themes.com"><img src="http://placehold.it/728x90" alt="Obox" /></a>
</div>

Click Update File when satisfied with your edits.

You will need to add some Custom CSS to float your ad right so it sits next to the logo. You may also need to add some padding and margins, depending on the size and position of your image.  An example for the above scenario would be:

.header_ad{float: right;}
ul#nav {clear:  both;}
.logo {float: left;}

If you are new to CSS, click the glossary tooltop above to view some help resources or consider contacting an Approved Modifier to help you modify your theme.