1st version ready

404.php

@@ -4,17 +4,17 @@
 
 ?>
 
-	<div id="primary" class="content-area">
-		<main id="main" class="site-main">
+  <div id="primary" class="content-area">
+    <main id="main" class="site-main">
 
-            <section>
-                <p>
-                    <?php esc_attr_e('Error 404, Ooops ! Cette page n’existe pas !','textdomaintomodify'); ?>
-                </p>
-            </section>
+      <section>
+        <p>
+            <?php esc_attr_e('Error 404, Ooops ! Cette page n’existe pas !','textdomaintomodify'); ?>
+        </p>
+      </section>
 
-		</main><!-- #main -->
-	</div><!-- #primary -->
+    </main><!-- #main -->
+  </div><!-- #primary -->
 
 <?php
 get_footer();

assets/src/js/_generalScripts.js → assets/src/js/_general.js

@@ -3,17 +3,12 @@ class General {
 	constructor() {
 		this.testVariable = 'script working';
 		this.init();
-		this.check();
 	}
 
 	init() {
 		// for tests purposes only
 		console.log(this.testVariable);
 	}
-
-	check() {
-		console.log('check');
-	}
 }
 
 export default General;

assets/src/js/main.js

@@ -1,4 +1,4 @@
-import General from './_generalScripts';
+import General from './_general';
 
 const App = {
 

assets/src/scss/base/_base.scss

@@ -40,3 +40,10 @@ a:active {
     background-size: cover;
     background-image: url('@/img/tom-delanoue-unsplash.jpg');
 }
+
+#message {
+    width: 360px;
+    height: 240px;
+    background-size: cover;
+    //background-image: url('@static/img/tom-delanoue-unsplash.jpg');
+}

assets/src/scss/base/_fonts.scss

