WordPress and Understrap

Posted on by webmaster

When we started Shboing in 2007, we selected Drupal as our content management system (CMS). Fast forward to 2020 and WordPress has a 60% CMS market share as compared to 5% share for Drupal.

Drupal’s strength lies in its custom content types with built-in views, its security system and its ability to customize processing through hooks. It is still used by many colleges/universities and businesses. However, it makes more sense for custom websites with high performance and security requirements.

For most small businesses and non-profits, the only other alternative is a DIY website from a company like Squarespace. I created a separate post to discuss Squarespace.

For this post, I want to present two topics: (1) the Understrap theme and (2) my new development environment.

Although free or premium themes work for many websites, I prefer a greater degree of customization for sites that I build. However, the time and energy required to create and maintain a theme from scratch is beyond my resources as a sole developer. Starter themes have the basic framework in place upon which to build custom websites.

The starter theme that I use is Understrap – a unique combination of Underscores + Bootstrap. On its own, Underscores is one of the most popular starter themes with its clean code, HTML5 templates, minimal CSS and more. It is brought to you by Automattic, the company that delivers WordPress.com, WooCommerce and many other products. They also dedicate 5% of their time in support of WordPress core.

By contrast, Bootstrap is more of a software toolkit with its grid system, SASS variables and mixins, components, classes and javascript. In particular, its strength is in making sites responsive to mobile and desktop devices.

Understrap was recently purchased by Howard Development & Consulting. They have promised to maintain it as an open-source project and have already issued an updated release of the theme. They have started the Understrap Academy to bring together developers in a learning environment.

I recently upgraded a couple of my Porsche Club websites (zone7.pca.org and mby.pca.org) to the latest version of Understrap which includes Bootstrap 5.

For this website, I was using one of Understrap’s Premium Child Themes known as Overstrap Portfolio. However, it seemed like a “one off” and not integrated with the standard child theme. In particular, it was not set up to compile SASS. For these reasons, I converted the Overstrap Portfolio into an Understrap child theme. I kept the “portfolio” custom post type and the use of Isotope for the portfolio preview; modified the layout templates; converted the css into sass; and eliminated anything else which was not needed.

For displaying the photographs, I am using Meow Gallery and Meow Lightbox Pro. The latter has the ability to display camera and location data.

Part of the motivation for finishing this website (I started it over a year ago) is that it gave me an opportunity to test my new development computer, a MacMini M1 (the new Apple chip) with 16GB of memory and 1TB SSD. It replaces a 15″ MacBook Pro circa 2014. The MacMini is fast and quiet (unlike the MBP) and I have not had any software compatibility issues as Apple transitions from an Intel processor to their own M1 chip. The new computer has worked flawlessly.

The big change is that I switched from Adobe Dreamweaver to Microsoft Visual Studio Code (VSC) as my code editor. On its own, VSC is pretty good with built-in features such as GIT and Terminal, but with a large library of extensions which provide additional capabilities, it is outstanding. These extensions make coding easier from simple tasks such as identifying bracket pairs or inserting closing brackets to more complicated code completion (ex. Intellisense) and GIT enhancements. Another helpful extension is “Project Manager” which makes it easy to switch from one project to another project within VSC.

One feature that I don’t use are the code reformatter extensions such as “Prettier“. The problem is that it will automatically reformat the Understrap code – making it difficult to identify real from format changes between release versions or between the main and child versions.

Other products used:

NAMO provides a method for accessing MAMP Pro localhosts from test mobile devices and computers. It does so by acting as a local DNS and resolving hosts names using the /etc/hosts file. In my implementation, I use a separate router to isolate the development local area network from the main home network.