[Resolved] How to create a categories list similar to this (link in post)?

[Edmond]

Hi all,

Any idea how to create a categories list like this fast: https://www.trustpilot.com/categories ?

I have Generatepress premium and also Elementor Pro, so I can use both. From what I tried I found no simple way to create something like that, so maybe I am missing something.

[Elvin]

Hi,

I believe elementor, even the pro version doesn’t have a particular category widget that lets you customize what displays. You’ll have to get a Elementor add-on for this.

One way of doing this is to manually place links for every category and its own subcategory. But this will surely be tedious depending on how many are existing.

Another way is to make your own shortcode for this.

[Edmond]

Hello,

Since i’m building a directory listing website that’s going to be somewhat tedious. I thought perhaps there’s something on GP/Elementor to help with that.

Thanks anyway!

[David]

Hi there,

we could create a shortcode function to output a list of the Categories, each with a nested list of its posts.

1. Add this PHP Snippet to your Site:

function db_get_category_posts() {
    $args = array( 
        'posts_per_page' => -1
    );

    $query = new WP_Query($args);   
    $q = array();

    while ( $query->have_posts() ) { 

        $query->the_post(); 

        $a = '<a href="'. get_permalink() .'">' . get_the_title() .'</a>';

        $categories = get_the_category();

        foreach ( $categories as $key=>$category ) {

            $b = '<a href="' . get_category_link( $category ) . '">' . $category->name . '</a>';    

        }

        $q[$b][] = $a; // Create an array with the category names and post titles
    }

    /* Restore original Post Data */
    wp_reset_postdata();

    $html = '';
    foreach ($q as $key=>$values) {
        $html .= '<div class="cateogory-list">' . $key;
        $html .= '<ul>';
        foreach ($values as $value){
            $html .= '<li class="cat-post-link">' . $value . '</li>';
        }
        $html .= '</ul></div>';
    }
    return $html;
}

add_shortcode( 'category_posts', 'db_get_category_posts' );

2. Add the [category_posts] shortcode to the page you want it displayed.

[Edmond]

Wow, thanks a lot i will try that.

[David]

You’re welcome

[Author]

Posts