Skip to content

New Build Workflow

Pre-Build Approximate Completion Time: 10 Mins

Modgi

  1. Review the build in general, checking for additional functionality or any special requests.
  2. Download all the attachments so you have them ready to go when you need them.
  3. Open any reference sites listed, or if builder discretion is requested, open any industry similar sites you may find inspirational.

Copywriting and SEO Worksheet

This may be buried. Check the following path for files:

  • On the Parent Ticket
  • Under "Sub-tasks", click on the Copywriting link
  • In the attachments find the doc or zip file labeled "Final" and download

If you still cannot find the copywriting and SEO, please reach out to a teammate or leadership. Do not take text from an existing site or make up copy of your own.

***Please make sure to check the spelling and grammar as you enter the copy on to the site. This should have been completed in the Copywriting QA, but we want to always double check this as we build for the best possible customer experience. 

Stock Libraries

If the customer requested stock images or provided images that are low quality, open our stock image galleries.

If you find that icons would be beneficial, open only our approved stock icon options.

Do not stray from the above libraries, these are our only approved stock icon libraries. If you can use font awesome icons in the modules do this as opposed to downloading the icon and saving as an image, it is easier to edit them in the module than it is to edit an image file.

Check back on the Resources page for new libraries!

*If using stock images for you builds, be sure to document your image URLs. See example on the Final Checks tab

WDS Gallery

Before beginning a new build, you may want to browse wdsgallery.godaddy.com for design inspiration. WDS Gallery is a great resources that contains curated examples of our builds and showcases our desired quality of design.

*Make sure you are notating everything that either cannot be done or was requested but could be done better. Remember you are the designer!*

WP Dashboard Approximate Completion Time: 30 Mins

Core/Plugins

For Sites Before GD Core Automation

  1. Install and activate Core.
  2. Choose site type and region.
    • This is important, especially if it is a WooCommerce, as it will take the region settings and insert it into the main settings.
  3. Click activate, then install now to install all the required plugins.
  4. Add any additional requested plugins and deactivate any unnecessary plugins from the plugins page.
  5. For more detailed information about Core check out the styleguide: https://styleguide.wdsgallery.com/gd-core/

For Site with GD Core Automation

  • All plugins and pages are automatically installed and created prior to build.

Author display name

  1. Go to Users, PWS Admin.
  2. Edit the field for the Nickname to be the site name.
  3. In the drop down for "Display Name Publicly As" choose your new nickname, then scroll down and save.

Time Zone

Adjust the Time Zone to reflect the customers location. You may need to Google their location code. 

If the customer does not have a physical location, one still needs to be set. Use the customers account location by default. 

This can be set here: Settings > General > Time Zone

Posts

  1. If blogs were provided enter those now.
    • Don't forget to either delete or edit the default "Hello World" post.
  2. Add a featured image to all posts unless specifically asked not to.
  3. If blog/posts are not being used, remove default "Hello World" post and turn off comments.

To turn off comments: Settings > Discussion > Default post settings > Uncheck "Allow people to submit comments on new posts"

Forms

  1. Add a simple Contact form, unless one is specified in Modgi.
    • Don’t forget to enable the anti-spam honeypot setting.
      Forms > Form Settings > Form Options > Anti-spam honeypot is toggled on
  2. Adjust the subject line in the notification settings, so it is unique and not the default subject. Something like “Submission from (Name) on (Website Title Here) Contact Form”
    • Use the Merge Tag button on the right of the box to insert form fields like “Name” into the Subject line. They will look like this: {Name (First):1.3}
  3. Change the from email to something like "donotreply@mydomain.com"
  4. If user notification is active delete all notifications but ‘Admin Notification’
    • Unless requested we want to make sure that Admin notification is the only notification present when a new build is completed.
      Form > Notifications

Form Restrictions
We do not want to put private or personal information on a website.

We should never be asking the following information through an email form:

  • Social Security Numbers or SSN#
  • Bank Account information
  • Credit Card Numbers or CC#
  • Driver's License Number or DL#

Our goal should always be to protect our customers and C2 (customers’ customers)

Do NOT place more than one form on a page.

301 Redirects

Any time we are building a new site and a customer has a current live site we will need to setup 301 redirects to help preserve page authority which prevents search engines from negatively ranking their site and from losing site visitors who could get stuck on a 404 not found page.

