Create Dropdown List of Posts from a Category

7th Feb 2011 | Posted by reza | 24 Comments

You want to list posts from a category but don’t have much space for the list in your site? Simple, make the list in a dropdown box.

Here, I’ll share the code to create this dropdown box. Also, as the result of this code, when the post in the list is selected, the user will be taken to that post.

How To

Place the code below in your sidebar or wherever you want to put the list, in your site :


<?php
	$cat_id = get_cat_ID('uncategorized');
	$args=array(
	  'cat' => $cat_id,
	  'post_type' => 'post',
	  'post_status' => 'publish',
	  'posts_per_page' => -1,
	  'caller_get_posts'=> 1
	);
	$my_query = null;
	$my_query = new WP_Query($args);
	if( $my_query->have_posts() ) {
?>
	<form name="jump">
		<select name="menu">
			<?php
			  while ($my_query->have_posts()) : $my_query->the_post(); ?>
				<option value="<?php the_permalink() ?>"><?php the_title(); ?></option>
				<?php

			  endwhile;
			}
			?>
		</select>
		<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="Go">
	</form>

<?php
	wp_reset_query();
?>

In this code, posts are from ‘uncategorized’ category. You can change the category to meet your needs.
If the list is to wide, you can set the width of select tag of the code via css.

Credit:
Thanks to Lovely3000 and MichaelH from WordPress.org

23 Comments to “Create Dropdown List of Posts from a Category”

Add Comments (+)

Matt says:

February 18, 2011 at 06:50

Just what I have been looking for!

How could I amend the script to not require the ‘go’ button? ie. when a the user clicks on the post name from the drop down list they are taken immediately to the post on mouse-up?

Thanks

Reply
- reza says:
  
  February 19, 2011 at 07:14
  
  first, replace this line
```
<select name="menu">
```
  with
```
<select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
```
  then delete this line:
```
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="Go">
```
  Reply
Stan says:

April 4, 2011 at 06:41

Hi,

Loving this script. Saved me hours of coding..

I just have two questions:

1. I am using it on custom post types, and the filter by category doesn’t seem to be working (its just bringing back the entire list) What would I need to change to get this to work correctly?

I have just replaced your line with:
$cat_id = get_cat_ID(‘category-name’);

2. How can I default the first line of the drop-down box to read something generic like “Select an item from the list?”

Thanks

Reply
Tosh says:

April 13, 2011 at 15:18

Hi again, I also want to have a drop down list of the posts for the category page. When I tried your code it displayed all of the posts from 01-A-Z, just like Stan said.

I did manage to use this code and it worked, but it’s not complete. When I say not complete, I mean that for a category, I have 5 pages, but in the drop down menu, it only shows the posts for whichever page that I’m on. I want to show all 5 pages of Posts for that Category in the drop down list. This is where I tested it on: http://doramax264.org/category/alphabet/m/

Please help me. Your site has been very educational and useful for me. Thanks

Tosh

http://wordpress.org/support/topic/dropdown-list-of-posts-in-a-category?replies=4

<option value="”>

Reply
Eric says:

October 13, 2011 at 11:20

Great snippet!

One thing I would like to do is order the posts by post title. My skills are a bit to basic to figure this out. Anybody knows how to do this?

Cheers, Eric

