WordPress Micro-site for an Expert Industry Conference
May 2018 - July 2018
Goals
- 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
Project Overview
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
Here's a simple, reusable table used throughout the pages. It looks like a <table>, but I used a flexbox layout so I have control over how it looks on mobile(see next).
Here's the same table, but reordered for mobile. This works out well because the same code is reusable and doesn't require two different tables.
Process
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.
Technologies Used
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?
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 […]