Warning: substr() expects parameter 2 to be long, string given in /home/hwtool/public_html/wp-content/plugins/headway-leaf-excerptsplus-190b1/plugin.php on line 43

Warning: Cannot modify header information - headers already sent by (output started at /home/hwtool/public_html/wp-content/plugins/headway-leaf-excerptsplus-190b1/plugin.php:43) in /home/hwtool/public_html/wp-content/plugins/wp-greet-box/includes/wp-greet-box.class.php on line 496
How to Use Easy Hooks to Add an Author Box, Footer Links or Post Divider in Headway

Getting Started: Using Easy Hooks

What are Hooks?

Every great theme framework includes a number of “hooks” that are available to developers and advanced users for use in custom functions, and also for plugins developers to make use of. In fact, WordPress itself makes extensive use of hooks – that’s how an awesome framework like Headway is able to work!

But what is a hook? The easiest way to describe a hook is as a placeholder. In Headway, there are hooks, or placeholders, in the core code at strategic spots; after the post content, before the header, at the end of the navigation, etc.

These placeholders give developers (and really, anyone building a site with Headway) a way to insert code, or sometimes modify existing code, without changing the core files in Headway (changing core files is generally a big no no unless you know what you are doing and are willing to deal with the problems you may inadvertantly cause).

For example, using the after post content hook, you might insert some Google Adsense code. Then you could automatically have an ad after all of your posts. Or, you might add an “about the author” box. You could use the before header hook to put another banner ad, or to put social media icons. Add a little CSS styling to position them and you can integrate social media icons into your header area on your site.

What are “Easy Hooks” ?

Not everyone is comfortable with PHP or writing functions, though. So what is a newbie to WordPress and Headway to do if they want to do something like, say, add a cute little image to go in between each post as a post separator or divider? Easy hooks to the rescue!

Easy hooks are.. well exactly what they sound like. An easy way to use hooks. You can find the Easy Hooks under the Headway menu on the left sidebar of your WordPress Admin — just click right on the Easy Hooks link.

Easy hooks are good for adding HTML.  As the instructions on the Easy Hooks page says:

Headway Easy Hooks provides you a simple way to add content to your site that would otherwise be impossible (without hacking, of course). You can use HTML in the following boxes. If you need to use PHP, please refer to the documentation on how to use actual hooks.

What Easy Hooks are Available?

There are 27 Easy Hooks available as of Headway version 1.6.6.

  • Main Hooks:
    • Before Everything
    • After Everything
  • Header Hooks
    • Before Header Link
    • After Header Link
    • Before Tagline
  • Navigation
    • After Navigation (* inserts the content after the navigation, outside of the navigation container)
    • Navigation Beginning (FILTER) (* inserts the content within the navigation container)
    • Navigation End (FILTER) (* inserts the content within the navigation container)
  • Breadcrumbs
    • Breadcrumbs Beginning (FILTER)
    • Breadcrumbs End (FILTER)
  • Leafs
    • Leaf Top
    • Leaf Content Top
    • Leaf Content Bottom
    • Leaf Bottom
  • Posts
    • Above Post
    • Above Post Title
    • Below Post Title
    • Below Post Content
    • Below Post
  • Pages
    • Above Page
    • Below Page Title
    • Below Page
  • Sidebars
    • Sidebar Top
    • Sidebar Bottom
  • Footer
    • Footer Opening
    • Before Copyright
    • Footer Close

Example Usage: Adding a Post Divider

All you need to add a post divider is a little simple HTML and an image, assuming you want to use an image (you can specify a simple outline using the Design Editor). Theoretically, you could also use advanced HTML or CSS techniques to create a divider without the use of an image file.

The following assumptions are made: 1) You want this to appear under the content of every single post, and 2) You’ve uploaded the image file to your WordPress installation, or Photobucket, or where ever, and you’ve verified that you have the right URL for the image (by pasting it into the your web browser and testing that you see the image and nothing BUT the image – the URL should end in .jpg or .gif or .png – whatever the image format is.)

For our test, we’ll say the image URL is http://mydomain.com/wp-content/uploads/2010/06/myimage.jpg.

Go to the Easy Hooks menu, and choose the “Below Post” hook from the drop down. In the big white box, paste something like this:

<div id="my_post_divider">
<img src="http://mydomain.com/wp-content/uploads/2010/06/myimage.jpg" width="250px" height="40px" />
</div>

