The Tidbits theme was something different and so fun to work on. The project came to Kory and I through our shared business, Coded Creative, and we knew right away that it would be a little different than what we were used to.
The big difference came with the goal our clients had for the site. Rather than one client, like we’re used to, it was two sisters (Cami and Marci) looking to build identical brand and blog designs while keeping themselves separated.
From the beginning, we knew that there would need to be a way for visitors to navigate easily between the two websites without losing track of which one they were on. We also knew that the website was going to be very content focused and, through the project, learned just how important it was for Cami and Marci to keep visitors navigating through their site. Part way through the project, we decided to add custom Project and Recipe Index pages, which you’ll hear more about shortly.
Let’s dive into some details!
Technology
Here’s a quick outline of the technology used in this project:
- CMS: WordPress
- Framework: Genesis
- Programming Languages, PHP, jQuery, HTML, CSS
- Integrations
Site-Wide Features
The main special features you’ll see are in the header of the two websites. Cami knew exactly what she wanted in the header and it was up to Kory to make it look gorgeous and me to bring it to life.
The first unique thing you’ll see are the two buttons under the main navigation menu with “you are here” pointing to one or the other, depending on which site you’re on. Kory and I have seen some other sites with this type of feature before, but for the most part they were all a little clunky and not all that nice to look at, so I love what Kory came up with here. To make the text and links super easy for Cami and Marci to update in the future, I created a custom section in the WordPress Customizer for them to make updates at anytime.
Next comes a 3-column section linking to a few important pages on each website. The ladies wanted an easy way to get visitors navigating to specific locations and Kory’s design turned out gorgeous, as always. You’ll also see on the mobile version, that only one image is shown to keep things simple and it’s actually different from the three you see in the desktop version. Just like the buttons, I created a custom section in the WordPress Customizer so Cami and Marci have the ability to change out the images, links, and text at anytime without worrying about digging into template files or widget areas.
Homepage
Let’s dive a little more into the homepage, which is also the main Blog page. Most of the things on here are pretty nice and straight-forward.
We created a custom header for Cami and Marci to include their social media links, a menu with a couple specific pages, and a search bar for easy navigation. The sidebar contains various sections to encourage readers to get to know them, opt-in to their email list, and follow them on social media. And the footer supports many of the same goals as the sidebar.
One special feature you’ll notice is the categories listed under the blog. It was important to Cami and Marci that their readers continue navigating around their site and never run out of places to go so they requested that their favorite categories be featured. To accomplish this, I added a custom widget area underneath the blog posts and used the Genesis Featured Post widget type to display the categories easily.
Archive
Again, keeping in mind how important it was for Cami and Marci to keep various blog posts easy to find, we decided to go with a tiled archive page, rather than having it look like the blog page. We also increased the number of posts from 6 (from the blog page) to 20 to keep visitors from running out of posts too quickly.
Recipe Index
The Recipe Index was a feature specific to Marci’s site. Cami has a separate Project Index, but since the Recipe Index required a bit more custom coding, we’ll focus on that.
When I first learned what Marci was looking for on this page, I’ll be honest, I was a little intimidated. But I put on my software development hat that has been gaining dust since quitting my corporate job and got to work.
The top started out nice and simple, I used a widget area to drop in a search bar, archives, and list of categories for easy navigation. From there, it got a little more interesting.
The first sections you see pull from the categories on the site. Any categories that are assigned as parent categories show up as headings, with their subcategories listed underneath. These automatically update as Marci adds new categories to her blog posts.
Underneath that you’ll see a “Recipes by Ingredient” section, which pulls from all of the tags on the website. We start out with buttons for each letter of the alphabet, which jump you down to tags starting with that letter.
Then, each letter is listed followed by all of the tags starting with that letter. If a letter doesn’t contain any tags, it isn’t listed. The “scroll to top” links will be super useful as Marci adds more and more tags, since this section automatically updates as well.
Final thoughts
For what started out as a simple blog design, this project ended up being a lot of fun to work on, with a great challenge in the Recipe Index page. I love that I got to dive into a little more PHP and get to put some of my real development skills to use. Be sure to take a look at Cami and Marci’s sites for yourself and show them some love while you’re there!
Looking for a developer for your client projects? Learn more about working with me by clicking the button below.
Or, if you’re not quite sure how this whole designer/developer collaboration thing works, unlock the ultimate checklist to go from hours of code to development-free design projects. Click the button below to get started!
10 Steps To Go From Hours Of Code To Development-Free Design
