Add all category as classes in foreach loop

I am trying to modify a portfolio plugin with filter function. The current code for listing to post items is: 

?php

class FullwidthPortfolioGallery extends ET_Builder_Module {
    public $slug       = 'fullwidth_portfolio_gallery';
    public $vb_support = 'on';

    protected $module_credits = array(
        'module_uri' = '',
        'author' = '',
        'author_uri' = '',
    );

    public function init() {
        $this-name = esc_html__('Portfolio Gallery', 'divi-modules');
        $this-fullwidth = true;

        $this-advanced_fields = [
            'background' = false,
            'fonts' = false,
            'max_width' = false,
            'link_options' = false,
        ];
    }

    public function get_fields() {
        return [];
    }

    public function render($attrs, $content = null, $render_slug) {

        global $post;
        $portfolio = [];
        $post_args = [
            'posts_per_page' = -1,
            'orderby'        = 'date',
            'order'          = 'DESC',
            'post_type'      = 'portfolio',
        ];

        foreach (get_posts($post_args) as $post) {

            $new = new \stdClass;

            $images = get_post_meta($post-ID, 'portfolio_photos', true);
            $new-images = [];

            if (empty($images)) {
                continue;
            } else {
                foreach($images as $k = $img) {
                    $i = wp_get_attachment_image_src($k, 'portfolio_gallery_size');
                    $new-images[] = (object) [
                        'src' = $i[0],
                        'w' = $i[1],
                        'h' = $i[2],
                    ];
                }
            }

            $billboard_image = array_rand($images, 1);
            $new-billboard = new \stdClass;
            $new-billboard-mobile = wp_get_attachment_image_src($billboard_image, 'portfolio_billboard_mobile')[0];
            $new-billboard-desktop = wp_get_attachment_image_src($billboard_image, 'portfolio_billboard_desktop')[0];

            $new-title = $post-post_title;
            $new-category = wp_get_post_terms($post-ID, 'portfolio_category')[0]-name;
            $new-category_slug = wp_get_post_terms($post-ID, 'portfolio_category')[0]-slug;
            $new-lightbox = 'lightbox-' . $post-ID;
            $new-id = $post-ID;

            $portfolio[] = $new;
            unset($new);
            unset($images);

        }

        if (empty($portfolio)) {
            return;
        }

        add_action('wp_footer', function() {
            include plugin_dir_path( dirname( __FILE__ ) ) . '../template/photoswipe.html';
        });

        wp_register_script('isotope', 'https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js', ['jquery'], false, true);
        wp_register_script('portfolio_scripts', plugins_url( 'FullwidthPortfolioGallery.js', __FILE__), ['isotope', 'jquery'], false, true);

        $portfolio_items = [];
        foreach ($portfolio as $p) {
            $portfolio_items[$p-id] = $p;
        }
        wp_localize_script('portfolio_scripts', 'portfolio_items', $portfolio_items);
        wp_enqueue_script('isotope');
        wp_enqueue_script('portfolio_scripts');

        $categories = get_terms( [
            'taxonomy' = 'portfolio_category',
            'hide_empty' = true,
        ] );

        $html = 'div class="portfolio-categories"div class="portfolio-categories-wrap"div class="portfolio-categories-list container"';

        $html .= 'button class="toggle"span class="dashicons dashicons-no"/spanspan class="dashicons dashicons-filter"/span/button';
        $html .= 'button class="filter active" data-filter="*"Vis alle/button';

        foreach ($categories as $cat) {
            $html .= 'button data-filter=".filter-'.$cat-slug.'" class="filter"'.$cat-name.'/button';
        }

        $html .= '/div/div/div';

        $html .= 'div class="portfolio-list"div class="portfolio-list-wrap"';
        foreach ($portfolio as $p) {
            $html .= 'div class="portfolio filter-'.$p-category_slug.'" data-id="'.$p-id.'"div class="portfolio-wrap"';
            $html .= 'div class="spinner-wrapper"div class="spinner-wrap"div class="spinner"/div/div/div';
            $html .= 'div class="billboard"img class="lazy mobile" data-src="'.$p-billboard-mobile.'" alt="'.$p-title.'" /img class="lazy desktop" data-src="'.$p-billboard-desktop.'" alt="'.$p-title.'" /div class="overlay"span class="dashicons dashicons-images-alt"/span/div/div';
            $html .= 'div class="info"p class="cat"'.$p-category.'/ph2'.$p-title.'/h2/div';
            $html .= '/div/div';
        }
        $html .= '/div/div';

        return 'div class="fullwidth-portfolio-gallery"'.$html.'/div';
    }
}

new FullwidthPortfolioGallery;

Currently each item get only one class "filter-TERMSLUG", but I would like to have classes listed for all the categories the item is in.

Can anyone help me with that?

Best regards

Topic loop post-class Wordpress

Category Web

1
answered at

Please replace:

$new->category_slug = wp_get_post_terms($post->ID, 'portfolio_category')[0]->slug;

with

$category_slug = wp_get_post_terms($post->ID, 'portfolio_category');
$cat_cls = '';
foreach($category_slug as $cat_classes){
    $cat_cls .= " " . $cat_classes->slug;
}
$new->category_slug = $cat_cls;

Because the code you have written above will store only first category it will get.

1
answered at

While you are looping through your $categories, you can build out a class to use later on. I pulled out just the two foreach loops and dropped a few lines in there that will hopefully get you there:

// Fun stuff above

$category_class = '';
foreach ($categories as $cat) {
    $html .= '<button data-filter=".filter-'.$cat->slug.'" class="filter">'.$cat->name.'</button>';
    // NOTE: Build out your $category_class here
    $category_class .= $cat->slug.' '; // we need an extra space to separate each class. We'll use trim() to clean up the extra space to the right of the last class
}

$html .= '</div></div></div>';

$html .= '<div class="portfolio-list"><div class="portfolio-list-wrap">';
foreach ($portfolio as $p) {
    $html .= '<div class="portfolio filter-'.$p->category_slug.' '.trim($category_class).'" data-id="'.$p->id.'"><div class="portfolio-wrap">';
    $html .= '<div class="spinner-wrapper"><div class="spinner-wrap"><div class="spinner"></div></div></div>';
    $html .= '<div class="billboard"><img class="lazy mobile" data-src="'.$p->billboard->mobile.'" alt="'.$p->title.'" /><img class="lazy desktop" data-src="'.$p->billboard->desktop.'" alt="'.$p->title.'" /><div class="overlay"><span class="dashicons dashicons-images-alt"></span></div></div>';
    $html .= '<div class="info"><p class="cat">'.$p->category.'</p><h2>'.$p->title.'</h2></div>';
    $html .= '</div></div>';
}

// Fun stuff below

Hope that helps!

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.