To facilitate this we will be using an approved plugin called Redirection. Below are the instructions for Installing and Configuring the plugin. Followed by 2 of the most common scenarios that can cause redirect issues and will need to be created during the initial build.

Installation & Configuration

  • 1

    Install Redirection Plugin

    1. Go to: Plugins > Add New > Search for Redirection > Install
    2. Activate the extension.
    3. Go to: Tools > Redirection
    4. Follow next steps for Configuration

Scenarios

  • 1

    URL needs to be changed to match new site

    If there is a matching page on both the original and new site, but the URL(s) do not match, then a 301 redirect will need to be created that takes the original URL and moves it to the new URL.

    For Example:
    Old Site - https://www.godaddy.com/websites/website-builder.html
    New Site - https://www.godaddy.com/websites/website-builder/

    (The trailing slash on WP pages must be present, otherwise it causes a 2nd 301 redirect)

    Process:
    Create a 301 redirect on the new site that has the old URL mapping to the new URL

    Get Started

  • 2

    Multiple pages are not moving from the old site

    In the event you have multiple pages that will not be moved to the new build they should all redirect to the home page.

    For Example:
    Old Site - https://www.godaddy.com/websites/website-builder.html
    New Site - https://www.godaddy.com/

    (Trailing slash on WP pages must be present, otherwise it causes a 2nd 301 redirect)

    Process:
    Create a 301 redirect on the new site that has the Old Site Page(s) mapping to the Home Page of the new site.

    Get Started

Additional Functionality

If additional functionality has been requested on the site, make sure you are following the installation and configuration instructions on the features page for the requested plugin and using the worksheet to adjust the plugin settings to accomplish the end goal for the customer's business. Be sure to read any warnings or notes on features in the event there might be a plugin conflict. 

If the requested plugins do not provide the desired functionality, attempt to set up the functionality with other GoDaddy approved plugins. If you are still unable to accomplish the end goal, open a clarification for assistance. 

Do NOT install any 3rd party plugins on our customer's sites. 

If you have been instructed to use a 1 time use plugin, be sure to remove it before completing your build. 

*Make sure you are notating everything that either cannot be done or was requested but could be done better. Remember you are the designer!*

Customizer Approximate Completion Time: 20 Mins

General Tab

  1. Layout
    • Enable the "Scroll to Top Button".
    • Set Font Awesome Icons to "Font Awesome 5".
    • The theme medium breakpoint will default to 992px and the mobile will default to 768px. Please note, mobile is typically what we would call tablet. If you see issues with mobile in the inspector or on a device, please add breakpoint 480px in CSS to correct changes between tablet and small mobile screens if any.
  2. Accent Color
    • Change the "Accent Color" to the color the customer chose in Modgi and adjust the "Hover Color" to an appropriate variation of the accent color.
      • This can be grey if a darker color of the accent color does not look appropriate.
      • Review color standards in the Style Guide for help picking appropriate colors: https://styleguide.wdsgallery.com/color/
  3. Headings
  4. Text
    • Adjust the font family to a font chosen by the customer, or acceptable alternative.
    • Adjust the font size to 18 and the line height to 1.6 unless this does not look good, then notate in your ticket why you chose what you did.

Menus/Pages

For Sites Before GD Core Automation

  1. Create a new Menu labeled "Main Menu".
    • Add all the pages requested in Modgi and marked as "Default", by typing in the page name in the "Add New Page" field under the "Pages" tab and click on the "+Add" button.
    • Verify that sub-navs are set up correctly.
    • Set up external links to open in a new tab.
      • If you do not see the checkbox to have a link open in a new tab, you will need to go to the menus area and click on the gear at the top, and check the box to include Link Target.
    • Include a contact page, if not already requested in Modgi (except for Starter Sites)
  2. If needed create menus for split menus or a separate footer menus.
    • Do not include sub navigation in a footer menu.  Create a separate menu for footer is the main menu has sub-navigation.

For Sites with GD Core Automation

  1. Create a new Menu labeled "Main Menu".
    • Add all the pages set up through automation and match with Modgi and set up menu as "Default."
    • Make sure to add custom links since these won't be set up with automation.
    • Verify that sub-navs are set up correctly.
    • Set up external links to open in a new tab.
      • If you do not see the checkbox to have a link open in a new tab, you will need to go to the menus area and click on the gear at the top, and check the box to include Link Target.
    • Include a contact page, if not already requested in Modgi (except for Starter Sites)
  2. If needed create menus for split menus or a separate footer menus.
    • Do not include sub navigation in a footer menu.  Create a separate menu for footer is the main menu has sub-navigation.

