Function — Enqueue custom CSS and JS - martindubenet/Wordpress GitHub Wiki
Because I want the proper way to load my compiled Sass (.scss) files as my theme stylesheet within wp_head and add more JavaScript files within the wp_foot.
I want to load css/child-theme.* ONLY if this is a CHILD THEME. Otherwise load the (parent) css/theme.*.
And I also want to load the extended .css and .css.map files to use my web-inspector when developping on my workstation's localhost.
Versionning files fix the cached CSS issues. So if localhost, $fakeVersionNumber match the date as « Year+Day+Hours+Min+Sec ». Else, $fakeVersionNumber match only « Year+Day » so the version change once a day.
get_template_directory_uri()= Parent theme's inner path.
get_stylesheet_directory_uri()= Child theme's inner path.
Edit /functions.php and add the following code to it:
/**
* Enqueue scripts and styles with conditionnal REMOTE_ADDR.
*/
function myTheme_scripts() {
// if DEV on localhost
if (in_array($_SERVER['REMOTE_ADDR'], array('127.0.0.1', '::1'))) {
$wpubp1_devOnLocalhost = true;
$wpubp1_fakeVersionNumber = date('yzHi.s'); // renewed every seconds
} else {
$wpubp1_devOnLocalhost = false;
$wpubp1_fakeVersionNumber = date('y.W'); // renewed once a week.
}
// List all stylesheets
wp_register_style( 'myTheme-minified', get_template_directory_uri() . '/css/theme.min.css', array(), null, 'all' );
wp_register_style( 'myTheme-local', get_template_directory_uri() . '/css/theme.css', array(), $wpubp1_fakeVersionNumber, 'all' );
wp_register_style( 'myTheme-localmap', get_template_directory_uri() . '/css/theme.css.map', array(),
$wpubp1_fakeVersionNumber, 'all' );
wp_register_style( 'myTheme-childtheme-minified', get_stylesheet_directory_uri() . '/css/child-theme.min.css', array(),
$wpubp1_fakeVersionNumber, 'all' );
wp_register_style( 'myTheme-childtheme-local', get_stylesheet_directory_uri() . '/css/child-theme.css', array(),
$wpubp1_fakeVersionNumber, 'all' );
wp_register_style( 'myTheme-childtheme-localmap', get_stylesheet_directory_uri() . '/css/child-theme.css.map', array(),
$wpubp1_fakeVersionNumber, 'all' );
// Enqueue all stylesheets
wp_enqueue_style( 'wp_style', get_stylesheet_uri() );
// if DEV on localhost
if ($wpubp1_devOnLocalhost = true) {
// IF this theme URI is not equal to parent theme URI
if ( get_template_directory_uri() != get_stylesheet_directory_uri() ) {
// load the `child-theme.css`
wp_enqueue_style( 'myTheme-childtheme-local' );
wp_enqueue_style( 'myTheme-childtheme-localmap' );
} else {
// load the `theme.css`
wp_enqueue_style( 'myTheme-local' );
wp_enqueue_style( 'myTheme-localmap' );
}
} else {
// IF this theme URI is not equal to parent theme URI
if ( get_template_directory_uri() != get_stylesheet_directory_uri() ) {
wp_enqueue_style( 'myTheme-childtheme-minified' );
} else {
wp_enqueue_style( 'myTheme-minified' );
}
}
// bootstrap4 required scripts
wp_enqueue_script( 'bs4_jquery3', 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js', null, null, false ); // false = <header>
wp_enqueue_script( 'bs4_popperjs', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/popper.min.js', null, null, true );
wp_enqueue_script( 'bs4_minified', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', null, null, true );
// underscores scripts
wp_enqueue_script( 'myTheme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), $wpubp1_fakeVersionNumber, true );
wp_enqueue_script( 'myTheme-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), $wpubp1_fakeVersionNumber, true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
// custom scripts
wp_enqueue_script( 'myTheme-ux', get_template_directory_uri() . '/js/theme.js', array(), $wpubp1_fakeVersionNumber, true );
}
add_action( 'wp_enqueue_scripts', 'myTheme_scripts' );