WordPress Micro-site for an Expert Industry Conference
May 2018 - July 2018
- Create a small sub-site that matched the current design
- Encourage users to sign up for an expert conference
- Display data in an easily readable way, appealing to both desktop and mobile users
Infused is a company that provides training and resources for cannabis manufacturers/sellers. They had an upcoming conference, so my job was to build a high converting design that displayed prices, information about the conference, and general data tables. What’s different about this project is that it’s more of a “sub-site”. More-so, it was a website within a website. I’m used to working with full site redesigns/greenfield projects, so this was new!
Infused Conference Gallery
The process was different since I had a smaller amount of control over the initial styles. What I usually do is set up font scaling, a variable/color structure in SCSS, and initial markup. For this project, I did start the pages from scratch but had to work with existing styles. My first priority was setting up a small SCSS build. This lets me reuse styles across the 5 pages I built.
The balance here is using what exists in the theme already, and making my own reusable styles. It’s a WordPress site, so I started by building out the markup/PHP from scratch. After that, I plug in the ACF fields so the content is editable from the admin area. After that, I’ll knock out styles for each “component”, and finish the entire page. I generally do this part page-by-page, and make global helpers/styles as I see parts that are reused across pages.
Overall, it was pretty similar to making a regular site from scratch besides the fact that I worked with the existing environment. Working with existing code isn’t a foreign idea to me, but the isolated work was new.
WordPress & ACF
For every WordPress site, I use the ACF plugin for letting the users edit the content. This site was no different, even though it didn’t initially have it since the other parts of the site were built using a page builder. ACF worked well for drop-in functionality.
Styles & SCSS
I also ended up using a light gulp.js build since there wasn’t an existing SCSS structure already. For SCSS, I used a 20 line script to compile and auto-prefix the styles.
Want to check out some code demos?
Converting jQuery Blog Post Component To Vanilla JS
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 […]