I need help implementing a Javascript code into my PHP file that would replace the default search box with a new one. Do I have to use echo? How would it look like? Thanks in advance or your help, I've been trying for hours now.
$(function () {
$('a[href="#search"]').on('click', function(event) {
event.preventDefault();
$('#search').addClass('open');
$('#search > form > input[type="search"]').focus();
});
$('#search, #search button.close').on('click keyup', function(event) {
if (event.target == this || event.target.className == 'close' || event.keyCode == 27) {
$(this).removeClass('open');
}
});
Implement to this PHP:
<?php
//Header File
if ( ! defined( 'ABSPATH' ) ) exit;
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<?php
wp_head();
?>
</head>
<body <?php body_class(); ?>>
<div id="global" class="global">
<div class="pagesidebar">
<div class="sidebarcontent">
<h2 id="sidelogo">
<a href="<?php echo vibe_site_url(); ?>"><img src="<?php echo apply_filters('wplms_logo_url',VIBE_URL.'/assets/images/logo.png','pagesidebar'); ?>" alt="<?php echo get_bloginfo('name'); ?>" /></a>
</h2>
<?php
$args = apply_filters('wplms-mobile-menu',array(
'theme_location' => 'mobile-menu',
'container' => '',
'menu_class' => 'sidemenu',
'fallback_cb' => 'vibe_set_menu',
));
wp_nav_menu( $args );
?>
</div>
<a class="sidebarclose"><span></span></a>
</div>
<div class="pusher">
<?php
$fix=vibe_get_option('header_fix');
?>
<header class="sleek transparent <?php if(isset($fix) && $fix){echo 'fix';} ?>">
<div class="<?php echo vibe_get_container(); ?>">
<div id="searchdiv">
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<div><label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" placeholder="<?php _e('Hit enter to search...','vibe'); ?>" />
<?php
$course_search=vibe_get_option('course_search');
if(isset($course_search) && $course_search)
echo '<input type="hidden" value="course" name="post_type" />';
?>
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>
</div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<?php
if(is_home()){
echo '<h1 id="logo">';
}else{
echo '<h2 id="logo">';
}
?>
<a href="<?php echo vibe_site_url(); ?>"><img src="<?php echo apply_filters('wplms_logo_url',VIBE_URL.'/assets/images/logo.png','header'); ?>" alt="<?php echo get_bloginfo('name'); ?>" /></a>
<?php
if(is_home()){
echo '</h1>';
}else{
echo '</h2>';
}
$args = apply_filters('wplms-main-menu',array(
'theme_location' => 'main-menu',
'container' => 'nav',
'menu_class' => 'menu',
'walker' => new vibe_walker,
'fallback_cb' => 'vibe_set_menu'
));
?>
<?php
if ( function_exists('bp_loggedin_user_link') && is_user_logged_in() ) :
?>
<ul class="topmenu">
<li><a href="<?php bp_loggedin_user_link(); ?>" class="smallimg vbplogin"><?php $n=vbp_current_user_notification_count(); echo ((isset($n) && $n)?'<em></em>':''); bp_loggedin_user_avatar( 'type=full' ); ?><span><?php bp_loggedin_user_fullname(); ?></span></a></li>
<?php do_action('wplms_header_top_login'); ?>
<?php
if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) || (function_exists('is_plugin_active_for_network') && is_plugin_active_for_network( 'woocommerce/woocommerce.php'))) { global $woocommerce;
?>
<li><a class="smallimg vbpcart"><span class="fa fa-shopping-cart"><?php echo (($woocommerce->cart->cart_contents_count)?'<em>'.$woocommerce->cart->cart_contents_count.'</em>':''); ?></span></a>
<div class="woocart"><?php woocommerce_mini_cart(); ?></div>
<div id="searchicon"><i class="icon-search-2"></i></div>
</li>
<?php
}
?>
</ul>
<?php wp_nav_menu( $args ); ?>
<?php
else :
?>
<ul class="topmenu">
<li><a href="#login" class="smallimg vbplogin"><span><?php _e('LOGIN','vibe'); ?></span></a></li>
<?php
if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) || (function_exists('is_plugin_active_for_network') && is_plugin_active_for_network( 'woocommerce/woocommerce.php'))) { global $woocommerce;
?>
<li><a class="smallimg vbpcart"><span class="fa fa-shopping-cart"><?php echo (($woocommerce->cart->cart_contents_count)?'<em>'.$woocommerce->cart->cart_contents_count.'</em>':''); ?></span></a>
<div class="woocart"><?php woocommerce_mini_cart(); ?></div>
<div id="searchicon"><i class="icon-search-2"></i></div>
</li>
<?php
}
?>
</ul>
<?php wp_nav_menu( $args ); ?>
<?php
endif;
?>
<?php
$style = vibe_get_login_style();
if(empty($style)){
$style='default_login';
}
?>
<div id="vibe_bp_login" class="<?php echo $style; ?>">
<?php
vibe_include_template("login/$style.php");
?>
</div>
</div>
<a id="trigger">
<span class="lines"></span>
</a>
</div>
</header>
