V2-V3 Conversion Guide
The site is built on Pharmacy with Storefront. Use steps 2-5 to help you convert the site to V3.
Step 2. 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 2a-2d 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.
2e. 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 3. Conversion Process
3a: 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.
WP101 Video Tutorials
3rd Party or unsupported/no longer supported Plugins such as "Strong Testimonials," "Team Members," "Crelly Slider," etc.
Plugins safe to delete:
Google Analytics Dash 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 addons)
WP RSS Aggrigator
W3 Total Cache
Feed Them Social
Ajaxy Live Search
WordPress Store Locator
Google Language Translator
Video Embed & Thumbnail Gen.
WDS Plugins to delete:
Beaver Builder Plugin
PowerPack for BB
WDS Custom Templates
WDS Pharmacy Customizer
Search Engine Visibility
Storefront Mega Menus
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.
3b: 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.
3c: 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.
3d. 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 4. 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 4a-4f.
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.
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 5. 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!