Custom Hooks

How to use Custom Hooks Builder features of Sky Addons for WordPress

Sky Addons Theme Builder Custom Hooks feature lets you insert Elementor-designed content at any WordPress hook location. Place custom elements anywhere in your theme structure without editing template files or writing code.

The Custom Hooks feature gives you unprecedented access to insert custom content into any theme. Create custom elements with Elementor’s visual editor and inject them at specific hook locations throughout your WordPress site. This powerful feature works with all themes and enables you to add notification bars, promotional banners, CTAs, content blocks, or widgets exactly where you want them to appear.

Key Features

1. Insert Elementor-designed content at any WordPress hook location
2. Compatible with all WordPress themes without custom coding
3. Set custom hook priority to control display order
4. Apply advanced display conditions to target specific content
5. Create multiple hook templates for different areas of your site
6. Style content with full Elementor design controls
7. Manage all hook templates from one central dashboard

Once activated, you’ll have access to create and manage custom hook templates.

Create a Custom Hook Template

1. In your WordPress Dashboard, go to Sky Addons > Theme Builder
2. Click the “Add New” button to create a new template
3. Select “Custom Hooks” as the template type
4. You will be redirect to WordPress editor.

Custom Hook Settings

Configure the settings for your custom hook template:

1. Give your template a descriptive name (e.g., “Header Notification Bar” or “After Content Ad”)
2. Layout Type – Ensure “Custom Hooks” is selected from the dropdown
3. Status – Set to “Enabled” to activate your custom hook, or “Disabled” to temporarily turn it off
4. Hook Name – Enter the WordPress hook name where you want to insert your content
5. Hook Priority – Set a number (default: 10) to control when your content appears if multiple items use the same hook
6. Edit with Elementor – Click to open the Elementor editor and design your custom content

Display Conditions

Control exactly where your custom hook content appears with powerful targeting options:

1. Entire Site – Apply your custom hook across your complete website
2. All Pages – Show on every standard WordPress page
3. All Posts – Display on all blog posts
4. Special Pages – Target specific page types:
   • Front Page – Your site’s homepage
   • Blog Page – Your main blog listing
   • Archive Pages – Category, tag, author pages
   • 404 Pages – Custom “not found” page
5. Custom Pages – Select specific pages by searching and choosing them individually

Exclusion Rules

Define where your custom hook content should NOT appear:

1. Entire Site – Override other display conditions to hide the content completely
2. All Pages – Exclude all standard WordPress pages
3. All Posts – Exclude all blog posts
4. Special Pages – Exclude specific special page types
5. Custom Pages – Hide the content on specific individually selected pages

User Role Targeting

Control custom hook visibility based on user roles:

1. All Users – Display the custom hook content to everyone
2. Logged In – Show only to any logged-in WordPress user
3. Logged Out – Display only to visitors who aren’t logged in
4. Administrator/Editor/Author/Contributor/Subscriber – Target specific WordPress user roles

Then click Edit with Elementor – Click to open the Elementor editor and begin designing your Custom Hooks.

Design Your Custom Hook Content with Elementor

1. After creating your custom hook template and setting conditions, click “Edit with Elementor”
2. Design your custom hook content using any Elementor widgets and features:
   • Text & Headlines – Add formatted text and titles
   • Buttons – Create call-to-action buttons
   • Images & Icons – Add visual elements
   • Countdown Timers – Create urgency for promotions
   • Forms – Add contact forms, email sign-ups, etc.
   • Custom HTML/Shortcodes – Insert advanced functionality
3. Use Elementor’s responsive controls to ensure your content looks good on all devices

Common Hook Locations

Here are some frequently used WordPress hook locations you can target:

1. wp_head – Insert content in the site’s header (useful for notification bars)
2. wp_footer – Add content to the site’s footer (good for sticky CTAs)
3. wp_body_open – Place content immediately after the opening <body> tag
4. the_content – Insert content before or after post/page content
5. loop_start / loop_end – Add content before or after WordPress post loops
6. woocommerce_before_main_content – Insert content before WooCommerce products
7. woocommerce_after_single_product – Add content after product details

Theme Compatibility

Sky Addons Custom Hooks works with all WordPress themes:

1. Universal Compatibility – Works with any theme that uses standard WordPress hooks
2. Popular Theme Support – Special integration with Astra, GeneratePress, OceanWP, Genesis, etc.
3. WooCommerce Compatibility – Target all WooCommerce-specific hook locations
4. Plugin Hook Support – Works with hooks provided by other plugins

Save and Preview

1. Once you’ve designed your custom hook content, click “Publish” or “Update” in Elementor to save your changes
2. Visit your website to see your custom content in action at the specified hook location
3. Test different pages to ensure your display conditions work correctly
4. Check responsiveness by viewing your site on different devices

Troubleshooting

1. Content not appearing: Verify that you’ve entered the correct hook name and that your theme actually implements that hook. Check that your template status is “Enabled”.
2. Hook priority issues: If multiple elements are targeting the same hook, adjust the priority number (lower numbers run earlier, higher numbers run later).
3. Theme compatibility: Some themes might use non-standard hook names. Check your theme’s documentation for the exact hook names.
4. Display conditions: Make sure your conditions aren’t conflicting. If you have exclusion rules, they might be preventing display.
5. Hidden by CSS: Some themes might have CSS that affects elements added via hooks. You may need to adjust z-index or other styling properties.

Conclusion

The Sky Addons Theme Builder Custom Hooks feature provides unprecedented flexibility to customize your WordPress site without coding. Insert beautifully designed content exactly where you want it, regardless of what theme you’re using. From promotional banners to content additions, the Custom Hooks feature empowers you to enhance your site in ways that were previously only possible with custom development.

If you have any questions or encounter any challenges while using, please don’t hesitate to reach out to our dedicated support team at http://wowdevslive.bdkoder/support/ where our expert team is ready to provide prompt and helpful assistance.