Hooks

The Feast Hooks allows you to add content at key locations in a theme, similar to Reusable Blocks.

The difference between hooks and Reusable Blocks is that the hooks can be automatically inserted on different parts of the site, without manually adding it to the content.

While this can be used to automatically insert blocks before/after the content, we don't recommend it, because the content section should be unique and specific to each post.

Jump to:

Purpose

This is intended to make it possible to automatically insert content specific to certain posts, only on certain posts.

Making it live

Like the Feast Layouts, the Feast Hooks will not be visible on the site until you set the hook to Published.

This means that you can work on it as needed, and even remove it from displaying, by setting it to Draft.

Device visibility

Unless there's a very compelling reason, content should be displayed on all devices.

Remember that 80% of pageviews are mobile and all content should be designed primarily for mobile devices.

Include category

If specified, the hook will only run on posts within this category, and nowhere else. This is an optional setting and if left blank, will display everywhere.

  • if nothing is selected (default), all categories are included
  • if something is selected (blue highlight), only that category is included
  • use cntrl + click to select multiple categories
  • use cntrl + click to unselect a selected category

You may use either Include category or Exclude Category, but not at the same time.

Exclude category

If specified, the hook will run on all posts, except posts assigned to this category. This is an optional setting and if left blank, will display everywhere.

  • if nothing is selected (default), no categories are excluded
  • if something is selected (blue highlight), only that category is excluded
  • use cntrl + click to select multiple categories
  • use cntrl + click to unselect a selected category

You may use either Include category or Exclude Category, but not at the same time.

Include post

If specified, the hook will only run on these posts, and nowhere else. This is an optional setting and if left blank, will display everywhere.

You may use either Include post or Exclude post, but not at the same time.

Generally speaking, creating a hook for only specific posts is a waste of time and you should simply insert whatever you're trying to insert, into the body of the post itself.

Exclude post

If specified, the hook will run on all posts, except the posts specified. This is an optional setting and if left blank, will display everywhere.

You may use either Include post or Exclude post, but not at the same time.

Priority

The default priority on hooks is 10.

Setting a priority lower than 10 will display content above actions registered on 10.

Setting a priority higher than 10 will display content below actions registered on 10.

Common hooks

Below are the hooks used for the current setup:

  • After Header: Menu
  • Before Loop: Breadcrumbs
  • Loop: content
  • Entry header: Title, Post Info
  • Comments: Comments
  • After Content: Sidebar
  • Footer: Footer

Issues

There are several issues to be aware of that can negatively impact a site:

  • caching - content that only shows up on certain pages may be susceptible to incomplete caching
  • pagespeed - adding DOM nodes to already-bloated pages will negatively impact pagespeed
  • CLS - content added above the fold may cause significant CLS if not coded properly
  • headings - proper site heading structure should be followed, and awareness of context and accessibility guidelines are required
  • formatting - improperly closing HTML tags can lead to a broken webpage layout

This requires custom support from a knowledgeable developer to properly accommodate.

Support

We're unable to provide support for issues relating to the hooks as part of the Feast Plugin, because of how complex and time consuming this would be. The majority of sites should not have any need for this.

Hooks are a developer-level feature that require in-depth knowledge of WordPress, coding, and the framework. These are here primarily for the convenience of experienced developers who are already familiar with the WordPress hook system.

?show_hooks

You can append the ?show_hooks query to any page, to see available hook locations.

Frameworks

You can find references to specific framework hooks at:

WPML

In WPML, you need to enable translations on the custom post types for Feast Hooks.

Polylang

In Polylang, you'll also need to enable translations on the custom post types for Feast Hooks.

Title

The title of the hook is not used anywhere (only the content of the hook), so it should be named something that you find descriptive.

Author Bio

Our first general use case for this is the author bio, allowing you to display an author bio including an image, in place of the normal post info.

IMPORTANT! You must clear your cache after doing this.

See the tutorial video here, and written instructions below:

Instructions:

  • Hook Location: Entry Header
  • Priority: 13
  • Device Visibility: All

You can find our prebuilt block under Block Editor > [+] > Patterns > Feast Posts Patterns > Hook Author Bio

You can also enter a line-break anywhere in the shortcode area, to break up the flow of the text.

This is a Media+Text block with the Post Info Author (100px) block style, and there's a Post Info Author (50px) depending on your preference, designed specifically for this purpose:

We recommend uploading a new 100x100px headshot.

Finally, make sure you hide the original post info by using the Hide Post Info for Author Bio Hook setting (only works on Foodie Pro 5) in the Feast Plugin:

Lastly, make sure to clear your cache so that the styling gets refreshed.

Multiple authors

There currently isn't a way to enable displaying a hook (eg. the author bio) for different authors.

6 Comments

  1. So feast plugin users without foodie pro 5 cannot enable this… will there be an option in the future? I am on seasoned pro.

    1. You can add the following to your "Additional CSS":

      .post .entry-meta { display: none; }

      Make sure to clear your cache after this.

    1. Hey Natalie!

      This could be due to any number of reasons and we would need a support ticket to troubleshoot this - please send one in!

  2. It looks fine on mobile but when viewing on desktop the image is huge and not clear. How do I fix this?

    1. Hey Sky!

      What you're describing is a caching issue - please follow the instructions in the tutorial to clear the cache.

Comments are closed.