---
title: "How to Use the Search Block in WordPress FSE"
description: "The Search block is a widget used to search the published content of your WordPress site. This tutorial will show you how to use the search block in the WordPress Full Site Editing (FSE) system. We..."
url: https://www.inmotionhosting.com/support/edu/wordpress/full-site-editing/search-block-wordpress-fse/
date: 2022-07-08
modified: 2022-07-11
author: "InMotion Hosting Contributor"
categories: ["Full Site Editing"]
type: post
lang: en
---

# How to Use the Search Block in WordPress FSE

![How to use Search Blocks in WordPress Full Site Editing (FSE)](https://www.inmotionhosting.com/support/wp-content/uploads/2022/07/search-block-fse-1024x538.jpg)

The **Search** block is a widget used to search the published content of your WordPress site. This tutorial will show you how to use the search block in the WordPress Full Site Editing (FSE) system. We will also provide some background information on the block and how it works with your WordPress site.

- [How to Use the Search Block](#use-search-block)
- [Information on Using the Search Block](#information)

This tutorial uses WordPress version 6.0 and the Twenty Twenty-two theme.

## How to Use the Search Block

The search block can be used in the site editor or the post/page editor for your content. Using it on your home page, header, or footer of your site provides search functionality throughout your website. Searches will bring up all instances of the search term from your published content.

You will need to be [logged into the WordPress Administrator Dashboard](https://www.inmotionhosting.com/support/edu/wordpress/logging-into-wordpress-dashboard/) as an Administrator before following any of the steps below.

### Site Editor – Templates or Template Parts

In order to add the block through your site editor follow these directions:

1. In the main menu, click on **Appearance**, then click on **Editor**.![Appearance - Editor](https://www.inmotionhosting.com/support/wp-content/uploads/2022/07/appearance-editor.jpg)
2. You will need to decide where to place the Search option. For this tutorial, we will show you how to add it to the header. Click on the** WordPress logo** in the top left corner.![Click on the WP logo](https://www.inmotionhosting.com/support/wp-content/uploads/2022/07/click-wp-logo.jpg)
3. Click on **Template Parts**. Since we are adding the search block to the header, we will need to edit the header of the theme. ![Click template parts](https://www.inmotionhosting.com/support/wp-content/uploads/2022/07/click-template-parts-1.jpg)Depending on the theme that you’re using, you may see more than one header. If you’re using the other headers, then you will need to edit them all in order to add the search option.
4. Click on the **header** that you wish to edit. Click on the template part title to open it in the editor.![Selected header - magnified](https://www.inmotionhosting.com/support/wp-content/uploads/2022/07/selected-header-magnified.jpg)
5. Click on **list view** in the top menu bar (it looks like 3 staggered horizontal lines on top of each other).
6. The list view allows you to accurately determine where you want to place the search block. Select a location, then click on the **+ sign**(**Toggle Block Inserter)** in the top left corner.
7. In the search field, type “search”. Click on the **search** block when you see it. The search block will be added. ![Add search block](https://www.inmotionhosting.com/support/wp-content/uploads/2022/07/add-search-block.jpg)
8. If it’s not in the right spot, you can easily re-position it using your mouse to drag and drop it or click on the up or down arrows to move it. Make sure it’s in the right spot, then go to the next step.![Search block is placed](https://www.inmotionhosting.com/support/wp-content/uploads/2022/07/search-block-placed-2.jpg)
9. Click on the blue **Save** button in the top right corner. You will be asked to confirm that you’re saving the header and the Header Template part that you selected earlier. Click on **Save** again to confirm.

## Post or Page Editor

The search block can also be used in a post or page that is displaying content on your WordPress site. Typically, if you have a large post or multiple images that you want your viewer to be able to search when viewing that page or post, then you can add the search block in order to make it easier for the viewer to find specific content.

1. Open a new or existing post (or page).
2. Select the area where you want to add the search block. You can also turn on **list view** to more accurately place the block if you have existing content.![Turn on list view](https://www.inmotionhosting.com/support/wp-content/uploads/2022/07/turn-on-list-view.jpg)
3. In list view, click on a block adjacent to where you will place the search block. Click on the **3-vertical menu**, then select to insert the block before or after the block that you’re on.![3-vertical dot menu](https://www.inmotionhosting.com/support/wp-content/uploads/2022/07/3-dot-vertical-menu.jpg)
4. Click on the **Add bloc**k (the **+ sign**). Type “search” in the search field. This will bring up the search block. Click on it to select it.![Click to add block](https://www.inmotionhosting.com/support/wp-content/uploads/2022/07/click-add-block.jpg)If the block is not in the correct position, remember that you can always easily move the block using the drag and drop option or the positioning arrows on the block toolbar.
5. Once the block is in the proper place and set up the way you want it, click on **Save Draft**, **Update**, or **Publish** in order to save your post or page.

### Search Block Options

The search block has a number of options that you can select from the toolbar and from the block options at the right of the page. We’ll cover each option below. To bring up the toolbar, click on the block.

![Toolbar and Block - you can see the different options in the toolbar](https://www.inmotionhosting.com/support/wp-content/uploads/2022/07/toolbar-and-block.jpg)

Toolbar options specific to the search block

| ![Toolbar - position options](https://www.inmotionhosting.com/support/wp-content/uploads/2022/07/toolbar-position-1.jpg) | These two options allow you to move the toolbar by dragging and dropping or using the up and down arrows to position it |
| --- | --- |
| ![Toolbar alignment options](https://www.inmotionhosting.com/support/wp-content/uploads/2022/07/toolbar-alignment-1.jpg) | Alignment options – none, left, center, or right |
| ![Toolbar search label toggle](https://www.inmotionhosting.com/support/wp-content/uploads/2022/07/toolbar-toggle-search-label.jpg) | Toggle the Search label above the search box (off or on) |
| ![Toolbar- Set button position](https://www.inmotionhosting.com/support/wp-content/uploads/2022/07/toolbar-button-position.jpg) | Search button position – outside, inside, or no button |
| ![Toolbar - toggle icon or text](https://www.inmotionhosting.com/support/wp-content/uploads/2022/07/toolbar-button-or-text.jpg) | Toggle icon or text for the search button |

Search Instruction Text

![Placeholder for optional text to use in the search bar](https://www.inmotionhosting.com/support/wp-content/uploads/2022/07/search-optional-text-placeholder.jpg)

When you’re editing the search block or just adding the search block, you have the option to add instructional text where you see “**Optional placeholder…**“

You can type in your own instructions. For example, “Type your search text here.”

In addition to the toolbar settings, the block has properties that affect how the search block will appear. These properties include:

![Search block properties in the right column of the editor](https://www.inmotionhosting.com/support/wp-content/uploads/2022/07/search-block-properties.jpg)

- **Display Settings** -you can select a width in pixels, or use percentages to determine how wide the block will appear.
- **Color** – Here you can set the color for the text or background in the Search block. There are no colors not selected by default. Note that this option may be determined by the theme that you use.
- **Border Width **– This determines the width of the border around the search field.
- **Border Color** – This determines the color of the border around the search field. This option may be determined by the theme you are using.
- **Border Radius** – This determines the shape of the border and the button used by the search block. The maximum value makes the search field and button into pill shapes. Size can be set by pixels or using the slider.

## Information on Using the Search Block

The [WordPress Full Site Editing System (FSE)](https://www.inmotionhosting.com/support/edu/wordpress/full-site-editing/) uses many blocks that were developed as a result of moving to the [Gutenberg system](https://www.inmotionhosting.com/support/edu/wordpress/gutenberg/) for content development. Some of these blocks were originally [widgets](https://wordpress.org/support/article/wordpress-widgets/) in the older versions of WordPress. The s**earch** block is one of the widgets that were moved into the blocks of the WordPress visual editor. Though, it is still categorized in the blocks as a widget.

The search block is essential for your WordPress site because it allows visitors to find specific content. The search looks through all of your published content. It can find specific text in a published post, or even alt text that you may have assigned to a file in your media library.

The search block provides a powerful tool to find content that you may not have categorized or tagged. However, although this tool provides that functionality for your users, it is still very important to develop a system in how you use categories and tags that make up your published content. Using well-ordered categories and tags will help with your search engine optimization by providing order to your content so that search engines can more easily index your site.

---

The search block is a potent tool that enables your users to make more use of the content you provide on your WordPress site. Go to our InMotion Support Center to learn more about the [WordPress Full Site Editing (FSE) system](https://www.inmotionhosting.com/support/edu/wordpress/full-site-editing/).

“

If you need a new home for your WordPress site, look no further than InMotion’s WordPress Hosting solutions for secure, optimized, budget-friendly servers.

Fast & Easy Transfers    Free SSLs    Hack Protection    Affordable

View WordPress Hosting Plans

“