Adding banners/ads outside sidebar/site-template.


Author Message
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
 
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