How to Use the Search Block in WordPress FSE

How to use Search Blocks in WordPress Full Site Editing (FSE)

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.

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

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

  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
  4. Click on the Add block (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

    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

Toolbar options specific to the search block

Toolbar - position optionsThese two options allow you to move the toolbar by dragging and dropping or using the up and down arrows to position it
Toolbar alignment optionsAlignment options – none, left, center, or right
Toolbar search label toggleToggle the Search label above the search box (off or on)
Toolbar- Set button positionSearch button position – outside, inside, or no button
Toolbar - toggle icon or textToggle icon or text for the search button

Search Instruction Text

Placeholder for optional text to use in the search bar

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
  • 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) uses many blocks that were developed as a result of moving to the Gutenberg system for content development. Some of these blocks were originally widgets in the older versions of WordPress. The search 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.

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

Arnel Custodio Content Writer I

As a writer for InMotion Hosting, Arnel has always aimed to share helpful information and provide knowledge that will help solve problems and aid in achieving goals. He's also been active with WordPress local community groups and events since 2004.

More Articles by Arnel

Was this article helpful? Join the conversation!