If you’re using the Graphene theme for WordPress, you’ve probably realized how powerful it is, and how easy it is to customize. With the introduction of version 1.5, another even more powerful function was added: action hook widget areas.

First, let’s talk about what action hooks are. An action hook is simply a placeholder in the WordPress code or in your theme’s code. You can attach something to an action hook (generally via a child theme’s functions.php), and when WordPress gets to that part of the page, it executes whatever you’ve attached to that action hook when it gets to it.

Of course, that requires creating a child theme, which not everyone wants to do, and it also means learning how to write a bit of code in PHP (which isn’t all that difficult, but we’re all busy, right?)

Graphene’s action hook widget areas make it easy to use action hooks without learning any PHP or using a child theme. Here’s an example I recently implemented on my bookblog, where I review kids’ and YA books.

Contents

Important!

Even though I included a message later on in this post for people to go to AddThis.com and get their own code, rather than simply copy and paste mine, people have continued to do so. For that reason, I have redacted the source of the AddThis script in both the code samples and the images. Go to AddThis.com and get your own code! If you copy and paste the code in this tutorial, it will not work!

The Problem: Social Sharing Buttons Crowd my Posts

I like to use social sharing buttons, via Graphene’s Social Sharing buttons option. Unfortunately, because I also include a picture of the book’s cover, this makes the top of each post a bit crunched:

graphene_action_hook_widget_001

I could just use a smaller icon size, but the first paragraph still looks a bit crunched:

graphene_action_hook_widget_002

These looked great at the bottom of the post, though:

graphene_action_hook_widget_003

I also experimented with adding more buttons, so that the entire first paragraph starts on a new line:

graphene_action_hook_widget_004

That’s a little bit better, but it won’t necessarily look like this on all browsers, and I don’t want my content pushed below the level of the book cover. What to do, what to do?

There are two alternatives here:

  1. Use CSS to control the placement of these icons, which would require a lot of hit and miss.
  2. Use the social sharing buttons only at the bottom of the post, which would make me feel silly, since I was the one who requested this feature in the first place.

Fortunately, using an action hook widget gives us a third alternative.

Create an Action Hook Widget Area

My first step was to go the the “Advanced” pane of the Graphene Options area in my WordPress Dashboard. I clicked on `loop.php` and all the action hooks in that file appeared:

graphene_action_hook_widget_006a

I ticked the box marked `graphene_before_post_content` to create a widget area in that part of each post.

Note:

The first time you try this, your widget may not show up exactly where you want it. If you aren’t familiar with Graphene’s template files and how they display your content, you may not pick the right widget area the first time. No problem: just select another widget area and try again.

Adding a Widget

Next, I went to the Widgets pane of my Dashboard. A new widget area now appeared here:

graphene_action_hook_widget_007

I added a text widget by dragging it from the “Available Widgets” part of the Widgets pane. I opened it and pasted in my Social Sharing code. (As you can tell, I’m using the code I got from AddThis.com, which is far easier than trying to add a whole lot of buttons and widgets individually. It also allows your readers to customize which buttons actually appear there, so they can have access to the services they actually use, rather than the ones you imagine or hope they use. )

I saved the widget, and then navigated back to my post.

This is what I saw:

graphene_action_hook_widget_009

If you compare that to what I started out with, I’m sure you’ll agree that it looks a lot better.

Other Uses for These Widget Areas

These action hook widget areas act as standard widget areas, meaning you can drag just about any kind of widget over to them that you would like. This doesn’t mean that you would want to, however, since some of them might just look strange (unless you add additional styling). As an example, I could add a tag cloud widget to this same widget area:

graphene_action_hook_widget_012

That’s a weird place for a tag cloud (at least it is to me), but you could make that look a little less weird with some custom CSS. But this does go to prove that you can use these action hook widget areas for just about anything. (On second thought, that tag cloud might look good at the end of each post, renamed as “Popular Tags”.)

They really are excellent for adding code from a third-party, such as social sharing buttons or advertising code.

