Adding banners/ads outside sidebar/site-template.


Author Message
George

Posted: 11/14/2011 Quote message   

I would like to add ads/banners outside the sidebar/site content.
How would i do this? I have installed the wordpress plugin "wp-insert" if thats for any help but still not sure how i get the ads where i want them.
Below is a screenshot of where i would like the ads to appear. Worth mentioning might be that i used artisteer 3.0 to create my theme.

This is the site:
http://www.mithilasdiary.com

A screenshot of what i'm trying to achieve sort of:
http://imageshack.us/photo/my-images/21/adsli.jpg/


 
Abland

Posted: 11/15/2011 Quote message   

Hi, George,

In your theme create a folder, "templates", and inside create the file, "side-ads.php":
<div class="side-ads left-side">

<div class="ad-block-wrap"><div class="ad-block block-1">AD 1 code</div></div>
<div class="ad-block-wrap"><div class="ad-block block-2">AD 2 code</div></div>
<div class="ad-block-wrap"><div class="ad-block block-3">AD 3 code</div></div>
<div class="ad-block-wrap"><div class="ad-block block-4">AD 4 code</div></div>
<div class="cleared reset-box"></div>
</div>

<div class="side-ads right-side">
<div class="ad-block-wrap"><div class="ad-block block-1">AD 5 code</div></div>
<div class="ad-block-wrap"><div class="ad-block block-2">AD 6 code</div></div>
<div class="ad-block-wrap"><div class="ad-block block-3">AD 7 code</div></div>
<div class="ad-block-wrap"><div class="ad-block block-4">AD 8 code</div></div>
<div class="cleared reset-box"></div>
</div>

In "style.css" add the following rules:
/*--> side ads */

.side-ads {
position: absolute;
display: block;
width: 150px;
height: auto;
top: 20px;
}
.left-side {
left: -170px;
}
.right-side {
right: -170px;
}
.ad-block-wrap {
position: relative;
display: block;
width: 100%;
margin-bottom: 20px;
}
.ad-block {
display: table-cell;
width: 150px;
color: #fff;
text-align: center;
vertical-align: middle;
border: 1px solid #ae3433;
background-color: #7b3535;
}
.block-1 {
height: 200px;
}
.block-2 {
height: 100px;
}
.block-3 {
height: 120px;
}
.block-4 {
height: 100px;
}

In "header.php" find:
<div class="art-sheet-body">

and add the template call right after:
<div class="art-sheet-body">

<?php get_template_part('templates/side','ads'); ?>

Just adjust the sizes in the css, and the code gets inserted within the divs of side-ads.php.

*In IE7 and older the text doesn't vertical-align.
 
George

Posted: 11/15/2011 Quote message   

Abland! Thank you so much! you don't know how much this means!
I'll give it a go and say how it went, thx a lot once again!
 
George

Posted: 11/15/2011 Quote message   

Abland, this was flawless! Everything works just the way i wanted it to work,
I can't thank you enough! Thank you!
I loved how you even made the red boxes just like the screenshot haha brilliant! I literally dropped my jaw :-O

Thank you once again friend! Much appreciated!

George
 
Mariano

Posted: 7/14/2012 Quote message   

Incredibly amazing!; just what I needed!!! :-D


THANK YOU VERY MUCH!!!!!!!!
 
LKS

Posted: 12/7/2012 Quote message   

Quote Abland:

Hi, George,

In your theme create a folder, "templates", and inside create the file, "side-ads.php":
<div class="side-ads left-side">

<div class="ad-block-wrap"><div class="ad-block block-1">AD 1 code</div></div>
<div class="ad-block-wrap"><div class="ad-block block-2">AD 2 code</div></div>
<div class="ad-block-wrap"><div class="ad-block block-3">AD 3 code</div></div>
<div class="ad-block-wrap"><div class="ad-block block-4">AD 4 code</div></div>
<div class="cleared reset-box"></div>
</div>

<div class="side-ads right-side">
<div class="ad-block-wrap"><div class="ad-block block-1">AD 5 code</div></div>
<div class="ad-block-wrap"><div class="ad-block block-2">AD 6 code</div></div>
<div class="ad-block-wrap"><div class="ad-block block-3">AD 7 code</div></div>
<div class="ad-block-wrap"><div class="ad-block block-4">AD 8 code</div></div>
<div class="cleared reset-box"></div>
</div>

In "style.css" add the following rules:
/*--> side ads */

