Support » Fixing WordPress » Drop down list of posts from a category

  • Resolved esugrue

    (@esugrue)


    Hi!
    I have searched for a plugin but any I have found are old and haven’t been updated for a while.

    Basically I want to be able to have a dropdown widget that lists all the posts for a category specified.

    So if I specify category id 12 it would list all the posts in that category in a drop down list and go to that post when one is selected.

    I thought it would be easy or maybe I am just looking in the wrong places.

    Can anyone point me in the right direction or to a suitable plugin maybe?

Viewing 15 replies - 1 through 15 (of 22 total)
  • Michael

    (@alchymyth)

    Forum Moderator

    any I have found are old and haven’t been updated for a while.

    this does not mean that they are not working; have you tried any of them?

    you can always use those old plugins to cannibalise them to get an idea about the used codes …

    where do you want to show the dropdown?
    in the sidebar?
    as a widget?
    is the category set manually, or has it to be dynamic?

    Listing ALL post from a dropdown might be messy, especially if u have a lot of posts. I could recommend AVH Extended Categories Widgets

    Hi!

    I wanted to show it in a sidebar as a widget preferably.

    I want to be able to set the category manually so if it’s category 12 now it always will be.

    I may go on one of those marketplaces and see if I can get a fairly cheap quote to get it coded, especially with the old ones it should be easy for someone who knows what they’re doing.

    Hi Media X

    I saw AVH Extended Categories and am going to try it but it seems to be for category listings rather than posts in a category.

    It’s for a client who had it on their old html site and wants it on their WP one.

    esugrue,yes,the plugin shows the number of posts (Count) after the category.

    This can be achieved by creating a custom widget. I have created a widget which list all posts from a specific category. You need to add the following code into your function.php file.

    <?php
    /*---------*/
    /* Custom Widgets
    /*---------*/
    add_action( 'widgets_init', 'my_custom_widgets' );
    function my_custom_widgets() {;
      register_widget( 'category_posts_widget' );
    }
    
    class category_posts_widget extends WP_Widget {
    	function category_posts_widget() {
    		$widget_ops = array( 'classname' => 'widget_category_posts', 'description' => 'A widget that displays posts from a specific category as dropdown.' );
    		$control_ops = array( 'id_base' => 'category-posts-widget' );
    		$this->WP_Widget( 'category-posts-widget', 'Category Posts Widget', $widget_ops, $control_ops );
    	}
    
    	function widget( $args, $instance ) {
    		extract( $args );
    
    		$title = $instance['title'];
    		$cat_id = $instance['cat_id'];
    		$show_posts = (is_numeric($instance['show_posts'])) ? $instance['show_posts'] : 5;
    
        if ($cat_id) {
          $args = array('numberposts' => $show_posts, 'category' => $cat_id);
          $posts = get_posts($args);
    
          if ($posts) {
            echo $before_widget;
            echo '<div class="'.$this->widget_options['classname'].'-content">';
    
            if (!empty($title)) echo $before_title . $title . $after_title;
    
            echo '<select class="category-posts-dropdown">';
            echo '<option value="">select...</option>';
    
            foreach ($posts as $post) {?>
              <option value="<?php echo $post->post_title;?>" onclick="document.location.href = '<?php echo get_permalink($post->ID);?>'"><?php echo $post->post_title;?></option>
            <?php }
    
            echo '</select>';
          }
    
          echo '</div>';
          echo $after_widget;
        }
    	}
    
    	function update( $new_instance, $old_instance ) {
    		$instance['title'] = $new_instance['title'];
    		$instance['cat_id'] = (int) $new_instance['cat_id'];
    		$instance['show_posts'] = (int) $new_instance['show_posts'];
    		return $instance;
    	}
    
    	function form( $instance ) {
        //Set up some default widget settings.
    		$defaults = array( 'show_posts' => "5");
    		$instance = wp_parse_args( (array) $instance, $defaults );
    
    		$cat_id = isset( $instance['cat_id'] ) ? $instance['cat_id'] : '';
        $categories = get_categories();
         ?>
        <p>
          <label for="<?php echo $this->get_field_id( 'title' ); ?>">'Title:</label>
          <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" />
        </p>
    
    		<p>
    			<label for="<?php echo $this->get_field_id('cat_id'); ?>"><?php _e('Select Category:'); ?></label>
    			<select class="widefat" id="<?php echo $this->get_field_id('cat_id'); ?>" name="<?php echo $this->get_field_name('cat_id'); ?>">
    		<?php
          echo '<option value="">Select</option>';
    			foreach ( $categories as $cat) {
    				$selected = $cat_id == $cat->cat_ID ? ' selected="selected"' : '';
    				echo '<option'. $selected .' value="'. $cat->cat_ID .'">'. $cat->name .'</option>';
    			}
    		?>
    			</select>
    		</p>
    
        <p>
          <label for="<?php echo $this->get_field_id( 'show_posts' ); ?>">Show number of posts:</label>
          <input class="widefat" id="<?php echo $this->get_field_id( 'show_posts' ); ?>" name="<?php echo $this->get_field_name( 'show_posts' ); ?>" value="<?php echo $instance['show_posts']; ?>" />
        </p>
    
    		<?php
    	}
    }
    ?>

    After placing above code in function file, you will be able to see an additional widget in admin interface “Category Post Widget”, just drag it into your sidebar.

    This widget have 3 options:
    1. Widget Title (optional)
    2. Select Category (dropdown list of category which have posts)
    3. Number of post you want to display (default is 5)

    You can change the code as per your need.

    Hi frizax:

    My hero! Thank you for that, it works and displays exactly as I wanted except..

    In the dropdown list when I select a post it doesn’t go to that post?

    So the dropdown drops down, I select an item – that item is selected but the page stays the same – no jump to the post.

    I am crap at php so it’s probably me not following your admittedly simply instructions.

    In the code – I went to the themes functions.php file and at the end after the closing ?> I add your code – I guess that must have been correct as I got the new widget showing up.

    Any ideas as to why it doesn’t jump?

    Thanks again, you’re still my hero!

    Ernie

    Hi Ernie,

    You have added the code in correct way. Not sure why it not going to the post page. Can you check or share the view source of select box created. If must be something like this:

    <select class="category-posts-dropdown">
    <option value="">select...</option>
    <option value="hello world" onclick="document.location.href = 'http://localhost/wp-test/?p=6'">hello world</option>
    .
    .
    .
    </select>

    If your site is online, you may share the link, I will check the same.

    Hi Frizax:

    Thanks again for your help, that is what my select box is – it is still developing but the link is:

    http://goo.gl/iUh9G (shortened as I don’t what SE to index the full URL in the post)

    Anyway, I think I found the problem, Chrome! It works in Firefox but the onclick doesn’t in Chrome.

    eg:
    http://productforums.google.com/forum/#!topic/chrome/DaNBFu6JB6w

    Any idea on how to solve the issue?

    Thanks again
    Ernie

    Hi Ernie,

    I reviewed the link and noticed that you are using jquery in your theme, so here is the solution with the help of jquery.

    Replace:

    <option value="<?php echo $post->post_title;?>" onclick="document.location.href = '<?php echo get_permalink($post->ID);?>'"><?php echo $post->post_title;?></option>

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

    and add following jQuery script in header.php:

    <script>
    jQuery(function() {
      $select = jQuery('.category-posts-dropdown');
      $select.each(function() {
        var $item = jQuery(this);
        $item.change(function(e) {
          e.preventDefault();
          window.location = $item.find("option:selected").val();
        });
      });
    });
    </script>

    Hi Frizax:

    Thank you that worked – one more question and then I will leave you alone.

    Is it possible to have the posts sorted alphabetically in the list rather than newest first?

    Thank you again.
    Ernie

    Yes you can do this. You can change the arguments as per your requirement.

    $args = array('numberposts' => $show_posts, 'category' => $cat_id);
    $posts = get_posts($args);

    List of arguments http://codex.wordpress.org/Template_Tags/get_posts

    Hi Frizax:

    Yayy! Thank you for all your help – works perfectly!

    Ernie

    Hi Ernie,

    Please mark this thread to resolved if there is no further question.

    Thanks!
    Kapil

    Hi Frizax,
    Tried out the code for the category drop down widget, but it gives only one option, In my case I want to have a dropdown with so many categories that users can select from the dropdown (I mean more than one).
    How do I go about this please???

Viewing 15 replies - 1 through 15 (of 22 total)
  • The topic ‘Drop down list of posts from a category’ is closed to new replies.