Michael.blog

WordPress – the site builder

A bakery and a button

Yesterday, I was helping fix up a site for a local bakery to better optimize it for a COVID-19 world. The site isn’t particularly old. It isn’t outdated. It has an entirely reasonable amount of plugins. Even in those optimal circumstances, adding an eye-catching “Order online” link to the sidebar wasn’t something the site owner could do.

Let’s back up a bit. I’ve been busy the past few months wrapping my head around full site editing within the new WordPress editor. For those of you not familiar, WordPress shipped a new post and page editor last year that’s centered around blocks. It’s reminiscent of LEGO in that you are working with a variety of bricks that can be used to build your dragon or spaceship or dragon spaceship.

That new editor was just the beginning. We now have a framework to build upon and are looking beyond the content of a post/page. Now we are trying to work out how to give the user the power to modify any content on their site. When I say any content, I mean headers, sidebars, footers, and, well, just about anything else on a site. We’re calling this project full site editing and it’s now the main focus of my work.

Because of my heavy involvement, I’m aware of most of the design proposals and prototypes. I’m using the latest development version of the editor daily. I have a fairly clear vision of what the editor could be. It’s hard to convey without actually showing a prototype, but I can tell you now it’s going to be a powerful and fun way to build a site.

Now, let’s get back to the bakery website. 

The Challenge: Add a high visibility “Order online” button to the site’s sidebar.

The bakery site isn’t on bleeding edge development versions of the editor where blocks have made their way into sidebars. That limits us to using widgets. For the sake of time, we used the Text widget. The Text widget allows the user to add some text with only a handful of options exposed in the interface. With the widget, the only thing the site owner could do to make a link eye-catching was to make it bold or italic. It’s not ideal for making an eye-catching button. I ended up adding some hasty CSS to make the link into a somewhat fancy button. It looked something like this:

What if, instead of using a text widget with added code, I could use blocks? I could have simply added the Button block, tweaked some colors, and it would be done. Heck, I could have done nothing because the site owner could have done it. It might look something like this:

Much nicer, huh?

Creating the button was only the first challenge. After I made the link “fancy,” the site owner asked if we could add it to the header instead… Oof. I wasn’t particularly interested in hard-coding a link or writing hacky CSS to make a button look like it’s in the header. I’ve done it before (looking at you, WordCamp sites), but it’s not something I would ever expect a site owner to be able to do.

Right now

WordPress is one of the best tools to build a website with. It’s an elegant platform for creating page and post content. There are many beautiful themes out there. There are a range of plugins adding just about every tool or feature you could imagine. The WordPress community is top-notch and there is a wealth of resources to help build your site.

The site experience for the user is only as good as the theme has designed it to be. To be clear, this is not a  problem with themes or folks who make them. Themes are limited by what the WordPress platform is capable of and theme builders have made the very best of the situation.

Because of the limitations of the platform, it is difficult for a theme to be flexible. Site needs change over time. Eventually, the site will require functionality the theme designer or developer hadn’t planned for. The theme might have been ideal when the site was first built, but eventually they’ll need something more. The site owner has to then make a decision: Get developer help, pick a different theme, or do nothing. It’s far from ideal. Who wants to go through the process of finding a developer to add a button to a sidebar?

The future

What happens when we give users just as much agency as theme designers and developers? 

What if the site owner never had to call anyone to help with their bakery site? They just open their editor, click into the header, and add an “Order online” button. How cool is that?

I believe the future of the web depends on giving site owners agency over their site.

I want anyone to be able to change their site to do what they want. If you want Comic Sans headers, rad. If you go with Papyrus, still rad ( I’m definitely judging your design sensibilities at this point). It’s your site. Make it yours. Add some gifs to your header. Put a vertical video in your sidebar (you monster). Have some fun with it.

For all you folks with businesses, think about all those changes you’ve had to call someone for that could have been done with a block or some minor modification to a header or footer. You already have enough work to do. You’re running a business. Heck, this could even free up time to try out some A/B testing you hear about to get more folks clicking on your big bright CTA (Call to Action).

What about themes?

Themes aren’t going anywhere. I love themes! As I mentioned earlier, themes are limited by what the WordPress platform is capable of and theme builders have made the very best of the situation.

What would it look like if theme designers & developers had a platform that freed them from the current limitations? 

I believe we can get to a point with WordPress where it’s more efficient (and more fun) to build a theme for this new full site experience than building a theme today. As the WordPress platform evolves to provide more tools to theme developers, the more fun it will be to create powerful futuristic themes.

I know I’m daydreaming of a plugin that adds theme developer tools right into the editor. How cool would it be if an art student wanted to build some wildly unconventional theme and was able to do it without ever writing a line of code? Or if a theme shop could use these tools to rapidly iterate the design of a theme, export the code, and finish it up with some expertly-written CSS/JS to take the theme to a next level design?

And blocks?

I have high hopes for nifty blocks. I’ve already seen some amazing blocks from my colleagues and friends. I especially like some of the blocks Nick Hamze has built because he makes blocks that are just the right combination of quirky and useful. That hits home for me. I hope to see a huge range of blocks pushing the limits of what is possible on any site.

Comments

  1. Thanks Michael – that example of adding a button to the Sidebar and/or Header is such a good example of the kind of simple things that should be possible – and FSE will make much easier. I, for one, am looking forward to it

Speak your mind

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: