Wordpress Awesome Filterable portfolio plugin

Question

Currently I'm working on a project which I have installed a Wordpress plugin to the site called 'Awesome Filterable portfolio Plugin'. This is a plugin to show portfolio items in categories.

The plugin is working fine and as aspected. However, my clients wants to show not all portfolio items by default, when going to the portfolio page, but only the three portfolio items from a category; in my case 'visitekaartjes'.

I already raised this question to the plugin developer, but never got a reply back on the Wordpress plugin support page.

My knowledge of PHP is limited, so i'm struggling to get this last item done. But, I have an idea were to look, but even after searching and trial & error for days, it doesn't get to the eureka moment. That's why i'm trying my luck here.

Here's the code:

$items = $wpdb->get_results('SELECT * FROM ' . $wpdb->prefix . 'afp_items ORDER BY ' .     $orderby);
    if( $afpOptions['sort_cat'] == 'on' ){
        $orderby = ' ORDER BY cat_name';
    } else {
        $orderby = '';
    }
    $cats = $wpdb->get_results('SELECT * FROM ' . $wpdb->prefix . 'afp_categories' . $orderby);
    ?>

    <?php 
        //AFP Main Container
        $output='<div class="afp-clear"></div>
        <div id="afp-container">';

        //Start Echo Categories
    $output.='<ul id="afp-filter">
    '; 
    foreach ( $cats as $cat ){
            $output.='<li><a href="#" class="' . ereg_replace("[^A-Za-z0-9]", "", $cat-  >cat_name) . '">' . $cat->cat_name . '</a></li>';
    }
    $output.='</ul>';
        //End Echo Categories

        //Start Echo Portfolio Items
    $output.='<ul class="afp-items">';
    $k = 1;
    foreach ($items as $item ){
            $output.='<li class="afp-single-item" data-id="id-' . $k . '" data-type="' .  ereg_replace("[^A-Za-z0-9]", "", $item->item_category) .'">
            <a class="fancybox" title="' . $item->item_description . '" href="' . $item->item_image . '"><img alt="" class="img-link-initial" src="' . $item->item_thumbnail . '"></a><br />
            <ul class="afp-item-details">';
                if($item->item_title != null) { $output.='<li><strong>' . $item->item_title . '</strong></li>'; }
if($item->item_client != null) { $output.='<li>' . $item->item_client . '</li>'; }
if($item->item_date != '0000-00-00') { $output.='<li>' . date("m/d/Y", strtotime($item-  >item_date)) . '</li>'; }
if($item->item_link != null) { $output.='<li><a target="_' . $afpOptions['project_link'] . '" href="' . $item->item_link . '">Project Link</a></li>'; }
            $output.='</ul>
        </li>';

        $k++;
}
    $output.='</ul>

Hope somebody can help me with this.

Thanks in advanced,

Roland

Answer 1

Actually, the portfolio is a custom post type and the portfolio category is a custom taxonomy, used to group the portfolio items in categories. In this case, to query a custom post type with custom taxonomy, WordPress provides better and easy solution, for example, to query for three portfolio items with custom taxonomy (portfolio category) design you can write a query like this

$args = array(
    'post_type' => 'portfolio',
    'posts_per_page' => 3,
    'tax_query' => array(
        array(
            'taxonomy' => 'portfolio_category', // Could be anything in your case
            'field' => 'slug',
            'terms' => 'design'
        )
    )
);
$query = new WP_Query( $args );

Now you can loop it like,

if($query->have_posts()): while()
    while ($the_query->have_posts()): $query->the_post();
        ?><h2><?php the_title(); ?></h2><?php
    endwhile;
endif;

This may doesn't answer your question but gives you an idea to do it properly.

Answer 2

If you want to allow a visitor to click a button and view more or all items you maybe should implement this clientside using JavaScript & CSS. (Unless you have thousands of items in the portfolio) You set the height of the container to the height of 1 row of items. And then create a button that will extend this height, to show either one row at a time or to show all items at ones.

I actually implemented this myself on http://annual-insight.nl/referenties/ You can just check this file: http://annual-insight.nl/wp-content/plugins/ai-referenties/js/air-functions.js to see what I did there.

It requires your portfolio items to be of equal height.