Embed Google Adsense into your Textpattern Website

admin-ajax

Textpattern CMS has a bunch of extra content included as part of the install procedure. All these things can be removed or edited, such is the nature of the software. If you’re just getting started with Textpattern, either as a blogger or you’re ramping up to a total overhaul from scratch, you can make your site more personal by modifying your sidebar to include a Google Adsense block which may make you some money.

As it stands, the default sidebar for a Hive-themed Textpattern site includes a search box (useful for everyone) and some links to Textpattern community sites (perhaps useful for you, less so for everyone else. Today, I’ll show you how to strip out those links and replace them with a Google Adsense box with targeted ads. If you make a lot of money from this route, just remember who told you – buy me a tasty beverage and we’ll be buddies for life.

The links will go, and be replaced by an ad. This involves changing a Page in your Textpattern administration area. With that in mind, make sure you have up-to-date backups before you start. Do this first. Seriously. This is a low-risk procedure, but regular backups are a good habit to form.

When you’ve got known-good backups, we’ll strip out the code that displays the links. Log into Textpattern and go to Presentation -> Pages. Choose the default page, then highlight -> copy -> paste all the text to your text editor of choice. Find the following code in the page – it’s near the bottom:

<h4>
<txp:text item="external_links" />
</h4>

<!-- links by default to form: 'plainlinks.link.txp' unless you specify a different form -->
<txp:linklist wraptag="ul" break="li" limit="10" />

That code displays an h4 headline in the sidebar, and then outputs a list of links. All good, of course, but it’s not what we’re looking for with our plans for monetary gain. Delete that chunk of code from your text editor, then highlight -> copy -> paste the slightly reduced text back into the default Page in Textpattern, and then Save. Take a look at your website, and you’ll notice that the sidebar links are gone. Here’s a before screenshot:

Google ChromeScreenSnapz001

…and after with the links zapped:

Google ChromeScreenSnapz002

Now, we create a Google Adsense unit. I made a decision to style my ads in line with the Hive theme so they complement the colour scheme instead of jarring with them. Log in to Adsense (http://google.com/adsense) and go to My Ads across the top. From there, choose Ad Styles from the left, and then choose New Ad Style from the right. If you want your ad to blend in with Hive, here are your colour settings:

Border: f7f7f7
Title/Links: 333333
Background: f7f7f7
Text: 333333
URL: 183082

I called my style name ‘textpattern hive’ so I know what it’s for – you can call it whatever you like. When you’ve added these numbers in, click Save Ad Style and you’ll be returned to the Adsense dashboard. Click on Content on the left, then New Ad Unit on the right. Here’s how I set up my ad unit:

  • Name: textpattern hive sidebar
  • Ad size: responsive
  • Ad type: text and display ads
  • Backup ads: show blank space
  • Ad style: textpattern hive

And then Save it to get your ad code. It’ll look something like this:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- textpattern hive sidebar -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-8211778359318049"
data-ad-slot="4644919391"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

I made one additional change: an inline style declaration to make the ad unit a bit more balanced – note the difference in line #4:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- textpattern hive sidebar -->
<ins class="adsbygoogle"
style="display:block;margin-bottom:1em;"
data-ad-client="ca-pub-8211778359318049"
data-ad-slot="4644919391"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Inline styles are considered a bit hacky in some circles, but it gets the job done. Once you have your code block, copy it into your text editor – the space left by your earlier removal of the external links code is perfect. Now, that section looks something like this:

<!-- feed links, default flavor is RSS, so we don't need to specify a flavor on the first feed_link -->
<p>
<txp:feed_link class="feed-rss" label="RSS" />
/
<txp:feed_link class="feed-atom" flavor="atom" label="Atom" />
</p>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- textpattern sidebar responsive -->
<ins class="adsbygoogle"
style="display:block;margin-bottom:1em;"
data-ad-client="ca-pub-8211778359318049"
data-ad-slot="4644919391"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div> <!-- /complementary -->

As before, highlight -> copy -> paste your revised page into Textpattern and Save to commit your changes. Refreshing the front end of your site should now show you an ad unit in the sidebar. Note there may be a short delay between setting up the ad unit and it actually rendering ad content, so give it a few minutes if you see no changes. In my case, I now have a text ad:

Google ChromeScreenSnapz004

…and a couple of refreshes later I have a picture ad:

Google ChromeScreenSnapz003

Done. Enjoy your ad earnings.

Looking for quality Textpattern Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , , , , , , | Posted under Textpattern | RSS 2.0

Author Spotlight

Pete Cooper

Pete Cooper

Pete Cooper has been using Textpattern since 2005. Textpattern is his preferred CMS weapon of choice. Its logical and flexible approach to content management makes Pete happy, as does its lightweight core and helpful user community. Pete's website - petecooper.org - runs on top of Textpattern and chronicles his day-to-day experiences from his home near the Atlantic in north Cornwall, United Kingdom.

Leave a Reply

Your email address will not be published. Required fields are marked *


8 − = 4

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>