Settings Tab

  1. Site Identity
    • Enter the site title and tagline from Modgi.
    • If customer has provided a logo edit the logo in an appropriate way to use as a favicon. Favicons should be 512px square.
      • If no logo has been provided, create a favicon using 1-3 letters from the site name.
    • Upload your favicon.
  2. Homepage Settings
    • Change the "Your homepage displays" to “A Static Page” then choose your home page from the drop down.
    • Leave "Posts page" as "select page" unless they intend to have a blog, then set it to the blog page.

Additional CSS

Copy and paste the CSS template here. All new builds should include the template.

https://styleguide.wdsgallery.com/design-etiquette/css/#csstemp

Don't forget to hit Publish!

*Make sure you are notating everything that either cannot be done or was requested but could be done better. Remember you are the designer!*

Themer Layouts Approximate Completion Time: 15 Mins

Header

  1. Add a new layout called Header.
  2. Choose Header from the Layout drop down.
  3. Then under location choose Entire Site.

Footer

  1. Add a new layout called Footer.
  2. Choose Footer from the Layout drop down.
  3. Then under location choose Entire Site.

Blog/Shop Layouts

If the site will be using blogs or is a woo and has products:

  1. Set up singular layouts for the posts/products.
  2. Set up archive layouts for the main blog/shop pages as well as the category pages if necessary.

Don't forget to hit Publish!

*Make sure you are notating everything that either cannot be done or was requested but could be done better. Remember you are the designer!*

Beaver Builder Approximate Completion Time: 1 - 4 Hours

Global Settings

  1. Open Beaver builder on any page or themer layout.
  2. Click on the down arrow in the upper left next to the Beaver Builder icon.
  3. Click on the Global Settings option.
  4. Change the “Default Row Width” to “Full Width”.
  5. Scroll to the bottom of this screen and make sure you adjust the “Enable Column Max Width” to “No”.
    • This ensures that tablet and small devices are full width and don’t have strange margins.
  6. Save your changes.

Sitewide Elements

Now that your themer layouts have been added lets edit them

  1. Start with the header. Edit it by either:
    • Clicking on the Beaver Builder link on the themer layouts screen.
    • Or by going to any page on the site, hover over beaver builder, then click on header.
  2. Start by selecting the template:
    • Click the plus sign.
    • Click on Templates.
    • From the drop down choose "Header Templates".
    • Then chose the layout chosen in Modgi or whatever fits best.
    • Click "Replace Existing Content".
  3. Swap out all relevant information and style appropriately.
    • Check all devices! Mobile – 375px | Tablet 768px | iPad Pro 1024px | Laptop 1366px
  4. Do the same for the footer, make sure you use the template as this contains the GoDaddy badge as well as other style presets to make it easier for you.
  5. Don’t forget about your blog/product pages too.

Do NOT create multiple rows or modules to display on certain breakpoints only. This causes the page load to increase and can effect site performance. 

Page Content

First, review Modgi as well as the copywriting worksheet to see what is being requested. If they are giving you discretion or not much to work with, feel free to google similar businesses to see typical industry styles. Obviously, you should not copy these sites, but you can pull inspiration from them if you need to.

  1. Start with your home page. Set up your hero with the requested info from Modgi and the copywriting worksheet.
    • If you cannot find the copywriting or SEO worksheets and copywriting has been checked in Modgi, please get with a teammate to track it down, do not simply pull it from an old site or make it up.
    • Be sure to avoid any modules on the homepage that can cause page performance issue, you can see a list of the ones we have identified HERE.
  2. Once you have your hero in place, make sure you check the layout on all devices
    • Mobile – 390px | Tablet 768px | iPad Pro 1024px | Laptop 1366px
  3. Then save the Hero row to use on internal pages as a base. Save it as “Home Hero”.
  4. Then style the rest of the page accordingly making sure to check all devices as you go.
    • If you feel that you may use some of the styling on internal pages, go ahead and save these elements as well. Make sure that you are NOT clicking “Global” as this will make the changes no matter what page you place the module or row. Global elements should be reserved for the header or footer.
  5. Once you get to an internal page add your saved row “Home Hero” from the home page as a base. Adjust the height, background image if necessary, and text according to the copywriting worksheet. Once you have an acceptable hero image for internal pages that looks good on all devices save this new row as “Internal Hero” to make it easier to stay consistent.
  6. If you come across content that can be placed in to a template style set up, please use Posts or PODs instead of creating separate pages or heavy modules like pop ups to display the content. Follow this guide for more details.

