Skip to main content

Adding paginations & searching boxes to custom fields

When your custom fields have too many options, displaying them all at once will make the post or page editor look very confusing. To divide these options into different pages, you can include pagination and search boxes.

Here is an example:

Example of adding paginations

Here I create a field to allow the user to choose the background for the post. And there will be a lot of photo styles available for users to choose from. So I will divide these photos into the pages as above.


In addition to using Meta Box, make sure you already have Meta Box Builder. This extension provides a UI right on the back end, which makes creating custom fields easier.

In this article, list.js and script.js are the Library and the file I use to create JS for the search box, respectively.

Enqueuing JavaScript

First, I need to declare a third-party library named list.js by adding the following code to functions.php:

function justread_add_list_js_library() {
wp_enqueue_script( 'listjs', '//' );
wp_enqueue_script( 'justread-custom-scripts', get_stylesheet_directory_uri() . '/js/scripts.js' );
add_filter( 'rwmb_enqueue_scripts', 'justread_add_list_js_library' );

In there:

  • rwmb_enqueue_scripts is the hook to declare the script in the Admin Panel.
  • In the above code, we declared two files that are list.js - the library file and scripts.js - the file used to perform the search function.
  • justread is the theme that I’m using (you can download this theme here for free).

Go to Meta Box > Custom Fields > Add New.

Create custom fields

I’ll create a group including two fields, which are Search and Image Select. I also set the IDs for them since we need to add these IDs to the code in step 3.

Set the IDs for the created fields

Here, I will create a sample Image Select field to add images

Then, you need to fill it in with your choices in the Choices section. Below is my example:

Example of the added IDs

To create a search box, I will add a Text field and fill in the information.

Add a Text field and fill in the information

After filling in the information, move to the Settings tab. Then, set the Location to any post type you want. For example, I save it as Post.

Set the location for the created fields

Now, try editing any post. When you drag it down, the choices appear as follows:

The choices will appear when you want to edit any post

However, the search box is still not working, and you have not added pagination. As a result, move to step 3.

Creating the pagination and the search function

To do it, you need to add the following code to the scripts.js file declared in step 1:

jQuery( function( $ ) {
$( document ).ready( function() {
var options = {
valueNames: [
{ attr: 'value', name: 'rwmb-image_select' }
pagination: true,
page: 3,
var featureList = new List( 'background-for-post', options );
} );

$( '#background-for-post .rwmb-image_select-wrapper' ).find( '.rwmb-input' ).addClass( 'list' );
} );


var featureList = new List( 'background-for-post', options );

This function handles the search function for the field group that you’ve created above. background-for-post is the ID of the Image Select field I’ve created.

pagination: true, page: 3,

These are to create the pagination. In this example, I divided it into 3 pages.

Returning to the post editor, you'll see page numbers 1, 2, and 3. I tested the search box, and it worked.

The final result