A better parent page selector for WordPress
NOTE: This only works for the classical editor as I haven’t found a way to make it work with Gutenberg I’m afraid.
Let us see how we can make a better parent page selector for the edit page screen in the admin section.
When you create a new page in WordPress you have the option for selecting a parent page from a dropdown menu – nice and simple.
The problem arises when you start to have dosens or hundreds of pages.
Even with the indentation is starts to get difficult to find the page you are looking for.
The solution: select2 to the rescue
Now, it would be nice to be able search the parent page you are looking for. With select2 we can get that option. At the end it will look something like this.
Code for the new parent page selector
The implementation is fairly straight forward:
- Include the select2 library.
- Have it replace the default dropdown.
I register a stylesheet and a javascript file for the admin section in WordPress. Copy and paste the needed code from the select2 library into these files or register them independently.
/**
* Register and enqueue in the WordPress admin.
*/
function bk_enqueue_custom_admin_style() {
wp_register_style( 'custom_wp_admin_css', get_template_directory_uri() . '/inc/assets/css/admin.css', false, '1.0.0');
wp_enqueue_style( 'custom_wp_admin_css' );
wp_register_script( 'custom_wp_admin_js', get_template_directory_uri() . '/inc/assets/js/dmly-admin.js', 'jquery', '1.0.1', true );
wp_enqueue_script( 'custom_wp_admin_js' );
}
add_action( 'admin_enqueue_scripts', 'bk_enqueue_custom_admin_style' );
The next thing is simply to call the select2 function
(function( $ ){
$('#parent_id').select2();
} )( jQuery );
All in all, not too bad.
This is a neat solution. Are there links to the scripts you’re using for this?
Derp. Nevermind. I got it.
Hey Alexander!
Is it really working for you with Gutenberg?
Thanks!
Hey!
I can’t make it work. This does really work on Gutenberg editor for you?
Select2 seems to work on the first load. After updating page or editing other tabs/blocks the select2 is completely gone. The selected parent page option doesn’t keep as selected either.
If you really managed to make this work, could you please tell me how you did so? I’d be really appreciate.
Thanks in advance!
The solution does not work with Gutenberg, this article is out of date.