Rearranging content using hook order of importance

Throughout our different tasks, you may find that your content isn’t exactly appearing like you thought it would. Maybe you’ve added the code to the bottom of your functions file, copied and pasted exactly, and it’s not where you expected it to show up. Not to mention if you’re on the Genesis framework and you’re running an HTML5 enabled theme, you may have noticed that you have fewer hooks than other Genesis themes – so when someone tells you to use a hook it doesn’t even show up and eventually you find an equivalent hook but your content isn’t appearing where the example said it would!

But wait, what is a “hook” anyway?

Hooks are basically just locations throughout your layout that you can add your own content into using your child theme and not needing to edit the default framework files. You’ll notice that WordPress and different frameworks have their own, unique hooks.

The format when you’re using a hook usually looks something like this:

add_filter('HOOK_NAME', 'FUNCTION_NAME')

But if you want to add priority to where the hook is located, it will look more like:

add_filter('HOOK_NAME', 'FUNCTION_NAME', PRIORITY_NUMBER)

Hook priority

The order in which a hook is executed is determined by the priority it is given, or, if the hooks have the same priority, the order in which WordPress sees them. By default, 10 is the priority given.

So, if you want your content to appear before another piece of content, and they were both added by you in the same file, you can simply move the code such that it appears first.

However, you can also control where code appears by changing the priority, which becomes ever more important in Genesis HTML5 themes.

For instance, on my home page I have featured images which appear before the post title. By default, I use the following function to insert them, but I find that the images are appearing below the post title, not like I’d intended.

add_filter( 'genesis_entry_header', 'lgd_post_image_front' );

I’ve fixed this by assigning it to the same hook as the post title, but giving it a priority of 9, rather than the post title’s default 10.

add_action( 'genesis_entry_header', 'lgd_post_image_front', 9 );

So…

OK, so what does it all mean? It means that we can control where our page elements appear, rather than putting up with all their attitude. Am I getting a little dramatic? Maybe. But if you’re trying to add custom elements to your site and you can’t seem to get them to work, this answer is just too easy to be monotone about!

When the answer isn’t actually that easy

Sometimes you’ll change the hook priority to ‘1’ and find that just can’t seem to get your content above another piece. In this case, check that you’re using the correct hook!

Other times you’ll find there is no priority number that will let you insert your code between two elements. This can occur when you have a default element (such as your post content) and a plugin element (such as related content) and you want to put something between them (such as a signature). Yet, when you try different priorities you’re either completely before the post content or still all the way after the plugin. In these cases you can use remove_action() to remove a function and add_action() to put it right back, but assign it a new priority. More soon!

Still with me?

Sometimes it can be confusing to read these types of articles, especially when they’re vague so that they may be applied to multiple situations. If I’ve lost you, let me know so that others can benefit from your questions and I can more accurately explain this concept!