Hookr provides two super useful features for WordPress developers. First, its website offers a fast, easy-to-browse index of hooks, classes, APIs, constants, etc., for the WordPress core as well a growing number of popular plugins and themes. Second, Hookr now offers a plugin for WordPress that allows you to see and drill down on the code being executed around many visual areas of your active site or administrative dashboard.
As the site says, "the objective of Hookr is simple — get designers and developers the information they actually need… quickly." And it does this well. In this tutorial, I'll walk you through both usage scenarios of Hookr and show you how the website and the plugin work to your advantage.
Most reference sites contain only subsets of hooks (if any), and unless the plugin/theme is premium, they usually contain little to no documentation regarding their API. I was tired of the ineffective “find in project” searches within my IDE. So, one day after questioning my productivity and lack of resources for what I needed to do, I started writing the initial parser/indexer as just a locally installed plugin.
Before you Google for more information, it's best to include "WordPress" when searching for information on Hookr or you can end up at a NSFW site pretty quickly:
WP Tavern also asked about the potentially off-putting name. Sanford thought of changing it but ultimately has decided not to: "The market is flooded, it’s a short, memorable and established brand."
While I'm not as sure of the name, the product is highly useful to WordPress developers.
Before we get started, if you'd like to share more of your experience to date with Hookr, please share your thoughts in the comments below. You can also reach me on Twitter @reifman directly.
The Hookr Website
The Hookr website is primarily a browsable index and coding reference to the WordPress core, popular plugins, and themes. New plugins and themes are added regularly based on requests from users. You choose which you want to explore from the home page. You can also download its plugin, which I'll explore further below.
When browsing, Hookr lets you choose from the five most recent versions of whatever you're exploring. So, if you haven't updated to the latest version of WordPress or Contact Form 7, you can still explore relevant reference information for your codebase.
The WordPress Core
Once you begin exploring the WordPress core, Hookr offers nine ways to filter your view.
You can either look at everything (All) or filter by any of the following options:
- New (recently added)
Hookr offers fast infinite scrolling so as you move through a page, the rolodex navigation at the top keeps up. Here's what Actions look like once you scroll down to P:
You can also use the search on the upper-right side, "filter the things", to find a specifically named element.
Here's an example of Functions:
When you click into the elements, they'll look slightly different based on their type. Here's the comment_text function description, parameters, and usage examples:
Hookr also shows where code or objects are defined with related callbacks:
You can begin to see how useful Hookr can be as you're debugging or coding.
Another nice feature is that default code blocks are available for every action, filter, function and constant for your own use. Hookr even includes a Copy button:
You can also browse the makeup of a growing list of popular, user-requested plugins from this list. Here's what the Contact Form 7 Constants for version 4.3.1 looks like:
Here's an example of the WooCommerce plugin class WC_Cart code definition, version 2.49:
Hookr fills the gap for the lack of documentation not provided with a lot of the more commonly used plugins.
Hookr also lets you browse themes from this list. Here are all the documented areas of the BizWay Responsive Theme, Version 1.0:
Now that you're familiar with the Hookr website offerings, you're probably asking for more. Let's move on to the Hookr WordPress Plugin.
The Hookr WordPress Plugin
The Hookr WordPress Plugin tracks all the WP hooks in use and their hooked functions, shows you and gives you browsable access to the code:
Are you tearing your hair out because that function isn't firing, even though you hooked it? Do you want to find the thing that overrides your changes? Want to know why that thing does what it does? Ever wondered what mysteries lies beyond the WordPress interface?
Hookr on Your Public WordPress Website
Here's what Hookr does on your public-facing WordPress website, or more probably, your local development site. As you browse, Hookr places visual indicators to highlight the WordPress framework's use of actions and filters:
They are browsable so you can drill into them for more information. I wish I'd had this for numerous independent web applications throughout my earlier career.
Below, I click on the bullets beside my 04 Social Media Category header and you can see how WordPress begins to work with my theme to put together the front page:
You can also click into any of the filters above:
The Hookr Plugin provides extensive detail about nearly everything. Here's the initial detail for the_post:
And a more detailed view:
The Hookr Plugin also includes a built-in search, providing super fast highlighting of just the coding references you wish to see at one time:
Hookr on the WordPress Dashboard
All the things you saw Hookr do above, it also does within your Dashboard. This can be helpful for developing the administrative features and settings of plugins and themes:
The Hookr plugin settings allow you to limit its activity to specific areas that you choose in various ways:
The same settings are available for the WordPress administrative dashboard. And you can disable either the public or dashboard Hookr activity at any time.
Hookr's Sanford says that he appreciates user requests and plans to continue to improve the product and release additional tools as feedback grows. Your theme not there? Send him a note!
Please share your thoughts with us about Hookr in the comments. You can also reach me directly on Twitter @reifman. And, be sure to browse my Envato Tuts+ instructor page to see some of my other tutorials.
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post