Bootstrap 5
Using minimal wordpress files to begin with, e.g. https://blog.templatetoaster.com/create-wordpress-theme-scratch/
A great summary of what’s required:
- header.php – contains the code for the header section of the theme.
- index.php – contains the code for the Main Area and will specify where the other files will be included. This is the main file of the theme.
- sidebar.php – contains the information about the sidebar.
- footer.php – handles the footer section.
- style.css – responsible for the styling of your theme.
- bootstrap.css – no separate CSS code is required; highly responsive.
- bootstrap.js – provides its own js for the navigation bar, or tabs, etc.
Intended File Structure
public_html
— wp-admin
— wp-content
—- themes
——- mytheme
——— node_modules // .gitignore, but deployed
———– bootstrap
————- js
————- scss
——— loop-templates
——— page-templates
——— page-templates
——— src //raw files not from packages, composer, build with webpack
———– mytheme
————– scss //raw files Sass and CSS files not from packages
————– js
———– otherthemconributor //build on top top quality HTML theme
————– scss //raw files Sass and CSS files not from node packages
————– js
——— dist //compiled files outputting all with webpack
———– css
———– js
——— header.php
——— index.php
——— footer.php
——— functions.php
——— style.css
——— package.json
——— package-lock.json
——— webpack.config.js //webpack config file
——- twentytwentythree
— wp-includes
vendor
.env
composer.json
composer.lock
.gitignore
Steps Continued
Install BootStrap using npm
npm install bootstrap@5.3.1Install Webpack using npm
Next we need to install our Webpack development dependencies: webpack for the core of Webpack, webpack-cli so we can run Webpack commands from the terminal, and webpack-dev-server so we can run a local development server. Additionally, we’ll install html-webpack-plugin to be able to store our index.html in src directory instead of the default dist one. We use --save-dev to signal that these dependencies are only for development use and not for production.npm i --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
npm i --save-dev webpack webpack-cli webpack-dev-server html-webpack-pluginInstall additional dependencies.
In addition to Webpack and Bootstrap, we need a few more dependencies to properly import and bundle Bootstrap’s CSS and JS with Webpack. These include Sass, some loaders, and Autoprefixer.
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader