Question posted in
The full documentation can be found here.

WordPress Divi Theme Link to Filtered Portfolio Category

I’m using the current version of the Divi 2.0 theme and WordPress. The theme uses a filterable portfolio gallery that a user can click to filter between categories. The links are # and instead I think the click is passed using: data-category-slug=”%1$s”

Where “%1$s” is the name of the category. I’ve tried adding “%1$s” to the end of the #link, but it doesn’t work.

Theme function:

function et_pb_filterable_portfolio( $atts ) {
extract( shortcode_atts( array(
        'module_id' => '',
        'module_class' => '',
        'fullwidth' => 'on',
        'posts_number' => 10,
        'include_categories' => '',
        'show_title' => 'on',
        'show_categories' => 'on',
        'show_pagination' => 'on',
        'background_layout' => 'light',
    ), $atts
) );

wp_enqueue_script( 'jquery-masonry-3' );
wp_enqueue_script( 'hashchange' );

$args = array();

if( 'on' === $show_pagination ) {
    $args['nopaging'] = true;
} else {
    $args['posts_per_page'] = (int) $posts_number;
}

if ( '' !== $include_categories ) {
    $args['tax_query'] = array(
        array(
            'taxonomy' => 'project_category',
            'field' => 'id',
            'terms' => explode( ',', $include_categories ),
            'operator' => 'IN',
        )
    );
}

$projects = et_divi_get_projects( $args );

$categories_included = array();
ob_start();
if( $projects->post_count > 0 ) {
    while ( $projects->have_posts() ) {
        $projects->the_post();

        $category_classes = array();
        $categories = get_the_terms( get_the_ID(), 'project_category' );
        if ( $categories ) {
            foreach ( $categories as $category ) {
                $category_classes[] = 'project_category_' . urldecode( $category->slug );
                $categories_included[] = $category->term_id;
            }
        }

        $category_classes = implode( ' ', $category_classes );

        ?>
        <div id="post-<?php the_ID(); ?>" <?php post_class( 'et_pb_portfolio_item ' . $category_classes ); ?>>
        <?php
            $thumb = '';

            $width = 'on' === $fullwidth ?  1080 : 400;
            $width = (int) apply_filters( 'et_pb_portfolio_image_width', $width );

            $height = 'on' === $fullwidth ?  9999 : 284;
            $height = (int) apply_filters( 'et_pb_portfolio_image_height', $height );
            $classtext = 'on' === $fullwidth ? 'et_pb_post_main_image' : '';
            $titletext = get_the_title();
            $thumbnail = get_thumbnail( $width, $height, $classtext, $titletext, $titletext, false, 'Blogimage' );
            $thumb = $thumbnail["thumb"];

            if ( '' !== $thumb ) : ?>
                <a href="<?php the_permalink(); ?>">
                <?php if ( 'on' !== $fullwidth ) : ?>
                    <span class="et_portfolio_image">
                <?php endif; ?>
                        <?php print_thumbnail( $thumb, $thumbnail["use_timthumb"], $titletext, $width, $height ); ?>
                <?php if ( 'on' !== $fullwidth ) : ?>
                        <span class="et_overlay"></span>
                    </span>
                <?php endif; ?>
                </a>
        <?php
            endif;
        ?>

        <?php if ( 'on' === $show_title ) : ?>
            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <?php endif; ?>

        <?php if ( 'on' === $show_categories ) : ?>
            <p class="post-meta"><?php echo get_the_term_list( get_the_ID(), 'project_category', '', ', ' ); ?></p>
        <?php endif; ?>

        </div><!-- .et_pb_portfolio_item -->
        <?php
    }
}

wp_reset_postdata();

$posts = ob_get_clean();

$categories_included = explode ( ',', $include_categories );
$terms_args = array(
    'include' => $categories_included,
    'orderby' => 'name',
    'order' => 'ASC',
);
$terms = get_terms( 'project_category', $terms_args );

$category_filters = '<ul class="clearfix">';
$category_filters .= sprintf( '<li class="et_pb_portfolio_filter et_pb_portfolio_filter_all"><a href="#" class="active" data-category-slug="all">%1$s</a></li>',
    esc_html__( 'All', 'Divi' )
);
foreach ( $terms as $term  ) {
    $category_filters .= sprintf( '<li class="et_pb_portfolio_filter"><a href="#" data-category-slug="%1$s">%2$s</a></li>',
        esc_attr( urldecode( $term->slug ) ),
        esc_html( $term->name )
    );
}
$category_filters .= '</ul>';

$class = " et_pb_bg_layout_{$background_layout}";

$output = sprintf(
    '<div%5$s class="et_pb_filterable_portfolio %1$s%4$s%6$s" data-posts-number="%7$d"%10$s>
        <div class="et_pb_portfolio_filters clearfix">%2$s</div><!-- .et_pb_portfolio_filters -->

        <div class="et_pb_portfolio_items_wrapper %8$s">
            <div class="column_width"></div>
            <div class="gutter_width"></div>
            <div class="et_pb_portfolio_items">%3$s</div><!-- .et_pb_portfolio_items -->
        </div>
        %9$s
    </div> <!-- .et_pb_filterable_portfolio -->',
    ( 'on' === $fullwidth ? 'et_pb_filterable_portfolio_fullwidth' : 'et_pb_filterable_portfolio_grid clearfix' ),
    $category_filters,
    $posts,
    esc_attr( $class ),
    ( '' !== $module_id ? sprintf( ' id="%1$s"', esc_attr( $module_id ) ) : '' ),
    ( '' !== $module_class ? sprintf( ' %1$s', esc_attr( $module_class ) ) : '' ),
    esc_attr( $posts_number),
    ('on' === $show_pagination ? '' : 'no_pagination' ),
    ('on' === $show_pagination ? '<div class="et_pb_portofolio_pagination"></div>' : '' ),
    is_rtl() ? ' data-rtl="true"' : ''
);

return $output;
}

