Kody Search

Kody Search adds a fast dropdown search to your site. A visitor starts typing and matching
posts and pages appear straight away, with the query terms highlighted and no page reload.

Fast, and light on your server. The search index loads in a single request the first
time a visitor uses the search box. Every keystroke after that is matched in their browser,
so your server sees one request per visit, not one per keystroke, and results stay instant
no matter how many people are searching at once.

Looks like part of your site. The search box picks up your active theme’s fonts and
form styling. There is nothing to skin and no CSS to write.

Nothing to tune. No relevance weights, no ranking rules, no settings you have to get
right before results are good. Add the block and it works.

Accessible. Full keyboard navigation, correct combobox semantics, and screen reader
announcements for results.

Stays out of the way. Scripts and styles load only on pages that actually have a search
box, and the public search endpoint is rate limited against abuse.

Full page results too. A dedicated results page with pagination and a running count,
linked from the dropdown as “View all results”.

What it searches

Post titles, Search Tags, and categories. Search Tags is a field Kody Search adds to the
editor, kept separate from your site’s regular Tags so tagging something for search does not
also change your navigation. Kody Search does not search the body text of articles.

Where it fits

Sites up to roughly 15,000 posts and pages. If you need full text search across article
bodies, or you run a larger site, a search plugin backed by a server index is the better
choice, and Kody Search will tell you on its settings screen once you cross that size.

Development

This plugin ships its complete source. Nothing is obfuscated. Only the two block
editor scripts are compiled; all PHP, all CSS, and the front-end JavaScript in
assets/ run exactly as shipped, with no build step.

What is compiled, and from what

The only generated files in the plugin are:

• build/kody-search/index.js
• build/kody-search/index.asset.php
• build/kody-search-page/index.js
• build/kody-search-page/index.asset.php

They are the webpack build of the block editor UI. Each build/ directory has one
matching source directory shipped alongside it:

• blocks-src/kody-search/edit.js -> build/kody-search/index.js
• blocks-src/kody-search/block.json -> build/kody-search/block.json (copied unchanged)
• blocks-src/kody-search-page/edit.js -> build/kody-search-page/index.js

• blocks-src/kody-search-page/block.json -> build/kody-search-page/block.json (copied unchanged)

  edit.js is ordinary JSX built on the @wordpress/* packages (@wordpress/blocks,
  @wordpress/block-editor, @wordpress/components, @wordpress/data,
  @wordpress/core-data, @wordpress/i18n, @wordpress/element). index.asset.php is generated by
  @wordpress/scripts: it lists the wp-* script handles the compiled file depends on
  and a content hash used for cache busting.

Build tooling (all included in the plugin)

• package.json – the two npm scripts and the dev dependencies
• webpack.config.js – two explicit entry points (blocks-src/{block}/edit.js) and
  copy-webpack-plugin, which copies each block.json into build/
• babel.config.js – forces Babel’s classic JSX runtime (pragma createElement,
  resolved through import { createElement, Fragment } from
'@wordpress/element' at the top of each edit.js) instead of the
  automatic runtime. The automatic runtime would add a dependency
  on the react-jsx-runtime script handle, registered in WordPress
  core only since 6.6; the classic runtime keeps the compiled
  output dependent only on handles present since WP 5.0, so the
  “Requires at least: 6.3” header stays accurate. The pragma names
  an imported identifier rather than the wp.element.* global so
  that build-time dependency extraction can see it and list
  wp-element in index.asset.php.

Dependencies (see package.json):

• @wordpress/scripts ^33
• copy-webpack-plugin ^12

Developed and built with Node.js 20 and npm 10.

Reproduce the block build

From the plugin directory:

npm install
npm run build

This rebuilds the four generated files above from blocks-src/ and re-copies the two
block.json files. npm run start runs the same build in watch mode. Building against
an unchanged blocks-src/ reproduces the same build/ output (the hash in
index.asset.php is derived from the compiled bytes, so it only changes when the
source does).

BlockModule (src/Modules/BlockModule.php) registers both blocks from `build/` via
register_block_type(), reading each `block.json` + `index.asset.php` - so after a

rebuild the editor picks up the change with no other edits.

PHP

All PHP is PSR-4 autoloaded (Kody\Search\ -> src/) through Composer; composer.json
is included. There are no runtime Composer dependencies – the only thing shipped under
vendor/ is the generated autoloader. Regenerate it with:

composer install --no-dev --optimize-autoloader

Translations

languages/kody-search.pot is generated with WP-CLI:

wp i18n make-pot . languages/kody-search.pot --slug=kody-search --domain=kody-search