Skip to content

README.md

Latest commit

 

History

History
61 lines (51 loc) · 3.12 KB

README.md

File metadata and controls

61 lines (51 loc) · 3.12 KB

Matt Jenning's WordPress Portfolio

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

Tech Details (for recruiters or hiring managers to read)

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

webpack

  • 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

Linting and Auto-formatting for JS and SCSS

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

Active WP Theme's functions.php File

  • 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 and SCSS Files in Active WP Theme

Setup

  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