“Holistic Theme” – My Custom WordPress Theme for Clinics

I am responsible for the website of a local clinic, where I work part time. For about two years now, this has involved regularly maintaining a website which another agency designed. However, the recent acquisition of a new clinic premises has meant the need for a second, new, website.

Their existing website was so old that mobile wasn’t a concern on the designers minds. As such, an clumsy workaround meant that the experience on phones and tablets was far from ideal.

The Job

We saw this new acquisition as a great opportunity to kill two birds with one stone.

The clinic needed a new website, and the owners weren’t happy with the previous agency’s work. I volunteered to create a new custom theme, and the idea was to use this theme across both website.

The two clinics provide a very complementary healthcare service, and so I only found it fitting to call this theme “Holistic Theme”.

Holistic Theme

Because of the previous issues with mobile responsiveness, I designed the the new website from the ground up to work on mobile. This included a mobile first approach, as recommended by all modern guidelines.

After all, this would be the first website that I would design. As such, I didn’t want to pick up bad habits from the very beginning!

The theme would be easy to navigate on any device, and make it as easy as possible to get in touch or visit us. I therefore wanted to highlight the phone number (which was click-to-call on mobile) and our location, with prominent visibility besides our logo.

Our new website

The new clinic that was being acquired is called Alternatives Clinic. Check out the screenshot below, or visit it to get a feel for the responsiveness.

Reusing the template

Modifying the template to allow reuse took more work than I imagined (but to be fair, so do most things).

Some aspects, like the website title, were easy to change between sites. WordPress collects this information, which can be extracted easily with php.

Other aspects were much harder. For example, I wanted the same header design but different colours. The headers also needed to show different phone numbers, for the different lines.

After I found a solution (an excellent WordPress plugin called Pods) I managed to easily transfer the same theme for use on the old website.

Updating the old website

The website is Anana Clinic, and as you can see below, it used the same header design. Despite that, it had some important differences that would not have been possible without pods. For example, the colours, phone number and some font sizes were all different. In addition, this website does not have a logo so I found a way to only show the logo for the first website and not this one.