Rendering all the pre-made data of a custom field at once on the screen in the backend can cause the post or page editor to look very confusing. Adding pagination to separate those values into pages, and also providing a search box to search any value right in the field will come in handy.

Here is an example.

An example of adding Paginations & Searching Box to Custom Fields

The fields include various images that you can choose from. Instead of showing all of them on this screen, I use this pagination and a search box to find a reasonable one easier.

Video Version

Before Getting Started

In this post, we will focus on pagination and we'll build a search box that allows users to look up any value in the field.

To get started, we have the Meta Box core plugin to have a framework to create custom fields. You can download it directly from wordpress.org.

In this practice, I create just two typical fields for demonstration, so do not use any advanced features from Meta Box. You can create the fields using code, an online generator, or UI provided by Meta Box Builder extension. If you want to have the UI, you can install this extension individually, or use Meta Box AIO to enable it.

Create Custom Fields

I will create two fields. One is to show some image options to choose from. The other field allows adding text to search any image that is in the below field.

The custom fields that I created

Go to Meta Box, and add fields as usual.

Go to Meta Box, and add fields

The Search box should be a Text field that allows typing characters inside.

Choose a Text field for the Search box

Move to the Advanced tab, and add a class for this field since we will use JavaScript later to add the search feature to this field.

Add a class for the field

The next field is to provide some images. So I’ll add it as an Image Select field.

Insert an Image Select field

In the Choices box of this field’s settings, add some images.

In the Choices box of this field’s settings, add some images.

This is the URL of the image.

The URL of the image

This is the name of the image that you set on your own. The name will be the value saved in the custom field.

The name of the image that you set on your own

In the Advanced settings section of this field, I add a Text to display after the field. It is to list the pagination numbers later which are regulated by a class named 'pagination'.

Add a Text to display after the field

After creating all the fields, move to the Settings tab, choose Location as Post type, and select a post type to which you want to assign these fields to.

Move to the Settings tab, choose Location as Post type, and select a post type to which you want to assign these fields to

Then, go to the post editor, you will see the fields displayed. All the images in the field are displayed without any pagination since we haven’t created them. The Search box also hasn’t worked yet.

All the images in the field are displayed without any pagination

Add Functions to the Fields

We should add code to the theme’s files to add some functions for the fields. They help to create the pagination and search features.

Go to the functions.php file, and add some lines of code.

function estar_add_list_js_library() {
    wp_enqueue_script( 'listjs', '//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js' );
    wp_enqueue_script( 'estar-custom-scripts', get_stylesheet_directory_uri() . '/js/scripts.js' );
}
add_filter( 'rwmb_enqueue_scripts', 'estar_add_list_js_library' );

add_action('admin_head', 'my_custom_css');
function my_custom_css() {
    echo '<style>
        .pagination li {
            display:inline-block;
            padding:5px;
        }
    < /style>';
}

First, since I will use JS, I declared the JS online library that I will use in these lines as well as a new file to add code:

function estar_add_list_js_library() {
    wp_enqueue_script( 'listjs', '//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js' );
    wp_enqueue_script( 'estar-custom-scripts', get_stylesheet_directory_uri() . '/js/scripts.js' );
}
add_filter( 'rwmb_enqueue_scripts', 'estar_add_list_js_library' );

Add some codes to declare the JS online library

estar is the theme that I’m using for my website (you can download this theme here for free).

The theme that I’m using for my website

These lines of code are used to display the pagination and stipulate its style. But we haven’t created it yet.

These lines of code are used to display the pagination and stipulate its style

Then, go to the created JS file. Add the git.

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 );
    } );
F
    $( '#background-for-post .rwmb-image_select-wrapper' ).find( '.rwmb-input' ).addClass( 'list' );
} );

Go to the created JS file and add the git

These are to create the pagination.

These are to create the pagination

In this example, I divided the options in the Image Select field into 3 pages. rwmb-image_select also regulated that the pagination is used for the field that is in the type as Image Select only.

The code regulated that the pagination is used for the field that is in the type as Image Select only

And, the function var featureList = new List( 'background-for-post', options ); handles the search function for the field that you’ve created above. In there, background-for-post is the ID of the field group I’ve created.

The function handles the search function for the field that you’ve created above

Now, back to the post editor, you'll see the paginations as page numbers 1, 2, and 3. Click on each page, you will see different images. Also, the search box worked well.

The paginations as page numbers 1, 2, and 3. Also, the search box worked well.

We’ve just finished this practice.

Last Words

Now, you may paginate the provided options in a field as well as allow people to search one from the list. Adding paginations & searching boxes to custom fields has a lot of benefits to improve the experience when input data to the fields. So, let’s do it if you see and field can apply this trick. If you have any suggestions for up-coming tutorials, feel free to leave a comment below. Thanks for reading!

4 thoughts on “Easily Add Paginations & Search Boxes in WordPress Editor with Meta Box

  1. Please suggest me some ideas about robots.txt
    I have seen some errors in search console. Error about Noindex pages which are actually indexed and crawled by google. But still it shows noindex error by robots.txt
    Myedpill.com

  2. Very interesting article. Any possibility of a similar article on the subject of using Meta Box with facets (filtered searches) without having to purchase a plugin from a third party?

Leave a Reply to Long Nguyen Cancel reply

Your email address will not be published. Required fields are marked *