Elementor Finder

Elementor 2.3 introduced a new utility called “Finder”. Elementor Finder enables quick access to a new search bar that pops up, giving you easy access to many pages and settings of your site.

By default, The Finder provides quick access to the following groups of links:

  • Create – Provides links related to creation of new posts/pages/templates etc.
  • Edit – Provides links related to editing of new posts/pages/templates etc.
  • General – Provides general links related to Elementor.
  • Settings – Provides links related to Elementor’s settings.
  • Tools – Provides links related to Elementor’s tools.
  • Site – Provides general site links.

Creating a new category

Start by creating a class the extends Elementor\Core\Common\Modules\Finder\Base_Category class and fill in all required methods.
Each category needs to have a category title and at least one item to show up in the Finder.

Finder Category Structure

A simple Finder Category skeleton will look like this:

class Test_Category extends Base_Category {

	public function get_title() {}

	public function get_category_items( array $options = [] ) {}
}

Let’s break it down:

  • get_title() – Returns the title of the category.
  • get_category_items() – Return the category items.

Simple Finder Category

In this guide, we are going to create a Finder Category that will provide easy access to WordPress settings.

First create a class that extends `Elementor\Core\Common\Modules\Finder\Base_Category` class:

class WP_Settings_Finder_Category extends \Elementor\Core\Common\Modules\Finder\Base_Category {
}

Next, we need to implement get_title() and get_category_items() methods:

class WP_Settings_Finder_Category extends \Elementor\Core\Common\Modules\Finder\Base_Category {
	public function get_title() {
		return __( 'WordPress Settings', 'elementor' );
	}

	public function get_category_items( array $options = [] ) {
		$items = [
			'general' => [
				'title' => __( 'General', 'elementor' ),
				'url' => admin_url( 'options-general.php' ),
				'icon' => 'wordpress',
				'keywords' => [ 'wordpress', 'settings' ],
			],
			'writing' => [
				'title' => __( 'Writing', 'elementor' ),
				'url' => admin_url( 'options-writing.php' ),
				'icon' => 'edit',
			],
			'reading' => [
				'title' => __( 'Reading', 'elementor' ),
				'url' => admin_url( 'options-reading.php' ),
				'icon' => 'post-content',
			],
			'permalink' => [
				'title' => __( 'Permalink', 'elementor' ),
				'url' => admin_url( 'options-permalink.php' ),
				'icon' => 'editor-link',
			],
		];

		return $items;
	}
}

From the get_category_items() above, you can see that each Finder Category item can have the following properties:

  • name – Used as the item’s key in the $items array (Required).
  • title – Used to define the item’s title (Required).
  • url – Used to define the item’s URL (Required).
  • icon – Used to define the item’s icon.
  • keywords – Used to define relevant search keywords.

The Entire Code

Basically, our Finder Category class with phpDoc blocks should look something like this:

<?php
class WP_Settings_Finder_Category extends \Elementor\Core\Common\Modules\Finder\Base_Category {

	/**
	 * Get title.
	 *
	 * @access public
	 *
	 * @return string
	 */
	public function get_title() {
		return __( 'WordPress Settings', 'elementor' );
	}

	/**
	 * Get category items.
	 *
	 * @access public
	 *
	 * @param array $options
	 *
	 * @return array
	 */
	public function get_category_items( array $options = [] ) {
		$items = [
			'general' => [
				'title' => __( 'General', 'elementor' ),
				'url' => admin_url( 'options-general.php' ),
				'icon' => 'wordpress',
				'keywords' => [ 'wordpress', 'settings' ],
			],
			'writing' => [
				'title' => __( 'Writing', 'elementor' ),
				'url' => admin_url( 'options-writing.php' ),
				'icon' => 'edit',
			],
			'reading' => [
				'title' => __( 'Reading', 'elementor' ),
				'url' => admin_url( 'options-reading.php' ),
				'icon' => 'post-content',
			],
			'permalink' => [
				'title' => __( 'Permalink', 'elementor' ),
				'url' => admin_url( 'options-permalink.php' ),
				'icon' => 'editor-link',
			],
		];

		return $items;
	}
}

Register the Finder Category

Now that we have our Finder Category class, all that is left is to add our category to Elementor Finder categories manager. We do that using elementor/finder/categories/init action hook:

add_action( 'elementor/finder/categories/init', function( $categories_manager ) {
	// Include the Finder Category class file
	include_once( 'path/to/category/class/file' );

	// Add the category
	$categories_manager->add_category( 'wp-settings', new WP_Settings_Finder_Category() );
} );

Final Notes

Get The Latest Updates

We have a lot more where that came from! Join 880,651 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.