Modifying child theme's header

I'm a noob.

I have copied the header.php from the parent theme, I have added some snippets and things work. However, I would like to be able to add those same snippets either using a plugin or via functions.php so when/if the theme is updated, I don't need to redo everything. I've tried many things but none of them work. I wonder if the problem is where the snippets are placed by using a plugin or that the HTML element that I'm trying to modify should be written in a different way... I'm quite lost.

I have added these inside the head element:

    script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"/script
    script src="wp-content/themes/block-lite_child/js/jquery.backstretch.js"/script

and then this to run the script:

    script$(".wp-custom-header").backstretch([  // Target your HTML element
                    '/wp-content/themes/block-lite_child/images/01.jpg',  // Add in your images
                    '/wp-content/themes/block-lite_child/images/02.jpg',
                    '/wp-content/themes/block-lite_child/images/03.jpg',
                    '/wp-content/themes/block-lite_child/images/04.jpg',
                    '/wp-content/themes/block-lite_child/images/05.jpg',
                ],{
                duration:4000, // Time between transitions
                fade:1000, // Transition effect
                });/script

Finally, here is the full header.php 

?php
/**
 * The Header for our theme.
 * Displays all of the head section and everything up till div id="wrap"
 *
 * @package Block Lite
 * @since Block Lite 1.0
 */

?!DOCTYPE html

html class="no-js" ?php language_attributes(); ?

head

    meta charset="?php bloginfo( 'charset' ); ?"
    meta name="viewport" content="width=device-width, initial-scale=1"
    link rel="profile" href="http://gmpg.org/xfn/11"
    script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"/script
    script src="wp-content/themes/block-lite_child/js/jquery.backstretch.js"/script

    ?php wp_head(); ?

/head

body ?php body_class(); ?

!-- BEGIN #wrapper --
div id="wrapper"

    !-- BEGIN #header --
    header id="header"

        !-- BEGIN #nav-bar --
        div id="nav-bar"

        ?php if ( is_front_page() ) { ?
            h1 class="site-title"
                a href="?php echo esc_url( home_url( '/' ) ); ?" rel="home"?php echo wp_kses_post( get_bloginfo( 'name' ) ); ?/a
            /h1
        ?php } else { ?
            p class="site-title"
                a href="?php echo esc_url( home_url( '/' ) ); ?" rel="home"?php echo wp_kses_post( get_bloginfo( 'name' ) ); ?/a
            /p
        ?php } ?

        ?php if ( has_nav_menu( 'main-menu' ) ) { ?

            !-- BEGIN #navigation --
            nav id="navigation" class="navigation-main" role="navigation" aria-label="?php esc_html_e( 'Primary Navigation', 'block-lite' ); ?"

                ?php
                wp_nav_menu( array(
                    'theme_location' = 'main-menu',
                    'title_li'       = '',
                    'depth'          = 4,
                    'fallback_cb'    = 'wp_page_menu',
                    'container'      = false,
                    'menu_class'     = 'menu',
                    'walker'         = new Aria_Walker_Nav_Menu(),
                    'items_wrap'     = 'ul id="%1$s" class="%2$s" role="menubar"%3$s/ul',
                    'link_before'    = 'span',
                    'link_after'     = '/span',
                ) );
                ?

            !-- END #navigation --
            /nav

            button type="button" id="menu-toggle" class="menu-toggle" href="#sidr"
                svg class="icon-menu-open" version="1.1" id="icon-open" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                    width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"
                    rect y="2" width="24" height="2"/
                    rect y="11" width="24" height="2"/
                    rect y="20" width="24" height="2"/
                /svg
                svg class="icon-menu-close" version="1.1" id="icon-close" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"
                    rect x="0" y="11" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 12 28.9706)" width="24" height="2"/
                    rect x="0" y="11" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 28.9706 12)" width="24" height="2"/
                /svg
            /button

        ?php } ?

        !-- END #nav-bar --
        /div

        ?php if ( has_custom_header() || has_custom_logo() ) { ?

            ?php if ( is_home() || is_archive() || is_search() || is_attachment() ) { ?

            !-- BEGIN #custom-header --
            div id="custom-header"

                !-- BEGIN #masthead--
                div id="masthead"

                    div class="header-content"

                        ?php the_custom_logo(); ?

                        ?php if ( is_front_page()  is_home() ) { ?
                            h2 class="site-description"?php echo html_entity_decode( get_bloginfo( 'description' ) ); ?/h2
                        ?php } else { ?
                            p class="site-description"?php echo html_entity_decode( get_bloginfo( 'description' ) ); ?/p
                        ?php } ?

                        ?php if ( have_posts()  is_category() ) { ?
                            h1 class="text-center"?php the_archive_title(); ?/h1
                            ?php the_archive_description( 'p class="archive-description"', '/p' ); ?
                        ?php } ?

                    /div

                !-- END #masthead--
                /div

                ?php if ( is_front_page()  is_home() ) { ?
                    a href="#blog-posts" class="scroll-down scroll"i class="fa fa-angle-down" aria-hidden="true"/i/a
                ?php } ?

                ?php the_custom_header_markup(); ?

                script$(".wp-custom-header").backstretch([  // Target your HTML element
                    '/wp-content/themes/block-lite_child/images/01.jpg',  // Add in your images
                    '/wp-content/themes/block-lite_child/images/02.jpg',
                    '/wp-content/themes/block-lite_child/images/03.jpg',
                    '/wp-content/themes/block-lite_child/images/04.jpg',
                    '/wp-content/themes/block-lite_child/images/05.jpg',
                ],{
                duration:4000, // Time between transitions
                fade:1000, // Transition effect
                });/script                

            !-- END #custom-header --
            /div

            ?php } ?

        ?php } ?

    !-- END #header --
    /header

    !-- BEGIN .container --
    main class="container" role="main"

