Site icon Hip-Hop Website Design and Development

Modifying youngster theme’s header

I am a noob.

I’ve copied the header.php from the mum or dad theme, I’ve added some snippets and issues work. Nonetheless, I would love to have the ability to add those self same snippets both utilizing a plugin or by way of features.php so when/if the theme is up to date, I needn’t redo all the pieces. I’ve tried many issues however none of them work. I’m wondering if the issue is the place the snippets are positioned by utilizing a plugin or that the HTML ingredient that I am making an attempt to change must be written otherwise… I am fairly misplaced.

I’ve added these inside the pinnacle ingredient:

    <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>

after which 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',
                ],{
                period:4000, // Time between transitions
                fade:1000, // Transition impact
                });</script>

Lastly, right here is the total header.php

<?php
/**
 * The Header for our theme.
 * Shows all the <head> part and all the pieces up until <div id="wrap">
 *
 * @bundle Block Lite
 * @since Block Lite 1.0
 */

?><!DOCTYPE html>

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

<head>

    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta title="viewport" content material="width=device-width, initial-scale=1">
    <hyperlink 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>

<physique <?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="house"><?php echo wp_kses_post( get_bloginfo( 'title' ) ); ?></a>
            </h1>
        <?php } else { ?>
            <p class="site-title">
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="house"><?php echo wp_kses_post( get_bloginfo( 'title' ) ); ?></a>
            </p>
        <?php } ?>

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

            <!-- BEGIN #navigation -->
            <nav id="navigation" class="navigation-main" function="navigation" aria-label="<?php esc_html_e( 'Major 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" function="menubar">%3$s</ul>',
                    'link_before'    => '<span>',
                    'link_after'     => '</span>',
                ) );
                ?>

            <!-- END #navigation -->
            </nav>

            <button sort="button" id="menu-toggle" class="menu-toggle" href="#sidr">
                <svg class="icon-menu-open" model="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" top="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:house="protect">
                    <rect y="2" width="24" top="2"/>
                    <rect y="11" width="24" top="2"/>
                    <rect y="20" width="24" top="2"/>
                </svg>
                <svg class="icon-menu-close" model="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" top="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:house="protect">
                    <rect x="0" y="11" remodel="matrix(-0.7071 -0.7071 0.7071 -0.7071 12 28.9706)" width="24" top="2"/>
                    <rect x="0" y="11" remodel="matrix(-0.7071 0.7071 -0.7071 -0.7071 28.9706 12)" width="24" top="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',
                ],{
                period:4000, // Time between transitions
                fade:1000, // Transition impact
                });</script>                

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

            <?php } ?>

        <?php } ?>

    <!-- END #header -->
    </header>

    <!-- BEGIN .container -->
    <important class="container" function="important">