/
2013-12-05-making-website-banner-ads-more-visible.html
106 lines (103 loc) · 8.17 KB
/
2013-12-05-making-website-banner-ads-more-visible.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
---
layout: post
title: Making website banner ads more visible
date: 2013-12-05 10:38:49.000000000 -08:00
categories:
- wordpress
tags: []
status: publish
published: true
---
{% include toc.html %}
<p><img class="alignright size-full wp-image-19279" alt="adshowcase" src="https://s3.us-west-1.wasabisys.com/idbwmedia.com/images/adshowcase.png" width="350" height="432" />For several years I've shown ads in my sidebar using the <a href="http://wordpress.org/plugins/wp125/">WP125 ad plugin</a>. But I think readers tend to become blind to website ads like this, so I decided to switch things up a bit. If you look in my Sponsors section, you'll see snippets of text beside each graphic. Sponsors also have control to update the text and images themselves.</p>
<p>I patterned this model after a section I saw on <a href="http://techwhirl.com/">Techwr-l</a> called “Sponsored Posts.” I found myself drawn to that section. My implementation is somewhat different, but the idea is similar.</p>
<p>If you want to implement ads like this, here's how you do it. You basically show the ads in a special post category that is called in a secondary WordPress loop. You exclude this post category from your RSS feed and homepage, and then give sponsors rights to edit the posts. For the WordPress developers out there, here's more detail.</p>
<h2 id="create-a-new-category-called-sponsored-posts-for-the-sponsored-messages">1. Create a new category called “sponsored posts” for the sponsored messages</h2>
<p>You create a new category by going to Posts > Category. You can obviously call the new category something different, but these instructions will refer to this category as “sponsored posts.”</p>
<h2 id="exclude-sponsored-posts-from-the-rss-feed">2. Exclude sponsored posts from the RSS feed</h2>
<p>Hide the sponsored posts category from the homepage loop by adding the following code to your functions file. Change the category number (2688) to the new post category you created earlier (the category ID appears in the URL when you're viewing the category).</p>
<p>{% highlight javascript %}<br />
function myFeedExcluder($query) {<br />
if ($query-&gt;is_feed) {<br />
$query-&gt;set('cat','-2688');<br />
}<br />
return $query;<br />
}<br />
add_filter('pre_get_posts','myFeedExcluder');</code></pre><br />
{% endhighlight %}</p>
<p>Put the code right before the closing <code>?></code> in functions.php.</p>
<h2 id="exclude-the-sponsored-posts-category-from-the-homepage">3. Exclude the sponsored posts category from the homepage</h2>
<p>Use the <a href="http://wordpress.org/plugins/wp-exclude-from-homepage/">WP Exclude from Homepage</a> plugin to exclude the sponsored posts category from appearing on the homepage. There are other ways to do it, of course, but I found this the easiest.</p>
{% include ads.html %}
<h2 id="install-the-php-code-widget-plugin">4. Install the PHP Code Widget plugin</h2>
<p>Install the <a href="http://wordpress.org/plugins/php-code-widget/">PHP Code Widget</a> plugin so that you can insert PHP code (configured later) in a widget. Once you activate the plugin, you'll be see a new widget called “PHP Code” at Appearance > Widgets where you can insert PHP code. You'll use this widget later.</p>
<h2 id="use-the-advanced-custom-fields-plugin-to-define-several-new-fields">5. Use the Advanced Custom Fields plugin to define several new fields</h2>
<p>Using the <a href="http://www.advancedcustomfields.com/">Advanced Custom Fields plugin</a> (my favorite plugin, by the way), you need to define four fields: link, link_url, image, and image_url. You can name the fields whatever you want, but you'll have to update the WP query section in the code that follows with whatever field names you use.</p>
<p>Each of the fields is a simple text field, but the image field is of field type “image” and the return value is image URL.</p>
<p>In the custom fields logic, add a rule so that the fields only appear when the post category is “sponsored-posts”. Then hide all the other fields (e.g., Content, Comments) so that users don't get confused. The users should only see these four fields when they select the sponsored posts category.</p>
<h2 id="create-a-new-wordpress-query-for-the-loop">6. Create a new WordPress query for the loop</h2>
<p>Now we need to create a new loop for this posts category and show these custom fields within the loop. When you create a secondary WordPress loop, you use <code>query_posts</code> so that the posts don't interfere with posts in your main WordPress loop.</p>
<p>If you changed the category name to something besides “sponsored-posts”, change the <code>query_posts</code> arguments below. The other arguments, <code>posts_per_page</code> and <code>orderby</code> offer other options. The <code>posts_per_page</code> argument allows you to set how many posts get returned to the page. The <code>orderby=rand</code> option will randomize the posts on each refresh.<br />
{% highlight html %}<br />
<div id="sponsored_ads_section"> </p>
<p> <?php query_posts('category_name=sponsored-posts&posts_per_page=10&orderby=rand'); ?></p>
<p> <?php while (have_posts()) : the_post(); ?><br />
<a href="<?php the_field('image_url') ?>"><img src="<?php the_field('image'); ?>" alt="" /></a></p>
<p><div class="ad_title"><br />
<a href="<?php the_field('link_url'); ?>"><?php the_field('link'); ?>&nbsp;&raquo;</a><br />
</div><br />
<div class="pentry"><br />
</div></p>
<p> <?php endwhile;?><br />
</div><br />
{% endhighlight %}<br />
Add this code to your PHP Code widget by going to Appearances > Widgets.</p>
<h2 id="add-some-styling-to-your-stylesheet">7. Add some styling to your stylesheet</h2>
<p>The following CSS works for my sidebar, which is about 300px in width. Change the max-width property to something that fits your sidebar well. The ads stack in single-file rather than double-file. Take note of the <code>inline-block</code> style.</p>
<p>{% highlight css %}<br />
#sponsored_ads_section {<br />
max-width: 270px;<br />
background-color: #fafafa;<br />
padding:10px;<br />
}</p>
<p>.ad_title {<br />
padding:20px 0px 20px 5px;<br />
line-height:150%;<br />
font-size:.8em;<br />
text-decoration:none;</p>
<p>}<br />
#sponsored_ads_section img {<br />
float:left;<br />
margin:10px;<br />
padding:1px;<br />
}<br />
#sponsored_ads_section a {<br />
font-weight:normal;<br />
text-decoration:none;<br />
/*color: #21759b;*/<br />
}</p>
<p>#sponsored_ads_section a:hover {<br />
color: #21759b;<br />
}</p>
<p>#sponsored_ads_section h2 {<br />
margin:10px;</p>
<p>}<br />
#sponsored_ads_section .pentry {<br />
clear:both;<br />
}<br />
{% endhighlight %}</p>
<h2 id="create-new-users-for-each-of-your-sponsors">8. Create new users for each of your sponsors</h2>
<p>For each sponsor, create a new user and assign the user the role of contributor. Create some posts for these sponsored messages, selecting the sponsored posts category. When you upload images, use 125x125px images. Edit the various posts and change the author of the ad to the appropriate sponsor.</p>
<h2 id="add-special-permissions-for-contributors">9. Add special permissions for contributors</h2>
<p>Contributors don't quite have all the necessary rights, such as being able to upload images or edit published posts, so add the following code to your functions file to give your contributors these rights. Contributors won't be able to publish posts themselves, just drafts. But they can edit posts that have already been published.</p>
<p>{% highlight php %}<br />
if ( current_user_can('contributor') )<br />
add_action('admin_init', 'allow_contributor_uploads');<br />
function allow_contributor_uploads() {<br />
$contributor = get_role('contributor');<br />
$contributor-&gt;add_cap('upload_files');<br />
$contributor-&gt;add_cap('edit_published_posts');<br />
$contributor-&gt;remove_cap('edit_others_posts');<br />
}</p>
<p>{% endhighlight %}</p>
<p>That's it. Now you should see text snippets beside each ad graphic. You've given sponsors the ability to manage their own ad content.</p>