Web engineering: The software behind Barb & Carole’s website

By Hélène Desaulniers

Published July 15, 2022

Last edited December 08, 2022

B
Barb & Carole's logo over screen capture of its website and interfaces the software running it.

Hello! My name is Hélène and I am the web developer behind Barb & Carole’s website. As a treat for the techiest of you, Carole, Barb and I decided it would be fun to write about how the site was made and lay out the choice of technology that make this real estate business run as smooth as butter!

 

Every business these days needs a website, or at least a web presence. In 2021, Top Design Firms found that 71% of small U.S. businesses had a website.

Not only do websites help people like you in finding the best services, but they also help business owners communicate with its audience and generate business. As I like to say, a website is like a 24/7 sales agent; always there whenever and wherever you need them.

So, since the question wasn’t whether or not Barb & Carole needed a website, I had to choose the technologies that best suited their needs.

A banner styled in Barb & Carole's brandiwing showing CMSs logos: SquareSpace, Shopify, Joomla, WordPress and Drupal.

The foundation: a Content Management System

When I was studying in CÉGEP, something my programming teachers would always say is to not reinvent the wheel; if an already-existing tool could fill my needs, then I should take full advantage of it.

Back in the day, creating websites where users other than the administrator could add and modify content required highly specialised skills and a lot of time. Today, we can easily create such websites by using a CMS.

CMSs, or Content Managements Systems, are essentially software on which you can build a website without writing a single line of code.

Now, that may sound cheap of me who is a web developer, but in the case of Barb and Carole, using a CMS was a no-brainer.

Adding listings and blog posts on their own was an essential feature that works out of the box with the right CMS. And even for me, the ability to build sites using an interface is much quicker than writing it in code. It’s a win all around.

Choosing the right CMS

There are actually many CMSs out there to choose from. Some are paid, like Squarespace and Shopify, and some are free and open-source, like Joomla, WordPress or Drupal.

In our case, we needed a CMS that would allow us to manage multiple kind of posts efficiently (like listings and testimonials), but that was also flexible so I could customize Barb and Carole’s site to their liking.

CMSs don’t typically come with the ability to create post types such as listings, so I had to choose a CMS that would allow me to extend the CMS’s capabilities to include them.

As it turns out, there is one CMS that is particularly good at handling this: WordPress.

A pretty banner of WordPress and its logo.

WordPress: Everything we needed and much more

Despite being completely free, WordPress powers a whopping 37% of all websites in the world, taking 62% of the CMS market share.

WordPress lays the base for web behemoths such as the Time Magazinethe United States’ White House and The Walt Disney Company, but also small sites such as our local Bronson Centre and The Great Canadian Poutinerie, making it a great choice for businesses of any size.

If you dig a little bit, you’ll also notice that a lot of news publishers and company blogs use WordPress. That’s because WordPress comes with blogging functionalities out of the box, and since Barb & Carole love blogging so much, WordPress became a must.

A screenshot of WordPress' plugin repository.

The structure: WordPress plugins

Though WordPress shines with its blogging, it also includes many neat features such as user management and page generation, but most importantly for us at Barb & Carole, it is incredibly flexible thanks to its plugins, which are pieces of software you can integrate to your WordPress site.

Being free and open-source and having excellent developer documentation, anyone well-versed enough in web development could extend WordPress’ functionalities by creating plugins.

Many developers who created plugins to solve their own problem over the last two decades shared them for everybody to enjoy for free on the WordPress plugin repository.

What differentiate WordPress from other CMSs is that WordPress has a much more developed plugin ecosystem with over 59,000 free plugins listed on its repository! Meaning that, as a developer, I didn’t have to “invent many wheels” to fit the more precise needs of Barb & Carole.

Not only that, but because of its popularity, WordPress also has excellent premium plugins that can push your site’s functionality much further than any free plugin would.

What WordPress can do natively

To better understand what plugins can extend, it’s good to understand a few things that WordPress can do by default, such as:

  • Create users who can administer or edit content on the site;
  • Create, publish and edit pages;
  • Organise navigation items;
  • Create, publish and edit blog posts;
  • Manage comments on blog posts;
  • Set up the site’s basic information, such as the date format to use, the default language of the site, and the name and logo of the site;
  • Install and update WordPress plugins;
  • Install and update WordPress themes (these determine the appearance of the site. Barb & Carole’s site actually uses a blank theme that I customized!).

The plugins on Barb & Carole’s site

Barb & Carole’s site had its capabilities vastly extended from its basic WordPress functionalities, mainly to accommodate the special post types: listings and testimonials. For this site I use a total of 25 active free and premium plugins, but here I’ll list the main 5.

A pretty banner of the Elementor logo and name.

Elementor and Elementor Pro

