HandymanHowto.com » source code

How to Display Adsense Ads in the WordPress Index Pages for Fresh News by WooThemes – Part 2

Bob Jackson — Mon, 21 Sep 2009 00:31:33 +0000

This tutorial is continued from Part 1.

Summary of Code Changes to index.php

The index.php file is the theme template that displays the Featured Posts and Post Summaries (Excerpts) to paint the body of the Front Page and Index Pages. Source code logic is added to index.php to display the Google Adsense Ads at the appropriate position in the summaries and only once per page to stay within the maximum of 3 ads per web page.

First, a new variable is created to ensure the Adsense Ads are display only once per page at line 27:

The main code for the Featured Banner Ads – this is how I described the new feature in the php comments – is on lines 61 to 99:

Disable the Post Date Display

I’ve disabled the post date display on all my posts purely as a matter of personal preference - see lines 38 to 42 and 106 to 110. If you want the post date to be shown as usual, simply uncomment these lines. Either way, this change is unrelated to the Google Adsense enhancements and has no impact on the Ad display logic.


*/
?>

and


*/
?>

Now let’s make the changes to index.php.

Edit index.php

If you haven’t already made a backup of your WordPress database, please do so now. If you make an error in the edits to index.php it can possibly make your blog unreadable.

The following instructions assumes you’ve not made any customizations to index.php and you’re using Fresh News v2.0.7. If you’re using a different version or have made other customizations, you’ll need to “stare and compare” and merge the Adsense code enhancements using your judgment.

Log in to your WordPress Admin Panel.
Open the Theme Editor at Appearance → Editor in the left navigation menu.
Open the Main Index Template file index.php by clicking on it in the right menu.
Right click in the editor and choose Select All.
Right click and choose Cut. The content of the Theme Editor is now empty.
Open Notepad or your favorite text editor and paste the contents of index.php into notepad. Now save this original copy of index.php to your local computer just in case you need to recover the original version (this will be quicker than restoring the site backup.) Alternately, use File Manager in cPanel and/or save a copy using FTP.

Theme Editor - Main Index Template: index.php

The full source code for the Adsense enhancements is here: index.php
Paste the upgraded index.php code into the Theme Editor.
Replace my Adsense 250×250 code unit with your Adsense code on lines 69 to 79 and 82 to 92 as highlighted:

Click “Update File” to save.

Test the Adsense Upgrade to Front Page and Index Pages

In a new web browser window, open your web site and confirm the two Google Adsense Ads are displayed after the Featured Posts on the Front Page, and after the 2nd post summary on the following Index Pages.

If something doesn’t look right, just paste the original source code back into index.php and save to restore the original look and feel.

Track the Performance of the new 250×250 Page Ads

If you’re interested to know how well the new Adsense Ads are performing, log in to your Adsense Account and create a custom channel to track the performance of the new ad units.

Hope this helps,

Bob Jackson

Bookmark It!

How to Display Adsense Ads in the WordPress Index Pages for Fresh News by WooThemes – Part 1

Bob Jackson — Mon, 21 Sep 2009 00:22:25 +0000

This tutorial explains how to display Google Adsense Ads in your WordPress post index pages to generate revenue from this prime area of web page real estate.

Revenue Opportunity for Front- and Index Page Ads

I use the Fresh News 2.0.7 theme by WooThemes for the primary look and feel of www.handymanhowto.com and wanted to display the maximum allowed three (3) Google Adsense Ads on all my pages and articles, including the Front Page and Index Pages. All pages have a 300×250 Adsense ad in the sidebar which counts as one (1) Adsense Ad per web page. Individual articles (or single posts) contain two (2) additional Adsense Ads in the post body bringing the total number of ads for a single post web page to the maximum of 3 allowed by Google.

The problem is the Front Page and post Index Pages did not contain Google Ads in the page body because there was no plug-n-play or widget-based method in the Fresh News theme to include the Adsense code, leaving these frequently viewed pages with only the single ad in the sidebar. I was missing a revenue opportunity to display two additional ads on prime web page real estate.

The next image illustrates the solution with two 250×250 Adsense Ads displayed immediately after the Featured Posts for a total of three (3) Google ads on the Front Page.

Google Adsense Ads in the WordPress Page Index for Fresh News

Ads are displayed after the 2nd blog post on Index Pages for a total of three (3) Google ads per page as allowed by the Adsense program rules:

