Add a Dropdown-pages field to the WordPress Customizer.

WP Customizer - Dropdown-pages

$wp_customize->add_setting( 'themeslug_dropdownpages_setting_id', array(
  'capability' => 'edit_theme_options',
  'sanitize_callback' => 'themeslug_sanitize_dropdown_pages',
) );

$wp_customize->add_control( 'themeslug_dropdownpages_setting_id', array(
  'type' => 'dropdown-pages',
  'section' => 'custom_section', // Add a default or your own section
  'label' => __( 'Custom Dropdown Pages' ),
  'description' => __( 'This is a custom dropdown pages option.' ),
) );

function themeslug_sanitize_dropdown_pages( $page_id, $setting ) {
  // Ensure $input is an absolute integer.
  $page_id = absint( $page_id );

  // If $page_id is an ID of a published page, return it; otherwise, return the default.
  return ( 'publish' == get_post_status( $page_id ) ? $page_id : $setting->default );
}

Hey @ajskelton ,
Can you please tell me how to output the pages after selecting from the dropdown?

To obtain the value use the function get_theme_mod( 'themeslug_dropdownpages_setting_id', '' ); You can use it in conjunction with get_permalink to get the url of the page. So if you wanted the url you could use this.
get_permalink(get_theme_mod( 'themeslug_dropdownpages_setting_id', '' )) If you change 'themeslug_dropdownpages_setting_id' to something else just remember to change it in the call.

Hi @NaveenKharwar ,

did you get the solution? I need also this solution. can you please help me?

Hi @ferdausalom,

Per @mav2287 's comment, you can use get_theme_mod() to access setting from the customizer.

In the example above the value that is being saved is the post id of the page that was selected.

$page_id = get_theme_mod( 'themeslug_dropdownpages_setting_id' )

Now that you have the id you can do whatever you need with it. You could get_permalink( $page_id ) to get the url to the page, or get_post( $page_id ) to return the post object of the selected page. Or just get_title( $page_id ) or get_post_meta( $page_id, 'custom_meta' ) to get just the title or a piece of custom meta.

Does that help? What are you trying to do with the page that was selected?

Hi, @ajskelton ,

By using your code I got pages list in the customizer panel, think the page list have 2 pages 1) contact, 2) about. when I will select any of the page I want to show the selected page right side and customizer panel should exist left side of the page, can you please help me?

Thanks for replying me

@ferdausalom To clarify, you want to select a page from this dropdown, and navigate to that page with the Customizer closing?

@ajskelton
Yes, I want to select a page from this dropdown, and navigate to that page or show the content of that page, with the Customizer stay left side and I will edit the page content, like I can edit the home page right now.

@ajskelton
the right side should be contact page content. https://ibb.co/z7wtQcy

@ajskelton
I can do this by using the below code but I want by using the dropdown.

add_submenu_page( 'customize.php', 'change contact page', __('change contact page', 'text-domain'), 'manage_options', 'customize.php?url=/contact-us');

@ferdausalom

Ok, I think you've misunderstood the purpose of the dropdown-pages customizer type.

If you just want to navigate to another page to continue editing you can use the navigation on your existing page. For example I see the Contact page listed in your navigation. If you click that it will load the contact page on the right side without reloading, so your Customizer will stay exactly where it is.

If you really want to use the Customizer dropdown-pages you could probably add some javascript that watches a change to this select field and updates the url.

@ajskelton

sorry, I am just a learner till now. Still, I am unable how I can do it by javascript. If you can help it would be appreciated.

BTW thanks for your suggestion.

How can I instead of drop-down pages to drop-down custom links. Because I used custom links on my navbar