V2-V3 Conversion Guide

The site is built on Pharmacy with Storefront. 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.

1a. Screenshots 1b. Text 1c. Customizer 1d. Plugins

1a. Screenshots

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.

1b. Text

Save the site's text in a plain text application

You will be using a text application of your choice for this section e.g sublime, vscode, notepad, etc.
Copy/paste the site title, tagline and any text/links in the header area aside from the menu items to your notepad.
Copy/paste the Copyright text, social media, contact info and any text/links/CTAs in the footer area to your notepad.
Select all text on the page, copy and paste it in your text application for reference incase any of this text is sitting in a module that may fail after the update or in case of a Genesis site.
If creative modules that hide text e.g. ihovers, info circles, flip boxes or interactive banners are being used, make sure you copy over the hidden text as well.

1c. Customizer

1d. Plugins

Make note of any 3rd party plugins that are not supported by WDS as they may not function the same way once the site has been converted
Plugins like "Strong Testimonials" or "Team Members" or "Crelly Slider" are not supported in V3 BUT we can easily recreate them with items like a testimonial slider or posts or a content slider respectively.
Make note of any such plugins, the items within them and where they are being used before you deactivate them in step 3. If there are any such items in use, make sure you copy the text out of them before you continue.

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 to the right of plugins that are safe to delete, but this list is not comprehensive.

Deactivate:
Akismet Anti-Spam
Gravity Forms
Sucuri Security
WooCommerce
WP101 Video Tutorials
Yoast SEO
3rd Party or unsupported/no longer supported Plugins such as "Strong Testimonials," "Team Members," "Crelly Slider," etc.

Plugins safe to delete:
Age Verify
Google Analytics Dash for WP
Pop-Up CC
Compact WP Audio Player
Crelly Slider
TablePress
Collapse-O-Matic
Tabby Responsive Tabs
Ninja Forms
Job Manager
Paid Membership Pro
Food and Drink Menu
Calculated Fields Form
Mad Mimi Sign Up Forms
Password Protected
Photo Gallery
Ninja Forms (and addons)
WP RSS Aggrigator
W3 Total Cache
Feed Them Social
Ajaxy Live Search
WordPress Store Locator
Strong Testimonials
Google Language Translator
Video Embed & Thumbnail Gen.
Jetpack
OpenTable

WDS Plugins to delete:
Beaver Builder Plugin
Classic Editor
PowerPack for BB
WDS Custom Templates
WDS Pharmacy Customizer
Search Engine Visibility
Smush
Storefront Mega Menus
Storefront Powerpack
Title Toggle for Storefront Theme
Ultimate Addon for BB

Once all Plugins required for this site are up-to-date and ready, leaving 3rd party plugins inactive, view the site.

In a Pharmacy V2, the site should look very similar to your screenshots except for the header and footer.

2b: Verify PHP version is up to date before you continue.

To check the PHP version from the WordPress Dashboard go to Tools>Site Health>Info (tab at the top of the page)>Server (scroll down and click the down arrow to the right of Server)
If cORe is installed, you can check from the WordPress Dashboard by going to GD cORe and the PHP Version is listed under Website Settings.
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, create a Technical Clarification for a PHP version upgrade.

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 approx. 2-3 hrs on V2 to V3 builds.

However, you may 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

At this point you will need to style and rebuild the pieces of the site lost in the conversion.
It is acceptable for some of the new design to be slightly different than the old site as the header and footer layouts have changed, so just do your best to make the header and footer as similar as possible in style and layout, and notate the items that you could not mirror.

Make sure to follow all of necessary tasks in steps 3a-3f.

3a. Customizer 3b. Beaver Builder 3c. Build Header 3d. Build Footer 3e. Other Themer Layouts 3f. Pages

3a. Customizer

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.

3b. Beaver Builder

When you open beaver builder for the first time whether its on a page or when you're building the header or footer

