Combination of Category & Posts Drop Down

Hi,

I need some help here. I want to build a category drop down along with posts drop down such that when people select a category from the drop down, it will populate the posts drop down.

Currently there are 5 categories and I am using the following code but I don’t know how to pass on the value of the currently browsing category to the wp_query. So I have created 5 category specific templates each having its own category id in the wp_query code.

For category drop down:

<form action="<?php bloginfo('url'); ?>/" method="get" style="display:inline;">
<?php
$select = wp_dropdown_categories('show_option_none=Select Episode&show_count=1&orderby=name&order=DESC&echo=0');
$select = preg_replace("#<select([^>]*)>#", "<select$1 onchange='return this.form.submit()'>", $select);
echo $select;
?>
<noscript><input type="submit" value="View" /></noscript>
</form>

And for the posts drop down:

<?php
$postid = url_to_postid( get_permalink() );
//$cat_id = get_cat_ID('episode-01');
$args=array(
'cat' => 3,
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => -1,
'orderby' => 'date',
'order' => 'ASC'
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
?>
<form name="jump" style="display:inline;">
<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_top')">
<?php
while ($my_query->have_posts()) : $my_query->the_post();
$mpostid = url_to_postid( get_permalink() );
?>
<option value="<?php the_permalink() ?>"<?php if($postid == $mpostid) echo " selected"; ?>><?php the_title(); ?></option>
<?php
endwhile;
} ?>
</select>
</form>
<?php
wp_reset_query();
?>