Topic child-theme headers php Wordpress javascript

Category Web

1
answered at

I have copied the header.php from the parent theme, I have added some snippets and things work. However, I would like to be able to add those same snippets either using a plugin or via functions.php so when/if the theme is updated, I don't need to redo everything.

If you copied header.php to your child theme, and edited it in the child theme, then you won't lose any of the changes if the parent theme updates. That is the whole point of adding a child theme in the first place.

Also, changes made to a parent theme's functions.php will also be lost if the parent theme is updated. So you need to use a child theme or plugin regardless of how exactly the changes are made.

As to your specific problem, adding a script should not be done by editing header.php. The proper way to load scripts in WordPress is via functions.php with wp_enqueue_script(). Also, you should not be loading your own version of jQuery. When loading your script with wp_enqueue_scripts() you can tell WordPress that you need jQuery.

So what you need to do is create a child theme, without header.php, but with a functions.php file. Inside that functions.php file you should have:

/**
 * Create a function to load your scripts.
 */
function wpse_344148_custom_scripts() {
    /**
     * Enqueue your script.
     */
    wp_enqueue_script(
        'jquery-backstretch', // The name of the script.
        get_theme_file_uri( 'js/jquery.backstretch.js' ), // Use get_theme_file_uri to get the full URL to the script.
        [ 'jquery' ], // Your script depends on jQuery.
        '2.1.17', // The version of the script.
        true // Load it in the footer.
    );

    /**
     * You need to get the proper URLs to the images using get_theme_file_uri()
     * and pass them to the script. Use wp_localize_script() for this.
     */
    wp_localize_script(
        'jquery-backstretch', // The name of the original script.
        'wpse344148', // Name of the JS variable to put your data in.
        [ // The data to pass.
            get_theme_file_uri( 'images/01.jpg' ),
            get_theme_file_uri( 'images/02.jpg' ),
            get_theme_file_uri( 'images/03.jpg' ),
            get_theme_file_uri( 'images/04.jpg' ),
            get_theme_file_uri( 'images/05.jpg' ),
        ]
    );

    /**
     * Then use wp_add_inline_script() to add the inline script portion. Use
     * jQuery instead of $ in WordPress, and use wpse344148 from wp_localize_script()
     * to get the array of images.
     */
    wp_add_inline_script(
        'jquery-backstretch',  // The name of the original script.
        'jQuery(".wp-custom-header").backstretch(
            wpse344148,
            {
                duration:4000,
                fade:1000,
            }
        );'
    );
}
/**
 * Tell WordPress when to run your function. If you function loads scripts or
 * styles you need to use wp_enqueue_scripts.
 */
add_action( 'wp_enqueue_scripts', 'wpse_344148_backstretch' );
1
answered at

It's good practice to use:

  • the proper Wordpress way of wp_enqueue_scripts to add your scripts and styles;
  • the wp_head hook to add more code into your head section. Read more.

Either you can use and place into your functions.php. Let me know if it's what you were looking for.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.