Do NOT create multiple rows or modules to display on certain breakpoints only. This causes the page load to increase and can effect site performance. 

***Please make sure to check the spelling and grammar as you enter the copy on to the site. This should have been completed in the Copywriting QA, but we want to always double check this as we build for the best possible customer experience. 

Forms

  1. Ensure that the success message on all forms has been updated to align with the site colors. 

SEO

  1. On each page click "Edit".
  2. Use the SEO worksheet to add title tags (using the snippets) and meta descriptions to the Yoast settings on each page.
    • If you cannot find the copywriting or SEO worksheets and copywriting has been checked in Modgi, please get with a teammate to track it down, do not simply pull it from an old site or make it up.
  3. Don’t forget to add featured images.
  4. Navigate to the media library, and add alt tags using the SEO Setup and Best Practices Guideline as a guide.

Don't forget to hit Publish!

*Make sure you are notating everything that either cannot be done or was requested but could be done better. Remember you are the designer!*

WooCommerce Approximate Completion Time: 1 - 2 Hours

WP Dashboard

  1. Add the pages:
    • Cart, Checkout, My Account, Terms & Conditions, Privacy Policy, and Shop (or whatever term the customer requested as the shop page)
  2. Connect the pages to Woo
    • Go to WooCommerce > Settings > Advanced. Select each page you created corresponding with its respective label under "page setup"
    • The Privacy Policy page is set in a different section, under general Settings > Privacy
  3. Connect Shop
    • To tell WooCommerce what pages to use for the Shop page go to WooCommerce > Settings > Products
  4. Verify the store address is correct. If there is no physical location for the business, this should be set to the customers location.
    • Store address can be found here: WooCommerce > Settings > General
  5. Setup WooCommerce Emails. Instructions for setting up WooCommerce Emails can be found in the style guide.
  6. Update plugins
    • Perform a final check for GD cORe/Theme/Plugin updates as newer versions may have become available.

Check the Style Guide for more detailed information: https://styleguide.wdsgallery.com/wp-woo/woocommerce-components/

Customizer

Upon installation of Woo, a panel appears in the customizer for WooCommerce that contains some layout and checkout settings. These items used to be found in the dashboard under WooCommerce settings, but they've recently shifted to the customizer and tend to get overlooked.

Appearance > Customize > WooCommerce

Since we custom create our Woo layouts with Themer, the majority of these settings usually don't matter, but its good to know where to find them.

Check the Style Guide for more detailed information: https://styleguide.wdsgallery.com/wp-woo/woocommerce-components/#sett

Themer Layouts

  1. Products
    • If you did not previously set up the themer layout for products, do this now.
    • The themer layout should be labeled something like "Products" and it should be a singular layout.
    • Make sure your location is set to "product" - "all products".
    • Be sure to use the Templates in Beaver builder when building out the page. Click the + > Templates > WooCommerce > Choose the layout designated in Modgi.
  2. Shop
    • If you did not previously set up the themer layout for the shop page, do this now.
    • The themer layout should be labeled something like "Shop" and it should be an archive layout.
    • Make sure your location is set to "product archive".
    • Be sure to use the Templates in Beaver builder when building out the page. Click the + > Templates > WooCommerce > Choose the layout designated in Modgi.
  3. Categories
    • If the site calls for products categories, be sure you set up a category layout, or it will default to the basic woo layout.
    • This should be labeled something like "Product Categories" and it should be an archive layout.
    • Your location should be set to "Product Category Archive" - "All Categories".
    • Be sure to use the Templates in Beaver builder when building out the page. Click the + > Templates > WooCommerce > Choose the layout designated in Modgi.

Check the Style Guide for more detailed information: https://styleguide.wdsgallery.com/wp-woo/wordpress-page-setup/#them

Beaver Builder

