Skip to content

Tonik World

A WooCommerce ready custom theme

Client: Tonik

URL: https://tonikworld.com/

CSS Flexbox Custom Post Types Slider WooCommerce Responsive Web Design Grid System Foundation Custom Theme Custom Plugins

TL;DR

  • Developed while employed at Factor1 Studios
  • Designed by Rule29
  • Heavily customized WooCommerce pages
  • Flexbox grid via Foundation 6
  • Less than 2 second page load on GTMetrix
  • Fully dynamic content via Advanced Custom Fields

This was a fun site to develop as it offered a rare opportunity to dig deeper into WordPress core functionality and customizations. Due to the size of the site, I choose to use Foundation 6. Most sites I created while at Factor1 were for smaller business with a specialized audience, but this site is meant to reach a much larger audience so browser support needed to be expanded. Also, with the size of the site and number of components in place it made sense to use an established framework so that I could quickly get the site scaffolding in place.

Theming the site was straight forward, thanks to the component based nature of the site. The designer of this site demands pixel perfection, so extra rounds were taken to ensure that all components measured out as expected.

I saw immediately that working with images on this site was going to be a major pain point since there is extensive use of full width imagery, with the expectation of all of these images scaling properly. Not really an issue when viewing the site on a 27' iMac, but on a 13' Macbook Pro problems can quickly arise if you are not careful. Knowing when it was okay to just set a background-size: cover and when I needed to really pinpoint coordinates with background-postion was key here.

This site features a completely custom themed WooCommerce shop. There are two ways to go about this: use the default WooCommerce templates and add layers of CSS to override what is there (aka the wrong way to do it), or to create custom WooCommerce templates as needed and hook the shit out of them (the right way to go).

Up until this project my experience with the WordPress hook system was pretty much null, but after this site I can comfortably jump into any core WordPress functionality, plugin, or theme and safely and correctly make changes (I emphasize correctly here because if hooks are provided in a plugin or theme, they are meant to be used to customize functionality. I have seen far too many sites that try to forcefully imposes customizations, either because the developer is too lazy to do it properly or they just don't know any better).

The result is a completely custom, upgrade safe, 300+ long file with nothing but hooks. At first hooks were intimidating simply because I hadn't bothered to just jump in and learn them. But, now that I have, I can confidently make any customization to anything WordPress related.