Bonus: A Little PHP Goes a Long Way

Unfortunately, I experienced an unexpected side effect from all this tinkering: these social sharing buttons also showed up on the front page:

graphene_action_hook_widget_010

I know some people wouldn’t mind these icons showing up on the front page, and even want them to be there. To me, the front page is valuable real estate, and I want to fill it with as much of my content as possible. Besides, sharing buttons are always linked to the page they originate from. So even though these buttons are showing up on the front page as part of a post excerpt, clicking on them will only create links back to the front page. (You can verify this by comparing the number of times this post had been shared in the above images. The screen caps from the original page show 2, and later 6, shares, but the screen capture from the front page show zero shares, because no one had shared the front page yet.) I also don’t want people recommending something they haven’t taken the time to read and think about, which seems to run counter to the thinking of our postmodern age.)

I knew I could use the Widget Logic plugin to keep that plugin from showing up on the front page, but in general, I don’t want to use a plugin to control just a single, fairly small item. (If I start using this technique a lot, however, I may just go ahead and use it.)

WordPress has a PHP function, `is_front_page`, that can be used in an IF…THEN loop to control whether things show up on the front page. The problem is that a standard text widget won’t parse PHP code.

My solution was to install the WP PHP Widget, which adds a new widget (called, appropriately enough, the “PHP Widget”) which you can drag to any widget area and then include “Text, HTML, Javascript, Flash and/or PHP code wordpress template tags as content or title in this widget”, according to its description in the WordPress plugin repository.

After installing and activating the plugin, I dragged a PHP Widget to my action hook widget area, and then modified my code to look like this:

<?php
if (is_front_page ()) {} else
{echo "
<!-- AddThis Button BEGIN -->
<div style="clear:both;"></div>
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_preferred_5"></a>
<a class="addthis_button_preferred_6"></a>
<a class="addthis_button_preferred_7"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="redacted"></script>
<!-- AddThis Button END -->"
;}
?>

Error!

Please do not copy and paste this code into your website. People have been copying and pasting this code, and then their sharing analytics show up when I log into addthis.com. If you want to do this, please go to addthis, sign up, and get your own code so you have access to your analytics data. Thank you.

I’m not a PHP expert, so there may be a more efficient way to write this code, but here’ s a basic explanation:

  • `<?php` — Opening PHP code, which you have to include so your browser knows to parse this code, rather than just display it as text.
  • `if (is_front_page ()) {}` — Code which says “if this is the front page, then don’t do anything.”
  • `else {echo “<!– AddThis Button BEGIN` (code snipped) — Code which says, “okay, if this isn’t the front page, then display this.”
  • `?>` — Closing PHP code, just to keep things neat and tidy.
  • I also had to escape all those quotation marks in my original code by including a backslash () before them. (You can read more about escaping in PHP here. It’s very basic to PHP, and if you ever intend to do even a little with PHP, you’ll definitely need to know this.)

It works! This is what the front page looks like now:

graphene_action_hook_widget_011Of course, you could also just go over to my bookblog and see for yourself.

BTW, David Klass’s Stuck on Earth is a very good novel, funny in all the right parts, exciting in all the right parts, and touching in all the right parts. I highly recommend it.

Bonus Part 2: Even Tighter Code

I did say there was probably a more efficient way to write this code. It turns out that there is.

Not long after I carried out these changes, I noticed that the sharing buttons also showed up on archive pages. The problem is how to rewrite that code without including a lot of `IF…THEN` statements. WordPress has a function, `is_single`, which can be used to display text or code only on single posts. My new, improved code looks like this:

<?php
if (is_single ())
{echo "
<!-- AddThis Button BEGIN -->
<div style="clear:both;"></div>
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_preferred_5"></a>
<a class="addthis_button_preferred_6"></a>
<a class="addthis_button_preferred_7"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="redacted"></script>
<!-- AddThis Button END -->"
;}
?>

Note: use `is_singular` to make this appear on both posts and pages.

Questions? Problems? Accolades? Feel free to comment.