A New Year = A New HighTechDad Tech Stack and Look & Feel

A new year brings a new look and feel for HIghTechDad.com – this article is a deep dive into the HighTechDad Tech Stack and the thought process for the change.

New HighTechDad home with frameworks - HighTechDad tech stack

Written By

Michael Sheehan

Published On

January 11, 2025

Tech Stacks on HighTechDad

The way self-hosted WordPress works is that you essentially have a theme, page builder, or framework to control the look and feel of the site. You use WordPress as the Content Management System (CMS) for all of your pages or articles (posts). I went with the self-hosted option simply because I wanted to be in control of everything. However, that also meant that it was more complicated and potentially more expensive than using a hosted version of WordPress or another type of blogging platform.

I have purchased so many different themes that I have honestly lost track. Themes often come with various configuration options to help you define the look and feel of your site. Some of these themes are better than others. I had some that were incredibly resource-intensive, so much so that my site was often overloaded.

You can also extend functionality with plugins. There are many free and paid plugins available for WordPress. Because I am not a developer or coder, I opted for the plugin route because I wasn’t sure how to do something myself. However, I also learned that too many plugins can slow down your site. (Note: I still have a bit of a plugin addiction, but I have been slimming that down.)

I decided it might be helpful to clarify these critical components of a WordPress site. So, with some advanced prompting and coaching, I asked my always-available assistant (ChatGPT) to provide definitions of Themes, Frameworks, Plugins, and Page Builders.

WordPress Theme

A WordPress theme is a collection of files that control your website’s overall design and layout. Themes determine the look and feel of your site, including fonts, colors, and page structures. They can be tailored for specific types of sites, like blogs, e-commerce stores, or portfolios, and are often customizable to fit your needs.

Examples:

Astra – Lightweight and versatile for any type of website.
Divi – Highly customizable with a built-in visual builder.
OceanWP – A fast, multi-purpose theme perfect for beginners and pros alike.

Framework

A WordPress framework is a codebase that serves as a foundation for building themes. It provides developers with pre-written code libraries, making it easier to create or customize a theme without starting from scratch. Frameworks often focus on functionality and performance, leaving the visual design to child themes built on top of them.

Examples:

Genesis Framework – A popular, reliable framework for building secure and SEO-friendly websites.
Divi Builder Framework – Used by the Divi theme but available as a standalone tool for custom designs.
Bootstrap – Technically a front-end framework, but widely used with WordPress for responsive and modern designs.

Plugins

Plugins are add-ons that extend WordPress functionality. They let you add features to your website, such as contact forms, SEO tools, or e-commerce capabilities, without needing to write code. With over 60,000 plugins available, you can customize your site to meet almost any requirement.

Examples:

Yoast SEO – Essential for optimizing your site for search engines.
WooCommerce – The go-to plugin for creating an online store.
Contact Form 7 – A simple way to add customizable forms to your site.

Page Builders

Page builders are drag-and-drop tools that make it easy to design and customize your website without touching code. They allow users to create complex layouts, add interactive elements, and visually edit pages in real-time.

Examples:

Elementor – One of the most popular page builders with a free version and extensive customization options.
Beaver Builder – A user-friendly builder great for creating responsive designs.
Bricks Builder – A newer but powerful page builder known for speed and clean code.

I hope you learned something there. I know that initially, I had some confusion between the idea of a framework and a page builder. And there are some that seem to blur the lines.

The Past HighTechDad Tech Stack

I won’t bore you with previous themes, builders, plugins, or frameworks I have used over the past twenty years. There are a lot of them. And I learned a lot in the process. I will, however, talk about the latest stack that I’m coming from. Here are the primary elements that I have removed from my current site:

