Top One Percent
Mar 2018 - Jun 2018
- Create an easily editable WordPress theme with ACF
- Create an effective landing page that entices users to sign up for content
For this project, I was contracted in to create a theme based off of a pre-created design. The requirements were to make it responsive across all resolutions, replicate the design accurately, and make sure it works smoothly across all browsers. We used Advanced Custom Fields(ACF) to allow the client to edit the content from the admin area. For the generic pages, we used a page-builder called Visual Composer.
The Landing Page
I had mobile and desktop designs to work from, so I went ahead and started the main component of this project, the home landing page. Like usual, I knocked out the page component by component, making sure it works on mobile and desktop resolutions before moving on. Once those are finished, it’s time to make sure it works across all browsers, including Internet Explorer 11.
Nav and Footer
For most projects, I do the nav and footer first and/or separately. Navs and footers for the most part are similar in design, but often require their own little tweaks. Once these parts are finished, the rest of the page designs come together easier.
The Other Components
Besides the blog pages, they also wanted a reusable hero section. This section was reused on current and future pages. With ACF, this part was pretty straightforward.
The starter WordPress theme was _s by Automattic. This gives you the bare-bones starter files to get up and running with custom theme creation. A must have for custom themes!
Advanced Custom Fields was used for the user-editable meta fields. Visual Composer page builder was used for generic website pages.
The project was pretty simple, so I only needed Gulp, SCSS compilation, and CSS auto-prefixing.
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 […]