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!

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
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 […]

Demo 2
Discord Bot: Reddit API Ask Feature

The Purpose Some Discord bots have a feature where you can “chat” with the bot(i.e: Cleverbot integrations). I decided to take a spin on this concept and utilize the Reddit API to answer common questions. A user from the server asks a question using the b!ask command, then the bot gives a random answer from […]

Demo 3
React.js Modal Using The Hooks API

Modals are a classic piece of application functionality, made even easier with libraries like React. You could go with a library, but you can often make your own with less than 100 lines of code. Using the hooks API, you don’t even need a class based approach. This example is going full functional! Defining The […]

Need something? Let's get in touch