The new website for the lovely Lexi D’Angelo has been a long time in the making and I’m so excited to share it with you! Lexi is definitely not one to keep her website designs inside the box, so my projects with her are always an adventure. (In a good way!)
Like the Biz Woo School project we did together, Lexi was both the client and the designer so credit for aaaall of the amazing ideas on this site goes to her!
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
- Plugins
Homepage
Just like everything Lexi designs, the homepage turned out gorgeous and totally unique to her. There isn’t a whole lot for special functionalities, but as you’ll see in a few sections, my CSS abilities were put to the test.
The most interesting piece was the “Want to learn a bit more about me” portion with sections overlayed on top of each other and a line of text aligned vertically, rather than horizontally.
Blog
Next up is the blog. Like the headline on this page states, this is not your average blog.
Lexi wasn’t into the idea of simply listing her blog posts. To her, that’s not a great way for people to navigate your site…just sorting through your latest posts. Instead, she made her categories and tags the focus of this page to make it easy for her readers to find posts on topics they were most interested in.
And as you’ll see in the next section, the category and tag pages are where things really got interesting.
Categories and Tags
Here is where some custom functionality came in and my PHP skills were put to the test.
You’ll see in the screenshot that this page has detailed opt-in sections in both the header and the footer. What made this interesting was that this information needed to be customizable for each category and each tag needed to pull in the information from the category.
At first, I wasn’t quite sure how I was going to make this happen. Especially in a way that was easy for Lexi to maintain. But once I got started, it ended up being super fun to figure out!
The unique opt-in information is stored for each category using the Advanced Custom Fields plugin. So when Lexi creates a new category, she can go into Posts > Categories, select her category, and add all of her custom information. Easy!
If a category doesn’t have any opt-in information listed, the header and footer aren’t displayed.
The tags were trickier yet. We needed the tags to pull the opt-in information from the categories. The problem with this is that tags can be used for multiple categories. To solve the problem, Lexi and I simply came to the agreement that the tag information would be pulled from the first category associated with it. So in the tag template file I found the first associated category with opt-in information and pulled that info to display on the tag’s archive page. Phew!
Blog posts
Next up was the blog posts!
Again, you’ll notice here that custom opt-in information is displayed in the header, sidebar, and footer. Since this information needed to be totally customizable for each post, I couldn’t use a widget area or any built-in features like that.
Once again, we turned to Advanced Custom fields, which allowed us to create spaces to enter this information within each blog post. If these fields for a blog post are left empty, the information is pulled from default settings I created for Lexi in the Customizer.
I also altered the blog post template file to pull the author’s detailed information to display in the sidebar.
Contact
The last page I’ll touch on is the Contact page. There isn’t a lot going on for special functionality, but the page is just too unique not to share.
We used Beaver Builder to allow Lexi to update the header section easily and Contact Form 7 to allow for all the special fields in the contact form.
Final Thoughts
Projects with design by Lexi always take a bit more time, effort, and creativity, but I absolutely love it. It’s always fun to step outside the box and put my skills to the test. My favorite part of this project was the problem solving required for the opt-in areas on the category and tag archive pages.
Looking for a developer for your client projects? Learn more about collaborating with me by clicking the button below!
Or, if you’re not quite sure about working with a developer, 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
