Large Custom WordPress Theme for a Cloud Based Product
May 2018 - May 2021
Goals
- Implement large changes through multiple design phases
- Maintain and improve deployment workflows
- Stay on top of continuous changes and fix bugs quickly
Project Overview
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
They have their own python web app. Some parts of it are integrated throughout the WordPress site
Most of the website's traffic comes to the blog. Content is king
Each dropdown has its own layout
Kloudless has over 100 API integrations and counting. Information about what is supported can be viewed on the WordPress site
Process
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.
Maintenance
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.
Technologies Used
Sage 9
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.
WordPress Workflow
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
Deployments were handled with bash scripts/rsync using an Ubuntu server.
Want to check out some code demos?
Check out code samples written in JavaScript, React, Node, and more
Demo 1
Converting jQuery Blog Post Component To Vanilla JS
I have a simple blog component that is written in jQuery. I would like to convert it to plain JavaScript as part of my effort to completely remove jQuery from my portfolio website. Here’s what the code does in order. init() on .header-info click, call the toggle method. Get the initial textbox height and store […]
Demo 2
Converting jQuery Navbar Code to Vanilla JavaScript
I am on a journey to completely replace jQuery on my portfolio site. The first step is updating the 10 or so JavaScript files that still rely on it. Why not start with one of the easier ones, the navbar? As you can see, the code is pretty straightforward. On init, add event listeners to […]
Demo 3
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 […]