Post navigation

code snippets

WordPress wp_dropdown_pages() function – link to pages when selected

Here’s an easy way to generate a dropdown menu from your blog pages using the WordPress wp_dropdown_pages() function.

Adding a bit of javascript you can send the user to the page when they select it…

<section id="pageselect">
			<?php wp_dropdown_pages('show_option_none=Explore...'); ?>
			<script type="text/javascript"><!--
			    var selectmenu = document.getElementById("page_id");
			    function onPageChange() {
					if ( selectmenu.options[selectmenu.selectedIndex].value > 0 ) {
						location.href = "<?php echo get_option('home'); ?>/?page_id="+selectmenu.options[selectmenu.selectedIndex].value;
			    selectmenu.onchange = onPageChange;
</section><!-- end pageselect -->

You can add this to your header and hide it with CSS until the screen size indicates the page is being viewed on a mobile device, then show it as a handy alternative navigation.


ADDITION 27th June 2013…..

It’s not clear in the WordPress codex for wp_dropdown_pages(), but you can sort the list using additional arguments…

<?php wp_dropdown_pages('sort_column=menu_order&show_option_none=Explore...'); ?>

sort_column=menu_order” as above will sort the list by it’s menu order value rather than by the post title which is the default. You can also use “ID” in that argument.

About David Goodman

2 thoughts on “WordPress wp_dropdown_pages() function – link to pages when selected

Leave a Reply

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

Please enable javascript to post a comment !