It’s a common problem in web design, as a web designer with a broad knowledge of HTML and CSS standards, I can craft beautiful and complex sites, but at some point I have to hand that code over to a client. A client who doesn’t have the time or interest in bringing themselves up to speed on the latest web design techniques, and perhaps doesn’t know the difference between an href and a p tag. Why should they? That’s why they hired us, the web designers. It’s not their job. It’s ours. We shouldn’t expect them to have to learn our trade to be able to maintain their website.

At some point it becomes a problem. That beautiful website we handed over at launch will eventually need updated content; new pictures or text. Maybe some new additions to the staff have made that team member page look a little out of sync.

The solution is relatively straight forward. Firstly, we utilize WordPress as a CMS (Content Management System). This allows the client to maintain their site using a relatively simple UI that gives them access to all their pages and blog posts without having to dive into any of the files.

This only gets us so far, however. The visual editor in WordPress, while good at putting simple text based pages together with a few images here and there, isn’t really up to the task of crafting a truly complex website; the kind of website clients come to us to build. It requires that we write complex HTML markup in the text (not visual) view. While we go to great lengths to keep our code clean and succinct, to the uninitiated it can still look like gibberish.

The second part of our solution is Custom WordPress Shortcodes. They allow us to build complex functionality into easy to read blocks of repeatable code. We still write all our fancy HTML that we love so much, but we keep it hidden away from the clients view, only surfacing the controls we want them to see, keeping it clean, easy to understand, and deliberately semantic.

Here’s an example of some html that is necessary to create a simple button: Click Me

To those familiar with html, this is fairly simple. To those who have never seen html before, they have no idea what they’re looking at.

Utilizing WordPress shortcodes, we can create the same functionality but make it much easier to understand.

[html][button color=“blue” link=“https://zendenwebdesign.com/wordpress-web-design-company-san-francisco-los-angeles-la/” label=”Click Me”][/html]

I believe anyone faced with this code can intuitively understand how it works and how to change it to get it to do what they need it to. The best part is, the shortcode will remain valid in the visual editor. The HTML form of the same code will not.

Shortcodes allow us to create the complex html we need in order to craft engaging web experiences, and they do so in a way that let’s us have 100% control over how that code faces the client. We can build as much or as little functionality into it as we desire. In short, it helps us create website backends that truly feel like they were crafted for the specific needs of the project at hand.

For the technically minded among you, here are some resources:
Shortcode API
WordPress Shortcodes: A Complete Guide