Large Custom WordPress Theme for a Cloud Based Product
May 2018 - May 2021
- Implement large changes through multiple design phases
- Maintain and improve deployment workflows
- Stay on top of continuous changes and fix bugs quickly
Kloudless is a custom WordPress theme with hundreds of posts and multiple complex post types. The most notable features are the integration of the main API in the theme and the wealth of information that is shown in a user-friendly way. This project ended up being a multi-year project due to the multiple design phases.
Initially, they had their old design which I was simply adding features to. After a few months, they decided to completely freshen up their entire site with a new design. This included new pages, features, and bug fixes to existing pages. There were 3 main redesigns throughout the whole timeline.
Kloudless Custom WordPress Theme
Kloudless went through 3 major redesigns. The screenshots below showcase the most recent one
Kloudless has a lot of existing pages they wanted to keep, so the process revolves around adding new features and pages while redesigning the existing pages(without breaking them of course). A newly designed page came through a design/development software called Zeplin.
A Zeplin screen would either be a new page or a redesign to an existing page. Either way, the process was similar. Get a page, design and implement features, and fix existing or new bugs as necessary.
I was on the project consistently for over 2 years which means bugs were bound to pop up. New bugs were added to a Trello board. I was tasked with fixing them by a preferred deadline, though other tasks with priority would pop up often. Sometimes, I’d find bugs myself and add them to the same board. There was always something to work on or fix.
Kloudless was built with Sage 9, which is an advanced WordPress starter theme that comes with Laravel Blade templating, Webpack asset building, and SCSS. Sage 9 is my preferred WordPress starter theme.
Most features were custom built using Advanced Custom Fields(ACF). Most features were built with WordPress custom post types and PHP on the backend.
Deployments were handled with bash scripts/rsync using an Ubuntu server.
Want to check out some code demos?
Converting jQuery Blog Post Component To Vanilla JS
Defining Reusable Column Extends with SCSS
Quick Note: The atSmall type mixins are just basic media queries. Since these kinds of layouts are common, they also need to be overwritable if I want to change the spacing. Generally, the ‘default’ spacing is defined in the extend/mixins. Example Use Cases To get the layout working, you only need a container class and […]