V1-V3 Conversion Guide
The site is built with Genesis. Use steps 1-4 to help you convert the site to V3.
Step 1. Prep for Conversion
First, read this rundown:
Open each webpage in an incognito Window. Screenshot each page to document their appearance.
I also recommend copying all text content to a new document just in case you need to restart your computer at some point and will lose your incognito tabs of all pages. Also check the site for specific functionality that will need to be rebuilt, such as pop-ups, sliders, tables, member-restricted content, etc.
Now, use steps 1a-1d to walk you through it.
Screenshot the site in its current condition
- Open the website and take screenshots of each page so they can be referenced later on in your build.
- Make sure to get screenshots of any archive (shop page, posts/blog page, listings page, etc.) and any singular (1 singular blog post, 1 singular product layout, 1 singular listing, etc.)
- Make note of what images are being used in the logo area and as a favicon, if any.
1e. You should now have all components of the website documented.
- Now, you will need to remove all WDS standard plugins (step 3 will cover this).
- Beware that you are going to lose the header, footer and most of the modules or layout components on the site's pages.
- This is what you want to happen so you can rebuild the page layouts using up-to-date and non-broken modules.
Step 2. Conversion Process
2a: Begin Conversion
Disable all plugins that aren't on our currently supported plugins list (found here) and update any plugins that are still supported. Please only delete plugins that you can verify are not third-party plugins installed by the customer for their own needs.
Delete all WDS plugins leaving only customers 3rd party plugins. I have included a list below of plugins that are safe to delete, but this list is not comprehensive:
Google Analytics Dashboard for WP
Compact WP Audio Player
Tabby Responsive Tabs
Paid Membership Pro
Food and Drink Menu
Calculated Fields Form
Mad Mimi Sign Up Forms
Ninja Forms (and Ninja Form addons)
WP RSS Aggrigator
W3 Total Cache
Feed Them Social
Ajaxy Live Search
WordPress Store Locator
Google Language Translator
Video Embed & Thumbnail Generator
Once all Plugins required for this site are up-to-date and ready, leaving 3rd party plugins inactive, view the site. In Genesis, you'll be missing large chunks of modules, content and images.
2b: Verify PHP version is up to date before you continue.
- To check your PHP version, go to plugins > add new and install the WordPress Display PHP Version plugin > then activate.
- Go to your WordPress dashboard page and look next to your WordPress version to see what PHP version is running.
- You can check what the latest version of PHP is from this Release History chart.
- As long as your PHP version is not in the red on this chart, you will be okay to proceed.
- If the PHP version is below the latest, reach out to Prod and ask them to update the PHP version for you before you proceed.
- Delete this plugin after you see the version has been updated and you can proceed.
2c: Install GD cORe, then install the theme and all the necessary plugins.
- Install the newest version of GD cORe (Builders and Vendors use the V3 Tools website to download the most recent version of core.) Then activate the plugin. (For more detailed instructions on setup see the style guide GD cORe page)
- Go to appearance > GD cORe. You will now be on the setup screen. (Based off the type of website you are building, select the proper plan type and the market region from the appropriate dropdowns)
- Click “Install Now” to install all necessary plugins via GD cORe. From the GD cORe > Plugins tab, make sure to activate or update any plugin needed for the site.
- Check dashboard > plugins - if any of the plugins you deactivated earlier now have a duplicate version that's active after you installed GD cORe, delete the original deactivated version of the plugin.
- ALSO - If you previously deleted a plugin that provided features you need (such as membership restricted content) make sure to install the plugin we currently use for that functionality.
2d. Expect to take extra time on Genesis to V3 builds.
You may also take extra time if you're faced with the following scenarios (make sure you notate reasoning):
- If you need to recreate team members in posts
- If you need to recreate / re-add testimonials
- If you need to recreate a slider or gallery in Beaver Builder from an unsupported plugin
- If you need to rebuild the post structure because posts were previously added as singular static pages
- If you need to recreate a custom layout that either disappeared after the update or had to be removed due to corrupted modules
Step 3. Rebuild Process
You will now need to fully rebuild the site.
All media will still be in the media gallery, the pages will still exist, but all the content will have been compressed down to one text box so that will need to be deleted and rebuilt as Beaver Builder pages. There are many important tips in section 2e under "Step 2. Conversion Process"above for rebuilding some content previously handled by plugins (team members, sliders, testimonials, etc). The site will essentially have to be setup like a brand new site since we are installing an an new theme and build tools.
Make sure to follow all of necessary tasks in steps 3a-3f.
Make sure the following settings are in place before you start rebuilding.
- General > Layout - Scroll to top: Enabled, CSS Framework: Minimal Bootstrap 3, Font Awesome Icons: Font Awesome 5
- General > Accent Color - Place the site's main and accent colors in this section
- General > Headings and Text - Select the appropriate colors, font families, sizing and line height.
- Settings > Site Identity - place the site title and tagline in their fields and set the favicon (if a favicon wasn't previously in place, use a cropped version of the logo, if possible, or pick a relevant icon from iconsdb - this is just a nice thing to do)
- Settings > Homepage Settings - Your homepage displays: A static page (unless of course the site is blog oriented and the homepage is supposed to be the blog post archive), Posts page: Choose the blog post archive page for this field or leave empty if the site doesn't involve posts.
- Additional CSS - Paste the CSS template found on the CSS page of the styleguide, don’t paste the CSS you saved from the old site yet since most of it may be obsolete. You will reference the old site's CSS only if you need to replicate a custom layout or are curious how something was done - you may not need to use any of it at all.
You don't need to use the exact same modules as there were before, use your own discretion and experience with beaver builder to choose modules that will help make the layout appear most similar to the way it did before. Here are some standard modules you can use and here are some creative modules for callouts.
Upon building the site, if you recognize that there are any third party plugins that the customer was using that may need to be reactivated (in order for a shortcode to work, or analytics tracking for example) go ahead and reactivate those plugins. If they cause issues with the site, deactivate them and leave a note indicating why you left it deactivated.
Step 4. Quality Check
Once the website is ready, you will need to QA the site similar to a new build, as well as compare it for accuracy against your screreenshots from the old Genesis site.
The site doesn't have the match the appearance exactly, but should be as close as feasible.
Look for the following:
- Header and footer are displaying correctly.
- Text and images are in the right places and layout is relatively unchanged.
- All modules and functions are working. Make sure nothing has reverted to a visible shortcode. You may need to refer back to the CSS you copied in the beginning to restyle any modules that may have changed.
- All page, blog, or store templates appear similar to the original site and are visually appealing.
- Check the mobile appearance of the site for any anomalies or issues with the header and footer.
- Check that the site appears correctly at all major media queries/breakpoints.
- If the updated versions of any layouts or modules are visibly different, notate it.
Congratulations, your V1-V3 conversion is complete!