How to Use Volatyl Hooks

Hooks are great! That is all.

Okay, not really. There’s more to it than that but you’ll agree once you get used to using them.

What are hooks?

Plain and simple, hooks are areas of your website that can be “hooked” into at will. If you are familiar with WordPress core, you probably already know about hooks like wp_head() and wp_footer().

Those are used to add things like scripts to the <head> of your site or just before the closing </body> tag.

Volatyl appreciates that nifty feature and adds quite a few hooks of its own. You can access these built-in hooks by going to Dashboard => Appearance => Volatyl Options => Hooks (tab).

See a full list of Volatyl Hooks here.

Using the above hooks, you can add content to your site easily and without hassle. These built-in fields accept regular text (duh) and HTML.

We’re not going to get fancy in these <textarea> fields, though. It can cause serious problems for less advanced users to allow anything other than the basics in the WordPress dashboard.

Don’t worry, though. There’s another way to add content to your hooks and there are no restrictions with this method!

Add Hooks with PHP

For the greatest amount of control and flexibility, adding to the hooks using PHP is definitely the best method.

Here’s how it’s done.

Do not edit your Volatyl functions.php file. Only edit the functions.php file in your child theme!

Paste this code into your (child theme’s) functions.php file:

// Add content to Headliner
function custom_headliner_content() { ?>
	<p>This is some coooool stuff!</p>
<?php }
add_action( 'vol_headliner', 'custom_headliner_content', '1' );

Save your functions.php file and refresh your site.

Boom!

You should see your content added to your Headliner. Notice that this content can exist along with content that was placed in the Headliner using the built-in hook feature.

Your custom PHP hook content will appear after the content placed in the Volatyl Options.

Let’s take a quick look at that code. All we are doing here is adding a function to a hook and within that function, we have our content.

The first line is simply a comment. A line that begins with // is ignored in PHP but visible to you as notes. Moving on…

function custom_headliner_content() { ?>

This is where we name our function. It is important to understand that function names cannot be repeated! Make this name unique. Use it once here and don’t ever use it again. Once the function name is created, we end this line with an opening bracket { and a closing PHP tag ?>.

The only reason we need the closing PHP tag is because we’re about to insert HTML into this hook. If were were only using PHP, we would not have to close the PHP. Moving on to the next line…

<p>This is some coooool stuff!</p>

This is where you place the code you’re adding to the hook.

Once your HTML is completed, you need to start the PHP again with <?php. That is the first thing in the next line of our code:

<?php }

Simple, right? Not only did we start the PHP again, we also closed the function with a closing bracket }.

Here’s a full look at the function itself:

function custom_headliner_content() { ?>
	<p>This is some coooool stuff!</p>
<?php }

Broken down line by line, it’s not very hard to understand. However, this function means nothing as it stands. It now has to be added to your Headliner hook so it will display on your site.

add_action( 'vol_headliner', 'custom_headliner_content', '1' );

The name of the function in the above line must match the name of the function exactly. PHP is case sensitive so there is absolutely no room to wiggle. Make sure they match… period.

This add_action accepts four different parameters but we will only use three of them.

Plain and simple, the first parameter, vol_headliner, says what hook we’re adding content to. Remember, you can reference Volatyl Hooks List to see the hook names.

The second parameter says what we’re adding to that hook… which is our function custom_headliner_content.

The third parameter is the priority of the function being added. Lower numbers are executed before higher numbers. Therefore, you could add five different functions to this hook and they will display from top to bottom (in the HTML flow) based on these priorities.

If you do not provide priorities (they are not required… only the first two parameters are), the functions will be executed in the order they appear in the PHP file form top to bottom.

With the full code placed properly in the functions.php file of your child theme, your site will display the content inside of the hook you specified, in this case the Headliner.

What can you do with hooks?

I’m glad you asked. And the answer is “everything.”

You can use hooks to create completely custom layouts that look nothing like a blog. How do you think Volatyl Themes’ homepage was built?

What you need to do is follow the Custom Layout tutorial and create your own content layout.

If you are using the full-width layout, try using the vol_before_content_area hook with the full-width HTML format to create your own design.

The possibilities are endless!

Return to docs