The Lady Tiler
For this project I took my learnings from working on other modular WordPress websites in the past year (Gleneagles, Hoxton), and created a clean, modular WordPress theme with emphasis on accessibility, SEO and scalability.
I decided this would be a good project to practice my skills, so I went from the ground up as much as possible. I started with the barebones starter theme Underscores as a base to build on top of, and a simple boilerplate Webpack set up to get going. I undertook lots of research into other WordPress workflows before starting this project, and I found that I quite liked parts of how the Sage template is setup. So I borrowed some concepts from Sage and others that I came across and incorporated them into my own theme in my own way.
I utilised Advanced Custom Fields or “ACF” throughout to create a number of reusable modules for the site. ACF allows you to create very powerful modules that allow you as the developer to give great flexibility to the customer, and just make everyone’s life so much easier.
Above is an example of how a carousel module can be set up using ACF to have the options be selected by the user via the backend.
In addition to making reusable PHP modules via ACF. I wanted the CSS to be very flexible as well, so I made great use of mixins, variables and functions in my SCSS to achieve this. Above is an example of a global mixin I created to easily set the base styles for modules. Below is an iterate mixin that is useful for animating a known amount of child elements for example.