Web

Branded Humans Platform

Mikey Moraza | 05.11.2017

Site type: WordPress | Responsive | Platform | Modular

Technologies: HTML | SASS | JavaScript | Sublime Text 3

Explore site: http://brandedhumans.com/

Dev Team: Branded Humans

Team

Branded Humans is a company Christian Perez & myself created to give individuals & small businesses a platform to deliver their content and empower them to grow their online presence. We’ve worked together on countless projects & ideas over the past 10 years, some even while 1,000+ miles apart. We always knew we would make something great together and I believe Branded Humans is exactly that.

Problem

Throughout the years, friends, family, peers, classmates, etc. have often come to us in need of a website or with the desire to grow their brands but not knowing how. Because creating different sites that usually ended up with very similar functionality was not very efficient and quite time consuming, saying yes was not always an option. We needed to create something reusable without sacrificing distinguishability between the sites.

Solution

Initially, Christian took his preexisting WordPress theme and slightly tweaked it to support multiple instances as well as added a few simple customization options. We ran with for a while as we continued to make edits & small improvements but over time we realized we wanted more… a lot more.

I set out to create BH Platform 2.0 using a fresh copy of the latest WordPress and the Advanced Custom Fields plugin. As of now, we have options for the header, footer, branding, social media, and Google Analytics. We also have nine fully customizable modules which can be used on any page or post and added in any order. Each module contains fields for its title, text color, & background color, as well as additional options unique to that module. Beyond that, there are configurable global options used as defaults for certain modules to help standardize the look of a site and prevent the user from having to change a module’s styles every time it is used.

Challenges / Key features

One of the more involved elements to implement was the page banner. It not only displays a banner image and title, but also has support for multiple images via carousel and can alternatively render out a looping HTML5 <video> in the background. A user can specify an image alignment based on where they want the focus of the background to be. They can also select the position of their banner content, add a solid or transparent button, and even choose between a thin or full-height look.

The listing module is similar in its customization. A user can choose to render posts and/or pages in a full-width grid or a grid that fits to the content container. They can then select the desired amount of rows and columns, specify whether to show each item’s title on hover or indefinitely, and even change the opacity & tint color of the thumbnails.

As you can imagine, having so many different options created a constant struggle to make sure every single thing was accounted for. Elements can appear in multiple places, users’ tastes in style tend to vary, and it all has to look cohesive… These are things I had to keep in the back of my mind while planning out the modules and what features/options they would contain.

Takeaways

While I can easily say things difficult along the way and often required lots of thinking, it did help me get better at planning and create a better flow of work. I had to keep the code VERY clean and organized, otherwise I could easily lose track of things and ultimately hinder the progress. By no means is the Branded Humans Platform in its final state. There are still plenty of things we plan adding or evolving, including a more visual dashboard later down the line.

Web « PLASTICS Industry Association