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', '@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"></span><span 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.'</p><h2>'.$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

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/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"></span><span 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.'</p><h2>'.$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

• loop
• post-class

• Please provide the complete code you have used. – Bhupen Commented Jun 26, 2019 at 13:53
• Sorry... updated the post with full code – jlock Commented Jun 26, 2019 at 14:09

2 Answers 2

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.

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!