Web - [Tutorial #26] Search in Wordpress 2: Search Menu Tab

Contents

Introduction
Implementation
Custom Link Search Tab
JavaScript Codes
Search Pages
404 Not Found Template

Introduction

In last tutorial we created the search form as modal and the search result page. Now we need a way to invoke the search form.

On ModernBlackHand we invoke the search form through a menu tab, as the header menu is always present in every page. We further use some JavaScript to change the “search” text into Font Awesome’s search icon.

Implementation

Our search menu tab implementation involves two steps:

Create a Custom Links tab for search.
Add JavaScript function to modify search tab appearance and action.

The main reason we need #2 is because wordpress does not allow emptied name tab (as we want to use a search icon). Also we prefer to specify most of the HTML attributes in the theme rather than in the admin panel, as it makes reusing theme harder.

Custom Link Search Tab

Go to Appearance -> Menus and select the header menu. At the left column open Custom Links drop-down.

Input url as http://# for the modal and Link Text as “Search”. Add it to the menu.

Custom Links menu tab.

Once the tab is added we need a way to identify it for JavaScript. Using wordpress’ auto-assigned class is not good, as if we remove and re-add the tab the class name will change. Thus we add our own class menu-item-search by opening the drop-down and add it inside the CSS Classes tab:

Adding our CSS class for identification.

JavaScript Codes

The code segment in our JS file assets/js/main.js is as follows. You can also find the file on my Github.

///////////////////////////////////////////                                                                                                                
//Replace  menu item by search icon                                                                                                                  // prerequisite: must define the class 'menu-item-search'
////////////////////////////////////////
$(".menu-item-search a").each( function(){
  //remove placeholder text
  $(this).text("");
  //add search icon css
  $(this).addClass("fa fa-search");
  //add modal toggle attributes
  $(this).attr("data-toggle","modal").attr("data-target","#mySearch");

});

///////////////////////////////////////////

//Replace menu item by search icon // prerequisite: must define the class 'menu-item-search'

////////////////////////////////////////

$(".menu-item-search a").each( function(){

//remove placeholder text

$(this).text("");

//add search icon css

$(this).addClass("fa fa-search");

//add modal toggle attributes

$(this).attr("data-toggle","modal").attr("data-target","#mySearch");

});

Wordpress renders the header tab via a list item <li class="menu-item-search ..."> tag and put a link tag <a> tag inside, so for the jQuery selector in line 4 we get the <a> tag accordingly.

We then go through each <a> tag element and:

Remove its text (line 6).
Add Font Awesome search icon classes (line 8).
Add modal classes linking to the search form (line 10).

Search Pages

It’s time to see how our search pages look:

Search menu tab.

Popup search tab.

Search result page.

404 Not Found Template

To close this tutorial, we customize 404.php template that is shown when the url is not found. The codes are as follows (the file can be found on my Github):

<?php
/**
 * The template for displaying 404 pages (not found).
 *
 * @link https://codex.wordpress.org/Creating_an_Error_404_Page
 *
 * @package Multitopics
 */
get_header(); ?>

<section id="error-404">
	<div class="container">

                <div class="row">

                        <main class="col-sm-8 col-sm-offset-2">

                                <div class="error-404 not-found">
					<h1>

				<?php if(get_locale() == 'zh_TW') : ?>
					尋文啓示:
				<?php else : ?>	
					Have You Seen Me?
				<?php endif; ?>

						
					</h1>
                                        <div class="error-404-img-window">
						<img class="error-404-img"  src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/not_found.png" alt="404 not found">
					</div><!-- .page-content -->
					<h1>
				<?php if(get_locale() == 'zh_TW') : ?>
					不好意思, 此文不見了.
				<?php else : ?>	
					Sorry, Page Not Found.
				<?php endif; ?>

					</h1>

                                </div><!-- .error-404 -->

                        </main><!-- #content -->

                </div><!-- #primary -->

        </div><!-- .container -->
	
</section>

<?php get_footer(); ?>

<?php

/**

* The template for displaying 404 pages (not found).

* @link https://codex.wordpress.org/Creating_an_Error_404_Page

* @package Multitopics

get_header(); ?>

<h1>

<?php if(get_locale() == 'zh_TW') : ?>

尋文啓示:

<?php else : ?>

Have You Seen Me?

<?php endif; ?>

</h1>

<img class="error-404-img" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/not_found.png" alt="404 not found">

</div>

<h1>

<?php if(get_locale() == 'zh_TW') : ?>

不好意思, 此文不見了.

<?php else : ?>

Sorry, Page Not Found.

<?php endif; ?>

</h1>

</div>

</main>

</div>

</div>

</section>

<?php get_footer(); ?>

The structure is very simple, with a centered Bootstrap column (line 16) showing two <h1> header tags and an image.

[Tutorial #26] Search in WordPress 2: Search Menu Tab