Skip Navigation

[Resolved] Dropdown menu for all posts in a custom post type

This support ticket is created 6 years, 10 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 1 reply, has 1 voice.

Last updated by joonaN 6 years, 10 months ago.

Author
Posts
#619236
Screenshot 2018-02-23 22.39.30.jpg

I'm trying to build a quick select dropdown menu (form element), which would list all posts of a certain custom post type. It should automatically switch to the selected page, without having to press a submit button.

It should work exactly like a category selection dropdown, but populated with all posts from a CPT. Something like the widget on the sidebar on this page, for example:
hidden link

How this should be built within Views? Or is it the wrong plugin for this kind of job?

The screenshot is just an example of the list style I'm after. The contents should be all posts from a custom post type.

#619245

I managed to get this working, with the help of this guide:
https://stackoverflow.com/questions/5150363/onchange-open-url-via-select-jquery#5150486

In case anyone needs a snippet for this, here's what I did

Loop template:

[wpv-layout-start]
<select id="thingselector">
<option value="" selected>Select your thing</option>
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop>
[wpv-post-body view_template=" --insert your view template name here-- "]
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
</select>
[wpv-layout-end]

JavaScript:

$(function(){
// bind change event to select
$('#thingselector').on('change', function () {
var url = $(this).val(); // get selected value
if (url) { // require a URL
window.location = url; // redirect
}
return false;
});
});

Loop item:

<option value="[wpv-post-url]" selected>[wpv-post-title]</option>