.side-ads {
position: absolute;
display: block;
width: 150px;
height: auto;
top: 20px;
}
.left-side {
left: -170px;
}
.right-side {
right: -170px;
}
.ad-block-wrap {
position: relative;
display: block;
width: 100%;
margin-bottom: 20px;
}
.ad-block {
display: table-cell;
width: 150px;
color: #fff;
text-align: center;
vertical-align: middle;
border: 1px solid #ae3433;
background-color: #7b3535;
}
.block-1 {
height: 200px;
}
.block-2 {
height: 100px;
}
.block-3 {
height: 120px;
}
.block-4 {
height: 100px;
}

In "header.php" find:
<div class="art-sheet-body">

and add the template call right after:
<div class="art-sheet-body">

<?php get_template_part('templates/side','ads'); ?>

Just adjust the sizes in the css, and the code gets inserted within the divs of side-ads.php.

*In IE7 and older the text doesn't vertical-align.



Hi, Abland

I'm using responsive theme wordpress. I've follow your instruction until header.php where i could not find the code
<div class="art-sheet-body">

Could you help me? I attached my header.php code below
<?php

// Exit if accessed directly
if ( !defined('ABSPATH')) exit;

/**
* Header Template
*
*
* @file header.php
* @package Responsive
* @author Emil Uzelac
* @copyright 2003 - 2012 ThemeID
* @license license.txt
* @version Release: 1.3
* @filesource wp-content/themes/responsive/header.php
* @link http://codex.wordpress.org/Theme_Development#Document_Head_.28header.php.29
* @since available since Release 1.0
*/
?>
<!doctype html>
<!--[if !IE]> <html class="no-js non-ie" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 9 ]> <html class="no-js ie9" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" <?php language_attributes(); ?>> <!--<![endif]-->
<head>

<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

<title><?php wp_title('&#124;', true, 'right'); ?><?php bloginfo('name'); ?></title>

<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php wp_enqueue_style('responsive-style', get_stylesheet_uri(), false, '1.8.4');?>

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

<?php responsive_container(); // before container hook ?>
<div id="container" class="hfeed">

<?php responsive_header(); // before header hook ?>
<div id="header">

<?php if (has_nav_menu('top-menu', 'responsive')) { ?>
<?php wp_nav_menu(array(
'container' => '',
'fallback_cb' => false,
'menu_class' => 'top-menu',
'theme_location' => 'top-menu')
);
?>
<?php } ?>

<?php responsive_in_header(); // header hook ?>

<?php if ( get_header_image() != '' ) : ?>

<div id="logo">
<a href="<?php echo home_url('/'); ?>"><img src="<?php header_image(); ?>" width="<?php if(function_exists('get_custom_header')) { echo get_custom_header() -> width;} else { echo HEADER_IMAGE_WIDTH;} ?>" height="<?php if(function_exists('get_custom_header')) { echo get_custom_header() -> height;} else { echo HEADER_IMAGE_HEIGHT;} ?>" alt="<?php bloginfo('name'); ?>" /></a>
</div><!-- end of #logo -->

<?php endif; // header image was removed ?>

<?php if ( !get_header_image() ) : ?>

<div id="logo">
<span class="site-name"><a href="<?php echo home_url('/'); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>" rel="home"><?php bloginfo('name'); ?></a></span>
<span class="site-description"><?php bloginfo('description'); ?></span>
</div><!-- end of #logo -->

<?php endif; // header image was removed (again) ?>

<?php get_sidebar('top'); ?>

<?php wp_nav_menu(array(
'container' => '',
'theme_location' => 'header-menu')
);
?>

<?php if (has_nav_menu('sub-header-menu', 'responsive')) { ?>
<?php wp_nav_menu(array(
'container' => '',
'menu_class' => 'sub-header-menu',
'theme_location' => 'sub-header-menu')
);
?>
<?php } ?>

</div><!-- end of #header -->
<?php responsive_header_end(); // after header hook ?>

<?php responsive_wrapper(); // before wrapper ?>
<div id="wrapper" class="clearfix">
<?php responsive_in_wrapper(); // wrapper hook ?>

 
vilmar

Posted: 5/9/2013 Quote message   

Thanks a lot!
Incredible tip.
I have experienced some problems to implement solution at the beggining, but finally worked fine!
Congratulations dude!
http://defendaseudinheiro.com.br/
 
jose rodrigues

Posted: 5/12/2013 Quote message   

Quote vilmar :

Thanks a lot!
Incredible tip.
I have experienced some problems to implement solution at the beggining, but finally worked fine!
Congratulations dude!
http://defendaseudinheiro.com.br/



Can you please share how you got it working?
 
Venkat

Posted: 2/23/2015 Quote message   

is there anyway that we can show the ads only if the device width is greater than 1000px, or else if the window is resized and in mobile devices, the ads coming over the site content.

Thanks
 


Artisteer is not affiliated with or endorsed by Joomla!™ or Drupal™ or WordPress™ Projects.

Copyright © 2008-2014 by Artisteer, Ltd