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?
 


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

Other services from Artisteer Team: BillionPhotos, BillionThemes. Createer and more are coming soon.

Copyright © 2008-2014 by Artisteer, Ltd