Handbook Examples: Stylesheets and Scripts

Let us continue with making some examples, shall we?

This one will focus on scripts and stylesheets.

No hard coding of scripts, styles and Favicons unless a browser workaround script. Everything should be enqueued.

This does include the main stylesheet. I’ll start with a few:

Example:

All stylesheets must be enqueued.

add_action( 'wp_enqueue_scripts', 'my_parent_theme_css' );
function my_parent_theme_css() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
}

Example:

No hard-coding of scripts.

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/theme-slider.js"></script>
<script>
jQuery( document ).ready( function( $ ){
    $( '.slider' ).fancySlider({
        'autoplay': <?php echo get_theme_mod( 'slider-autoplay', true ); ?>,
        'navStyle': '<?php echo get_theme_mod( 'nav-style', 'circles' ); ?>',
        });
});
</script>

In the functions file:

add_action( 'wp_enqueue_scripts', 'my_theme_slider_options' );
function my_theme_slider_options(){
    wp_enqueue_script( 'theme-slider', get_template_directory_uri() . '/js/theme-slider.js', array( 'jquery' ) );
    wp_enqueue_script( 'theme-slider-init', get_template_directory_uri() . '/js/init.js', array( 'jquery', 'theme-slider' ) );
    // get user options
    $options = array();
    $options['autoplay'] = get_theme_mod( 'slider-autoplay', true );
    $options['navigation_style'] = get_theme_mod( 'nav-style', 'circles' );
    
    wp_localize_script( 'theme-slider-init', 'themeSliderOptions', $options );
}

In the JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser.
https://www.javascript.com file:

jQuery( document ).ready( function( $ ){
    $( '.slider' ).fancySlider({
        'autoplay': themeSliderOptions.autoplay,
        'navStyle': themeSliderOptions.navigation_style,
        });
});

So, let’s share more examples and fill that handbook!