Hook Content
Overview
Hooks, technically called WordPress Action Hooks, allow power users to insert their own custom executable code into WordPress. Think of Hooks as WordPress's 'APIs' (Application Programming Interface). To see what a Hook can do, we have created a demo area to illustrate the power and convenience of Hooks.
In the past, if a user wanted to add custom code via a Hook, they would have had to create a custom-functions.php file for the theme. With release of Themify Framework 1.7.3 this is no longer the case. Themify has given users the function to create and edit their own Hooks without the need to creating a custom-functions.php file.
The following tutorial will guide you through the process of adding custom code to a Hook in the Themify Framework. This tutorial uses the "Basic" theme as a reference, but the steps can be followed with any of our themes. Adding Hooks is only available in Themify Framework 1.7.3. If you are below this version, you will need to upgrade.
Background
Log in to your WordPress Admin area (WP-Admin) and go to the Themify Framework Panel. On the left hand side you will see the entry Hook Content, click it.
If the theme is new to you, you should familiarise yourself where within the theme the Hook locations are. To do this, click the See Hook Locations button.
The yellow areas depicted in the image above are the Hook function locations within the theme, areas where you can insert your custom code. Click the X to close the preview.
Adding a Hook
In this tutorial, we are going to add a Google Adsense ad in between the navigation menu bar and the main content window. To create a Hook, click the Add item button.
You will be presented with the Hook controls.
- Hook - drop-down menu of all the Hooks that are available in the theme
- Conditions - parameters and settings for the Hook
- Code window - where you insert your custom function code
- Delete - delete the Hook
To select a Hook, just click the drop-down menu (1) and select it in the menu. If you are unsure where the Hook is in the theme, click the 'See Hook Locations' button to find it.
Hook Conditions (2) are the parameters that you set upon the Hook. Conditions range from having the Hook appear on a certain Page or Post like the Homepage, Posts assigned with a specific category like News or just in the Portfolio section. To apply a condition on your Hook, click the +conditions button and check any box that is applicable and then click Save.
To insert your code, just type your code or paste it into the editor field.
Click Save All when done. Below is the final result.
Spacing and styling can added via the Custom CSS panel in the Themify Framework Panel (Styling > Custom CSS).
Sorting Hooks
Hooks can be arranged in any order you so desired. Click-on and drag the Hook via the 'Drag to Sort' button to place the Hook in the sort order you require. Click Save All when done.
Shortcodes
Themify Shortcodes can be used in Hooks for simplicity and speed. To see some in action, checkout our demo area to see what is possible.
If you require a slider on every Post and Page, just insert the ShortCode for a slider:
[post_slider image="yes" image_w="300" image_h="200" visible="3" scroll="1"]
To add your Twitter feed in the sidebar but make it appear in Posts only, create a new Hook, select the Hook (siderbar_start)and then add the ShortCode.
In the Hook conditions, select General and check the Single post views box. This means the Twitter Feed will only be shown on Posts.
Disabling Hook Content feature
To remove the Hook Content panel from Themify page, please follow these steps:
1. Create a custom-functions.php in the theme folder if it does not exist.
2. Paste this in:
<?php
remove_filter( 'themify_theme_config_setup', array( $GLOBALS['themify_hooks'], 'config_setup' ), 12 );