In this article I’m going to show you how to add action hooks to a WordPress theme, to create an advanced Parent Theme.
The benefit of using parent and child themes is that when the parent theme gets updated, any changes you have made to the child theme will be preserved.
For an introduction to child themes, read the WordPress Codex entry on child themes.
The problem is that many people don’t use child themes the right way. If they want to add an element to their website’s header, they will copy the header.php template from the parent theme folder into the child theme folder, and add the new element directly into the child theme’s header.php
This method defeats the whole purpose of child themes, as now any updates to the parent theme’s header.php will not be carried through to the child theme.
So the best way to make changes to your child theme is through the functions.php file. By writing a simple function and applying it to the parent theme’s action hooks, you can easily customise a child theme without modifying any of its template files.
Adding a Facebook Like Button
Let’s go through a real example, where we will add a Facebook Like button to a child theme using a custom action hook.
Here’s a section of the parent theme’s header.php
1 2 3 4 5 6 7 | <body> <header> Header Content... </header> <section id="content" role="main"> <div class="page-content"> Page Content... |
Let’s say we want to add the Like button at the top of the .page-content area. We need to add an action hook here, then we will be able to write a function, and hook it into the template at this point.
1 2 3 4 5 6 7 8 | <body>
<header>
Header Content...
</header>
<section id="content" role="main">
<div class="page-content">
<?php dj_before_page_content(); ?>
Page Content... |
So I’ve added the hook dj_before_page_content (I’ve used my initials as a prefix. You may want to use something more meaningful, such as your theme name.)
Before we can use this hook, we need to ‘create’ it by adding the following code to the functions.php file of our parent theme.
Now in our child theme’s functions.php, we can write a function for displaying the Like button:
1 2 3 4 | function dj_add_fb_like() { ?>
<fb:like href="" send="true" layout="button_count" width="160" show_faces="false" font="lucida grande"></fb:like>
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=153173954756442&xfbml=1"></script>
<?php } |
And all that remains is to hook this function into our parent theme’s newly created action hook. Add the following to the child theme’s functions.php
That’s it! The Facebook Like button will be displayed before your page content and any changes to header.php will be preserved in your child theme.
You can add as many action hooks as you like to a parent theme, to give child theme developers more opportunities to customise their themes in a non-destructive way.
The post Using Action Hooks to Make an Advanced Parent Theme appeared first on Web Design from Scratch.