0

I want to add custom overlay search to my WordPress site using add action. Somehow, it is not triggering the javascripts to show the overlay html. However, it is working in a browser when I test simply in browser by saving as html, can be checked here. How can I properly add them n functions.php to run these codes.

Here is my codes which I add to functions.php. Even, the scripts are also present when the page loads. The searchbox contains the onclick event.

The form code

<form method="get" id="search" action="https://tatest.tutorialsart.com/">
    <input id="search-input"  inputmode="search" onclick="openSearch()" type="text" name="s" title="Search for" placeholder="Search for" />
        <button id="search-submit" type="submit">
                <span class="tie-icon-search tie-search-icon" aria-hidden="true"></span>
                <span class="screen-reader-text">Search for</span>
        </button>
                
 </form>

The scripts for triggering the overlay in functions.php

add_action( 'wp_footer', 'Search_trigger_script' );
function Search_trigger_script() {
?>
<script type="text/javascript">
function openSearch() {
  document.getElementById("myOverlay").style.display = "block";
}

function closeSearch() {
  document.getElementById("myOverlay").style.display = "none";
}

</script>
<?php
}

The html overlay code in functions.php

add_action( 'wp_footer', 'Search_overlay_html' );
function Search_overlay_html() {
?>

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
  font-family: Arial;
}

* {
  box-sizing: border-box;
}

.openBtn {
  background: #f1f1f1;
  border: none;
  padding: 10px 15px;
  font-size: 20px;
  cursor: pointer;
}

.openBtn:hover {
  background: #bbb;
}

.overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
}

.overlay-content {
  position: relative;
  top: 2%;
  width: 80%;
  text-align: center;
  margin-top: 30px;
  margin: auto;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  cursor: pointer;
  color: white;
}

.overlay .closebtn:hover {
  color: #ccc;
}

.overlay input[type=text] {
  padding: 15px;
  font-size: 17px;
  border: none;
  float: left;
  width: 80%;
  background: white;
}

.overlay input[type=text]:hover {
  background: #f1f1f1;
}

.overlay button {
  float: left;
  width: 20%;
  padding: 15px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.overlay button:hover {
  background: #bbb;
}
</style>
</head>
<body>

<div id="myOverlay" class="overlay">
  <span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span>
  <div class="overlay-content">
    <form action="/action_page.php">
      <input type="text" placeholder="Search.." name="search">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
</div>
</body>
</html> 

<?php
}
Improve this question

2 Answers 2

Reset to default
0

First you need to edit your searchform.php file. If you are using get_search_form(); read this . In case you use search widget you need to override the Widget.

If you dont want to use searchform.php you can go with filter:

function wpdocs_my_search_form( $form ) {
    $form = '<form role="search" method="get" id="searchform" class="searchform" action="' . home_url( '/' ) . '" >
    <div><label class="screen-reader-text" for="s">' . __( 'Search for:' ) . '</label>
    <input type="text" value="' . get_search_query() . '" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="'. esc_attr__( 'Search' ) .'" />
    </div>
    </form>';
 
    return $form;
}
add_filter( 'get_search_form', 'wpdocs_my_search_form' );

After that your wordpress search form should contain onclick="openSearch()". You can use Twenty twenty one theme as example. I have tested your code and its working. See screenshots - https://prnt.sc/1qloaxz https://prnt.sc/1qlof07

I would just go with JS or jQuery to target the overlay form.

 JS
    <script>
        window.onload = function() {
            var element = document.getElementsByClassName('target-class');
              element.onclick = function() {
                  alert('Success');
              }
        }
    </script>

jQuery
<script>
    jQuery(document).ready(function() {
        jQuery('.target-class').click(function() {
            alert('Success');
        });
    });
</script>
Improve this answer
0

Added the ajax script

<script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

and the z-index for the the overlay has to be higher than any other styles. The onclick event was working hewer the results were not appearing. Setting z-index value higher showed the results working. So

  .overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
}
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.