In short, I need to build a two level drop down such that when members select a category, the posts drop down will automatically get populated without having to create additional category specific templates. That way, if I create more categories, I don’t have to worry about creating additional templates.

  • 3SixtyEvolve
    • New Recruit

    Hi Alok

    Greetings and thank you for posting to the forum :slight_smile:

    @digitsoft gave a very good solution with the dynamicwp.net tutorial. I have tried it myself and it is a very good snippet of code.

    Hope this is what you were after. If you need any further assistance, please don’t hesitate to be in touch.

    Have a good weekend!

    Gina

  • Alok Sharma
    • Design Lord, Child of Thor

    @digisoft – Actually, I am using the same code from the link you mentioned.

    It does works but its giving unexpected results. For e.g. if I select category B from the drop down, it does populates all the post in the post drop down but when I select a post from the posts drop down, it takes me to the most recent post which is in category D.

    As for the category drop down, I think the exist code should do the needful.

    But I need to figure out how to insert the category id of the currently browsing posts dynamically in the wp_query code so that I don’t have to create category specific templates.

    Any help will be highly appreciated.

  • digitsoft
    • The Crimson Coder

    This should do it for you…seems to work for me…only change in the code is the first 2 lines.

    This only pulls the first category it comes to and as you probably know posts can have multiple categories.

    <?php

    $cat_id = get_the_category();

    $cat_id = get_cat_ID($cat_id[0]->cat_name);

    $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();

    ?>

  • Alok Sharma
    • Design Lord, Child of Thor

    Thanks, but you have referenced $cat_id variable twice:

    $cat_id = get_the_category();

    $cat_id = get_cat_ID($cat_id[0]->cat_name);

    I guess the 1st one will be discarded and the 2nd one will take effect.

    Just to confirm if I should put this is the same sequence.

  • Alok Sharma
    • Design Lord, Child of Thor

    Never mind, I tried this out the way you mentioned it and it works great. For now, I won’t have to create additional category specific templates as and when new categories are added.

    Just one small issue. When I select a category from the drop down, it always loads the most recent post and not the least recent post even after having the ‘orderby’ => ‘date’ & ‘order’ => ‘ASC’ parameters in wp_query. Any clues what could be wrong?

  • 3SixtyEvolve
    • New Recruit

    Hi Alok

    Hope you’re well.

    With regards to your latest question. Will let one of my colleagues take a look.

    Just one small issue. When I select a category from the drop down, it always loads the most recent post and not the least recent post even after having the ‘orderby’ => ‘date’ & ‘order’ => ‘ASC’ parameters in wp_query. Any clues what could be wrong?

    Have a good weekend!

    Gina

  • PC
    • WPMU DEV Initiate

    Hello Alok,

    I have had a look at the question for you.

    When I select a category from the drop down, it always loads the most recent post and not the least recent post even after having the ‘orderby’ => ‘date’ & ‘order’ => ‘ASC’ parameters in wp_query.

    That is the default behavior of the post display page.

    If you have noticed, when you select any category from the dropdown list, it would take to to some page like yourdomain.com/blog/category/free-website-hosting-services/ (Or something else as per your setup)

    Now, the below code

    'orderby'            => 'date',
    'order' => 'ASC',

    Is not to change the order in which the posts are displayed, but to change the order in which the categories appear in the drop down.

    I hope that makes it clear for you.

    Please advise

    Cheers

    PC

  • Alok Sharma
    • Design Lord, Child of Thor

    Sorry for not mentioning it clearly, but I am already using this code:

    <?php
    $postid = url_to_postid( get_permalink() );
    $cat_id = get_the_category();
    $cat_id = get_cat_ID($cat_id[0]->cat_name);
    $args=array(
    'cat' => $cat_id,
    'post_type' => 'post',
    'post_status' => 'publish',
    'posts_per_page' => -1,
    'orderby' => 'date',
    'order' => 'ASC'
    );
    $my_query = null;
    $my_query = new WP_Query($args);
    if( $my_query->have_posts() ) {
    ?>

    Still it shows the latest post 1st.

  • PC
    • WPMU DEV Initiate

    Hello Alok,

    I have added the below code to the category.php and it looks good.

    <?php /* Reverse the sort order ascending */ ?>
    <?php query_posts($query_string . "&order=ASC"); ?>

    Add the above code before this one

    <?php if ( ! have_posts() ) : ?>

    And It would reverse the order of post display on category archives.

    I would recommend you to take a backup before you modify the file.

    Please post if you have any further questions.

    Cheers

    PC

  • Alok Sharma
    • Design Lord, Child of Thor

    I think I have not put the codes in the correct place. We display only one post per page. Here is the complete code of index.php template:

    <?php get_header(); ?>
    <?php
    $yesterday = date("Y/m/d", get_the_time('U') - 86400);
    $tomorrow = date("Y/m/d", get_the_time('U') + 86400);
    $my_language = get_bloginfo('description');
    if ( $my_language == "english" ) {
    $homepage="www";
    } else {
    $homepage=$my_language;
    }
    ?>

    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    <div align="center" style="background-color:white;">
    <?php previous_post_link('%link', 'PREVIOUS PAGE'); if(get_previous_post()) echo ' | '; ?>
    <form action="<?php bloginfo('url'); ?>/" method="get" style="display:inline;">
    <?php
    $select = wp_dropdown_categories('show_option_none=Select Episode&show_count=1&orderby=name&order=DESC&echo=0');
    $select = preg_replace("#<select([^>]*)>#", "<select$1 onchange='return this.form.submit()'>", $select);
    echo $select;
    ?>
    <noscript><input type="submit" value="View" /></noscript>
    </form>
    |
    <?php
    $postid = url_to_postid( get_permalink() );
    $cat_id = get_the_category();
    $cat_id = get_cat_ID($cat_id[0]->cat_name);
    $args=array(
    'cat' => $cat_id,
    'post_type' => 'post',
    'post_status' => 'publish',
    'posts_per_page' => -1,
    'orderby' => 'date',
    'order' => 'ASC'
    );
    $my_query = null;
    $my_query = new WP_Query($args);
    if( $my_query->have_posts() ) {
    ?>
    <form name="jump" style="display:inline;">
    <select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_top')">
    <?php
    while ($my_query->have_posts()) : $my_query->the_post();
    $mpostid = url_to_postid( get_permalink() );
    ?>
    <option value="<?php the_permalink() ?>"<?php if($postid == $mpostid) echo " selected"; ?>><?php the_title(); ?></option>
    <?php
    endwhile;
    } ?>
    </select>
    </form>
    <?php
    wp_reset_query();
    ?>
    <?php if(get_next_post()) echo ' | '; next_post_link('%link', 'NEXT PAGE'); ?>
    <?php the_content('Read the rest of this entry &raquo;'); ?>
    <?php previous_post_link('%link', 'PREVIOUS PAGE'); if(get_previous_post()) echo ' | '; ?>
    <strong><?php the_title(); ?></strong>
    <?php if(get_next_post()) echo ' | '; next_post_link('%link', 'NEXT PAGE'); ?>
    </div>
    <?php endwhile; ?>
    <?php else : ?>
    <div align="center" style="background-color:white;">
    <h2 class="center">Not Found</h2>
    <p class="center">Sorry, but you are looking for something that isn't here.</p>
    </div>
    <?php endif; ?>
    <?php get_footer(); ?>

  • 3SixtyEvolve
    • New Recruit

    Hi Alok

    Hope you’re well.

    Thank you for your patience while we try to assist you with the remaining of your questions.

    My colleague PC will re-look at the code that you’ve posted to see if we can find a solutions.

    So I hope we will get you sorted soon. Have a good weekend!

    Gina

  • PC
    • WPMU DEV Initiate

    @alok, thanks for the code,

    I have a question before I look for a solution for you.

    Do you want that when you select a category from the drop down, it should just display one post in the archive and that should be the least recent one ?

    I am incorrect here, I would request you to please elaborate what you are trying to achieve so that we can help you in a better way !

    Cheers

    PC

  • Alok Sharma
    • Design Lord, Child of Thor

    Yes, you are correct. This is what I am trying to achieve.

    However, if there is no category selected the most recent post will be displayed.

    Also, I am using only a single template i.e. index.php and no other templates like category.php, archives.php, archive.php etc…

  • PC
    • WPMU DEV Initiate

    Hey Alok,

    I found a really nice plugin for you. This Plugin can be used to Independently control the number of posts listed on the front page, author/category/tag archives, search results, etc.

    Find the Custom Post Limits Plugin here

    Its compatible upto, Compatible up to: 3.3.2 though last update on Last Updated: 2010-1-5.

    However I tested this on my test multisite install, and it seemed to work fine for me. You may want to give that a try. Just remember to take a backup of your install before you try that… :slight_smile: (You know why I always suggest that)

    That way you will not have to mess up with the codes :smiley:

    And to reverse the order of posts, you can use just the below code on the archive page (In my case I have used category.php and after that configure your plugin as per the screenshot and you are good to go.

    <?php /* Reverse the sort order ascending */ ?>
    <?php query_posts($query_string . &quot;&order=ASC&quot;); ?>

    Add the above code before this one

    <?php if ( ! have_posts() ) : ?>

    And It would reverse the order of post display on category archives.

    PS : I tried to use your code to configure index.php to get that working but that did not work, may be I couldn't replicate your whole setup, so I would suggest, if you have just started with this customization, try and use the above procedure and I would be much easier.

    Also, if you want to get some serious dev stuff on this customization WPMU Jobs is always there :slight_smile:

    Screenshot 2 shows my site after I followed the above steps :wink:

    Hope it helps !

    Cheers

    PC

  • Alok Sharma
    • Design Lord, Child of Thor

    Hi PC,

    Great to see you as a staff, congrats!

    I added ‘<?php query_posts($query_string . "&order=ASC":wink:; ?>’ this just above ‘<?php if ( ! have_posts() ) : ?>’ and it did work but the page starts showing the same post, drop downs, prev / next navigations etc twice.

    Can’t figure out what could be wrong.

    Thanks,

    Alok

  • PC
    • WPMU DEV Initiate

    Hello Alok,

    Thanks for the nice words :slight_smile:

    page starts showing the same post, drop downs, prev / next navigations etc twice

    This is strange, where have you added that part ? and I doubt it might be due to the below code that its appearing twice.

    .
    .
    .$my_query = new WP_Query($args).
    .
    .

    I would like to try and replicate it on my test install, so, if you could send me the modified files, and setup info to goobindia (at) gmail (dot) com, I would use them on my test install and try to replicate it.

    Please do not send the admin credentials, just the theme files and any modified template files. (A .zip would be the best)

    Cheers

    PC

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.