Elementor & Elementor Pro (plugins that are page builders) – Elementor is a powerful drag-and-drop page builder for WordPress that makes designing custom layouts simple, with no coding required. The Pro version unlocks advanced features like dynamic content, premium widgets, and theme-building capabilities.
Astra (theme) – Astra is a lightweight, fast, and customizable WordPress theme suitable for any type of website. It integrates seamlessly with popular page builders like Elementor and Beaver Builder, making it a favorite for beginners and pros alike.
Spectra (plugin) – Ultimate Addons for Gutenberg (plugin) – Spectra is a feature-packed plugin that enhances the native WordPress block editor (Gutenberg) with additional blocks, templates, and customization options. It’s designed to give users more creative freedom while staying lightweight and fast.
Ultimate Addons for Elementor (plugin) – Ultimate Addons for Elementor extends Elementor’s functionality with a suite of unique widgets, templates, and design tools. It’s perfect for users looking to add advanced features and more design flexibility to their Elementor-built websites.

Elementor and Elementor Pro are probably the most popular WordPress builders available currently. I chose to pay for the Pro version of Elementor because its intuitive drag-and-drop interface made building websites incredibly simple and efficient. The Pro features, like theme building, dynamic content, and WooCommerce integration, gave me the flexibility to design exactly what I wanted without needing to code. I also appreciated the extensive library of templates and widgets, which made it easy to get started and customize my site quickly.

While it was quite easy to use, at least initially, I noticed my site slowly becoming slower about 1.5 years ago, so I started researching whether Elementor was the best choice for my page builder solution. Here are some things that I found:

Performance Issues – Elementor is often criticized for negatively impacting website speed. This is primarily due to the additional JavaScript and CSS files it loads, increasing page size and slowing down load times. For performance-conscious users, optimizing an Elementor-built site often requires additional caching, minification, or other optimization plugins.
Code Bloat and Unnecessary Wrappers – From a developer’s perspective, Elementor is notorious for generating excessive HTML, including unnecessary tag wrappers and inline styles. For example, a simple button might end up wrapped in multiple <div> tags with redundant CSS classes. This can make the code harder to read, debug, and maintain, especially for those who want clean and efficient markup. Over time, this code bloat can affect not only performance but also SEO and accessibility compliance.
Learning Curve for Advanced Features – While Elementor is beginner-friendly, its advanced features, like theme building and dynamic content, can require significant time and effort to master. This can be frustrating for those looking for a straightforward design tool but needing to dive into documentation or tutorials for more complex use cases.
Limited Scalability for Custom Projects – Professional developers often find Elementor limiting for projects requiring high customization or scalability. While flexible for simple sites, its templated approach can make implementing custom functionality or unique designs more difficult. Developers sometimes feel constrained by the builder’s framework, especially when compared to coding directly.
Compatibility Issues – Elementor occasionally conflicts with other plugins, especially those that rely on similar front-end editing features. These conflicts can result in site crashes or broken functionality, requiring extra time for troubleshooting. Developers often need to perform thorough testing when integrating Elementor with custom plugins or third-party tools.
Accessibility Challenges – Although Elementor has made strides in improving accessibility, developers often need to manually adjust output to meet the Web Content Accessibility Guidelines (WCAG). Issues like missing alt tags, improperly nested elements, or non-semantic HTML can require extra effort to fix.
Pricing and Licensing Concerns – For designers and developers managing multiple client sites, Elementor Pro’s pricing model, particularly its lack of a lifetime license, can feel expensive. While the Pro features are robust, the subscription cost adds up, especially for freelancers or agencies working with limited budgets.
Over-reliance on Add-ons – Elementor’s core functionality is extensive, but many designers and developers feel compelled to rely on third-party add-ons for specific features. While these plugins expand Elementor’s capabilities, they also introduce more complexity, potential conflicts, and performance overhead.
Design Consistency Across Projects – Professional designers sometimes find it challenging to maintain consistent design systems across projects due to Elementor’s widget-based structure. Unlike coding or custom frameworks, the builder doesn’t offer a centralized way to manage global design rules effectively, requiring additional effort to standardize elements.

I decided to look into other options because, while Elementor was easy to use and packed with features, I started running into challenges that didn’t work for my website’s needs. The pages were loading slower than I wanted, and Elementor’s handling of the underlying code felt a bit messy, making things more complicated to manage. On top of that, the ongoing cost of Elementor Pro and occasional issues with other plugins made me realize it was time to find a solution that was faster, cleaner, and more flexible in the long run.

