How to Add Dropdown or Select Pages in WordPress Customizer

WordPress Development

Displaying all the pages of your website as a dropdown or select field within the WordPress customizer is super easy.

However, you can create custom WordPress customizer control to display all the pages as a dropdown, and can also improve it by adding more options like adding a checkbox before each page, etc.

But that’s not our goal here, I will discuss that part in the customizer custom control, But for now, all I need to do is display all the pages inside a select or dropdown field.

Thanks to the WordPress Customizer API, that provides an inbuilt option or a special type of control that will allow us to display all the published pages of your website inside a dropdown or select field.

Keypoint: To Create dropdown pages or select page with WordPress customizer, all you need to set the type of your control to ‘type’ => ‘dropdown-pages’

If you don’t know how to create a panel, section, setting, and control with WordPress customizer, you can check out one of my previous posts about WordPress Customizer Tutorial For Beginners.

Add WordPress Customizer Dropdown Pages

So here is the code snippet, that will add dropdown or select page field to the WordPress customizer as a separate section. You can also add any controls and settings with the existing panel and section of WordPress customizer.

Add this code into your theme’s functions.php or customizer control specific file.


function diwp_add_dropdown_pages($wp_customize){

	//add section
	$wp_customize->add_section( 'diwp_dropdown_page_section', array(

				'title' => 'All Pages',
				'priority' => 10
	));

	//add setting
	$wp_customize->add_setting( 'diwp_dropdown_page', array(
				'default' => '',
	));

	//add control
	$wp_customize->add_control( 'diwp_dropdown_page_control', array(
				'label' => 'Select Page',
				'type'  => 'dropdown-pages',
				'section' => 'diwp_dropdown_page_section',
				'settings' => 'diwp_dropdown_page'
	));

}

add_action( 'customize_register', 'diwp_add_dropdown_pages' );

The above code will create a new section named All Pages, and inside this section, you will see a dropdown or select field with all the pages of your website. As shown in the image below.

customizer-dropdown-select-pages

As of now, you have successfully added the dropdown pages in the customizer, but the point is, how you will use this option and take benefit of it or how you will get the value of it.

Get Dropdown Pages Output

To get the output of dropdown pages control, you can use get_theme_mod( ‘your_setting_name’ ) function. So in the above case, it will be like:

	<?php echo get_theme_mod( 'diwp_dropdown_page' ); ?>

This will return the page ID. so you can use that page id and can get the page URL or permalink, page title, and much more.

Get Page Title Using Dropdown Pages:

<?php  echo get_the_title( get_theme_mod ( 'diwp_dropdown_page' ) ); ?>

Get Permalink or Page URL Using Dropdown Pages:

<?php  echo get_permalink( get_theme_mod ( 'diwp_dropdown_page' ) ); ?>

I hope this article helps you to understand adding a dropdown page or page select option in the WordPress customizer.

Bhuvnesh Shrivastava
Owner of diveinwp.com, solely responsible for creating helpful, informative content about WordPress, a fulltime WordPress developer with 8+ years of hands-on experience in WordPress design and development.

Related Articles