{
  "$type": "site.standard.document",
  "description": "docs: compare WordPress hooks vs Hugo partials for custom logic",
  "path": "/posts/wordpress-hooks/",
  "publishedAt": "2024-08-06T00:00:00.000Z",
  "site": "https://read.ryancowl.es",
  "tags": [
    "Notes"
  ],
  "textContent": "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.\n\nWith 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 [](https://developer.wordpress.org/reference/functions/wpenqueuescript/) function to properly enqueue the script and inject it into the  with the [](https://developer.wordpress.org/reference/hooks/wpenqueuescripts/) hook.\n\nOn this hypothetical site, that could look something like this:\n\n📂 \n\nWith 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.\n\nHowever, 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:\n\n📂 \n\nThis 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.\n\nI’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:\n\n📂 :\n\nI 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 :\n\n📂 \n\nIf a theme were to include something like this, then we can replicate similar basic functionality of the WordPress’ [](https://developer.wordpress.org/reference/hooks/wpenqueuescripts/) 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.\n\nIn 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 :)\n\n[^1]: To be expected; normal; common wiktionary.org/wiki/par\\for\\the\\_course\n\n[^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.",
  "title": "Missing WordPress Hooks in Hugo"
}