Sharing WordPress Content with Hugo

When your life is just WordPress, there’s not a lot of headaches involved in making some posts and updating widgets and keeping your whole site in sync.

When your life isn’t just WordPress, it gets a little weird.

When you want to use WordPress to run your life a little more, you un-weird it by making it weirder.

Rethinking Where the Content Lives

Normally we think about content living on its own site. Well, I have a ‘message’ that needs to be the same on five different domains. Just work with me here. The point is, if I want to update the header message on the five sites, I have to update five sites. Yuck.

Now, there are a lot of solutions to this. I decided I wanted one, and only one, place to update the header message. The most obvious is making a static text file that I could update when needed and import/include it in everywhere. But as I started looking into how I do that, my eyes drifted to WordPress.

What if I used JSON? What if instead of a file, I made a page on WordPress, grabbed the content from https://example.com/wp-json/wp/v2/pages/12345 and parsed that so I didn’t have to do a whole mess of editing anywhere but on WordPress?

Hugo

Guess what. That works. And it works extra well for Hugo (a static site generator I’m fond of) because Hugo understands dynamic content. The one drawback is that it can’t live refresh remote data, so I will always have to push a change to the site to trigger this rebuild.

However if you ever wondered how to include WordPress’ JSON data into a Hugo theme, here’s what I have in my template for utility-bar.html:

{{ $wordpressURL  := "https://example.com/wp-json/wp/v2/pages/12345" }}
{{ $wordpressJSON := getJSON $wordpressURL }}

<div class="utility-bar">
	<div class="wrap">
		<section id="text-16" class="widget widget_text">
			<div class="widget-wrap">
				<div class="textwidget">
					{{ $wordpressJSON.content.rendered | safeHTML}}
				</div>
			</div>
		</section>
	</div>
</div>

The reason safeHTML is there is that otherwise Hugo wants to escape my HTML. Which is a wise choice! Default to not trusting.

This outputs the post content and I have a happy (enough) day. The more I look at it, the more I realize how much I can do with WordPress and Hugo, since regenerating the site just takes a push of Hugo content.