External Publication
Visit Post

Missing WordPress Hooks in Hugo

~/.bnux August 6, 2024
Source

As I’ve been setting up my site, I’ve added a few small features that aren’t included out-of-the-box with Hugo. For example, I’m self-hosting Plausible Analytics. In order to use Plausible on my site, I have to load a script. Coming from a WordPress background, this is something I would normally do with a WordPress Hook.

With WordPress, I can abstract out the logic to load scripts without needing to modify my theme or template files. If I want to insert a new script in my , I can edit or create a functionality plugin. Then I can use the function to properly enqueue the script and inject it into the with the hook.

On this hypothetical site, that could look something like this:

📂

With this approach, the script will load regardless of the theme I am using. I don’t need to worry about theme changes or updates inadvertantly removing it in the future.

However, if I want to add this same script to my Hugo site, it’s not quite as clean. I instead need to copy my theme’s partial into the root directory. Then I can edit the copied partial and call the script with something like this:

📂

This will do the trick to load the script. But now if I change my theme, I’ll need to manually copy these edits to the new theme. Or if the theme I am using has changes upstream, I need to be mindful of the files I copied and modified when pulling those theme updates to my site.

I’ve noticed that many Hugo themes include a way to hook in custom CSS. For example, the Paper theme that I am currently using includes the following:

📂 :

I can trust that will not get overwritten in future theme updates, thus preserving any additions or modifications I make to that file. Following similar logic, theme authors could implement something like this for scripts by using a Hugo partial. We can create a file in our project root’s directory. And then include it in :

📂

If a theme were to include something like this, then we can replicate similar basic functionality of the WordPress’ hook. Of course, this approach is still theme-dependent. But if this became a standardized best practice then we could come to rely on this as a way to inject custom functionality into our Hugo site’s , regardless of what theme a given site is currently using.

In moving from a full-fledged CMS to a static site generator, this type of tradeoff may just be par for the course[^1]. It’s also quite possible I’m unaware of a better way to do this with Hugo. Either way, it would be nice to be able to more easily include sitewide functionality out-of-the-box independent of the theme on the site[^2]. If that’s something you’d also like or if you are aware of a better way to do this, let me know :)

[^1]: To be expected; normal; common wiktionary.org/wiki/par\for\the_course

[^2]: I did find an old feature request for hooks but it was auto-closed due to lack of recent activity. I would be curious to learn if this sort of functionality would be beneficial to others. And if so, perhaps a new issue is warranted for further discussion.

Discussion in the ATmosphere

Loading comments...