Using the Right Tools Makes All the Difference

The Start of a New Website Project

Master Roofing Company  is a family-owned and operated Oakland roofing contractor with nearly 40 years experience of servicing residential and commercial clients in and around the San Francisco Bay Area. They had a Yelp page, but they didn’t have their own website.

The Process

After a phone call to clarify the scope of the project, budget and timeline we had the client send us a list of the 8 pages they wanted and the text that they wanted for each page, as well as some layout suggestions.

And the clock started ticking…

Where to build the site – our choice for most clients is Sitedistrict

Sitedistrict hosting logoOnce we had the initial content and a “sitemap” we chose to build the site at Sitedistrict. This the hosting company we usually start with because of their developer tools and the support they provide — including the best site migration and staging site creation I’ve ever seen.

In addition, we can start to build a site for a client for no charge on our account, then create an account for the client and transfer the site to the new client account without bothering the client. Only when the site is ready to go live and we’re ready to point a domain to the new site do we need to automatically send an email to the client inviting them to take ownership of the site and add a payment method for the account. Sitedistrict charges monthly ($25/mo for a single site) at the end of the month once the site is live.

This workflow lets us start to build a site

  • without engaging the client in a lot of administrative details setting up new accounts
  • the client doesn’t have to commit to a year or more of hosting costs before the site is even built
  • we don’t incur any hosting expenses while building the site.

Page Layout Using Beaver Builder Pagebuilder

I was unhappy with the previous tools I had been using for several years to build client WordPress websites. The tools were getting clunky, bloated, not WYSIWYG, and slow, both during the page creation and editing, and also when the pages loaded. Beaver Builder page builder plugin logoAfter 6-months of researching and trying alternatives I’ve chosen to use Beaver Builder, the best page layout plugin for building WordPress websites, and the Genesis theme framework from StudioPress as our main tools and framework for creating websites.

Studio Press Genesis logos

There are numerous reasons for this choice of theme, but it boils down to Genesis being a solid foundation for the website with great coding, support, and perhaps most important — significant market share. I’m risk adverse, after we turn over a website to the client, we don’t want to hear 6 months or a year later that after updates to WordPress core, the theme, and the multiple plugins to customize the website, that some update has broken the site because an incompatibility between the plugin and the theme. If a plugin has a conflict with Genesis, the plugin developer will notice and fix it almost immediately. If it is some other theme (other than the WordPress default themes), then maybe not so much.

While there are several modern page builder plugins available these days Beaver Builder seems to be the best-in-class. This is why I picked Beaver Builder.

  • It really is WYSIWYG page layout for building responsive web pages. It’s like when Aldus introduced Pagemaker document page layout program in 1985 and started the desktop publishing revolution.
  • Beaver Builder doesn’t leave messy shortcodes behind, or remove the content entirely when you disable it — all your content is always there.
  • There is a thriving 3rd party ecosystem building addons for Beaver Builder, no vendor lock-in.
  • There are active Beaver Builder developer communities on Slack and Facebook groups and many video tutorials on YouTube and Vimeo. The support is great.

Proof of the Pudding is in the Eating

By using Genesis and Beaver Builder, we were able to go — from request to the site launch — in under 3 weeks and for less than $600.

Now part of that economy was having a savvy client who knew exactly what he wanted and had the content ready to go. Since this is a simple “brochure” website we didn’t spend a lot of time on the graphic design. He knew what fonts and colors he wanted. The majority of the layout emerged from standard Beaver Builder tools and pre-built templates.

One key aspect of website design is meeting the requirements and desires of the client for a particular header, either specifically on the homepage, with other designs on the interior pages, or just a global header design. Header layout options have been one of the primary factors in choosing a theme – Not anymore!

Beaver Theme Builder Plugin – build page Headers to look the way You want

The Beaver Themer plugin is an additional plugin that lets us create theme elements like headers, footers, single post layouts, archive pages, 404 pages, etc. using the standard Beaver Builder page layout tools. These layouts can be saved and reused throughout the site as well as downloaded and applied to other sites. We’re no longer beholden to the theme developers’ design choices. With these tools we can make any page look the way the client wants from the top of the browser window to the bottom.

Turning Over the Site to the Client – Site Changes and Enhancements