Global Settings - go to the top left "currently editing [page name]" and click to open the tools dropdown > click Global Settings:
- Adjust fixed row Max Width as needed
- Change Default Row Width to "Full Width" and leave Default Row Content Width as "Fixed"
Color Presets - open any module and go to a field that contains color, put all the colors used on the site that you made note of and save each one as a preset for ease
Icons - if font awesome 5 icons are not showing up, go to dashboard > settings > beaver builder > icons, make sure Font Awesome 5 Solid, Font Awesome 5 Regular, Font Awesome 5 Brands are checked > save icon settings

3c. Build Header

Click here for detailed guide.

Create a Themer Layout - dashboard > hover over beaver builder > click themer layouts > add new.
Add Themer Layout - title: header, type: themer layout, layout: header
Themer Layout Settings - location: entire site (unless you have different headers for different pages), choose from sticky and overlay settings as needed, then publish > launch beaver builder
Choose A Header - once in beaver builder, on the screen top right > click “+” sign > select templates > from the “group” drop-down > select Header Templates

Make sure to select the header that looks closest to the old site and what you are trying to recreate, then restyle as needed and adjust for responsive views

3d. Build Footer

Click here for detailed guide.

Create a Themer Layout - dashboard > hover over beaver builder > click themer layouts > add new.
Add Themer Layout - title: footer, type: themer layout, layout: footer
Themer Layout Settings - location: entire site (unless you have different footers for different pages), then publish > launch beaver builder
Choose A Footer - once in beaver builder, on the screen top right > click “+” sign > select templates > from the “group” drop-down > select Footer Templates

Make sure to select the footer that looks closest to the old site and what you are trying to recreate, then restyle as needed and adjust for responsive views

In case of a V2 footer with a "footer tent" layout, you are not required to rebuild the tent BUT if you are requested to, you can use this custom code to recreate the layout - click here see layout demo

3e. Other Themer Layouts

Remaining themer layouts (blog and/or woo). Click here for detailed guide.

Create a Themer Layout - dashboard > hover over beaver builder > click themer layouts > add new.
Add Themer Layout - Title: Blog, Post, Shop, or Product, Layout: singular or archive
Themer Layout Settings - location: For post/product archive or category - change this to "post archive" OR "product archive," for singular post/product - change this to "post > all posts" OR "product > all products" > publish > launch beaver builder
Choose A Template - once in beaver builder, on the screen top right > click “+” sign > select templates > from the “group” drop-down > select appropriate Template that is most similar to the shop/blog/post/product layout from the old site, then style as needed and adjust for responsive views

3f. Pages

In the case that the PHP version was out of date and/or if the theme/plugins were all VERY out of date before you began the conversion process, you will notice even in a V2 that some modules will have broken or drastically changed after the conversion. When you're ready to rebuild, these broken modules may cause pages to load slow or to act strange.
Sometimes its best and easiest to just start with a blank slate and rebuild the page or rows with those modules entirely using fresh versions of the modules and the text that you saved to your notepad in Step 1.
In the case that this is an issue, notate the page and modules you had to rebuild as it will justify you spending a little extra time on this. If you're working with a Genesis, rebuilding the pages from scratch will be the only way to do it.
Use the screenshots to compare each page from the old site to the respective pages on the converted site.
Replace any broken modules with new versions of the modules and if any text is missing, use the text you copied to your notepad to replace it.

Tips:

In the case that the V2 had a broken layout or module, you are allowed to recreate the layout using your design discretion - e.g. some V2 builds will have broken headers with CTAs or Contact info dropping to the second line - do not recreate the header with the deformity, place the CTA, contact info or broken item in a place that looks good. Notate that the item was broken, and if it looks different compared to the screenshots, its because you fixed it as part of the V3 conversion.

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 V2 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 V2-V3 conversion is complete!

Updated Fields related to Personally Identifiable Information are present

Created Guide: Leapfrog Theme Setup Guide

Image optimization guide – 22310