Use the Search block to add a search function to your website, allowing readers to easily search your site for posts and pages you’ve written in the past.
In this guide
The Search block will return results from the titles and the bodies of your posts and pages, and from media titles, alt text, file names, and single image captions. It will not return results from widgets, comments, categories, gallery captions or other text, or tags.
Also, note that the search results will display posts with the matching term in the post title in reverse-chronological order. Then, it will display posts with the matching term in the post body in reverse-chronological order. So for example, if you have just published a post about Michigan titled “This Weekend,” and you also have an older post titled “Michigan,” searching for ‘Michigan’ will display that older post, with Michigan in the title, at the top of the list.
To add the Search block, click on the + Block Inserter icon and search for “search.” Click it to add the block to the post or page.
💡
Using your keyboard, you can also type /search on a new line and press enter to quickly add a new Search block.
For more information, visit our detailed instructions on adding blocks.
When you click on the block, a toolbar of options will appear.
The Search block has the following options in its toolbar:
- Search: Change block type or style: Change the Search block to another type of block.
- Drag: Click and hold to drag the block into another position.
- Move up, Move down: Moves the block up or down one block position.
- Change alignment: Aligns the Search block to the left, center, or right of the page.
- Toggle search label: Hides or displays the “Search” label above the text entry field.
- Change button position: Places the Search button outside or inside the text entry field, or hides it completely.
- Use button with icon: Displays the Search button with text or a “magnifying glass” Search icon.
To change the placeholder text in the text entry field, click into the field and type the text you want to display, as shown here:
When you select a block, you will find additional block settings in the right sidebar. If you do not see the sidebar, you may need to click the Settings icon in the top-right corner to bring up the settings. This icon looks like a square with two uneven columns:
Expanding the Display settings will display the following options:
Width: Displays the Search block at the specified width in pixels.
Percentage: Displays the Search block at a designated percentage of the display width: 25%, 50%, 75%, or 100%.
For more information, visit our detailed instructions on Advanced Settings.
In the block settings sidebar, click on the Styles icon to access the design settings for the block. The Styles icon is in the shape of a circle with half of the circle filled in:
More details for these standard block styles can be found in the following guides:
