During the development phase of the new BuildThis website, there were many factors that were taken into account before we even started writing the code to build it. In today’s blog, we are going to go through every step of the development process and the reasoning behind some of these decisions such as the theme, the plugins used, to the javascript libraries we utilized, and lastly the development tools. At the end of the day, we were able to really strip down WordPress to its core by removing a lot of the page-builder-esque elements that many of our clients know and love. So let’s get down to the nitty gritty!
The Theme
When selecting a theme, we wanted to be able to hand pick every aspect that went into the theme and the best way to do this is to start off with a theme that is essentially ‘bare bones’ without anything pre-loaded. We ultimately decided to go with a theme called UnderStrap. Understrap essentially combines the Underscores start theme and the mobile-first responsive grid framework Bootstrap 4. By going with such a lightweight theme, we were able to fine-tune everything to the exact specifications of how our designers pictured it, without having to override default styles and rely on theme updates when we needed additional hooks or filters put in place. This theme gave us the essentials that we needed, without the extra baggage.
The Plugins
Since we knew exactly what we wanted to accomplish for each and every section of the website and because we had the development budget to custom code almost every function a plugin can do, we were able to reduce the number of plugins installed and activated on our website significantly, which increases website speed and overall performance. While we did use development plugins such as WP All Import and Better Search Replace during the development and deployment process, the number of active plugins that the website relies on for ongoing functionality remains at only 6!
- Advanced Custom Fields Pro: ACF allowed us to pull in editable fields into custom post types which would allow our marketing team to easily edit content without the need of additional dev help. This essentially gives non-devs the ability to select different images and icons and perform other complex edits without the need to know any code!
- Classic Editor: The classic editor allows our editors to use the basic post edits that they have grown accustomed to without needing to learn Guttenberg (for the time being!).
- Gravity Forms with Event Tracking: When it comes down to form management, Gravity Forms does a phenomenal job and is continuously supported. We decided that rather than rewrite an entire form management system, Gravity Forms does just what we need!
- Instagram Feed Gallery: This plugin displays amazing galleries that pull directly from instagram without having to get custom API tokens. And since instagram is constantly changing the way you can access their API, we decided that using a plugin with a dedicated team with upgrades was the most efficient way to go!
- Yoast SEO: The bread and butter of all SEO plugins, Yoast, helps us manage our SEO and allows our marketing team to very easily configure it to make sure we stay on top of the page rankings!
Custom Functionalities
When developing the new website, we wanted to be SEO friendly in every way possible. One of the ways we did so was to create custom post types, each with SEO-friendly URLs. By using custom taxonomies with our custom post types, we were able to create a nice URL hierarchy for our Help Center and our Case Studies custom post types. Another custom functionality we added was AJAX loading for anything that is below the fold. By doing this, we were able to have a quick page load for better google page ranking.
Development Tools
Lastly, we are going to share our development tools and how we were able to very effectively build our new website. The first thing we used was Vagrant and Virtualbox in order to set up a development wordpress server on our local machines. When combined with Github, it allowed for fast and rapid development with small commits for easy code review and backups. Next, we went with SASS as our CSS preprocessor and used GULP to automate most of our tasks for quick and easy front end development. For deployment we used WPEngine Git Push for automated deployment.
What we learned?
While working on an internal project we were able to spend more time learning and utilizing new development tools that we can now take and use with our new clients to be faster and more efficient. From better SEO practices, to faster page load speeds, to increased automation in our deployment and development practices, this all leads to better and more efficient websites! So what are you waiting for?