A to Z Blinds Website Upgrade

From plain HTML and CSS to a modern Next.js website, this small business website has transformed significantly over the years. It was recently upgraded again to WordPress, so the owner could easily manage basic content edits and other aspects herself.

Background and Challenge of This Project

I worked with Tina and her father Norm before I went back to school in 2016. I served with them as a blinds installer and sales professional.

While in college, I offered to build them a simple single-page website with a few images, some text, a Google map, and their contact info.

In 2019, after I had started working at Audigy, I offered to build Tina a new website to match her updated COVID procedures (video calls, home visits, clean and safe service, etc.) and an updated visual branding, which improved her conversions significantly.

While the website was a delight to build in Next.js, it was impossible for the owner to manage and time consuming to keep up to date because of React and Node.js, which require regular software updates to ensure the site’s security and compatibility with the numerous open source dependencies.

Tina wanted more flexibility to add plugins for features like live chat and online reviews, and I wanted to be able to manage the hosting and software updates more easily. So, I decided to recommend an upgrade to the same website platform I use extensively at work, which is WordPress.

Custom Website Solution

A to Z Blinds has for a long time been dependent upon hard to beat prices and services, an excellent customer experience, and positive word of mouth. So, when I offered to update Tina’s website to WordPress, it was important to ensure that her brand continued to shine through.

Due to the amount of custom CSS built into her existing site, it was a challenge to convert that custom code over to a WordPress child theme, but it only took a few weeks of hard work in the evenings before the project was complete.

Using my Edge browser’s developer tools, the existing code base, and a simple child theme setup, I was intending to make the basic, site wide design elements unavailable to Tina, while still ensuring her ability to override those styles with the Gutenberg editor and theme settings as needed.

This is an ideal level of flexibility for small business owners, who are rarely capable of developing a well designed and functional website themselves, but with modern page builder interfaces, are now able to make small tweaks that make their website suitable for their ongoing needs without constant developer support.

The Gutenberg Dilemma

One solution I learned in this project was to include a couple of settings in the theme’s functions.php that enables Tina’s child theme style.css to be applied both within the Gutenberg editor and on the front end of the website.

Normally, if you want to adjust the styles of the Gutenberg blocks that make up the content in modern WordPress websites, you would have to create a block plugin that would provide settings that give the user more controls over the default blocks available in their site.

However, with several simple lines of code, you can now make adjustments to the appearance of content with basic CSS that applies to both views of the content, the editor and the public view.

Here’s an example:

function atoz_child_setup() {
	// Allows us to load theme styles in the editor, but it's not perfect
	add_theme_support( 'editor-styles' );
	// Shares the filename to load in the editor
	add_editor_style( 'style.css' );
        // Loads another stylesheet that will override block styles created in the editor
	function atoz_add_editor_assets() {
		$handle = 'atoz-block-editor-styles';
		$src = get_stylesheet_directory_uri() . '/atoz-block-editor-styles.css';
		$deps = array();
		$ver = '1.0';
		$media = 'all';
		wp_enqueue_style( $handle, $src, $deps, $ver, $media );
	}
	add_action( 'enqueue_block_editor_assets', 'atoz_add_editor_assets');
}
add_action( 'after_setup_theme', 'atoz_child_setup' );

This made it possible for me to ensure Tina’s old site and new site looked virtually the same, except for new changes in the content.

Also, it provides the flexibility for her to manage her own content in a way that’s intuitive for her using Gutenberg and a few basic plugins, while ensuring I had a reasonable task of converting my old code to a new platform.

If this project seems like something you could benefit from, feel free to let me know. Or, if you have any questions about how I converted this Next.js website to WordPress, I’d be glad to share some details.