Google Adsense within Index Pages for Fresh News

Single post pages are unchanged by the Front Page and Index Page modifications.

Fresh News Theme Modifications for Google Adsense Ads

Before you begin, make a backup of your WordPress site because changes will be made to the Fresh News Theme source code files.

Step 1: Create a 250×250 pixel Google Banner Ad

Log in to your Google Adsense Account at http://adsense.google.com.
Go to Adsense for Content and create a square 250×250 Image Ad.
Copy the Adsense Unit Code and save it a local file for later.

Here’s the Adsense code for my 250×250 image ad. Note that your publisher id will be different.

Step 2: Edit your Cascading Style Sheet file: style.css

New stylesheet properties are created to properly position the two Adsense ads. The center column is 580 pixels wide as found in the 960.css file: property .grid_10{width:580px}.container_16. (Firebug is indispensable for web page is forensics and analysis.) Careful measuring and testing finds that the Featured Post post excerpt div element is 542 pixels wide after allowing for margins. The style sheet pushes one ad to the left (float:left) and one to the right (float:right) of the 542 pixel wide x 270 pixel tall container.

To make the changes to style.css:

Log in to your WordPress Admin Panel.
Open the Theme Editor at Appearance → Editor in the left navigation menu.
Open the Stylesheet file styles.css – it will be near the bottom of the right menu.
Add the following lines of CSS code to the bottom of the file for the Google Ads.

/*==============  Featured Post Banner Ads  ===================*/
#featured_ads {
       width: 542px;
        height: 270px;
       overflow: hidden;
}

#featured_ads #banner_ad_left {
        float: left;
        width: 250px;
       margin: 10px;
}

#featured_ads #banner_ad_right {
        float: right;
        width: 250px;
        margin: 10px;
}

The new CSS lines are highlighted in this image:

Edit the Fresh News Style Sheet - style.css

Click “Update File” to save your changes.

Here’s the CSS code snippet for the Adsense style additions: style.css Adsense enhancements

This tutorial is continued in Part 2.

Take care,

Bob Jackson

Bookmark It!

Google Custom Search Integration with WooThemes Fresh News 2.0 – Part 2

Bob Jackson — Sun, 13 Sep 2009 17:42:34 +0000

This tutorial is continued from Part 1.

Create a Search Results Page Template

A new WordPress page template is created to display the Google Custom Search Results. The standard page.php template is formatted with a center column to display the page content that’s designed for a sidebar; and therefore too narrow for the 600 pixel wide Google search results. Therefore, a new search results page template is created to display the full screen width.

Before you begin, make a full backup of your WordPress site … just in case.

Step 1: Copy the page.php template file to make a new search.php file

This creates a search results page template.
Use File Manager in cPanel to copy and rename the file.
Place the search.php file in the /public_html/wp-content/themes/freshnews directory with the other page templates (e.g. header.php, footer.php, etc).

Step 2: Edit search.php file

Use the Theme Editor in the WordPress Admin Panel to edit the search.php Template File as shown in the following image.

Add a Template Name Comment at the top, call it ‘Search Results’
Comment out the centercol div element
Delete the call to get_sidebar()
When done, click Update File in the Theme Editor to save the changes.

Edits to search.php page template

The edits are generic and you should be able to reuse my search.php page template without modifications. You can get my file here: search.php

Create a Search Page to Display the Google Custom Search Results

Create a new page named Search via the Page → Add New command on the left menu in the Admin panel.
Edit the post slug if needed to ensure Permalink is http://your_domain_name/search/
Click the HTML tab in the post editor.
Paste the Google Search result code.
Save and publish the page. This will create the Page ID.
Edit the page again.
Write down the Page ID as given in the URL of the web browser because it will be needed later. The Page ID is the number after the “post=” argument. In my case, the Search Page ID is 7 in the URL:
http://www.handymanhowto.com/wp-admin/page.php?action=edit&post=7
Assign the Search Results page template in the drop down menu as shown (lower left in the image below).
Save and publish the page.

Click on the image below for a full size view.

Search Page for Google Custom Search

Next, the Google Custom Search box will be added to the page header.

Changes to header.php

Now we’ll add the Google Custom Search Control to the page header and make a cosmetic change suppress the Search page from showing in the main menu.

Cosmetic Change

The Search page is shown by default in the menu bar at the very top of the web page. If a visitor to your site clicks on the Search menu item, an empty Search page will be displayed, which is confusing.

