Ask your WordPress questions! Pay money and get answers fast! (more info)

Wordpress Dropdown Option & Buttons WordPress

I'm looking to create a dropdown that displays posts from a specific category ID and once selected, and SUBMIT button clicked it takes the user to that post.

[Select your Event] [Read More]

It's pretty basic to do with HTML but I don't have the expertise to build it into wordpress.

Any help is appreciated.

Answers (2)

2014-09-06

Arnav Joy answers:

here is the code , that will display post in drop down based on category id

<?php

$args = array( 'posts_per_page' => -1 , 'category' => 1 );
$myposts = get_posts( $args );
if( !empty( $myposts ) ) {
?>
<form>
<select id="post_drop">
<option value="0">Select Here </option>
<?php
foreach ( $myposts as $post ) :
?>
<option value="<?php echo get_permalink($post->ID );?>"><?php echo get_the_title($post->ID );?></option>
<?php
endforeach;
?>
</select>
<input type="submit" name="submit" value="submit">
</form>

<?php
}


Arnav Joy comments:

here is the script that will handle submit request

<script>
jQuery(document).ready(function($){
$('#my_from').submit(function(){
var permalink = $("#post_drop option:selected").val();
if( permalink != 0)
location.href = permalink;

return false ;
});

});
</script>


Arnav Joy comments:

so here is the full code

and you can change the value of the variable $cat_id to your desired category id .

<?php

$cat_id = 1;

$args = array( 'posts_per_page' => -1 , 'category' => $cat_id );

$myposts = get_posts( $args );

if( !empty( $myposts ) ) {

?>

<form id="my_from">

<select id="post_drop">

<option value="0">Select Here </option>

<?php

foreach ( $myposts as $post ) :

?>

<option value="<?php echo get_permalink($post->ID );?>"><?php echo get_the_title($post->ID );?></option>

<?php

endforeach;

?>

</select>

<input type="submit" name="submit" value="submit">

</form>



<?php

}

?>


<script>

jQuery(document).ready(function($){

$('#my_from').submit(function(){

var permalink = $("#post_drop option:selected").val();

if( permalink != 0)

location.href = permalink;



return false ;

});



});

</script>

2014-09-06

Remy answers:

Replace the value for $cat by the category ID you want :


<?php
$cat = 1;
$posts = new WP_Query( array(
'cat' => $cat
) );

if ( $posts->have_posts() ) : ?>
<form method="post" id="select-event">
<select name="post-select" id="post-select">
<option value="">Select your event</option>
<?php while( $posts->have_posts() ) : $posts->the_post(); ?>
<option value="<?php the_permalink(); ?>"><?php the_title(); ?></option>
<?php endwhile; ?>
</select>
<input type="submit" value="Read more" id="submit">
<?php endif; ?>
<script>
jQuery(document).ready(function($){
$('#select-event').submit(function(){
var post_permalink = $("#post-select option:selected").val();
if( post_permalink != '' ) {
location.href = post_permalink;
}
return false;
});
});
</script>