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">
			<span>
			<?php wp_dropdown_pages('show_option_none=Explore...'); ?>
			</span>
			<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;
			--></script>
</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.

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 !