To remove the Search page from the header menu:

Edit the header.php file in the freshnews theme directory (e.g. /public_html/wp-content/themes/freshnews/header.php). You can make the changes to header.php using the WordPress Theme Editor.
Add the code &exclude= to the wp_list_pages() function as shown in the image below.
→ Recall the Search Page ID was written down when the Search page was created (see above). The Page ID for my Search page is 7.

header.php - Exclude the Search page from Main Menu

continue to the next step…

Add the Google Custom Search Box to the Page Header

While still editing header.php, replace the default search box code as highlighted:

header.php - Default Search Code

with the Google Search box code as shown below. Also add the
HTML code as indicated to move the Search box submit button below the text input control.

header.php - Google Custom Search code

The modified Fresh News v2.0.7 header.php file for my site is here: header.php

Remember:

Your Search page URL, Page ID and Adsense Publisher ID values will be different from mine and should be changed in your version of header.php. Or you can use mine if you like giving me your Adsense revenue. (smile)

Save and test your new Google Custom Search Engine.

Remember, to re-edit the header.php and possibly the search.php templates if you install a Fresh News theme update.

Hope this helps,

Bob Jackson

Bookmark It!

Automate Exterior Lights with an Insteon Wireless Motion Sensor

Bob Jackson — Sun, 31 May 2009 21:03:07 +0000

My front porch has pendant lights suspended by chains and is controlled by a standard light switch. I automated the porch lights with Insteon home automation controls purchased from SmartHome.com. I covered the Insteon ToggleLinc light switch installation in this article. The related ISY-99i home automation controller is discussed here.

The Insteon Motion Sensor is a model 2420M as you see here. The 9 volt battery and mounting stand are included.

Insteon Wireless Motion Sensor 2420M

Removing the battery cover reveals five jumper pins and Set button. Installation and operation are simple, the Quick Start Guide is available here with the details.

Insteon 2420M Motion Sensor - Rear View

The motion sensor LED is quite bright and flashes when in “Link” mode after pressing the Set button. It also flashes when motion is detected. The LED brightness is configurable on a 0 to 100 scale through the ISY-99i Administrative Console, with 0 (zero) turning off the LED.

Motion Sensor LED

Access Point Wireless Phase Coupler

The 2420M motion sensor is an RF only Insteon device and requires a Access Point RF receiver/phase coupler to communicate with the Insteon power line network. It’s simple to “link” the motion sensor by pressing the Set buttons on both devices per the product instructions.

Customizing the Motion Sensor Settings

The motion sensor Timeout, LED Brightness and Darkness Sensitivity can be customized via the ISY-99i Administrative Console. I left the timeout at the default of 1 minute, set the LED brightness down to 10 because the default value 75 is too bright at night, and left the Darkness Sensitivity at the default of 35.

Linking the Motion Sensor

The motion sensor is linked only to the Access Point wireless receiver. I did not link the motion sensor to the ToggleLinc light switch because I will have an ISY-99i program decided what to do with the motion sensor events.

Insteon Network Overview

Now that I’ve installed the ToggleLinc switch, wireless motion sensor, Access Point wireless coupler, PowerLinc power line modem and ISY-99i home automation controller – I’m ready to begin programming the ISY-99i.

This is my Insteon network so far (click on the image for larger view):

Insteon Network Overview - Porch Lights Automation

Motion Sensor Programming

My requirements for the porch light program are:

The porch lights will turn on for 10 minutes when motion is sensed from 30 minutes before sunset to 15 minutes after sunrise.
The motion sensor can be overridden by “double clicking” OFF, i.e. pressing the ToggleLinc switch OFF quickly two times, to keep the porch lights off indefinitely. This is useful when I want to look at the stars or for Halloween when the scene should be kept dark to view the decorations.
Manually turning the ToggleLinc switch ON will turn on the lights indefinitely and re-enable the motion sensor program. When the switch is manually turned OFF, the motion sensor program takes over again by default.

In practice, the common scenarios are:

Lights are controlled by the motion sensor by default.
If I turn the switch ON, the lights stay ON until I turn them OFF.
If I want to keep the porch lights off for a time, I double click OFF the light switch.
When I come back inside, I flip the light switch ON/OFF once to re-enable the motion sensor.

