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. Once the new design was mostly in place, they then again decided to re-freshen the site’s design. There were 3 main redesigns throughout the whole timeline.
This theme was never build from scratch by me, so the process of building it out was rather interesting.
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). Generally, a new designed page would come through Zeplin and I would work on implementing the design, and adding features in the backend if necessary.
A Zeplin screen would either be:
A new page – Which is a page that doesn’t currently exist on the site and is to be added.
An update to an existing page – An existing page that has a redesign and/or new features added to that specific 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 for over 2 years consistently which means bugs were bound to pop up. I was also responsible for fixing these. Generally, new bugs were added to a Trello board and I would fix them by a preferred deadline. Sometimes, I’d find bugs myself and add them to the same board. There was always something to work on or fix most weeks.
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, but I did use Advanced Custom Fields(ACF) as a main helper throughout the site. Most features were built with WordPress custom post types and PHP on the backend.
Deployments
Deployments were simple and handled with bash scripts, rsync and other Linux commands.
Want to check out some code demos?
Check out code samples written in JavaScript, React, Node, and more
Demo 1
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 […]
Demo 2
Discord Bot: Reddit API Ask Feature
The Purpose Some Discord bots have a feature where you can “chat” with the bot(i.e: Cleverbot integrations). I decided to take a spin on this concept and utilize the Reddit API to answer common questions. A user from the server asks a question using the b!ask command, then the bot gives a random answer from […]
Demo 3
React.js Modal Using The Hooks API
Modals are a classic piece of application functionality, made even easier with libraries like React. You could go with a library, but you can often make your own with less than 100 lines of code. Using the hooks API, you don’t even need a class based approach. This example is going full functional! Defining The […]