Migrate to wp-lemon 3

Welcome to version 3.0 of wp-lemon. In this guide we will go over the details to upgrade your current 2.x website to the 3.x version.

Before we get started

Please make sure you have the latest version of your project checked out and have a recent database and media files to check your website locally.

Upgrade steps

Follow the next steps to upgrade your project to the 3.x branch.

Step 1. Set new major version of wp-lemon

Navigate to your composer.json file in the project root and update it as follows.

Copy
-    "satispress/wp-lemon": "^2.0",
+    "satispress/wp-lemon": "^3.0",

Step 2. Update child-theme dependencies

Navigate to your child theme and open package.json and update the following dependencies to at least these versions.

⚠️ Make sure not to delete/overwrite extra dependencies that you may have included.

Copy
"devDependencies": {
        "@wordpress/browserslist-config": "^4.1.0",
        "basebuilder-config": "^2.3.0",
        "prettier": "^2.5",
        "prettier-plugin-twig-melody": "^0.4.6"
    },
    "dependencies": {
        "@popperjs/core": "^2.11.0",
        "aos": "^3.0.0-beta.6",
        "bootstrap": "^5.1",
        "lodash.throttle": "^4.1.1",
        "swiper": "^7.3",
        "vanilla-lazyload": "17.5"
    }

Step 3. Update child-theme script

Navigate to your child theme and open package.json and replace the scripts section with the following code.

Copy
"scripts": {
        "bootstrap-project": "composer install --working-dir=../../../../ && yarn install",
        "composer-deploy": "composer install --working-dir=../../../../ --no-dev --optimize-autoloader",
        "composer-update": "composer update --working-dir=../../../../",
        "update-parent": "composer update --working-dir=../../../../ && yarn install",
        "dev": "basebuilder-config development",
        "development": "basebuilder-config development",
        "watch": "basebuilder-config watch",
        "production": "basebuilder-config production",
        "lint": "yarn run -s lint:scripts && npm run -s lint:styles",
        "lint:styles": "stylelint \"resources/assets/styles/**/*.scss\"",
        "lint:scripts": "eslint resources/assets/scripts",
        "lint:twig": "yarn run prettier --write \"resources/views/**/*.twig\""
    },

Step 4. Remove iconfont and lato folders

Navigate to resources/assets/fonts and remove the iconfont and lato folders.

Step 5. import new dependencies in app.js

Navigate to resources/assets/scripts/app.js and locate the bootstrap imports at te top. Remove the util import and add the offcanvas import as shown in this code example.

Copy
- import 'bootstrap/js/dist/util';
  import 'bootstrap/js/dist/button';
  import 'bootstrap/js/dist/collapse';
+ import 'bootstrap/js/dist/offcanvas';

Step 6. Run update-parent command

Open a new console in your child theme and run the following command: yarn run update-parent

This will update both PHP and node dependencies to their latest versions.

Step 7. Run production build

Open a new console in your child theme and run the following command: yarn run production This will create a fresh build with the new dependencies. If the build fails, please try to debug the error or open a new ticket.

Step 8. Check child theme on hooks and actions usage.

The naming of filters got a massive overhaul. Please double check our filters chapter and triple-check if your filters need to be updated and work as intended.

Visual/Code check

Since this is a new major version please check the build locally with the latest database and media files. Check for any visual differences. If you find a major difference please try to debug or open a ticket.

If you've written custom code based on Swiper or Bootstrap, for example created a new block or a slider that involves on of these libraries, please check out the following migration guides.

• Please check custom bootstrap code against https://getbootstrap.com/docs/5.1/migration/
• Please update custom Swipers against https://swiperjs.com/migration-guide

Deploy

Please follow the following guide to deploy the update to the production server. Deploy update!