How to Add Search to a Static WordPress Site for Free Using Lunr

Click on Save to use the modifications.

Create a search check web page 🔎

After efficiently including Lunr.js to your header template, the subsequent step is to create a devoted search web page the place your website guests will go to allow them to search your website:

Out of your WordPress dashboard, go to Pages → Add New Web page.

When you’re contained in the block editor, you will get to work.

First, give the web page a reputation. There’s no should be inventive right here. “Search” or “Search + Your Web site’s Title” will most likely work for 99% of internet sites.

Subsequent, add a Group block to comprise every little thing:

Click on the + icon, kind group into the search area and choose the Group block. Then click on on the primary choice, which simply seems like a single rectangle:

Contained in the Group block, add the next:

• A Heading block with textual content like “Search Our Web site.”
• A Paragraph block with transient directions (e.g., “Kind what you’re on the lookout for. Be descriptive, however concise”).

Ensure that as you might be including the 2 blocks that you just faucet the far left button so whenever you click on the + icon, it’ll be contained in the Group dad or mum block:

Now for the essential half – you must add an HTML block for the search interface. Be sure you are contained in the Group dad or mum block after which:

• Click on the + icon so as to add a brand new block.
• Seek for html and choose the Customized HTML block.
• Paste the next code into it:

<div class="lunr-search-container">
  <div class="lunr-search-form">
    <enter kind="textual content" id="lunr-search-input" placeholder="Seek for..." class="lunr-search-input">
    <button id="lunr-search-button" class="lunr-search-button">Search</button>
  </div>
  <div id="lunr-search-results" class="lunr-search-results"></div>
</div>Code language: JavaScript (javascript)

Under this, add three extra HTML blocks.

The code for the primary one will add a word on learn how to use two search operators – the wildcard and precise match – for various wants:

<div class="search-tips">
  <small>
    <robust>Search ideas:</robust> 
    Use * for partial matches (i.e., design* finds design, designer) and " " for precise phrases (i.e., "static website").
  </small>
</div>Code language: HTML, XML (xml)

You would technically additionally add the above as only a common paragraph block, however utilizing the <div class="search-tips"> permits for some minor styling that will get pulled from the subsequent block under. Should you do select to make use of a paragraph block as a substitute, it is best to nonetheless add the CSS code 👇🏻 as a result of it units the search for your complete search block. The search ideas are solely a small a part of that.

<type>
  .lunr-search-container {
    max-width: 600px;
    margin: 40px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  }
  
  .lunr-search-form {
    show: flex;
    hole: 10px; 
  }
  
  .lunr-search-input {
    flex: 1;
    padding: 12px 15px;
    font-size: 16px;
    border: 2px stable #ddd;
    border-radius: 4px;
    define: none;
    transition: border-color 0.2s;
  }
  
  .lunr-search-input:focus {
    border-color: #0073aa;
  }
  
  .lunr-search-button {
    padding: 12px 24px;
    font-size: 16px;
    background-color: #0073aa;
    coloration: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
  }
  
  .lunr-search-button:hover {
    background-color: #005177;
  }
  
  
  .search-tips {
    margin-top: 20px;
    margin-bottom: 15px;
    opacity: 0.8;
    font-size: 1.0em;
  }
  
  .lunr-search-results {
    margin-top: 30px;
    min-height: 50px;
  }
  
  .lunr-result-item {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px stable #eee;
  }
  
  .lunr-result-title {
    font-size: 18px;
    font-weight: daring;
    margin-bottom: 8px;
  }
  
  .lunr-result-title a {
    coloration: #0073aa;
    text-decoration: none;
  }
  
  .lunr-result-snippet {
    font-size: 14px;
    line-height: 1.6;
    coloration: #555;
  }
  
  .lunr-no-results {
    font-style: italic;
    coloration: #777;
  }
  
  
  .lunr-highlight {
    background-color: #ffeb3b;
    padding: 0 2px;
    border-radius: 2px;
  }
</type>Code language: HTML, XML (xml)

The third one is definitely only a placeholder. It is going to ultimately comprise your JavaScript code however you’re including the placeholder for now so you may check it to ensure every little thing is working correctly:

<script>
  doc.addEventListener('DOMContentLoaded', operate() {
    
    console.log('Search web page loaded and prepared for Lunr implementation');
    
    
    const searchInput = doc.getElementById('lunr-search-input');
    const searchButton = doc.getElementById('lunr-search-button');
    const resultsContainer = doc.getElementById('lunr-search-results');
    
    
    searchButton.addEventListener('click on', operate() {
      resultsContainer.innerHTML = '<p>Search performance coming quickly! You looked for: <robust>' + 
        searchInput.worth + '</robust></p>';
    });
  });
</script>Code language: HTML, XML (xml)

Testing is the subsequent step, however earlier than you try this, rapidly do yet one more spot test to make sure that all the blocks had been added contained in the Group block. It is best to see a skinny line that surrounds every little thing with all six of your blocks (i.e., heading, paragraph, 4 HTML) within it:

Testing the search interface

Subsequent, click on on Save Draft on the highest proper after which the preview button to see what your search web page seems like on the frontend of your website.

Strive typing one thing within the search field and clicking the Search button. It is best to see a message that claims Search performance coming quickly! adopted by no matter you typed.

If every little thing shows accurately, congratulations! You’ve efficiently arrange the search interface. The search gained’t really work but since you haven’t created your search index, however the basis is in place.

Return to the block editor tab and click on on Publish. You’re now prepared for section two.

Section two: Create a search index generator 🏗️

For Lunr.js, your search index must be a structured JSON file that incorporates all of the searchable content material out of your WordPress website. This file will get loaded by your JavaScript code when somebody visits the search web page. Though the JSON file might be created manually, it’s extra environment friendly to automate it. For that, you’ll want a mini custom-made plugin.

First, open up Native by Flywheel and make it possible for the location you might be engaged on is chosen (when you’ve got multiple website). Then do the next:

• Faucet on the Web site folder situated immediately under your website title on the high. This can open up Finder on Mac (proven under) or File Supervisor on Home windows and also you’ll see some folders there.
• Go into app, adopted by public, adopted by wp-content, and eventually plugins.
• Inside plugins, create a brand new folder referred to as lunr-index-generator: