The GeneratePress Premium plugin is an economical way to add some really nice features to the GeneratePress theme. At just $39.95, you get a wealth of extras including customizer options to change every visible color, typography / font options, Woocommerce typography, color, and layout options, sections layouts, sticky menu, slideout menu, and menu logo options, individual page headers, blog layout options, and so much more. But one of the addons is on that may be less familiar to a lot of people. The Premium plugin also adds GeneratePress hooks for you to work with, and that opens up a lot of extra possibilities to you.
What are GeneratePress hooks?
Hooks are essentially designated areas of your theme. You can place custom content within any of these areas.
So, for example, as shown in the screenshot below, you could place custom content into the wp_head of your theme, or Before the Header. There are also 16 other designated areas including Before Header Content, After Header Content, After Header, Inside Content Container, Before Content, After Entry Title, After Content, Before Right Sidebar Content, After Right Sidebar Content, Before Left Sidebar Content, After Left Sidebar Content, Before Footer, After Footer Widgets, Before Footer Content, After Footer Content, and wp_footer.
A good way to visualize the location of each of the hooks is to keep the GeneratePress Visual Hooks Cheatsheet handy.
How Are GeneratePress Hooks Useful?
Knowing the definition of something doesn't always help in understanding how you might actually be able to use something in real life, so let's look at a simple example.
I recently designed a site for a client who wanted to show a different logo image to mobile users than to desktop and tablet users, and in addition, he wanted it to be in a certain spot between the header and the content.
Accomplishing this took a few minutes of thought to determine the best way to handle the problem, but only a few seconds to actually implement the solution.
Here's how I used hooks to handle this situation.
- I placed a few lines of HTML code in the Inside Content Container hook field, as you can see in the image below.
- I added a CSS class named .justmobile, using Customizer > Additional CSS, to center the logo and apply a background to it. I then hid it on desktop and tablet modes, using display: none via media queries.
That's a simple example of inserting some custom code into an area of the theme that you normally wouldn't be able to do without modifying the theme code (via a child theme, of course).
Some other examples of when you might want to use hooks include:
- Adding a disclaimer notice after the content of every post
- Adding a widget shortcode after the Post or Page title (perhaps to show an ad in that position)
- Inserting links to a special area of the site before the footer, using conditionals to display only on certain pages
Whenever you need to insert something in a place that is normally inaccessible to you, check to see if GeneratePress has a hook area that you can make use of. Your problem might be solved in a few moments of time.