WordPress Development Project Launch: Olivia

I know I say this every time, but I had SO much fun working on this development project. Olivia is our newest WordPress theme at Coded Creative and I had such a blast collaborating with Kory on bringing the theme to life.

Based on feedback from our audience, we knew that this theme needed a full-width call-to-action and a landing page template. With all of the emphasis that gets put on list-building, those two things were super important for us to have. With those two requirements in mind, Kory went to work on the design and I excitedly awaited what she was going to present to me. And wow…just wow. How gorgeous is that demo site?

After seeing Kory’s Illustrator mockups, I knew this project was going to be amazing – and it was. We were on a bit of a time crunch because of the holidays so my development and launch time-frame was about two-weeks. But I dove in, got ahead, and even got to add some fun extra features that I’ll talk about later in this post!

Framework

All of the themes for Coded Creative are built on the Genesis Framework. We love how easy Genesis is for our customers to use and it gives us peace-of-mind knowing that each theme is built on a solid foundation.

Technology

Here’s a quick outline of the technology used in this project:

• CMS: WordPress
• Programming Languages: PHP, HTML, CSS

Since this project was a pre-made WordPress theme, we kept the plugins and integrations to a minimum. We did create a page template for customers to use with Beaver Builder (affiliate), but I didn’t use it in the development of the theme.

Site-Wide Features

This theme contains a few fun features that you’ll want to check out.

First is the full-width call-to-action in the header section. This appears on most pages as a way to draw attention to things like an email opt-in, product, or special event. What’s special about this is how easy it is for our customers to update. I’ve seen themes in the past that expect buyers to be experienced with using widget areas, which can require a little HTML and CSS. Instead, all options for the full-width header can be found and updated in the WordPress Customizer.

Next comes the footer. I absolutely love how this footer allows for our customers to support all the goals they have, whether it’s list growth, building trust, or growing their following on a social media platform. Each of the 3-column areas as well as the email opt-in are widget areas. The social media icons in the bottom-right are a plugin I coded and allow people to set their social media links right in the WordPress Customizer.

Homepage

The remaining three sections you see on the homepage are a mix between areas that can be customized in the WordPress Customizer and widget areas.

It was important to us that the top two sections were easy for our customers to format perfectly, so all the images, text, button links, and colors are controlled in the WordPress Customizer. However, even though ease-of-use is important, we also wanted the theme to be flexible, so the area containing recent posts is a widget area where users can include whatever they’d like.

Landing Page

The idea of this theme was to appeal to those who want to grow their list or sell products and services. That’s where the landing page template came in. For this template we removed everything that would distract from the content of the page including the menu, logo, header call-to-action, and footer. That way, people will be completely focused on the content of the page.

Genesis hooks made this super easy to do, so this template will likely be making its way into more of our themes, as well as the themes I create for clients.

Beaver Builder Template

I’ve recently fallen in love with how easy Beaver Builder (affiliate) makes it for my clients to have gorgeous pages that they can edit easily. So the Beaver Builder template was a last-minute thing I threw in to make this theme even better for our customers. They can use the free or paid version to create pages with full-width sections, column layouts, accordions, and a whole lot more. This is another layout I’m including in all of my new client projects.

Category Page

I love it when themes have a category page that’s a bit different than the regular blog page. Something about it makes it more fun. In this theme we went with a grid-style category page that removed any excerpts and extra information. The CSS on this page took a little work, specifically for mobile responsiveness, but I love the outcome.

Sidebar or No Sidebar

Something else I love about using the Genesis Framework is how easy it is to make multiple page templates available. All it took was a couple CSS tweaks to make the sidebar layout look just as nice as the full-width layout.

WooCommerce Compatibility

And last is WooCommerce compatibility. This was another feature I threw in at the last minute to appeal to a wider range of customers. Anyone can sell digital or physical products and I didn’t want our customers to have to pay us for custom work when I could get these templates looking pretty within a couple of hours. I went with a full-width layout for all the WooCommerce pages to keep buyers focused on what is being offered.

Final Thoughts

This development project was a fun one for me, as Kory and I have perfected our system in working together. I always have exactly what I need and can dive right in when my start date comes.

Looking for a developer for your client projects? Learn more about working with me by clicking the button below or grab a spot in my free course, Get Back To Design.