Templates are a great way to make a theme unique and special. Making sure you are using the right one can tricky. This week let us focus on templates.

Required: If used in theme, standard template files are required to be called using the correct template tag:

If you have more examples, post them, share them.

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!

Another round of examples, shall we? This one will focus on language examples.

I’ll start it off:

Required: load_theme_textdomain()

add_action( 'after_setup_theme', 'my_theme_setup' );
function my_theme_setup(){
    load_theme_textdomain( 'slug-text-domain', get_template_directory() . '/languages' );
}
// if child theme
add_action( 'after_setup_theme', 'my_child_domain', 11 );
function my_child_domain(){
    load_child_theme_textdomain( 'child-text-domain', get_stylesheet_directory() . '/languages'
}

Any good theme has some documentation. A video tutorial on how to setup some basic options, a specific page on how to use hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same. inside of the theme. How to make child themeChild theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/. or even a simple how to install the theme. These are examples of documentation. Let’s keep this going by leaving a comment below on some documentation examples.

I’ll start it off:

Action hook

/*
 * Fires before the opening #page tag
 */
function theme_before_page(){
    do_action( 'theme_before_page' );
}

FilterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. hook

/*
 * Returns a specified width for the slider
 * 
 * Usage:
 * add_filter( 'theme_slider_width', 'my_callback' );
 * function my_callback(){
 *     return 755;
 * }
 */
$width = intval( apply_filters( 'theme_slider_width', 600 ) );