How can I display a list of categories and all their posts in WordPress?

Question

I'm working on a custom WordPress theme.

I'm trying to show a list of categories (as headings) for a custom post type, and underneath each category heading I would like to list the post titles and a single custom field. I'm using the Types plugin. I know a little php and have some WordPress experience, but not quite enough to properly figure this out.

Example:

Custom Post Type: Menu Item

Custom Field for This Post Type: Item Price

Category: Sandwich Fillings

Category: Soups

Desired result:

Sandwich Fillings

Cheese - £#.##

Ham - £#.##

Tuna - £#.##

...

Soups

Tomato

Chicken

Vegetable

The idea will be for new categories to be added on the fly (for example, one day they might start selling melts), and for WP to iterate through the categories as new ones are added, saving from having to hard-code in new categories on the page as they are added.

Here's what I have so far:

<?php

    $args = array(
        'post_type' => 'menu-item',
        'orderby' => 'name',
        'parent' => 0
    );

    $categories = get_categories( $args );

    foreach ( $categories as $category ) {

        $posts = get_posts($args);
        $item_price = types_render_field( "item-price" );

        echo '<h2>' . $category->name . '</h2>';
        ?>
            <ul><?php
            foreach($posts as $post) {
            ?>
                <li><?php the_title(); ?>, <?php echo $item_price; ?></li>
            <?php 
        }       
    }
?>

What I'm getting is this:

Sandwiches

Tomato,

Swiss Cheese,

French Brie,

French Brie,

...

Soups

Tomato, £2.60

Swiss Cheese, £2.60

French Brie, £2.60

French Brie, £2.60

Any help would be appreciated!

UPDATE

This seems to have helped:

<?php

    $args = array(
        'post_type' => 'menu-item'
    );

    $categories = get_categories( $args );
    $posts = get_posts($args);


    foreach ( $categories as $category ) {



        echo '<h2>' . $category->name . '</h2>';
        ?>

        <div class="menu-items-container">
            <?php foreach($posts as $post) { ?>
                <?php $item_price = types_render_field( "item-price" ); ?>
                <?php if (in_category($category)) { ?>
                    <p><?php the_title(); ?>, <?php echo $item_price; ?></p>
                <?php  } ?>
            <?php  } ?>
        </div>
<?php } ?>

And it's giving me the results that I was looking for. Stumbled upon this fix through experimentation and happy accident, so I'm aware that it may not be best practice - advice or suggestions for improvement would be welcome!

Answer 1

Something like this might be better, as it does not loop through all the posts for each category:

<?php

    $args = array(
        'post_type' => 'menu-item'
    );

    $categories = get_categories( $args );

    foreach ( $categories as $category ) {

        echo '<h2>' . $category->name . '</h2>';

        $args['category'] = $category->term_id;
        $posts = get_posts($args); ?>

        <div class="menu-items-container">
            <?php foreach($posts as $post) { ?>
                <?php $item_price = types_render_field( "item-price" ); ?>
                <p><?php the_title(); ?>, <?php echo $item_price; ?></p>
            <?php  } ?>
        </div>
<?php } ?>