The site has just launched at the end of March 2017. But it’s not done. Websites are never done. In this case, the client already knows he wants to add a bunch more photos of the roofing work, but he doesn’t have those yet. One of the advantages of a WYSISYG page layout tool is that it simplifies training the client to do most of the editing and adding additional content as the site evolves. As I’ve said, this happens to be a particularly savvy client who was comfortable editing the page content after we set up the pages with his original text. we were able to quickly coach him in how to make editing changes, as well as changes to the individual page layouts. When he gets stuck, he can call on us to help out, but we expect him to take the site forward from here.

You can see the current state of the homepage in the screenshot below, or you can visit the live site and see the rest of the pages as well as the interactive elements like the popup contact form on the homepage.


click on the image to see the larger size

Master Roofing Company homepage screenshot

(This post was viewed 182 times) in the last month.)

Pieter Hartsook

WordPress website coaching, design, implementation, support, and training. Background in Marketing Research and Communications. See my profile at:

Reader Interactions

Leave a Reply

Your email address will not be published. Required fields are marked *

Limit search for phrases by using " " around the phrase

Signup for Monthly Email Notification

Get notified of new posts from WordPress Website Coach. We only send these out once on the 1st of each month.

Something went wrong. Please check your entries and try again.

Recent Code Snippets

Simple History plugin banner

Shorten the length of the log file for Simple History plugin

Posted in , ,

The Simple History plugin default history period is 60 days. The log includes not only user initiated changes to the website, but all the automated updates to plugins, etc. This can make the log file pretty large.

(This post was viewed 50 times) in the last month.)

Read More
A bit of PHP to preserve html formatting in standard WordPress excerpts 1

A bit of PHP to preserve html formatting in standard WordPress excerpts

Posted in , , ,

If you don’t use the Excerpt field in your posts and rely on WordPress to grab the first few dozen words of your post content what you usually find is the excerpt when displayed on the front end (usually in some sort of archive or post grid display) will have most of the html tags removed leaving you with a single block of plain text.

If I go to the bother of formatting my post content to make it more interesting and easier to read and understand I’d like that formatting to be preserved even in that post’s excerpt.

(This post was viewed 390 times) in the last month.)

Read More
How to add custom post types to your default RSS feed 2

How to add custom post types to your default RSS feed

Posted in , , ,

RSS readers are somewhat old school in 2020, but the RSS feed that is part of WordPress is used by email services like Mailchimp and Mailerlite to create automated email updates when you add a new post to your website.

If you have custom post types though, they are not included in the default URL:

(This post was viewed 422 times) in the last month.)

Read More
Storing javascript in a Custom Field textarea 3

Storing javascript in a Custom Field textarea

Posted in , ,

For some client projects I needed to embed javascript code in a page (Post). I used a custom field textarea to insert the code when creating the Post. The problem was the default for text fields was to run them through a sanitizer.php to strip out any type of code that might be malicious. This is a good thing. But in this case it defeats the purpose.

So how to disable the sanitizing for just this field without breaking the default?


(This post was viewed 148 times) in the last month.)

Read More
Create a Scrolling Column with trivial CSS 4

Create a Scrolling Column with trivial CSS

Posted in ,

The client wanted to display a list of past events in a scrollable column. This was easy to implement using simple css. The page layout was done with Beaver Builder, but the solution should work for any html container.

(This post was viewed 181 times) in the last month.)

Read More
Changing a Submenu to a Mega-menu with Beaver Builder 5

Changing a Submenu to a Mega-menu with Beaver Builder

Posted in , , ,

Sometimes you want to present a navigation menu as a horizontal “mega-menu” instead of a hierarchal dropdown menu. This is really simple if you are using Beaver Builder. The mega-menu feature is built in, but is unfortunately hidden. You have to know the secret to turn it on.

(This post was viewed 194 times) in the last month.)

Read More
Formatting a custom number field to add commas 6

Formatting a custom number field to add commas

Posted in , , , ,

I needed to format a number field (999,999,999), coming from a custom field number-format (no other characters permitted in the number entry field). No “$” no commas or decimal points, etc. to output as a normal currency format.

Formatting a custom number field to add commas 7

When displaying the number I could add a “$” in front of the number, but couldn’t find a way to format the number since you can’t do that with CSS.

(This post was viewed 637 times) in the last month.)

Read More

Popular Posts