Screenshot of the lady tiler homepage

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.

Screenshot of the gallery module from the lady tiler

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.

Screenshot of the settings in a module

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.

Example of some of the SCSS mixins created for the template

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.

screenshot of my SCSS iteration code