adds customizer warning to theme layout section

functions.php

@@ -55,10 +55,29 @@ function add_child_theme_textdomain() {
 /**
  * Overrides the theme_mod to default to Bootstrap 5
  *
- * @param string $current_mod
+ * This function uses the `theme_mod_{$name}` hook and
+ * can be duplicated to override other theme settings.
+ *
+ * @param string $current_mod The current value of the theme_mod.
  * @return string
  */
 function understrap_default_bootstrap_version( $current_mod ) {
 	return 'bootstrap5';
 }
 add_filter( 'theme_mod_understrap_bootstrap_version', 'understrap_default_bootstrap_version', 20 );
+
+
+
+/**
+ * Loads javascript for showing customizer warning dialog.
+ */
+function understrap_child_customize_controls_js() {
+	wp_enqueue_script(
+		'understrap_child_customizer',
+		get_stylesheet_directory_uri() . '/js/customizer-controls.js',
+		array( 'customize-preview' ),
+		'20130508',
+		true
+	);
+}
+add_action( 'customize_controls_enqueue_scripts', 'understrap_child_customize_controls_js' );

js/customizer-controls.js

@@ -0,0 +1,18 @@
+/**
+ * Scripts within the customizer controls window.
+ *
+ * Adds a warning to the Theme Layout Settings section.
+ */
+
+ (function() {
+	wp.customize.bind( 'ready', function() {
+		// Only show the navbar type setting when running Bootstrap 5.
+		wp.customize.section( 'understrap_theme_layout_options').notifications.add( 'example-warning', new wp.customize.Notification(
+			'example-warning',
+			{
+				type: 'warning',
+				message: 'You are currently using an Understrap child theme, which may override some of these settings.'
+			}
+		) );
+	});
+})();