An program upgrade would be to include a reset program to run, say, at 30 minutes past sunrise everyday to turn OFF the lights and re-enable the motion sensor in case I manually overrode the lights and forgot to turn them off. Hmm, I think I’ll add this feature – see the update later in this article.

The motion sensor program flow chart is:

Porch Light Program Flow Chart

The ISY-99i program code is kept in a Folder named ‘Front Porch Light’.

Folder Conditions for 'Front Porch Light'
Add conditions to limit when programs in this folder are allowed to run.

If
   - No Conditions - (To add one, press 'Schedule' or 'Condition')

Then
   Allow the programs in this folder to run.

Comment:
The programs in this folder are:
1) 'Porch Motion Sensed'
2) 'Porch Light On 10 Minutes'
3) 'Porch Light Switched On'
4) 'Porch Light Switched Fast Off'

===========


Program Content for 'Porch Motion Sensed'

If
   From    Sunset  - 30 minutes
   To      Sunrise + 15 minutes (next day)
   And Control 'Porch Motion Sensor' is switched On
   And (
         Status  'Front Porch Light Switch' is not On
         And Program 'Porch Light On 10 Minutes' is False
       )

Then
   Run Program 'Porch Light On 10 Minutes' (Then Path)

Else
   - No Actions - (To add one, press 'Action')

===============


Program Content for 'Porch Light On 10 Minutes'

If
   - No Conditions - (To add one, press 'Schedule' or 'Condition')

Then
   Set 'Front Porch Light Switch' On
   Wait  10 minutes
   Set 'Front Porch Light Switch' Off
   Run Program 'Porch Light On 10 Minutes' (Else Path)

Else
   - No Actions - (To add one, press 'Action')

Comment:
Turns the porch light on for 10 minutes. A program is used such that
the 'Wait' isn't reinitialized by new events triggering If conditions.

================


Program Content for 'Porch Light Switched On'

If Control 'Front Porch Light Switch' is switched On

Then
   Stop program 'Porch Motion Sensed'
   Enable Program 'Porch Motion Sensed'
   Run Program 'Porch Light On 10 Minutes' (Else Path)

Else
   - No Actions - (To add one, press 'Action')

Comment:
This program returns control to the motion sensor and reinitializes
the conditional logic flags.
Run Program (Else Path) to reset the motion on/off flag.

===============


Program Content for 'Porch Light Switched Fast Off'

If Control 'Front Porch Light Switch' is switched Fast Off

Then
   Stop program 'Porch Motion Sensed'
   Disable Program 'Porch Motion Sensed'
   Run Program 'Porch Light On 10 Minutes' (Else Path)

Else
   - No Actions - (To add one, press 'Action')

Comment:
Double tap (Fast Off) disables the motion sensor such that the
porch light stays off until the switch is manually turned on again.
Purpose of the 'Run Program ... (Else Path)' is to reset the motion
on/off flag.

Bonus Program

I added this new program to turn off porch lights at dawn and reset the motion sensor control in case I manually overrode the motion sensor and forgot to turn OFF the lights. This ensures the motion sensor code is is ready for the next night.

Program Content for 'Porch Light Daily Reset'

If
   Time is Sunrise + 30 minutes

Then
   Set 'Front Porch Light Switch' Off
   Run Program 'Porch Light On 10 Minutes' (Else Path)
   Enable Program 'Porch Motion Sensed'

Else
   - No Actions - (To add one, press 'Action')

Comment:
Turns off the porch lights 30 minutes after dawn and resets the
program flags in case the lights were manually overridden and left
on all night.

This is how the programs are organized in the ISY-99i Admin Console (click for a full size image):

Porch Light Programs in the ISY-99i Admin Console

For more information on the ISY-99i, the Universal Devices Wiki page is an excellent resource.

Hope this helps,

Bob Jackson

Bookmark It!

Integrate Google Adsense with the Fresh News Theme Sidebar Ad

Bob Jackson — Mon, 16 Mar 2009 01:01:36 +0000

I use the Fresh News Theme by WooThemes for the overall look and feel of HandyManHowTo.com. Several people have asked me “How did you integrate Google Adsense into the Fresh News Theme 300×250 Block Ad in the Sidebar?“. An example is the “Zoom Plumbing” Google Ad in the screen grab below.

HandymanHowTo.com with 300x250 Google Adsense Ad in Sidebar

Here’s how to do it…

Create a 300×250 Google Adsense Unit

