Adding search toggle to twentysixteen child theme

  • Resolved cse7

    (@cse7)


    9 years, 1 month ago

    I would like to add the search toggle function from TwentyFourteen to my TwentySixteen child theme. I have the CSS working, and need help with the script to make the search box apper and disapper. I tried copying the search toggle portion of the TwentyFourteen functions.js to a separate fine in my child theme. What am I missing.

    Here’s what I copied to the child theme:

    ( function( $ ) {
		// Search toggle.
		$( '.search-toggle' ).on( 'click.child-theme', function( event ) {
			var that    = $( this ),
				wrapper = $( '#search-container' ),
				container = that.find( 'a' );

			that.toggleClass( 'active' );
			wrapper.toggleClass( 'hide' );

			if ( that.hasClass( 'active' ) ) {
				container.attr( 'aria-expanded', 'true' );
			} else {
				container.attr( 'aria-expanded', 'false' );
			}

			if ( that.is( '.active' ) || $( '.search-toggle .screen-reader-text' )[0] === event.target ) {
				wrapper.find( '.search-field' ).focus();
			}
		} );
} )( jQuery );
Viewing 8 replies - 16 through 23 (of 23 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Which plugin are you using for this wp-admin authentication? Have you tried deactivating it to see whether it’s related to that? https://ewingconsulting.com/demo/wp-admin

    Thread Starter cse7

    (@cse7)

    A am using a plain version of WordPress 4.4.1 and of TwentySixteen. The only changes other than styling are the ones we are discussing here. The site works fine again (without the search-toggle function) when I deactivate the customized functions.php file.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    That’s weird, when I go to your wp-admin page I am greeted with a login popup window. This is why I don’t believe it’s a complete standard install.

    Thread Starter cse7

    (@cse7)

    I have deactivated the customized functions.php file in my child theme.

    If I activate the customized functions,php file, I get a blank page when I go to https://ewingconsulting.com/demo/wp-admin

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try removing the ?> bit from your child theme functions.php file. So you end up with this:

    <?php
function load_my_scripts() {
    wp_enqueue_script( 'search-toggle', get_stylesheet_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'load_my_scripts');

    Thread Starter cse7

    (@cse7)

    No luck making that change.
    The functions.php file in the child theme is supposed to add to the instructions of the function.php file in the parent theme, so I don’t yet understand what is happening. I tested simple php code in the child functions.php to display the date, and it worked as expected.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try using a different and more unique function name instead of load_my_scripts, e.g.:

    <?php
function child_scripts() {
    wp_enqueue_script( 'search-toggle', get_stylesheet_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'child_scripts');

    Thread Starter cse7

    (@cse7)

    Here’s what works:

    <?php
// register custom script location, dependencies and version
   wp_register_script('search-toggle',  get_stylesheet_directory_uri() . '/js/functions.js',
       array(),'1.0', true );
// enqueue the script
   wp_enqueue_script('search-toggle');
?>

    I’ll keep testing the complete site, and I expect no surprises. Thanks for your help and patience.

Viewing 8 replies - 16 through 23 (of 23 total)
  • The topic ‘Adding search toggle to twentysixteen child theme’ is closed to new replies.