Separate hooks into files

.github/workflows/build.yml

@@ -0,0 +1,31 @@
+name: Generate a build and push to another branch
+
+on:
+  push:
+    branches:
+      - master
+      - divi-child-new-approach
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    name: Build and Push
+    steps:
+      - name: git-checkout
+        uses: actions/checkout@v3
+
+      - name: Install all dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build # The build command of your project
+
+      - name: Push
+        uses: s0/git-publish-subdir-action@develop
+        env:
+          REPO: self
+          BRANCH: divi-child-new-approach # The branch name where you want to push the assets
+          FOLDER: assets # The directory where your assets are generated
+          TARGET_DIR: assets # The directory where you want to push the assets
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # GitHub will automatically add this - you don't need to bother getting a token
+          MESSAGE: "Build: ({sha}) {msg}" # The commit message

.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+vendor/
+.idea/

assets/js/script.js

@@ -0,0 +1,19 @@
+jQuery( document ).ready( function( $ ) {
+
+	// Create collapsible sub menus in Divi Header Nav
+	$( "<div class='sub-menu-toggle'></div>" ).insertBefore( "#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a" );
+
+	// Submenu toggle
+	const subMenuToggle = $( '#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle' )
+
+	if ( subMenuToggle.length ) {
+		// Add the click event
+		subMenuToggle.click( function() {
+			// Toggle the class
+			$( this ).toggleClass( 'popped' );
+		} );
+	}
+
+	// Place custom javascript here
+	// console.log( 'Hello World!' );
+} );

class-fs-divi-setup.php

@@ -0,0 +1,72 @@
+<?php
+
+class FS_Divi_Setup {
+
+	/**
+	 *
+	 * Maybe follow Understrap's directory structure and move /inc/ up out of /app/
+	 * Consider simplifying and including everything in /inc/ and using file prefixes to organize the hooks, eg: /inc/hooks-pressable.php - and then it makes sense for things that aren't exactly hooks to live in that folder
+	 * Maybe add a custom.php in /inc/ for custom functions instead of appending to functions.php
+	 * Use /assets/css/ and /assets/js/ to organize JS and CSS
+	 * Consider a SCSS style sheet that uses variables, and minifies on build process
+	 * Make sure all functions are snake_case not camelCase
+	 * Use PHPCS to validate against WordPress coding standards
+	 */
+
+	public function __construct() {
+		add_action( 'admin_enqueue_scripts', array( $this, 'enqueueAdminScripts' ) );
+		add_action( 'wp_enqueue_scripts', array( $this, 'enqueueFrontendScripts' ) );
+
+		$this->registerHooks();
+	}
+
+	/**
+	 * Loop through all files in the hooks directory and require them.
+	 * This allows us to keep the hooks organized in separate files.
+	 *
+	 * @return void
+	 */
+	public function registerHooks() {
+		$path = get_stylesheet_directory_uri() . '/inc/*.php';
+		foreach ( glob( $path ) as $file ) {
+			require_once $file;
+		}
+	}
+
+	public function enqueueAdminScripts() {
+		// Get the current child theme data
+		$current_theme = wp_get_theme();
+		// get the version number of the current child theme
+		$child_version = $current_theme->get( 'Version' );
+		// we check file date of WP backend stylesheet, so we can append to version number string (for cache busting)
+		$style_cache_buster = date( 'YmdHis', filemtime( get_stylesheet_directory() . '/wp-admin.css' ) );
+		// Begin enqueue for CSS file that loads in WP backend
+		wp_enqueue_style( 'fs-child-style-admin', get_stylesheet_directory_uri() . '/wp-admin.css', array(), $child_version . '-' . $style_cache_buster );
+	}
+
+	public function enqueueFrontendScripts() {
+		// Divi assigns its style.css with this handle
+		$parent_handle = 'divi-style';
+		// Get the current child theme data
+		$current_theme = wp_get_theme();
+		// get the parent version number of the current child theme
+		$parent_version = $current_theme->parent()->get( 'Version' );
+		// get the version number of the current child theme
+		$child_version = $current_theme->get( 'Version' );
+		// we check file date of child stylesheet and script, so we can append to version number string (for cache busting)
+		$style_cache_buster  = date( 'YmdHis', filemtime( get_stylesheet_directory() . '/assets/css/style.css' ) );
+		$script_cache_buster = date( 'YmdHis', filemtime( get_stylesheet_directory() . '/assets/js/script.js' ) );
+		// first we pull in the parent theme styles that it needs
+		wp_enqueue_style( $parent_handle, get_template_directory_uri() . '/style.css', array(), $parent_version );
+		// then we get the child theme style.css file, which is dependent on the parent theme style, then append string of child version and file date
+		wp_enqueue_style( 'fs-child-style', get_stylesheet_uri() . '/assets/css/style.css', array( $parent_handle ), $child_version . '-' . $style_cache_buster );
+		// will grab the script file from the child theme directory, and is reliant on jquery and the divi-custom-script (so it comes after that one)
+		wp_enqueue_script(
+			'fs-child-script',
+			get_stylesheet_directory_uri() . '/assets/js/script.js',
+			array( 'jquery', 'divi-custom-script' ),
+			$child_version . '-' . $script_cache_buster,
+			true
+		);
+	}
+}

composer.json

@@ -0,0 +1,18 @@
+{
+    "name": "freshysites/fs-divi-stencil",
+    "autoload": {
+    },
+    "config": {
+        "allow-plugins": {
+            "dealerdirect/phpcodesniffer-composer-installer": true
+        }
+    },
+    "require-dev": {
+        "wp-coding-standards/wpcs": "^3.0",
+        "squizlabs/php_codesniffer": "^3.7"
+    },
+    "scripts": {
+        "phpcs": "phpcs --standard=WordPress --extensions=php --ignore=vendor/*,node_modules/*,tests/* .",
+        "phpcbf": "phpcbf --standard=WordPress --extensions=php --ignore=vendor/*,node_modules/*,tests/* ."
+    }
+}