Then, just to make sure it’s centered, and make sure you have enough room around the image, add something like this to your custom.css file, or to the LiveCSS Editor:

body.custom div#my_post_divider {
margin: 10px auto;
text-align: center;
}

Your image should now appear underneath each post!

Example Usage: Adding Links to the Footer

Sometimes it’s nice to add a little interest to the site footer. If a curious visitor scrolls all the way to the bottom of the page, you might as well reward them with something interesting to read! Is your site a business? Give them a discount, provide a link to a Thank You page, or even just provide them with helpful links – contact, directions, policies – whatever!

Depending on where you want the links to appear in the footer, you can use any of the available Footer links. To add text to the top left of the footer, use the Footer Opening hook. For text on the top right, use the Footer Close hook. And, as you may expect, to put text before the copyright, use the Before Copyright hook.

In this example, let’s assume that I want to add a short list of particular pages on my website to the footer. I’d like to link to a Thank You page, a Contact page, and a Services page.

Use this code as a base, and modify for your own use. Note that these links are relative links, but you can use absolute links if you want to.

You might put something like this in the easy hook of your choice:

<div class="footerlinks">
<a href="/ThankYou">Hey, Thanks!</a> | <a href="/contact">Want to Chat?</a> | <a href="/services">Can We Help You?</a>
</div>

I gave these links their own DIV with a particular class because I know I might want to style it a particular way. For example, I may want these links to be a little bit bigger, bold, and in a white font, if my footer has a dark background. Oh, and I don’t want underlines on the links,except on hover.

body.custom div.footerlinks {
font-size: 1.2em;
color: #FFF;
font-weight: bold;
}
body.custom div.footerlinks a {
color: #FFF;
text-decoration: none;
}
body.custom div.footerlinks a:hover {
color: #CECECE;
text-decoration: underline;
}

Remember, the above code block (CSS) gets added to the custom.css file, or to the LiveCSS editor. (Learn how!)

Example Usage: Adding an About the Author Box

Especially on websites where there are multiple authors, it’s a real benefit for readers and for authors to have an “author box” above or below each post. Usually this has a short bio, a picture, and possibly a link to the archive of all posts by that author.  In this example, I create an author box with all of the above by inserting code into the Below Post easy hook, and I style it with CSS so that it will pop out at the reader. (See an example of this code on this site!)

Insert this code into the Below Post easy hook:

<div id="author-info">
<div id="author-image">
<a href="<?php the_author_meta('user_url'); ?>"><?php echo get_avatar( get_the_author_meta('user_email'), '80', '' ); ?></a>
</div>
<div id="author-bio">
<h4>Written by <?php the_author(); ?></h4>
<p><?php the_author_meta('description'); ?></p>
</div>
<div id="author-morelinks">
<p><?php the_author(); ?> has written <?php the_author_posts(); ?> articles. See all articles by <?php the_author_posts_link(); ?>, or visit <?php the_author(); ?>'s <a href="<?php the_author_meta('user_url'); ?>">website</a>.<p>>
</div>
</div>

Insert this code into the LiveCSS Editor or your custom.css file to create a gray box with (in modern browsers) rounded corners:

body.custom div#author-info { background: #c4c4c4; padding: 10px; margin: 0 0 15px 0; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; overflow: auto;}
body.custom div#author-info div#author-image {float: left; margin: 0 10px 5px 0; border: 5px solid #DCDCE1;}
body.custom div#author-morelinks, body.custom div#author-morelinks a {color: #000; font-weight: bold;}
Advanced Tip: I know I said you should use Easy Hooks for HTML, but there are definitely cases where you CAN use PHP in Easy hooks – for example, Paul Couglin’s tutorial on How to Create a Widgetized Footer with Headway does just that – puts an IF statement using PHP to add a widgetized footer. You can also usually safely use PHP shortcodes provided by plugins, or even WordPress template tags – like in the Author box example above.

Code from this post inspired by Line25.com’s post on Creating an Author Box, slightly adapted.

Caitlin, a.k.a MommyGeek or Rent a Geek Mom, is a member of the Headway Support team and wrote the official documentation for the Headway Theme. She works as a WordPress designer, "Tech Gal" and is the mother to two beautiful little girls.

Page not found

Error 404

We’re sorry to inform you but the page you’re looking for no longer exists. It was a good page. Maybe even a great page. It was probably eaten by a troll. It will be missed.