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.

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 […]

View all 5 code samples