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)
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>
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>