How working with Granola inspired me to write my first ‘official’ plugin

When I started as a developer at Wholegrain early last year, I was thrilled to join a lovely bunch of people and get involved with some exciting new projects.

One of the (many) great things of being part of the team is that I get to work almost daily with Wholegrain’s development starting point for most client projects; the performant, secure, accessible, and efficient framework for WordPress projects that is Granola. If you’ve not heard of it, you should check out our blog post about it.

In this article, I’d like to share my experience as a developer working with Granola and how it led me to publish my first ‘official’ WordPress plugin, which fixes a frustration I’ve had with navigating around the WordPress admin area. I’ll show how surprisingly irritating it can be to simply start editing your homepage, what I did to fix it for our projects, and how you can harness this on your own site.

In my time so far on the Wholegrain team (has it been 9 months already?!), I’ve gotten to use Granola as the foundation for a few new projects and it’s been a joy to work with. Much like WordPress itself, Granola is an open-source project so I’ve also been able to add useful components to it and improve existing ones.

Granola is feature-rich without being bloated and provides a well thought out structure that naturally encourages modular development. It also has lots of functionality built in to take away the pain of building that one thing you’ve built a bunch of times already. This means we can focus on optimising instead of re-inventing the wheel every time we make a new site. 

For example, during our recent Gender, Justice and Security Hub project, we made great use of Granola’s built-in performance configuration and best-practices, as well as improving the Gutenberg content editing experience.

When working on both new and old projects, I frequently need to update the homepage in some way. Maybe I’m adding the latest custom Gutenberg block during a site build, or perhaps I’m simply updating existing content.

However, to get from the admin Dashboard to the homepage edit screen can be a bit of a slog. It can often be hard to find buried somewhere in the list of all the other pages on the site, especially as it’s usually one of the first pages published when setting up a site, so it’s surprising there’s not a built-in way to find this page easily.

If you’re a regular user of WordPress, you might have done what I used to do: once you’ve logged in, from the admin screen, you click the ‘Visit site’ button to get to the front-end, and then (once the homepage has loaded) you click the ‘Edit page’ button in the admin bar to bounce back to the edit screen in the back-end.

I’m sure many WordPress users do this without thinking too much about it: a site owner filling in their brand new homepage for the very first time; content managers adding the latest products or blog articles to a featured section on the homepage; marketing managers tweaking the homepage copy for this quarter’s campaign. The homepage is kind of a big deal.

I use it as a good place to add and preview custom Gutenberg blocks as I work on them. But to be honest, it’s kind of annoying to go through two separate page loads to access a pretty major part of any site. It’s hardly the end of the world but it is a bit of unnecessary extra friction when navigating around.

What did I do to fix this problem? Well, I’m glad you asked – I’ve added a simple piece of code to Granola which adds a shortcut link to edit your homepage. Now when you’re logged in you can click straight through to the homepage edit screen in one go.

So now you’re thinking; is this really an earth-shattering feature? And the answer is:

Of course!

Okay okay, it probably isn’t. However, does it make content entry and CMS navigation smoother and less frustrating? And the answer to that is a definite yes.

Since I’ve added this feature to Granola, it’s been included in a couple of new projects and, even though I haven’t used it every single day, I now miss it when I’m working on sites that don’t have it. It makes the experience of using the site much easier and more intuitive. And the best part is that now it will be part of any new sites we build at Wholegrain.

Sadly not all WordPress sites are built using Granola but, for those that aren’t, there’s still a solution for fixing this navigational nuisance. While adding this feature to Granola I also created a standalone plugin: WP Edit Homepage, which you can install from your site’s plugin page or download directly from the WordPress plugin directory. As long as you have a homepage set, it’ll add that edit screen shortcut link so you can skip right to updating your content.

A major strength of WordPress is the huge number of plugins that improve and extend what it can do. That strength is all thanks to the people in the community who have created these plugins so this was an opportunity to contribute back to the community in a small way while also improving the foundation for our future projects. If you have any thoughts or suggestions on how to improve the plugin (or would like to contribute) then you should check out the repository on GitHub.

Granola is constantly improving and you can check out some of the exciting projects we’ve already created with it in our portfolio. Or if you’re already excited by the possibilities, then get in contact to find out how we can use Granola to successfully deliver your next web project.