WordPress.org

Support

Support » How-To and Troubleshooting » List all categories and their posts under them – Implement in accordion

List all categories and their posts under them – Implement in accordion

  • Hi all, I’m very new to PHP and I don’t know much, I had this idea I wish to implement on my blog and I am looking for some help.

    What I’m trying to do here is create an accordion which lists all categories and their posts under them. For the accordion I used the simple accordion demonstrated here: http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/.

    Ok so first I needed a code to list all my categories with their respective posts under them as permanent links. With some research I came up with this which seems to work fine:

    <?php
    
    $cat_args=array(
      'orderby' => 'name',
      'order' => 'ASC'
       );
    $categories=get_categories($cat_args);
      foreach($categories as $category) {
        $args=array(
          'showposts' => 50,
          'category__in' => array($category->term_id),
          'caller_get_posts'=>1
        );
        $posts=get_posts($args);
          if ($posts) {
            echo '<p><a href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '>' . $category->name.'</a> </p> ';
            foreach($posts as $post) {
              setup_postdata($post); ?>
              <p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>
              <?php
            } // foreach($posts
          } // if ($posts
        } // foreach($categories
    ?>

    This goes inside the loop under the <?php if (have_posts()) :?>

    Next what I want to do is basically adjust this to an accordion menu I’ve written. The accordion HTML is pretty simple:

    <div id="basic-accordian">
        <div id="test-header" class="accordion_headings header_highlights">Category 1</div>
    	<div id="test-content">
    	  <div class="accordion_child">
    	    <ul>
    	     <li>Post 1</li>
    	     <li>Post 2</li>
                 etc
    	    </ul>
    	  </div>
    	</div>
    
         <div id="test1-header" class="accordion_headings">Category 2</div>
    	<div id="test1-content">
    	  <div class="accordion_child">
    	    <ul>
    	     <li>Post 1</li>
    	     <li>Post 2</li>
                 etc
    	    </ul>
    	  </div>
    	</div>
    </div>

    So what is needed from what I can tell with my less than basic knowledge of PHP is that the name of the Category needs to be wrapped with the <div id="testX-header" class="accordion_headings"> CATEGORY NAME </div> where $ = ascending number, 1, 2, 3 etc,

    and wrap the `<div id=”testXcontent”><div class=”accordion_child”>..posts..</div> around the actual posts of each category.

Viewing 4 replies - 1 through 4 (of 4 total)
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘List all categories and their posts under them – Implement in accordion’ is closed to new replies.