@@ -0,0 +1,18 @@
+
+@font-face {
+    font-family: 'Ubuntu';
+    src: url('@/fonts/ubuntu/Ubuntu-Regular.woff2') format('woff2'),
+    url('@/fonts/ubuntu/Ubuntu-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Ubuntu';
+    src: url('@/fonts/ubuntu/Ubuntu-Italic.woff2') format('woff2'),
+    url('@/fonts/ubuntu/Ubuntu-Italic.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+    font-display: swap;
+}

composer.json

@@ -1,5 +1,5 @@
 {
-  "name": "oguilleux/blankthemewebpack",
-  "description": "Blank Theme with Gulp and Webpack",
+  "name": "oguilleux/vitewptheme",
+  "description": "Blank Theme using Vite.js",
   "type": "wordpress-theme"
 }

configure/configure.php

@@ -36,22 +36,22 @@ function custom_setup() {
     remove_filter('render_block', 'wp_restore_group_inner_container');
     remove_filter('render_block', 'wp_render_layout_support_flag');
 
-	// Remove useless WP image sizes
-	remove_image_size( '1536x1536' );
-	remove_image_size( '2048x2048' );
+    // Remove useless WP image sizes
+    remove_image_size( '1536x1536' );
+    remove_image_size( '2048x2048' );
 
-	// Custom image sizes
-	// add_image_size( '424x424', 424, 424, true );
-	// add_image_size( '1920', 1920, 9999 );
+    // Custom image sizes
+    // add_image_size( '424x424', 424, 424, true );
+    // add_image_size( '1920', 1920, 9999 );
 }
 add_action('after_setup_theme', 'custom_setup');
 
 // remove default image sizes to avoid overcharging server - comment line if you need size
 function remove_default_image_sizes( $sizes) {
-	unset( $sizes['large']);
-	unset( $sizes['medium']);
-	unset( $sizes['medium_large']);
-	return $sizes;
+    unset( $sizes['large']);
+    unset( $sizes['medium']);
+    unset( $sizes['medium_large']);
+    return $sizes;
 }
 add_filter('intermediate_image_sizes_advanced', 'remove_default_image_sizes');
 
@@ -60,13 +60,13 @@ function remove_default_image_sizes( $sizes) {
 
 // Giving credits
 function remove_footer_admin () {
-	echo 'Thème crée par <a href="http://www.olivier-guilleux.com" target="_blank">Olivier Guilleux</a>';
+    echo 'Thème crée par <a href="http://www.olivier-guilleux.com" target="_blank">Olivier Guilleux</a>';
 }
 add_filter('admin_footer_text', 'remove_footer_admin');
 
 // Move Yoast to bottom
 function yoasttobottom() {
-	return 'low';
+    return 'low';
 }
 add_filter( 'wpseo_metabox_prio', 'yoasttobottom');
 
@@ -75,27 +75,28 @@ function yoasttobottom() {
 remove_action('wp_print_styles', 'print_emoji_styles');
 remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
 remove_action( 'admin_print_styles', 'print_emoji_styles' );
+remove_action('wp_head', 'wp_generator');
 
 // delete wp-embed.js from footer
 function my_deregister_scripts() {
-	wp_deregister_script( 'wp-embed' );
+    wp_deregister_script( 'wp-embed' );
 }
 add_action( 'wp_footer', 'my_deregister_scripts' );
 
 // delete jquery migrate
 function dequeue_jquery_migrate( &$scripts){
-	if(!is_admin()){
-		$scripts->remove( 'jquery');
-		$scripts->add('jquery', 'https://code.jquery.com/jquery-3.6.1.min.js', null, null, true );
-	}
+    if(!is_admin()){
+        $scripts->remove( 'jquery');
+        $scripts->add('jquery', 'https://code.jquery.com/jquery-3.6.1.min.js', null, null, true );
+    }
 }
 add_filter( 'wp_default_scripts', 'dequeue_jquery_migrate' );
 
 // add SVG to allowed file uploads
 function add_file_types_to_uploads($mime_types) {
-	$mime_types['svg'] = 'image/svg+xml';
+    $mime_types['svg'] = 'image/svg+xml';
 
-	return $mime_types;
+    return $mime_types;
 }
 add_action('upload_mimes', 'add_file_types_to_uploads', 1, 1);
 

configure/js-css.php

@@ -1,19 +1,87 @@
 <?php
 
-function _add_javascript() {
+// Define dist directory, base uri, and path
+define( 'DIST_DIR', 'assets/dist' );
+define( 'DIST_URI', get_template_directory_uri() . '/' . DIST_DIR );
+define( 'DIST_PATH', get_template_directory() . '/' . DIST_DIR );
+
+// default server address, port, and entry point can be customized in vite.config.js
+define( 'VITE_SERVER', 'http://localhost:5173' );
+define( 'VITE_BUILD', file_exists( DIST_PATH . '/.vite/manifest.json' ) );
+
+// add assets bundled by vite
+function add_vite_assets() {
+	// add your custom js files here
+	$js_files = [
+		'main' => 'main.js'
+	];
+
+	// add your custom scss files here
+	$scss_files = [
+		'main' => 'main.scss'
+	];
+
+	if ( VITE_BUILD ) {
+		$manifest = json_decode( file_get_contents( DIST_PATH . '/.vite/manifest.json' ), true );
+	}
+
+	foreach ( $js_files as $handle => $file ) {
+		$js_uri = VITE_SERVER . '/assets/src/js/' . $file;
+		if ( VITE_BUILD ) {
+			$js_uri = DIST_URI . '/' . $manifest[ 'assets/src/js/' . $file ]['file'];
+		}
+
+		wp_register_script( $handle, $js_uri, null, null, true );
+		$vars = array(
+//			'ajaxUrl' => admin_url( 'admin-ajax.php' ), // uncomment to use - in your js : siteVars.ajaxUrl
+		);
+		wp_localize_script( $handle, 'siteVars', $vars );
+		wp_enqueue_script( $handle );
+	}
+
+	foreach ( $scss_files as $handle => $file ) {
+		$css_uri = VITE_SERVER . '/assets/src/scss/' . $file;
+		if ( VITE_BUILD ) {
+			$css_uri = DIST_URI . '/' . $manifest[ 'assets/src/scss/' . $file ]['file'];
+		}
+
+		wp_enqueue_style( $handle, $css_uri, null, null );
+	}
+}
+
+add_action( 'wp_enqueue_scripts', 'add_vite_assets', 100 );
+
+function vite_client_head_hook() {
+	if ( ! VITE_BUILD ) {
+		echo '<script type="module" crossorigin src="' . VITE_SERVER . '/@vite/client"></script>';
+	}
+}
+
+add_action( 'wp_head', 'vite_client_head_hook' );
+
+function add_module_type_attribute( $tag, $handle, $src ) {
+	// The handles of the enqueued scripts we want to modify
+	if ( 'main' === $handle && ! VITE_BUILD ) {
+		return '<script type="module" src="' . esc_url( $src ) . '" crossorigin></script>';
+	}
+
+	return $tag;
+}
+
+add_filter( 'script_loader_tag', 'add_module_type_attribute', 10, 3 );
+add_filter( 'style_loader_tag', 'add_module_type_attribute', 10, 3 );
+
+function cleaning_wordpress() {
     // force all scripts to load in footer
     remove_action('wp_head', 'wp_print_scripts');
     remove_action('wp_head', 'wp_print_head_scripts', 9);
     remove_action('wp_head', 'wp_enqueue_scripts', 1);
+
+	// removing all WP css files enqueued by default
+	wp_dequeue_style('wp-block-library');
+	wp_dequeue_style('wp-block-library-theme');
+	wp_dequeue_style('wc-block-style');
+	wp_dequeue_style('global-styles');
+	wp_dequeue_style('classic-theme-styles');
 }
-add_action('wp_enqueue_scripts', '_add_javascript', 100);
-
-function _add_stylesheets() {
-    // removing all WP css files enqueued by default
-    wp_dequeue_style('wp-block-library');
-    wp_dequeue_style('wp-block-library-theme');
-    wp_dequeue_style('wc-block-style');
-    wp_dequeue_style('global-styles');
-    wp_dequeue_style('classic-theme-styles');
-}
-add_action('wp_enqueue_scripts', '_add_stylesheets');
+add_action('wp_enqueue_scripts', 'cleaning_wordpress', 100);

configure/utilities.php

@@ -1,3 +1,5 @@
 <?php
 
-// Utilities functions here
+function get_static_dir() {
+	return get_template_directory_uri() . '/static';
+}

footer.php

@@ -1,9 +1,9 @@
 
-	</div><!-- #content -->
+  </div><!-- #content -->
 
-	<footer id="colophon" class="site-footer">
-		
-	</footer><!-- #colophon -->
+  <footer id="colophon" class="site-footer">
+
+  </footer><!-- #colophon -->
 </div><!-- #page -->
 
 <?php wp_footer(); ?>

functions.php

@@ -1,9 +1,5 @@
 <?php
 
-// VITE CONFIG
-
-include( 'configure/vite.php' );
-
 // CPT TAXONOMY
 
 include( 'configure/cpt-taxonomy.php' );