add js to pipeline

assets/js/script.js

@@ -1,3 +1,19 @@
-/**
- * Place your custom JS here
- */
+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

@@ -54,16 +54,16 @@ public function enqueueFrontendScripts() {
 		// 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() . '/style.css' ) );
-		$script_cache_buster = date( 'YmdHis', filemtime( get_stylesheet_directory() . '/script.js' ) );
+		$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(), array( $parent_handle ), $child_version . '-' . $style_cache_buster );
+		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() . '/script.js',
+			get_stylesheet_directory_uri() . '/assets/js/script.js',
 			array( 'jquery', 'divi-custom-script' ),
 			$child_version . '-' . $script_cache_buster,
 			true

gulpfile.js

@@ -12,6 +12,16 @@ gulp.task('build-css', function () {
 	           .pipe(gulp.dest('assets/css'));
 });
 
+// Compile JS
+gulp.task('build-js', function () {
+	return gulp.src('src/js/index.js')
+	           .pipe(rename('script.js'))
+	           .pipe(gulp.dest('assets/js'));
+})
+
+// Compile both
+gulp.task('build', gulp.series('build-css', 'build-js'));
+
 // Watch for changes in SCSS files
 gulp.task('watch', function () {
 	gulp.watch('src/scss/*.scss', gulp.series('build-css'));

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "sass": "gulp sass",
-    "build": "gulp build-css"
+    "build": "gulp build"
   },
   "author": "",
   "license": "ISC",