Blocks » Search Block

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.

Table of Contents

1. What It Searches
2. Add the Search Block
3. Block Toolbar
4. Block Settings
   1. Color
   2. Display Settings
   3. Advanced

---

What It Searches

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.

---

↑ Table of Contents ↑

Add the Search Block

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.

Adding a Search block

💡

Using your keyboard, you can also type /search on a new line and press enter to quickly add a new Search block.

For more, visit our detailed instructions on adding blocks.

---

↑ Table of Contents ↑

Block Toolbar

When you click on the block, a toolbar of options will appear.

Search block toolbar

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:

---

↑ Table of Contents ↑

Block Settings

When you click on the block, you will find additional block settings in the right sidebar. If you do not see the sidebar, you may need to click on the ⚙️ (gear/ cog) icon in the top right corner to bring up the settings.

Block settings

Color

Expanding the Color settings will display the following options:

Color settings

Text color: Sets the color of the text on the Search button.

Background color: Sets the background color of the Search button.

Display Settings

Expanding the Display settings will display the following options:

Display settings

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%.

Advanced

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS to style the block. Learn more.

The advanced section lets you add a CSS class to your block.