I’m so excited to finally share this project with you. Tania and I worked together in August of last year, but the site launched just this week (we all know how crazy schedules can get)!
At the time of completing this project, I wasn’t yet marketing myself as a developer who works with designers, so I feel so lucky to have been able to team up with Tania. This project is what helped me realize exactly what I wanted to do moving forward. (Thanks, Tania!)
Tania was truly a joy to work with in every step of the project. From the time we jumped on our initial consult call, I knew it was going to be a fun project and it was! Throughout all phases of development, back in August, to some small changes we ended up making last month, I loved every minute of this project.
To give you a little background, Tania is a designer with an editorial fashion background who is currently working in architecture in New York City. With her blog, she’s out to prove that it’s never too late to find the best version of yourself and live a fulfilling life. She’s sharing her own mistakes and experiences as well as interviews and resources (she even interviewed me!).
Here’s a quick outline of the technology used in this project:
- CMS: WordPress
- Framework: Genesis
- Programming Languages: PHP, jQuery, HTML, CSS
This website contains several unique features that were a blast to work on.
First are the changing menus at the top of the page. When you first land on the website you’ll see the standard menu under the logo. Once you scroll past where that menu is visible, a completely different menu appears and floats with you down the screen. I’m not into plugins for features like this, so it was done using the primary and secondary menu, some PHP for the custom widgets in the scrolling menu, and jQuery for detecting when it was time to make the switch and showing/hiding the menus. I love the final result!
Next was the scroll-to-top arrow that floats with you down the page. I know this may seem super simple to some, but I like to point it out because, again, it’s not something we accomplished with a plugin. And using jQuery, like the menu, the arrow only shows up when you actually have somewhere to scroll up to.
The last of my favorite site-wide features that you’ll see is a hidden Instagram feed. Scrolling to the footer and clicking “Follow @Tania.WithLove” will reveal an Instagram feed. This was accomplished by keeping the feed in a widget area, hiding it by default, and using jQuery to show the area when the link is clicked.
Let’s dive into some of the page-specific features.
I’m in love with this gorgeous homepage that Tania designed (and the whole website, let’s be honest).
The slider at the top was created using Genesis Responsive Slider and doing some customizations to the PHP and CSS to get the hover effects to look just how Tania wanted. The default settings for this plugin only allow for you to show a few fields, so I added some custom PHP to display the date and categories just how she wanted. The social media links that appear when you hover are also completely custom.
The second section on the homepage is perfect for Tania to lead her readers to her most important pages. Hovering over her gorgeous images shows the title of the page with a link to see more. This hover effect was accomplished through CSS. I also made it super easy for Tania to change the images, text, and links in the future through the WordPress Customizer. Rather than digging into the code, all she has to do is go to Appearance > Customize and add her new settings.
And last is her adorable Subscribe area. This was my first time integrating with MailerLite, but I found that it wasn’t much different than anything I’d used before. It was definitely nice to finally get to experiment with it though!
You can see Tania’s gorgeous Blog by clicking With Love in her menu. I love that she didn’t go the totally traditional route with her blog and let herself get creative.
The slider at the top is the same one that was on the homepage, but the first fun feature can be seen in her post footer. Clicking the heart next to Sharing Is Caring will display a dropdown of possible ways to share each specific post. This was done through some custom PHP and HTML and a little jQuery to know when to show and hide the dropdown.
Next is the section between posts with an area to subscribe and a spot, similar to the homepage, that features her portfolio. I used the genesis_after_entry hook to break in between posts and add this featured section.
Here’s a look at the full Blog page: (hey look, it’s me!)
You’re probably sick of me saying it, but I looove this About page. So. Gorgeous. Okay, I’ll try to stop saying that now. …and probably fail.
When I saw Tania’s design for the About page, I knew that I needed to keep it simple for her to update, while still accomplishing the layout she wanted. To make sure she wouldn’t have to sort through HTML when updating her section titles or text, I used the Advanced Custom Fields plugin and made a custom page template just for this page. Now, all she has to do is type her text into a field with no worries of accidentally deleting or changing embedded HTML.
And last, comes the Portfolio. I can’t wait to see what gorgeous projects start to fill up this page. Tania’s work is so incredible and I’m so happy to be a part of letting her show it off.
The main Portfolio page uses the Essential Grid plugin to display her projects in a grid that can also be filtered by category. Clicking a category name, under the main menu, will filter out any projects that aren’t a part of that category.
Clicking on any of the portfolio images will bring you to a separate page for that specific piece. Here you’ll see a Soliloquy slider to show off Tania’s work and an area for her to include a description. This was again accomplished with Advanced Custom Fields so Tania didn’t have to worry about duplicating any HTML or getting things just right with a page builder.
On this page, you’ll also see the Sharing Is Caring dropdown that was on the Blog to make it nice and easy for fans to share her work.
And last, we have a custom related posts section to make it easy for people to click through to other portfolio pieces. This was definitely the trickiest part of this project for me, but those portions are always the parts that I’m most proud of when I’m done.
This custom development project has definitely been one of my favorites so far and one that I’m most proud of. I’m so glad that Tania’s creativity and gorgeous design style let me show off what I can do. That’s what collaboration is all about!
If you haven’t yet, be sure to check out Tania’s site and show her some love!
I wanted to have a customized website, but felt overwhelmed with trying to learn to code it myself. I tried using existing templates but was never quite satisfied with how they looked. I can not say enough good things about working with Krista. I don’t think I ever worked with anyone as organized. I really appreciate how she delivered on every deadline, and kept me in the loop.
– Tania Elyseau
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!