Crear tu propio tema para WordPress con SAGE + ACORN

Desde la carpeta themes ejecutamos:

C:/wamp64/bin/php/php8.1.0/php.exe C:/ProgramData/ComposerSetup/bin/composer.phar create-project roots/sage 4funkies

Los siguientes comandos deben ejecutarse desde WSL. Si no está instalado en el ordenador, podemos revisar este blog de cómo hacerlo: https://blog.oscarperiche.com/2023/10/06/instalar-wsl-en-powershell-windows/

En el caso de recién instalar WSL, antes habrá que instalar Yarn, NPM y NodeJS. Aquí explico cómo hacerlo: https://blog.oscarperiche.com/2023/10/09/instalar-yarn-y-nodejs-en-wsl/

Abrimos la consola de WSL y ejecutamos:

yarn

Actualizamos en el archivo bud.config.js la ruta a nuestro URL local de desarrollo (setUrl y setProxyUrl) y después ejecutamos:

yarn build

C:/wamp64/bin/php/php8.1.0/php.exe C:/ProgramData/ComposerSetup/bin/composer.phar require roots/acorn

Añadimos la función postAutoloadDump en el archivo composer.json:

"scripts": {
  //...
  "post-autoload-dump": [
    "Roots\\Acorn\\ComposerScripts::postAutoloadDump"
  ]
}

yarn remove @roots/bud-tailwindcss

Abrimos resources/styles/app.css y eliminamos las siguientes lineas:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Eliminamos tailwind.config.js de la raiz de nuestro tema.

Abrimos bud.config.js de la raiz de nuestro tema y eliminamos las siguientes lineas:

-      .useTailwindColors()
-      .useTailwindFontFamily()
-      .useTailwindFontSize()

Eliminamos la siguiente linea de jsconfig.json:

"@roots/bud-tailwindcss",

Añadimos Bootstrap como dependencia

yarn add bootstrap

Añadimos Popper como dependencia

yarn add @popperjs/core

Abrimos resources/scripts/app.js y añadimos:

import 'bootstrap';

Abrimos resources/styles/app.scss y añadimos:

@import 'bootstrap/scss/bootstrap';

Entrades relacionades: