WordPress.org

Ready to get started?Download WordPress

Forums

List all categories and their posts under them - Implement in accordion (5 posts)

  1. Vassilis Mastorostergios
    Member
    Posted 5 years ago #

    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.

  2. Vassilis Mastorostergios
    Member
    Posted 5 years ago #

    Minor corrections: "where $=" I mean where X= 1, 2, 3 etc
    and "and wrap the <div id="testXcontent"><div class="accordion_child">..posts..</div> around the actual posts of each category."

    Also, only the first category should have the class "header_highlights" but if thats to difficult it can be skipped.

    Any thoughts on how to do this? Thanks in advance!

  3. Vassilis Mastorostergios
    Member
    Posted 5 years ago #

    any help?

  4. Vassilis Mastorostergios
    Member
    Posted 5 years ago #

    Bah, still haven't figured it out, any ideas? I think it's a simple "for" command but I'm a PHP noob

  5. cornhustlah
    Member
    Posted 5 years ago #

    i am also a PHP n00b and would very much like to know how to implement this

Topic Closed

This topic has been closed to new replies.

About this Topic