Elementor is a free visual page builder (also known as WYSIWYG), while Elementor Pro is the premium addon to Elementor which transform your WordPress installation into a fully-fledged site builder.

With Elementor Pro, you can easily create custom footers, headers and post pages; things that would otherwise require a lot of code to set up.

Additionally, Elementor provides an intuitive way for Barb and Carole to create blog posts as it is much more user-friendly than WordPress’ default page builder.

A pretty banner of Advanced Custom Fields's logo.

Advanced Custom Fields PRO

Advanced Custom Field, or as we call it in the WordPress community ACF, is a plugin that allows developers to easily set up custom post types, like listings and testimonials.

In WordPress’ back-office, ACF allows developers to create forms content editors can fill. The information entered in these forms can then be sent to the website’s database, which the developer can then use to lay that information on a page.

For example, Barb & Carole uses one of those form for their listings. In it, Barb or Carole can enter the new property name, number of floors, price, etc. Once the information is saved, my code then retrieves that new information out of the site’s database, then adds the new listing to the listings page and creates a page dedicated to that listing.

A pretty banner of the SEO Framework logo and name.

The SEO Framework

The SEO Framework is a free, lightweight and mostly automatic search engine optimisation plugin that allows us to set up the information search engines and social media sites will receive from Barb & Carole’s site.

While WordPress already has pretty good SEO by default, the SEO Framework pushes it a bit further.

With the SEO Framework, you can explicitly set up things like the description of a page in search engines, the page thumbnail that appear on social media posts and the text separator to appear in browsers tab names.

It also generates nifty tools like sitemaps which you can give to search engines bots to scan your site and index it.

A pretty banner of the LiteSpeed Cache logo and name.

LiteSpeed Cache

LiteSpeed Cache is a web optimisation plugin that makes Barb & Carole’s site faster.

This plugin is completely free and is specifically made for websites that use LiteSpeed as their web server software.

It handles things like website caching, database cleanup, image lazy-loading and code optimisation.

As WordPress sites can easily become slow during development, this plugin is a magic bullet that increases the quality of the site’s browsing experience for all users.

A pretty banner of the Optimole logo and name.

Image optimization service by Optimole

Image optimization service by Optimole is another great speed optimisation plugin, as images are often the bulkiest thing to load on a web page.

It uses AI and a Content Delivery Network (CDN) to automatically compress this site’s images and quickly deliver each image’s best version to you.

This plugin ensure we can include big, high-quality images on our site without the high loading times! which is particularly important to show every listing under its best light.

And best of all? This plugin is free and available on the WordPress plugin repository.

A pretty banner of the Honeypot for WP Comments logo and name.

BONUS: Honeypot for WP Comment

Including this one because it rather funny.

Because WordPress is so popular and because sites built upon it use a similar code structure, it is a common target for spam bots.

On most WordPress installations using blogs, site owners will be prompted to approve or discard new comments made by first-time commenters.

On small blogs like Barb & Carole’s, receiving a notification about a new comment is an exciting event! … only to realise a minute later that said comment was written by a spam bot trying to sell us Viagra.

Well Honeypot for WP Comments puts an end to this struggle once and for all!

This simple plugin adds what’s called a honeypot to our comment form. It is an invisible form field that bots will fill automatically. When submitting the form, the site will detect that the invisible field has been filled and will reject the spam comment.

This way, most spam bots can be kept at bay!

WordPress: the amazing tool that keeps this website going, and many more

That it be for news publishers, bands, restaurants, or your favourite local store, WordPress is a software that can push the limit of possibility in web for anyone who doesn’t possess specialised skills.

It makes web development accessible, and as someone who works a lot with small business, I think it’s a fantastic tool that enables local business owners, and help people just like you to keep neighborhoods alive and well.

Did you appreciate this blog post?

This article was my first ever attempt at a professional article and I cannot wait to hear your feedback! You never know. You might hear more from me in the future. =)

Comments

  • Joanne Stewart says...

    This was an excellent blog post - you described it so well that easily understood the complexities of building a website. Thank you for making it so interesting

    • Hélène Desaulniers says...

      So happy you appreciated it! I hope I get to write more in the future. And don't hesitate to ask me anything.

      Web development is much more fascinating to me as I thought it ever would be (I wanted to be a scientist as a kid but then realized I was poor at maths haha), and I hope I can make other people share that passion. =)

  • Carole Evans says...

    You never cease to amaze me Helene! Not only are you a brilliant web designer but a brilliant writer. Excellent and informative blog! Excellent!!

  • Hélène Desaulniers says...

    Hey there good people!

    If you have any question about this article or WordPress, feel free to drop a comment and I'll be happy to oblige.

    Hope to hear from you soon!

  • What are your Thoughts?

    Your email address will not be published.