Easily Add Paginations & Search Boxes in WordPress Editor with Meta Box
Tags: wordpress
Published: 2020-12-29 02:46:31

<!-- wp:paragraph -->

<p><strong>Adding the pagination and the search box feature on the back end</strong> will be useful for WordPress users in many cases. Especially in the page / post editor of WordPress, you need to choose details like background image, colors, ... for your Gutenberg blocks sometimes. It doesn't matter if you only have a few options. But when there are dozens of options, you should definitely add the pagination and the search box to find them easily.</p>

<!-- /wp:paragraph -->

<!-- wp:more -->

<p><!--more--></p>

<!-- /wp:more -->

<!-- wp:paragraph -->

<p>This can be done using <a href="https://metabox.io/">Meta Box</a> plugin. Stay tuned to see how I do it.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>In the WordPress editor, I created options for the background image of the document, and then created the search box and the pagination as follows:</p>

<p><img class="aligncenter" src="https://imgur.com/PWImWTo.png" alt="The pagination and search box in the WordPress editor created with Meta Box" width="829" height="374" /></p>

<!-- /wp:embed -->

<!-- wp:paragraph -->

<p>Follow three steps below to do it:</p>

<!-- /wp:paragraph -->

<!-- wp:heading -->

<h2>Step 1: Declare the Library</h2>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>To add the pagination and the search box, I need to declare a third-party library named <code>list.js</code>. Do it by adding the following code to the <code>functions.php</code>:</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<pre>function justread_add_list_js_library() {

wp_enqueue_script( 'listjs', '//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js' );

wp_enqueue_script( 'justread-custom-scripts', get_stylesheet_directory_uri() . '/js/scripts.js' );

}

add_filter( 'rwmb_enqueue_scripts', 'justread_add_list_js_library' );

</pre>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p><strong>Explanation:</strong></p>

<!-- /wp:paragraph -->

<!-- wp:list -->

<ul>

<li><code>'Rwmb_enqueue_scripts'</code> is the hook to declare the script into the <strong>Admin Panel</strong>.</li>

<li>In the above code, we declared two files which are <code>list.js</code> - the library file and <code>scripts.js</code> - the file used to perform the search function.</li>

<li><code>justread</code> is the theme I'm using (you can download this theme <a href="https://gretathemes.com/wordpress-themes/justread/" rel="follow">here</a>, totally free).</li>

</ul>

<!-- /wp:list -->

<!-- wp:heading -->

<h2>Step 2: Create Options and the Search Box</h2>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>If you're a coder, you can create <a href="https://metabox.io/series/custom-fields/">custom fields</a> yourself to add options for the background and the search box. Also, you can use a custom field plugin to save time and effort.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>I use Meta Box plugin to create custom fields (you can download its free core plugin on <a href="https://wordpress.org/plugins/meta-box">wordpress.org</a>). Also, I use its premium extension that is <a href="https://metabox.io/plugins/meta-box-builder/">Meta Box Builder</a>. This extension provides a UI right on the back end, which makes creating custom fields easier.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>After you finished installing and activating them, go to <strong>Meta Box</strong> &gt; <strong>Custom Field</strong> &gt; <strong>Add New</strong>.</p>

<p><img class="aligncenter" src="https://i.imgur.com/f5AQN4t.png" alt="Create Options and the Search Box in WordPress website" width="791" height="645" /></p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>On this screen, I will create a group including two fields which are <strong>Search </strong>and <strong>Image Select</strong>. But first, don't forget to give them IDs and remember them. We need to add them to the code in step 3.</p>

<p><img class="aligncenter" src="https://i.imgur.com/cZJ9SLU.png" alt="Create a group of field for search tool and option with Meta Box" width="970" height="650" /></p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>Now, I'll create an <strong>Image Select</strong> field (to add options for the background image section) and then fill the field with the necessary information.</p>

<p><img class="aligncenter" src="https://i.imgur.com/A8iAX71.png" alt="create an Image Select field with Meta Box plugin" width="1349" height="653" /></p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>Note that in the <strong>Choices </strong>section, you need to fill in it with your choices. Below is my example:</p>

<p><img class="aligncenter" src="https://imgur.com/7TLNSgT.png" alt="Enter your choices for the option field created by Meta Box plugin" width="599" height="810" /></p>

<!-- /wp:embed -->

<!-- wp:paragraph -->

<p>Next, choose the <strong>Text </strong>field for the search box and just fill in this field with basic information that is the name, ID, or customize its display in the <strong>Appearance </strong>tab.</p>

<p><img class="aligncenter" src="https://i.imgur.com/k0AEJnt.png" alt="Create text field to display search tool using Meta Box plugin" width="1088" height="650" /></p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>After you've done with the above two fields, go to the <strong>Settings </strong>tab. Then, choose the post type in which these fields will display (I choose the post type as <strong>post</strong>). And don't forget to click <strong>Save Changes</strong>.</p>

<p><img class="aligncenter" src="https://i.imgur.com/6jnmVK4.png" alt="choose the post type in which these fields will display on WordPress website" width="828" height="640" /></p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>Now, try editing any post. When dragging down, you will see that the options show up as follows:</p>

<p><img class="aligncenter" src="https://imgur.com/xouo2en.png" alt="The pagination shows up on the front end of WordPress website" width="873" height="342" /></p>

<!-- /wp:embed -->

<!-- wp:paragraph -->

<p>However, the search box still hasn't worked and you still haven't added pagination. Therefore, move to step 3.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p><strong>Note</strong>: If you don't want to purchase the premium extension <strong>Meta Box Builde</strong>r, you can use the <a href="https://metabox.io/online-generator/">Online Generator</a> tool (totally free) of Meta Box. This tool also has a UI and it will help you automatically generate code. After that, you just need to add this code to the <code>functions.php</code> file to create custom fields. <a href="https://docs.metabox.io/online-generator/">Here</a> is the instruction to use it.</p>

<!-- /wp:paragraph -->

<!-- wp:heading -->

<h2>Step 3: Create a Pagination and Handle the Search Function</h2>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>To do it, you just need to add the following code to the <strong>scripts.js </strong>file declared in step 1:</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<pre>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' );

} );

</pre>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p><strong>Explanation:</strong></p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>The <code>var featureList = new List( 'background-for-post', options )</code> function handles the search function for the field group that you've created above (ID of the field I've created is <code>background-for-post</code>).</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>The two options <strong>pagination </strong>and <strong>page </strong>are used to create the pagination. In this example, I paginated the option into 3 pages.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>When returning to the post editor, you will see that the pagination shows up with the page numbers that are 1, 2, 3. As for the search box, I made a test and it returned the right results.</p>

<p><img class="aligncenter" src="https://i.imgur.com/of1Fgsh.gif" alt="Create a pagination and Handle the Search Function" width="1076" height="838" /></p>

<!-- /wp:embed -->

<!-- wp:paragraph -->

<p>Ok, that's all done!</p>

<!-- /wp:paragraph -->

<!-- wp:heading -->

<h2>Last Words</h2>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>Adding the pagination and the search box in the WordPress editor isn't difficult, right? Just by some simple steps and some tools, you can help users work with WordPress more easily and effortlessly. There are many more useful tips that we'll update regularly, follow us to get them all.</p>

<!-- /wp:paragraph -->