Base Themes: Why we Spent Years Improving our Site Framework

Are you ready for a fantastic analogy?

“Building a website is like building a house.” 

You can certainly go the easy route and purchase a pre-built theme (think of this as the “cookie-cutter” house that you see in developments), or you can go the opposite route and have a website/house that is 100% original and unique, built from the ground up. Our development stance is a little bit in the middle of these two philosophies.   

On one hand, we feel strongly against using pre-built themes/templates. Themes can pigeon-hole you into a very set look/feel, only allowing for very basic layout changes, a custom logo, and maybe font or color changes. Themes have gotten less “cookie-cutter” than they used to be, with larger ones now provide thousands of options to fully customize most parts of a website.  

The downsides of trying to cater to a large audience by casting a wide net, is “file bloat” and “settings overload.” By providing a huge library of fonts, layouts, elements, etc., these themes must include ALL that code available in the theme, no matter how little of the features the end user takes advantage of. 

On the other hand, we don’t feel that it’s efficient to build sites completely from scratch. This is not efficient from a time-perspective, as lots of code tends to be reused time and time again in each website. To stay in the middle of these two ways of development, we use a “base template” that we’ve iterated on and perfected over the years. 

Reusing Common Elements & Functions 

Among the hundreds of websites that we’ve built, we inject recurring functionality and design elements that 95% of websites use. Including these items in our core files caters to many designs and are easy enough to remove or move around for the few that don’t follow suit. This includes things like: 

• Sticky header / Mobile nav – for a desktop view, the header follows the user down the page, “stuck” to the top of the screen. This always allows for easy access to the navigation. For mobile devices, there is a hamburger button that opens a mobile-friendly navigation – all easily customizable to fit the design. 
• Social Media icons / sharing capability – social icons that link out to the company’s accounts, as well as being able to share a blog post on social platforms. 
• Form Styling – we use a form plugin called Gravity Forms, that allows for user-friendly backend form creation. We also have all the available form field types already styled. The form styling not only picks up on the core theme colors (more on that later), but also is written in a way that the styling can be easily tweaked if the design calls for a specific form look. 

Admin & Site Launch Checklist 

We’ve implemented a special “Admin Options” screen in our theme that allows only our team members (not the client) to change high-level settings that would normally have to be added and changed in the theme code. 

• Color Scheme Changes – Anyone on our team can change colors (primary/secondary/white/black/gray) – which not only update colors across the site, but also get changed in any Gutenberg Editor blocks. 
• Adding/Removing “occasional” Features – Certain functions that we don’t tend to use on each site we work on, are easily added via checkboxes. This includes things such as:
  • Turning Comments off and on (for blog posts) 
  • A MegaNav that allows for images and columns 
  • A “Back to Top” button 
• Site Launch – While developers are signed in, we have a warning system that brings attention to site issues that affect security and SEO. These things are fine for development, but once the site goes live, they should be updated. This includes things such as:
  • If Google Analytics tags are missing 
  • The default Wordpress tagline still is in place 
  • Debug mode is turned on 

Built-in SEO & Accessibility Features 

We’ve scoured the internet and picked our SEO expert’s brains on how best to incorporate SEO and Accessibility best practices into our core code. These are the two areas that we are constantly trying to stay on top of, as they are ever-changing. 

• “Skip to Content” link – This allows screen-readers to easily skip past the navigation/header area of the site and start at the main content. 
• Correct Header tag order – The order of header tags (H1, H2, etc) and not skipping any tags, are both important SEO techniques – both of which are part of our core code. 
• Dynamic Structured Data – Schema and DataLayer content is dynamically added. This data is generated from details that are entered on a global settings page, but also automatically created for blog posts and product pages as well. 

A Developer’s Saving Grace 

Having a team of developers brings an excellent mix of skills, coding languages, and talent. The downside is that each developer has a different way of coding and best practice knowledge. Our base template brings a level of code consistency and modern best practices that allows us to all work on the same website but have one cohesive product. 

• Consistent folder/file structure – this helps all current and future developers on our team dive into editing/fixing sites, while always knowing where things are. 
• Plugins & third-party scripts – these are already included in our base install, so developers already have the core scripts and plugins they are used to using. 

In the end, our base template code helps to create a consistent product that’s at today’s coding standards and cuts down on developers having to “recreating the wheel.” We are constantly updating and tweaking our core code to stay on top of the ever-changing development world. Want to learn more? Drop us a line.