hyperlink - Wordpress Divi Theme Link to Filtered Portfolio Category -
i'm using current version of divi 2.0 theme , wordpress. theme uses filterable portfolio gallery user can click filter between categories. links # , instead think click passed using: data-category-slug="%1$s"
where "%1$s" name of category. i've tried adding "%1$s" end of #link, 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 $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 $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 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 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™ lg' width='400' height='284' /> <span class="et_overlay"></span> </span> </a> <h2><a href="http://localhost/project/lg-gizmopal/">gizmopal™ 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 link 1 page filtered portfolio filter selected? appreciated.
-ranks
i struggled same thing. finally, did wonky workaround.
first, added custom script divi > theme options > integration > section in area. in exaple, category called 'available'.
<script> function doavailable() { settimeout( function() { document.queryselector('[data-category-slug="available"]').click(); }, 1000); } </script> then in page created added code module @ bottom of page call custom function.
<script> doavailable(); </script> i wish have found better way, work me.
Comments
Post a Comment