Log into your Google Adsense account.
Create a text and image, square, “300×250 Medium Rectangle Ad”.
Copy and save the AdSense Unit Code. The code for my 300×250 ad is:

Fresh News version 2.x Instructions

WooThemes made it really easy to create a sidebar banner ad in Fresh News version 2.x with the new WooTheme framework. Scroll down for the Fresh News version 1.x instructions if you haven’t upgraded to 2.x.

Step 1: Log into to the WordPress Admin panel.

Step 2: Click the blue “Woo” icon on the left navigation menu.

Step 3: Click the “Banner Ad Sidebar – Widget (300×250).

Step 4: Paste your 300×250 Adsense Unit Code into the box as shown:

Woo Themes - Banner Ad Sidebar Widget 300x250 Adsense Code

Step 5: Click “Save All Changes”.

Step 6: Under the Appearance menu on the left nav bar, click Widgets.

Step 7: Click and drag the “Woo – Ad 300×250″ widget to the side bar as shown.

Woo Ad 300x250 Sidebar Widget - Google Adsense

And that’s all! You now have a Google Adsense 300×250 ad in your Fresh News theme sidebar.

Fresh News version 1.x Instructions

These instructions are for the Fresh News version 1.x only.

Edit ads-300×250.php

WooThemes executes the PHP code in the ads-300×250.php file to paint the content of the 300×250 pixel block ad in the sidebar. The file is located in the

/public_html/wp-content/themes/freshnews/ads

directory on your website.

Make a backup copy of the ads-300×250.php
Edit ads-300×250.php
Replace the content of the
….

in both places of the file with your Adsense Unit Code.

Original Code Block

// Get block code //
$block_img = get_option(‘woo_block_image’);
$block_url = get_option(‘woo_block_url’);

?>

href=””>” alt=”" />

Google Adsense Code Block

The original and changed source files are here for comparison. I’ve renamed the files to a .txt extension to prevent WordPress from executing the files when clicking on the links.

Default theme file: ads-300×250-original.php

Google Adsense file: ads-300×250.php

Good luck with your website!

Take care,

Bob Jackson

Bookmark It!

Google Custom Search Integration with WooThemes Fresh News 2.0 – Part 1

Bob Jackson — Sat, 03 Jan 2009 17:33:01 +0000

Newly revised and updated for Fresh News 2.0!

I wanted to replace the WordPress search engine with the Google Custom Search Engine (CSE) for better results and to take advantage of Adsense for Search. While there are several CSE integration tutorials for WordPress and even a plugin, none specifically addressed Woo Themes. My efforts were further frustrated because the coding strategies outlined in the existing tutorials didn’t entirely work for me and the WordPress plugin failed to install with a PHP parse error.

My requirements for Google Custom Search are:

Search box must appear in the same position as the default search box to the top right in the theme header.
Due to the limited width of the FreshNews DIV element (block level container) in the header for the search box, the “Search” button needed to appear below the text input control instead of to the right.
The side bar must not be displayed on the Google Search Results page, because Google takes the full page width (600 pixels) and the sidebar will overlay the search results.

Google Custom Search Engine Demo

Go to www.handymanhowto.com to see the Google Custom Search integration with Fresh News 2.0. The following illustrates the Google Custom Search box (red arrow):

HandyManHowTo.com - Google Custom Search

and the Google Custom Search results page for the phrase “pvc pipe”:

HandyManHowTo.com - Google Custom Search Results Page

Google does an excellent job of indexing and searching your site.

How to integrate Google Custom Search to Fresh News 2.0

Go to http://www.google.com/coop/cse/ and register for an account. If you already have an Adsense account, login with those credentials.
Create a New Search Engine.
Under the “Look and Feel” tab, choose the first style with the watermark. Click on the following image for a larger view.

Google Custom Search Engine - Look and Feel

On the Code tab:

choose the iframe option;
specify a URL http://your_domain_name/search/
place advertising on the Right.

Google Custom Search Engine - Code

Copy the “Search box code” and “Search results code”. The code samples for my site are:

Search box code

        006667729864162168081:5u85mytsil8" />

    Custom Search

Note the key value highlighted above in red will be different for your web site.

Search result code

Click on the Make Money tab to link the Custom Search Engine (CSE) to your Adsense account. My CSE has already been linked with my Adsense account.

Google Custom Search - Make Money

This tutorial is continued in Part 2.

Hope this helps,

Bob Jackson

Bookmark It!