The New HighTechDad Tech Stack

Choosing my new WordPress tech stack took quite a bit of time, as I mentioned. I can’t remember how many hours I spent watching videos, reading brochureware sites, and digging into documentation. I was doing this a little over 2-3 years ago. During that time, the tools that interested me were rapidly being developed. Some were relatively new. But, because of this and their desire to quickly get market share, I was able to take advantage of several LTDs (Life Time Discounts), so I only had some one-time costs. Those were risky because there was no guarantee that the companies or people behind the products would be successful.

I signed up for a few LTDs that I eventually abandoned (e.g., Oxygen, Breakdance, and some others). However, I eventually dug deeper into some of the communities for the solutions I was most interested in and pursued them.

Below are the four core solutions I chose for my redesign and rework. I get some additional solutions for specific functions which I will go into later. But the core now is:

Bricks Builder

Modern WordPress site builder focused on speed and clean code.
Offers a visual design experience with a code-first approach for performance optimization.
Generates lightweight and optimized HTML, CSS, and JavaScript for faster load times.
Highly flexible, making it suitable for custom projects and advanced development needs.
Website – https://bricksbuilder.io

Automatic CSS (ACSS)

Utility-first CSS framework designed for consistent and efficient styling.
Includes predefined classes for spacing, typography, colors, and layouts.
Reduces the need for custom CSS, ensuring a clean and maintainable design system.
Integrates seamlessly with Bricks Builder for a smooth and cohesive workflow.
Website – https://automaticcss.com

Frames

Modular design system that works tightly with Bricks Builder and ACSS.
Developed by the creator of ACSS, ensuring seamless integration and compatibility.
Offers pre-built sections, templates, and components to speed up the design process.
Balances efficiency and customization, letting you tweak layouts while saving time.
Website – https://getframes.io

Advanced Themer

Enhances Bricks Builder with advanced features like dynamic colors, CSS variables, and class management.
Integrates AI-driven content generation for streamlined workflows.
Introduces builder tweaks and UI improvements for a more efficient user experience.
Perfect for developers seeking precise control over WordPress templates and design settings.
Website – https://advancedthemer.com

Honestly, this is an amazing tech stack to work with. But, it does come with a steep learning curve. The developers using these products have an excellent understanding of HTML, CSS, and Javascript, particularly CSS.

Over the past couple of years, I have spent time trying to teach myself some of the essentials of CSS and web design. I still consider myself quite a novice compared to the others in the communities supporting these products, but I am definitely much more knowledgeable and understand why people were leaving other page builders like Elementor.

If you have any questions about any of these solutions, please leave me a comment or contact me.

Final Thoughts…

Honestly, I don’t have any final thoughts simply because designing and launching a website is an ongoing project, especially if you are doing it yourself. You refine and fine-tune the look and feel and functionality, and you fix the bugs. Just yesterday, I figured out why my query loops on sections of my home page were making sections disappear when you clicked on the pagination links. I’m always trying to optimize for accessibility and page speed, which are both important SEO rankers.

So, I will continue to tweak, fix, and refine the HighTechDad tech stack. If you do encounter any things that are looking strange or behaving oddly, please contact me. And, of course, I’m going to try to publish more reviews and articles.

Thanks for reading through to the end. I hope you learned some things and got some recommendations on how to approach your WordPress new build or re-build.

HTD says: Designing, developing, and maintaining a WordPress site, particularly your own, is a very personal and subjective process. Embrace it and own it!

- Advertisements -

About HighTechDad

Michael Sheehan (“HighTechDad”) is an avid technologist, writer, journalist, content marketer, blogger, tech influencer, social media pundit, loving husband and father of 3 beautiful girls living in the San Francisco Bay Area. This site covers technology, consumer electronics, Parent Tech, SmartHomes, cloud computing, gadgets, software, hardware, parenting “hacks,” and other tips & tricks.

Learn more

Explore Categories
Explore Categories
- Advertisements -

A New Year = A New HighTechDad Tech Stack and Look & Feel

Table of Contents