Reply
- Michael Carter says:
  
  October 17, 2011 at 22:30
  
  Hi Eric,
  My knowledge of PHP is weak too, but I’ve played with Queries a bit. If you add:
  ‘order’ => ‘ASC’,
  ‘orderby’ => ‘title’
  to the $args=array(
  this will show titles in the dropdown in ascending order, DESC for descending. NOTE the comma after the second to last item and NONE after the last item, the word ‘title’.
  
  Although it seems like a complicated mess, the Codex is really helpful. Just gotta dig. Have a look at this:
  http://codex.wordpress.org/Function_Reference/query_posts
  
  Also, by tinkering found that Reza is correct (was there any doubt? LOL). Adding –> <select style="width: 250px; background-color: #ffffcc" … to the beginning of that line works. I'm using this in a sidebar.
  
  Thanks Reza for this bit of Holy Grail. Been Googling for hours!
  
  Reply
  - Eric says:
    
    October 19, 2011 at 00:39
    
    Hi Michael,
    
    This is exactly what I was looking for. I did have a look at the Codex for this but so far did’nt manage to make the sorting work. Your code does the job, learned a bit more again
    
    Thanks a lot!
Michael Carter says:

October 20, 2011 at 10:37

Great code and nearly the only one that works after a couple days searching and trying. The other is Dagon’s but it is so complicated I can’t style it; yours I can.

But, a problem. The ONLY thing that is needed is the addition of a first selection with the drop down is clicked that is a kind of null. Most drop down setups have something like ” — Select from list — ” that goes nowwhere followed by the list of working links below that. This is needed because when the first item, an actual link, is clicked, nothing happens.

So, how would we add such a link as always the first item in the drop down list?

And thanks again for this code!

Mike

Reply
- Milos says:
  
  October 29, 2011 at 04:45
  
  Hi, add this code before php code just after tag:
  Select from list
  
  Reply
  - Milos says:
    
    October 29, 2011 at 04:48
    
    Ups, I m sorry here an code:
    http://pastebin.com/7UbPvdX5
  - columba says:
    
    November 29, 2012 at 05:52
    
    Thank you! Right what I needed!
Milos says:

October 28, 2011 at 09:14

Hi, can you tell me how to when someone click on some post from dropdown list to open on same page in some div???

Thanks.

Reply
gerae says:

November 6, 2011 at 17:20

Thank you so much! This is EXACTLY what I was looking for!

Reply
Rajeev says:

December 28, 2011 at 12:25

Hi, i use the wp-store theme and i need the sorting of product in store page by the dropdown.
sorting depend on the name and price. If i select the name from the dropdown then the product sort by name and if i select the price form the dropdown then product should be sorted by price.
Is there any plugin for that, if so then refer me, otherwise please provide me the code for.
I am very thankful to you this.
thanks

Reply
Jeroen says:

March 17, 2012 at 11:43

Hello,

Great post. I want my dropdown menu to be shown on the sidebar of my blog / website. Could you tell me in what php file should i paste this code? I use the 2011 theme and made a child theme. I’m starting to understand wordpress a little bit but am a newby on making websites and php css, etc.

Thanks Jeroen

Reply
Alok says:

April 25, 2012 at 23:32

Hi,

Thanks for this wonderful piece of code.

Is it possible that the post that is currently being browsed is automatically selected in the drop down.

For e.g., if there are 10 posts viz post 1 to post 10 and a visitor is browsing post 5, then “post 5″ will be selected in the drop down.

Thanks in advance.

Reply
- AlokSharma says:
  
  May 5, 2012 at 21:54
  
  Never mind, I managed this. This is what I did:
  
  Added: $postid = url_to_postid( get_permalink() );
  just above: $cat_id = get_cat_ID(‘uncategorized’);
  
  Added: $mpostid = url_to_postid( get_permalink() );
  just below: while ($my_query->have_posts()) : $my_query->the_post();
  
  Replaced: <option value=”<?php the_permalink() ?>”><?php the_title(); ?></option>
  with: <option value=”<?php the_permalink() ?>”<?php if($postid == $mpostid) echo ” selected”; ?>><?php the_title(); ?></option>
  
  May or may not be the correct solution but it worked for me.
  
  Reply
Kiryuu says:

October 1, 2012 at 02:42

Instead of defining the category how do you make it dynamic? so for example if a view a post that belongs to category Apples it should list all posts in category Apple. Or if I’m viewing a post from category Bananas then list posts from bananas. So how can I do this?

Reply
Gabesz says:

April 3, 2013 at 14:08

Hi,
I would appreciate if someone could help me. The above code works me well with category that doesn’t include subcategories. In the latter case, it doesn’t matter what I write instead of ‘uncategorized’ it always show all of the posts. (I tried to write my main category name) The separation works only with a single main category. Any idea?
Thanks,
Gábor

Reply
Gabesz says:

April 3, 2013 at 14:22

Please delete my previous question. I did not do something well but I have already solved.
Thanks for this code, it very useful for me!

Reply
Thiago Miro says:

April 20, 2013 at 03:11

Thank you for the post. It’s one plugin less in my WordPress.

Reply
Isa says:

May 29, 2013 at 08:21

Thanks a lot for this code. Unfortunately, on my website it’s showing the posts of all categories. Have I done anything wrong? This is my version of the code:

$cat_id,
‘post_type’ => ‘post’,
‘post_status’ => ‘publish’,
‘posts_per_page’ => -1,
‘caller_get_posts’=> 1
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
?>

have_posts()) : $my_query->the_post(); ?>
<option value="”>Ergebnisse

Reply
Patrick says:

May 8, 2014 at 12:52

Maybee you can help me with my problem, i looking for kindly the same code but:

See it as a related post, i choose a category and in a dropdownlist are the tags from that category, at first a visitor see the post list from the category, after choose one of the tags the list is refreched with the tags(from that category)

Is this possible

Patrick

Reply