20+ Page Custom WordPress Theme
Apr 2019 - June 2019
Goals
- Create a high-performing theme for a content-heavy website
- Accurately code out the provided mock-ups
- Allow for easy content editing for non-technical users
- Work effectively under tight deadlines
Project Overview
Driven Foundation needed a theme that was easily customizable, flexible, and responsive across all screen sizes. The solution here was to use ACF flexible fields to allow reordering of main page sections. This makes components easily reusable across all pages. These components could also be moved around at any time by a non-developer, essentially creating a page-builder like experience.
See All Media
Manually editing a slider with a new Instagram post would be a lot of work, right? Luckily, there was a nice composer package that allowed me to publicly query the Instagram API so they auto-populate in the slider.
A nice looking post grid layout, which is all editable by the non-technical client.
Process
General Flow
From the beginning, the site’s design and overall feature map was already well fleshed out. Normally I’d code items page-by-page, but this process was a bit different. The idea behind this project was to allow the client to reorder page sections from the admin area. This means they can drag-and-drop page sections from the admin, similar to a page builder.
Why Advanced Custom Fields(ACF)?
Why not just use a page builder? There are several good reasons. First of all, they tend to be pretty clunky and suffer from “feature bloat”. With ACF, I was able to create custom markup that accounted for the custom features that the design called for. For example, the API Instagram slider.
Adapting to New Requests
There has never been a time a client was 100% sure on what they wanted. Both during and after the main site was built out, there were new feature requests. These included new components, JavaScript changes to existing elements such as the image sliders, and style/UI changes.
Technologies Used
WordPress
The starter theme used for this project was Sage 9 from roots. It includes PHP 7+, composer, blade templates, and the sober WP controller for giving an MVC-like app structure.
Build Process
Sage comes with a Webpack build that includes ES6 compilation, code linting(eslint and stylelint), SCSS, and browsersync/hot reload.
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 […]