How I Built a Custom Search for My Static WordPress Site

I’ve converted all my WordPress sites into static sites using custom Python scripts.

The transition has been amazing, but there’s always one sticky problem when you leave a server-side WordPress setup behind: search. Since static sites don’t have a database to query, the default WordPress search form is useless.

I initially tried Google’s Programmable Search Engine, but honestly, I never liked it. It was too difficult to customize, and I eventually just took it down.

Then, I realized that building a simple, custom search engine for my small site might not be as hard as I thought. So, I did what any dude with no coding skills would do, I asked an AI bot how to do it.

Here’s what I ended up doing :

• Data Creation: Since there’s no database, I used a simple WordPress mu-plugin to generate a JSON data file containing all the necessary post, page, and custom post type information.
• Front-end: I added a little bit of HTML to the menu to display the search bar.
• Styling: I also added some CSS tweaks to make sure the search form perfectly matches the rest of the navigation.
• Logic: Simple JavaScript to perform the search against the static data file and display the results.

That was it! After some testing and fine-tuning, I now have a functional search form that works perfectly on my static website.

---

Code to Create JSON File

This is the mu-plugin to generate the custom JSON File

<?php
/**
 * Plugin Name: Static Search JSON Generator
 * Description: Generates search.json for Posts, Pages, and Apps for your local WordPress Website. 
 * Version: 1.5
 * Author: TicoLibre
 */
if ( ! defined( 'ABSPATH' ) ) {
    exit; 
}
function ssg_create_search_json( $post_id = null ) {
    // 1. SAFETY CHECKS
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
    if ( $post_id && wp_is_post_revision( $post_id ) ) return;
    // 'aplicaciones' is the internal ID from your register_post_type function
    $target_types = array( 'post', 'page','examples' );
    // Optimization: Only run if the saved post is one of our targets
    if ( $post_id ) {
        $post_type = get_post_type( $post_id );
        if ( ! in_array( $post_type, $target_types ) ) {
            return; 
        }
    }
    // 2. GET CONTENT
    $posts = get_posts( array(
        'numberposts' => -1,
        'post_type'   => $target_types, 
        'post_status' => 'publish',
        'orderby'     => 'date',
        'order'       => 'DESC',
    ));
    $data = array();
    // 3. BUILD DATA & SWAP URLS
    if ( ! empty( $posts ) ) {
        foreach ( $posts as $post ) {
            $local_url = get_permalink( $post->ID );
            // Replace Localhost with Production Domain
            $production_url = str_replace(
                'https://localhost:8090',      
                'https://wpsurfer.com',    
                $local_url
            );
            $data[] = array(
                'title' => $post->post_title,
                'url'   => $production_url,
            );
        }
    }
    // 4. WRITE FILE
    $file_path = ABSPATH . '/assets/files/search.json';
    $result = file_put_contents( $file_path, json_encode( $data ), LOCK_EX );
    if ( $result === false ) {
        error_log( 'Static Search Plugin: Failed to write search.json.' );
    }
}
// Hook into save and delete
add_action( 'save_post', 'ssg_create_search_json', 20, 1 );
add_action( 'delete_post', 'ssg_create_search_json', 20, 1 );

The search.json file generated contains a simple list of the title and link for every piece of content that your search script needs to find.

0	
title	"How I Built a Custom Search for My Static WordPress Site"
url	"https://wpsurfer.com/custom-search-static-wordpress-sites/"
1	
title	"How to Change the Default Media Upload Directory in WordPress"
url	"https://wpsurfer.com/change-default-media-upload-directory-wordpress/"

Now all you need to do create HTML form, style it and add functionality to it using JS.

---