Hook where? (Navigation hook in GeneratePress)

Ivan Oung

Since hook functionality was opened up in WordPress, life is great for developers because we no longer have to temper the theme code to introduce something as small as a top bar for promotion. However, it was a pain in the a** trying to figure out where all the hooks are located (especially mobile). As such, here’s a quick guideline for navigation hooks, and with mobile as well.


Original without hooks
Desktop with hooks

Honorable mention

There’s an official GeneratePress hooks visual guide at the official site (without the mobile version). It’s not a huge deal, but I just thought it would be even more helpful to see the differences between how one behaves on a desktop and in mobile.
GeneratePress documentation – Hooks Visual Guide

Thoughts on hooks

Ultimately, the goal of any good business website is to generate leads/convert traffic into opportunities. To encourage the odd of conversion, it is proven by data that having a prominent CTA on the top right-hand corner is one of the best ways to achieve such results.
ivanoung.io website mobile header
Mobile header
ivanoung.io website desktop header
Desktop header
To place a prominent button at the end of the main menu, the two available configurations are:
  • inside_mobile_menu
  • after_primary_menu
GeneratePress Elements setting for header optimized for lead generation
Setting in GeneratePress
However, the way those two hooks behave is a bit different from what most of us would expect – showing up at the end of the mobile menu bar. So, make sure to take extra steps to cater to the mobile view when optimizing for lead conversion with a CTA button inside the main menu bar!

Navigation Menu


Stay In Touch!

I'll only send the good stuff, no spam, no bs, I promise!

More Readings

Everything you need to know about backup your WordPress site

In today’s digital age, where websites are vulnerable to hacking, server crashes, and accidental deletion, backing up your WordPress site is not an option – it’s a necessity. Losing your ... Read more

Changing the Color of a PNG Image Using only 1-line CSS in WordPress

Use only CSS to change the color of PNG by using Filter.

Best 16 CMS for Startups in Hong Kong

Still choosing a CMS? Here's a list of the best 16 CMS for your startup to grow in Hong Kong.

A WordPress Developer Who You Can Trust.

I always build my relationships with my clients based on trust. I want to see you grow as much as I myself. Let's work together to grow your business.

Get A Free Quote
Share to...