localhost page source:

localhost page source:

                <div class="et_pb_row">
        <div class="et_pb_column et_pb_column_4_4">
        <div class="et_pb_filterable_portfolio et_pb_filterable_portfolio_grid clearfix et_pb_bg_layout_light" data-posts-number="10">
        <div class="et_pb_portfolio_filters clearfix"><ul class="clearfix"><li class="et_pb_portfolio_filter et_pb_portfolio_filter_all"><a href="#" class="active" data-category-slug="all">All</a></li><li class="et_pb_portfolio_filter"><a href="#" id="verizon-4g-lte-smartphones" data-category-slug="verizon-4g-lte-smartphones">4G LTE Smartphones</a></li><li class="et_pb_portfolio_filter"><a href="#" id="verizon-connected-devices" data-category-slug="verizon-connected-devices">Specialty Devices</a></li></ul></div><!-- .et_pb_portfolio_filters -->

        <div class="et_pb_portfolio_items_wrapper ">
            <div class="column_width"></div>
            <div class="gutter_width"></div>
            <div class="et_pb_portfolio_items">         <div id="post-253" class="post-253 project type-project status-publish has-post-thumbnail hentry et_pb_portfolio_item project_category_verizon-4g-lte-smartphones">
                            <a href="http://localhost/project/galaxy-note-edge-by-samsung/">
                                        <span class="et_portfolio_image">
                                            <img src="http://localhost/wp-content/uploads/2015/02/devices-samsung-note-edge-thumb3-216x284.png" alt='Galaxy Note™ Edge by Samsung' width='400' height='284' />                                              <span class="et_overlay"></span>
                    </span>
                                    </a>

                        <h2><a href="http://localhost/project/galaxy-note-edge-by-samsung/">Galaxy Note™ Edge by Samsung</a></h2>

                        <p class="post-meta"><a href="http://localhost/project_category/verizon-4g-lte-smartphones/" rel="tag">4G LTE Smartphones</a></p>

        </div><!-- .et_pb_portfolio_item -->
                    <div id="post-97" class="post-97 project type-project status-publish has-post-thumbnail hentry et_pb_portfolio_item project_category_verizon-connected-devices">
                            <a href="http://localhost/project/lg-gizmopal/">
                                        <span class="et_portfolio_image">
                                            <img src="http://localhost/wp-content/uploads/2015/02/devices-gizmopal-thumb-216x284.png" alt='GizmoPal™ by LG' width='400' height='284' />                                             <span class="et_overlay"></span>
                    </span>
                                    </a>

                        <h2><a href="http://localhost/project/lg-gizmopal/">GizmoPal™ by LG</a></h2>

                        <p class="post-meta"><a href="http://localhost/project_category/verizon-connected-devices/" rel="tag">Specialty Devices</a></p>

        </div><!-- .et_pb_portfolio_item -->
        </div><!-- .et_pb_portfolio_items -->
        </div>
        <div class="et_pb_portofolio_pagination"></div>
    </div> <!-- .et_pb_filterable_portfolio -->
    </div> <!-- .et_pb_column -->
    </div> <!-- .et_pb_row -->

    </div> <!-- .et_pb_section -->
                </div> <!-- .entry-content -->


            </article> <!-- .et_pb_post -->



</div>

I want to link from one page to the filtered portfolio with a filter already selected? Any help is appreciated.

-Ranks

Tags:

3

Answers


  1. 0

    I struggled with the same thing. Finally, I did a wonky workaround.

    First, I added a custom script to the Divi > Theme Options > Integration > section in the area. In my exaple, the category is called ‘available’.

    <script>
function doAvailable() {
setTimeout( function() { document.querySelector('[data-category-slug="available"]').click(); }, 1000);
}
</script>

    Then in the page I created I added a Code module at the bottom of the page to call the custom function.

    <script>
doAvailable();
</script>

    I wish I could have found a better way, but this does work for me.

    Login or Signup to reply.
  2. 0

    What I did is to generate a sitemap with google sitemap plugin and to select in the config menu “sitemap’s content” the custom taxonomies. Then, I’ve checked the sitemap, and I’ve seen that the project categories are available under url/project_category/category_slug.

    Login or Signup to reply.
  3. 0

    The answer by Jordi appears to be incorrect and I don’t want to mess around with javascript. I found that url/project/slug works fine i.e. mydomain.com/project/my-project

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search