The Observatory

Authored by: Daniel Dayton, Web Development Manager

 

WordPress (WP) has a reputation among many developer communities for being antiquated and cumbersome. However, this mindset overlooks the reasons why WP is the #1 CMS on the web and Carimus’s CMS of choice. To name a few: baked-in user roles, backward compatibility, tons of helpful plugins, extremely supportive community of WP developers.

Another huge advantage is that WP is modernizing and doing it quickly! Here at Carimus we embrace modernization and leveraging several awesome tools to speed development and improve our codebase organization. Here’s a quick rundown on some cool and helpful technologies we’ve incorporated.

Local Development

 

Local development in an agency setting is always challenging. The challenge of juggling dependency hurdles and system requirements: increases onboarding, can introduce production bugs and ultimately decrease overall team efficiency.

On the app and web app side, many teams turn to Docker to alleviate these headaches. Docker in essence creates a “container” (a virtual computer) where you can designate versions of all system requirements. Dev team members can then build the “container” locally to ensure developers are all using the same setup (Node, PHP, MySQL, etc). Your code then runs inside of this container to ensure uniformity across environments.

While there are several great open source examples of custom Dockerized WP setups, we have elected to embrace Local, a product initially developed by FlyWheel before their merger with WPEngine. The platform creates a dockerized WP install for projects and has several really nice features out of the box:

• Mailcatcher for testing email sending
• Ngrok tunnels for sharing local environments
• Push and Pull from WPEngine or Flywheel (Pro version allows for push and pull from staging)
• SSL for local environments
• Database admin

The tool has been extremely powerful and greatly increased our team efficiency.

Timber and Guttenberg Blocks

 

Timber is a plugin that allows for creating more modern WP themes using an MVC approach. It has greatly improved the organization of our codebase by separating our business logic from our templates. Timber uses Twig the templating language for the frontend views, which in essence means you can avoid “<?php?>”!! Twig templates are also great for creating reusable components to build your templates.

Gutenberg blocks are the heart of the modern WP editor. The blocks are reusable drag and drop sections that can be populated throughout the site to create page layouts. The blocks are built with React, making them extremely fast and dynamic for the editor experience. This also means that WP now ships with a ton of really powerful JS packages, but more on that later.

At Carimus, we have switched our development to the new editor. We build our custom blocks in two ways: with React, and with ACF and Timber. Here’s a how-to guide from the folks behind Timber. These blocks have had a huge impact on the reusability of our codebase. We have added over 20 blocks to our theme, which we can then use to create dynamic layouts for our clients that fit within the beautiful esthetic created by our Design Team.

Another huge advantage of WP Core modernization, as mentioned above, is that it ships with a web-pack config tailor-made for WP. We’ve been leveraging this to compile SCSS, ES6, and images. This has allowed our developers to move away from jQuery and fully utilize modern JS and SCSS.

The Future is Headless

 

Finally, one of the biggest pushes within the WP community is Headless WP. Essentially, WP is your data source and you can bring your own modern JS frontend. While this solution does not work for every project, it opens up a whole new world of possibilities. We are currently working on a new carimus.com which we are building with a headlessGraphQL API WP backend and a Next.js frontend. More on that next time!