Advanced tutorial: Adding and using custom functions in Headway 3


This is a short tutorial for developers, designers and other advanced users.

Custom functions allow you to extend the functionality of WordPress and Headway.

Headway 2 provided a custom_functions.php that you could drop all your custom functions into.

Headway 3 has taken a different tack, placing the onus on developers to supply their own custom functions PHP file. However, you can’t just shove it in the Headway theme folder.

Developers will appreciate this change as working within the core of a theme framework is not a good practice anyway.

So, in Headway 3, the way to do it is either create a WP plugin with your custom functions or a WP child theme for Headway.

Each method is perfectly valid.

Ideally, the WP plugin method would be used for generic functions that you would use on any client site.

And the child theme method would be used functions you only want on some sites.

Functions in a Headway child theme

If your client site isn’t already developed on a Headway child theme, create one (see AJ’s tutorial, Child Theme 101 Webinar, which has somesample child teme files for download) and activate it.

The key to a child theme is telling WP what the paren theme is, which for Headway, means including Template: headway in the styles.css header.

In the functions.php file of the child theme, add your site specific functions. It’s that easy!

As an example, you may want to add a function that automatically puts a “Site designed by” link to your website.

The functions would look something like:

function designed_by() {
    echo '<p class="designed-by">
    Site design by:
    <a href="" target=_blank>three4one design</a>

With a little custom css added to the styles.css file.

Not all clients like an attribution link on their site, so that is why this wouldn’t be a generic function.

Functions in a WP plugin

As a developer, the plugin approach enables you to create a library of generic functions that you can easily add to every site you develop.

You can read up on the requirements of a WP plugin at the WordPress, Writing a Plugin page.

Most important is the header, which looks something like:

Plugin Name: My Generic WordPress Functions
Plugin URI: http://URI_Of_Page_Describing_Plugin_and_Updates
Description: A brief description of the Plugin.
Version: 1.0.0
Author: Name Of The Plugin Author
Author URI: http://URI_Of_The_Plugin_Author
License: A "Slug" license name e.g. GPL2

It’s then simply a matter of inserting each of your generic functions.

As an example, here is a function that obsfucates email addresses to page harvesters by using a WP shortcode method. (Found at this blog post: Protect you email address)

function protect_email_address( $atts , $content=null ) {
 // Usage:
 for ($i = 0; $i < strlen($content); $i++) {
  $encodedmail .= "&#" . ord($content[$i]) . ';';
  return '<a href="mailto:'.$encodedmail.'">'.$encodedmail.'</a>';
add_shortcode('mailto', 'protect_email_address');

As an alternative, there is similar solution but using JavaScript (original source is now defunct).

function rot_email( $atts , $content=null ) {
 // Usage:
 $rot_email = str_rot13(trim($content));
 return '<script type="text/javascript">
     document.write("<n uers=\"znvygb:'.$rot_email.'\">'.$rot_email.'</n>".replace(/[a-zA-Z]/g,function(c){return String.fromCharCode((c<="Z"?90:122)>=(c=c.charCodeAt(0)+13)?c:c-26);}));
 add_shortcode('mailto', 'rot_email');

Putting your generic functions in a plugin makes them very portable and easily maintained.

If you happen to be working on platforms besides Headway, you could set up one plugin for Headway functions and one for theme independent functions. Or you could put all your Headway ones into the child theme.

And for debugging, both methods allow you to easily deactivate the functions in one hit.

So, that’s it. Easy as!