Simple output from parent category

Question

I am working with this code in template page for WP.

<div id="content" role="main">
<?php

$query = array(
'post_type'      => 'post',
'category_name'  => 'jewellery-design',
'orderby'        => 'date',
'order'          => 'DESC'
);

$featured_home = new WP_Query( $query );

if( $featured_home->have_posts() ) {
?>


<div class="row">
    <?php while ( $featured_home->have_posts() ) : $featured_home->the_post();?>
     <span class="cat"><?php the_category(); ?> 
    <div class="col-3">
        <a href="<?php the_permalink(); ?>">
            <div class="featured-home-img" <?php
            if ( $thumbnail_id = get_post_thumbnail_id() ) {
                if ( $image_src = wp_get_attachment_image_src( $thumbnail_id, 'normal-bg' ) )
                    printf( ' style="background-image: url(%s);"', $image_src[0] );     
                }?>>

                <div class="blog-info-content">

                    <h3><?php the_title(); ?></h3>
                    <div class="obsah"><?php the_content(); ?></div>   </span>
                                    <p class="postmetadata">
Posted in <?php the_category(', ') ?> 
<strong>|</strong>
<?php edit_post_link('Edit','','<strong>|</strong>'); ?>  

            </span>
                </div>
            </div>
        </a>
    </div>
<?php
endwhile;
?>
</div>
<?php
}
wp_reset_postdata();
?>    
      </div>

And I am getting output like this:

But, i´d like to have output like this:

Can someone tell me how can I do it? Or may I use some plugin for Wordpress to make it easier for me?

Thank you.

Answer 1

I found a solution to the output I needed. If this helps anyone :)

$cat_args=array(
  'orderby' => 'name',
  'order' => 'ASC',
  'parent' => 2
   );
$categories=get_categories($cat_args);
  foreach($categories as $category) {
    $args=array(
      'showposts' => -1,
      'category__in' => array($category->term_id),
      'caller_get_posts'=>1
    );
    $posts=get_posts($args);
      if ($posts) {
        echo '<div class="test"><p>Category: <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>
          <p><a href="<?php the_permalink() ?>" <?php the_content(); ?></a></p>
          <?php
        } // foreach($posts
      echo '</div>';}  // if ($posts
    } // foreach($categories
?>

The 'parent' => 2 means ID of parent category from which you want to get your posts.

Have a nice day.

Answer 2

I might think about sorting them into groups first, then re-looping over the sorted groups. I am a little rusty on Wordpress so I have set it up essentially, but all the functions/methods need to return values, not echo, so you will need to adjust that:

<?php
# Create base function
function getItemsByCategoryType($category)
{
    $query = array(
        'post_type'      => 'post',
        'category_name'  => $category,
        'orderby'        => 'date',
        'order'          => 'DESC'
    );
    # Get query
    $featured_home = new WP_Query($query);
    # Just stop if empty
    if(!$featured_home->have_posts())
        return false;
    # Set a default
    $array = array();
    while($featured_home->have_posts()){
        $featured_home->the_post();
        $thumbnail_id =  get_post_thumbnail_id();
        $image_src    =  ($thumbnail_id)? wp_get_attachment_image_src($thumbnail_id,'normal-bg')) : false;
        # You are looking to store the category title as the key
        # That will isolate each group
        $array[the_category()][] = array(
            'thumb_id' => $thumbnail_id,
            'image' => $image_src,
            'permlink' => the_permalink(),
            'title' => the_title(),
            'content' => the_content(),
            'categories' => the_category(', '),
            'edit_mode' => edit_post_link('Edit','','<strong>|</strong>')
        );
    }
    wp_reset_postdata();
    # Send back stored data as an array
    return $array;
}

# To use, get the data from your function    
$Items = getItemsByCategoryType('jewellery-design') ?>

<div id="content" role="main">
    <?php if(!empty($Items)): ?>
    <div class="row">
        <?php foreach($Items as $categories => $rows): ?>
        <span class="cat"><?php echo $categories ?>
            <?php foreach($rows as $row): ?>
            <div class="col-3">
                <a href="<?php echo $row['permlink'] ?>">
                    <div class="featured-home-img"<?php if(!empty($row['image'][0])) echo ' style="background-image: url('.$row['image'][0].');"' ?>>
                        <div class="blog-info-content">
                            <h3><?php echo $row['title'] ?></h3>
                            <div class="obsah">
                                <?php echo $row['content'] ?>
                            </div>
                            <p class="postmetadata">Posted in <?php echo $row['categories'] ?><strong>|</strong><?php $row['edit_mode'] ?></p>
                        </div>
                    </div>
                </a>
            </div>
            <?php endforeach ?>
        </span>
        <?php endforeach ?>
    </div>
    <?php endif ?>
</div>

NOTE: Just to reiterate, I am not up to speed on WP so you need to take the idea of what I am proposing and fixing it, specifically when it comes to returning values vs allowing the WP functions to echo content.

---

EDIT:

You want an array to come out of the function similar to:

Array (
    [ Fibre Collection ] => Array (
        [ 0 ] => Array (
            [ title ] => FIBRE_BRACELET
            [ content ] => etc...,
            etc...
        )
    ),
    [ Tetragon Collection ] => Array (
        [ 0 ] => Array (
            [ title ] => Test2
            [ content ] => etc...,
            etc...
        ),
        [ 1 ] => Array (
            [ title ] => TETRAGÓN_BRACELET
            [ content ] => etc...,
            etc...
        )
    )
)