This repo is code for mattjennings.net, the portfolio of Matt Jennings, front-end and full-stack web developer with design skills.

Below are code details about the active WordPress (WP) theme is at:
wp-content/themes/MJ-net-2012

• webpack is used to transpile:
  • SCSS into CSS at:
    wp-content/themes/MJ-net-2012/assets/scss
  • ES6 and beyond JavaScript (JS) into minified and ES5 (or higher) JS at:
    wp-content/themes/MJ-net-2012/assets/js
• For webpack configuration details see (3 files):
  • wp-content/themes/MJ-net-2012/webpack.config.cjs
  • wp-content/themes/MJ-net-2012/package.json (see scripts entry)
  • wp-content/themes/MJ-net-2012/.babelrc.json

See the files below:

• ESLint (for JS)
  wp-content/themes/MJ-net-2012/.eslintrc.json
• Stylelint (for SCSS)
  wp-content/themes/MJ-net-2012/.stylelintrc.json
• Prettier (auto-formatting of JS and SCSS; 2 files)
  • wp-content/themes/MJ-net-2012/.prettierrc.json
  • wp-content/themes/MJ-net-2012/.prettierignore

• Shows example of linking to files with OOP PHP to execute WP hooks:
  wp-content/themes/MJ-net-2012/functions.php
• Files with OOP PHP code linked to WP theme's functions.php file:
  • WP Core Utilities (WP core hooks):
    wp-content/themes/MJ-net-2012/inc/wp-core-utils/wp-core-utils.php
  • Example of Using Walker_Nav_Menu WordPress Class:
    wp-content/themes/MJ-net-2012/inc/walker-nav-menu/walker-nav-menu.php

• JS code:
  wp-content/themes/MJ-net-2012/assets/js/theme.js
• SCSS code:
  wp-content/themes/MJ-net-2012/assets/scss/style.scss

1. To update CSS or JS in the WP active theme (both are located at wp-content/themes/MJ-net-2012/assets and I use SCSS, which is enhanced CSS), in your terminal go to:
   wp-content/themes/MJ-net-2012

2. Then install npm packages (including webpack) do:
   npm i

3. To build CSS and JS for the theme do:
   npm run build

4. When doing localhost development on the website, do:
   npm start

5. Additional useful terminal commands in the active theme are below:

   • Lint WP theme JS located at wp-content/themes/MJ-net-2012/assets/js by running:
     npm run lint
   • Reformat JS located at wp-content/themes/MJ-net-2012/assets/js by running:
     npm run format