Once the new pages are connected to Woo as shown in the step above, edit each page and add the component via shortcode placed in an HTML module or via themer's WooCommerce module. If you've saved a hero / H1 layout or style, you can use this on each component page to keep the site consistent.

  1. Cart Page
    • Shows the cart contents - Use the [woocommerce_cart] shortcode placed in an HTML module or select "Cart" from the standard Woo module
  2. Checkout Page
    • Shows information such as shipping and payment options - Use the [woocommerce_checkout] shortcode placed in an HTML module or select "Checkout" from the standard Woo module
  3. My Account Page
    • Shows each customer information related to their account, orders, etc - Use the [woocommerce_my_account] shortcode placed in an HTML module or select "My Account" from the standard Woo module
  4. Terms & Conditions
    • Use the default terms & conditions document to place terms in a text module on this page unless the customer has provided this.
  5. Privacy Policy
    • The default terms & conditions document has a section for privacy policy - you can use this clipping temporarily but notate that the customer needs to revise these items - privacy policy is automatically connected to checkout
  6. Order Tracking
    • There's an optional Woo function built in called "order tracking" - You can create its own page, or you can choose to place it on the "my account" page above/below the dashboard - to use it, select "Order Tracking" from the standard Woo module

Check the Style Guide for more detailed information: https://styleguide.wdsgallery.com/wp-woo/woocommerce-components/#mods

Don't forget to hit Publish!

*Make sure you are notating everything that either cannot be done or was requested but could be done better. Remember you are the designer!*

Final Checks Approximate Completion Time: 1 Hour

Responsive

Once more, double check that your site is responding well on ALL devices:

Mobile – 390px | Tablet 768px | iPad Pro 1024px | Laptop 1366px

Plugins

Double check that all your plugins are up to date in Core, and any plugins outside of Core are up to date. Check out this guide for more details. 

Make sure any 1 time use plugins have been removed. A list of these can be found here.

Smush

Go to the dashboard and run Smush.

Cache

Flush all the caches!

SEO

Navigate to the media library and add alt tags to ALL images using the SEO Setup and Best Practices Guide as a guide.

Google Lighthouse

Run google lighthouse from the Core dashboard.

If you get a score below 75%, notate all the steps you took to attempt to get the score to or above 75%. Follow the steps outlined in the style guide to attempt to bring the score up: https://styleguide.wdsgallery.com/google-lighthouse-in-gd-core/

Remove the Coming Soon Page

Make sure to remove the Coming Soon page by following the steps located here: https://styleguide.wdsgallery.com/how-to-remove-coming-soon-page/

Screenshots

Take screenshots of your finished site at the following breakpoints: 

390px | 1024px | 1920px | 1366px

Be sure you are taking screenshots of:

  • All Pages
  • At least one of each Post Type (i.e. blogs, products, pods; if applicable)
  • At least one Category (i.e. product cateogry/post category; if applicable)
  • The Plugins Page
  • The GD cORe Plugins page

Your file naming convention should be as follows:

"page-name_screen-size_date" - example: Home_375px_10-7-2020.png

Zip all of your files

Name the zip file the "Screenshots_URL_date" (example: Screenshots_wdsdesigns.com_10-7-2020.zip)

Upload the zip file to the jira build subtask

Don't forget to save a copy for yourself, they make great examples for portfolios!

Stock Image URLs

When using stock images in your content, it is essential to keep proper records of the stock images to maintain compliance. Notation of the URLs of the stock images used allows for transparent association, enabling our teams to easily locate and verify the original sources.

Be sure to add a list of the complete URLs in your completed build notes. Example:

Stock Image URLs Used:

  1. https://photos.wdsgallery.com/ Image: 101660
  2. https://www.pexels.com/photo/rocks-under-bridge-9312602/
  3. etc...

Ticket Process

Any custom graphics created for customer sites must be available for use on revisions or care tickets.

Follow the steps below to ensure all builders have access to edit the custom graphics created.

  • Make sure you are including the layered photoshop file and not a flat file.

Good

Layers

Bad

Flat
  • Place all graphics into a folder on your machine labeled like so:
    • Site-Graphics_[Date in MM-DD-YYY] I.e. Site-Graphics_01-27-2023
  • Once all files are in the folder, right click on the folder > “Send to” > “Compressed (Zipped) folder”
Zip
  • Upload the zipped folder to the WordPress Media Library
WPMedia

Checklist/Notes

Make sure you go through the current checklist for all of your new builds:

QA Checklist - A Simple Checklist/Rubric
https://styleguide.wdsgallery.com/qa-requirements/

Checklist Form With Notations (Internal) - Need to make notations for QA?
http://wdsdesigns.com/qa-check/

Leave any notes you have about the build in your ticket.

Scroll To Top