Nsp Code https://www.nsp-code.com Premium WordPress Development Thu, 12 Sep 2019 08:09:41 +0000 en-US hourly 1 https://wordpress.org/?v=4.9.11 Retrieve posts per customised order through JSON REST API https://www.nsp-code.com/retrieve-posts-per-customised-order-through-json-rest-api/ https://www.nsp-code.com/retrieve-posts-per-customised-order-through-json-rest-api/#respond Wed, 11 Sep 2019 15:44:04 +0000 https://www.nsp-code.com/?p=17189 The JSON REST API service, fully implemented into WordPress since 4.7, provides a great way for other applications to connect. This is a huge step forward, as it can communicate and exchange data regardless of what languages an external program uses. The API support a bunch of endpoints to cover pretty much all existing data. […]

The post Retrieve posts per customised order through JSON REST API appeared first on Nsp Code.

]]>

The JSON REST API service, fully implemented into WordPress since 4.7, provides a great way for other applications to connect. This is a huge step forward, as it can communicate and exchange data regardless of what languages an external program uses.

The API support a bunch of endpoints to cover pretty much all existing data. A full list can be found at https://developer.wordpress.org/rest-api/reference/

Post retrieval through the API can be done by invoking the “posts” endpoint as follow:


curl -X OPTIONS -i https://example.com/wp-json/wp/v2/posts

The full list of supported arguments can be checked at https://developer.wordpress.org/rest-api/reference/posts/#list-posts

To retrieve the list of posts in an order predefined through a custom sort the orderby argument need to be passed through along the API call:


curl -X OPTIONS -i https://example.com/wp-json/wp/v2/posts?categories=1&orderby=menu_order&order=asc

The above return all posts which belong to category id 1, using the order defined in the sort list.

The post Retrieve posts per customised order through JSON REST API appeared first on Nsp Code.

]]>
https://www.nsp-code.com/retrieve-posts-per-customised-order-through-json-rest-api/feed/ 0
WooCommerce – Sort Products which belong to multiple categories https://www.nsp-code.com/woocommerce-sort-products-which-belong-to-multiple-categories/ https://www.nsp-code.com/woocommerce-sort-products-which-belong-to-multiple-categories/#comments Wed, 05 Jun 2019 01:55:40 +0000 http://www.nsp-code.com/?p=602 An easy way to sort products which belong to multiple categories while keeping the previously order set for other places. This will ensure no order list is lost while a new sort is built.
Everything it's done though an intuitive drag and drop interface.

The post WooCommerce – Sort Products which belong to multiple categories appeared first on Nsp Code.

]]>
woo-commerce-logo

Probably the best choice for e-commerce under a WordPress environment, WooCommerce deliver all the juice you need for a successfully e-commerce business.  WooCommerce is built using WordPress best practices both on the front and the back end. This results in an efficient, robust and intuitive plugin.

Product Sorting has been introduced reticently, as an easy method of order customization, this can be done using a drag and drop interface which is similar to default WordPress admin  Products archive. This is a great way for keeping the best selling products on top of the list, which will give a boost to sales . Any decent shop will always use categories to keep the products in one place and make easier access to a certain type of goods. The product sorting can be done for each category using the filter that the admin sort interface display in the first part.

Using other plugins, why my order list broke for a category while i was doing another sorting for a different one?

For all other plugins, the product sorting rely on the default menu_order property, which unfortunate can keep only a value  at a time. Giving that  if a product belong to multiple categories, only the very last sorting order value will be held, everything else will be overwrite. In other words,  if you set a sorting for the products which belong to a category, going to the next one will remove the order you set previously. Obliviously we don’t want that, as every category is required to use a very specific order to achieve planned results. Advanced Post Types Order is a specialized application, the perfect tool for managing the product sorting while keeping the order applied for other categories. No matter the number of categories which belong to a product, the number of categories need to be sorted, all order lists are saved and kept as defined!

First you can select the category for which you want to apply an order:

The order can be also set for other taxonomies defined like Product Tags, Tags etc, everything while keeping the sorts for the other places.

Re-order can be done using a simple drag and drop interface, then using Update to save.

advanced-post-types-order-sort-interface-grid-view

A huge bonus for this plugin is the fact that it can be used also along with all other custom post types within your site (i.e. posts, pages, reviews, movies etc), practically you can sort the order for any content / post type / product.
The usage is very simple, once deployed the plugin will take care of the order update within the front side, no coding updates are necessarily.

The post WooCommerce – Sort Products which belong to multiple categories appeared first on Nsp Code.

]]>
https://www.nsp-code.com/woocommerce-sort-products-which-belong-to-multiple-categories/feed/ 5
Customizing sort through default post type archive interface https://www.nsp-code.com/customizing-sort-through-default-post-type-archive-interface/ https://www.nsp-code.com/customizing-sort-through-default-post-type-archive-interface/#comments Tue, 04 Jun 2019 09:16:36 +0000 http://www.nsp-code.com/?p=1389 Customizing the sort for a site content is the key to improve SEO ratting and keep you in business. Any new visitor will navigate your page just a bit before leave for another site, if not find quality information. Placing the best products and articles in the relevant spots is the way to catch a […]

The post Customizing sort through default post type archive interface appeared first on Nsp Code.

]]>
Customizing the sort for a site content is the key to improve SEO ratting and keep you in business. Any new visitor will navigate your page just a bit before leave for another site, if not find quality information. Placing the best products and articles in the relevant spots is the way to catch a rushed eye.

Advanced Post Types Order plugin provide excellent tools to manage everything when it come to content sorting, moving things around is a breeze job, re-ordering can be achievable through provided intuitive visual interfaces.

To make sorting even easier, a new functionality is now available, any custom post type can be sorted directly within default WordPress archive interface. This is useful specially for users who don’t want to deal with additional menus and prefer to stick with provided WordPress default interfaces. Is also a convenient way to manage order without leaving the admin post type archive page.

The process of setting-up drag and drop order for a post type interface is simple, it start by creating a sort list of a particular post type which is intended to be sorted. More details upon the effectively sort creation can be found at Create simple sort for a Custom Post Type To use this functionality the Admin Sort option need to be active, so any order will reflect on post type interface as well:

Customizing sort through default post type archive interface-admin-sort

Once sort created a new setting show up, this also need to be active:

Customizing sort through default post type archive interface-Allow sorting within default post type interface

At this point everything it’s set-up and ready for sort to be customized within the post type interface. This will work for all archives including all, any taxonomy term filtering, paginated etc.

Customizing sort through default post type archive interface-drag-and-drop

The new order is being saved within post type menu_order attribute, also within sort list for further usage.

The post Customizing sort through default post type archive interface appeared first on Nsp Code.

]]>
https://www.nsp-code.com/customizing-sort-through-default-post-type-archive-interface/feed/ 5
Pagination for large Sort Lists https://www.nsp-code.com/pagination-for-large-sort-lists/ https://www.nsp-code.com/pagination-for-large-sort-lists/#respond Mon, 06 May 2019 16:06:45 +0000 http://www.nsp-code.com/?p=1282 A new functionality is available for Advanced Post Types Order plugin, Pagination for sort lists. A high number of objects to show on a single list, makes the sorting process a bit difficult sometimes, either being slow as loading lots of html code or simply too many to follow certain objects in the list. The […]

The post Pagination for large Sort Lists appeared first on Nsp Code.

]]>
A new functionality is available for Advanced Post Types Order plugin, Pagination for sort lists. A high number of objects to show on a single list, makes the sorting process a bit difficult sometimes, either being slow as loading lots of html code or simply too many to follow certain objects in the list. The Pagination functionality, split the items on multiple pages using a WordPress pagination style. This feature can be controlled for each sort individually through their settings:

Pagination for large Sort Lists - settings

A number of offset objects can be show from a previous / next pagination to facilitate an easy sort for a object across different pages.

Pagination for large Sort Lists - offset objects

The drag & drop functionality is available from / to offset lists.

The post Pagination for large Sort Lists appeared first on Nsp Code.

]]>
https://www.nsp-code.com/pagination-for-large-sort-lists/feed/ 0
Apply Archive Order to Taxonomies Terms / Categories, if no custom order is defined https://www.nsp-code.com/apply-archive-order-to-taxonomies-terms-categories-if-no-custom-order-is-defined/ https://www.nsp-code.com/apply-archive-order-to-taxonomies-terms-categories-if-no-custom-order-is-defined/#respond Mon, 15 Apr 2019 10:42:12 +0000 https://www.nsp-code.com/?p=16702 When migrating from free Post Types Order, on activation. the Advanced Post Types plugin automatically import the previously customized order. This is saved within Archive area, since this is the type of sorting the free code is capable off. The other areas as taxonomies terms like categories, inherit default sorting by date as there’s never […]

The post Apply Archive Order to Taxonomies Terms / Categories, if no custom order is defined appeared first on Nsp Code.

]]>
When migrating from free Post Types Order, on activation. the Advanced Post Types plugin automatically import the previously customized order. This is saved within Archive area, since this is the type of sorting the free code is capable off. The other areas as taxonomies terms like categories, inherit default sorting by date as there’s never been applied a customized order.

To apply the Archive order to all areas just like the Post Types Order does, but still allow and apply any customized sorting (e.g. a specific category), the following code can be used. This should be placed within theme functions.php or a custom plugin.

    add_filter('apto/query_match_sort_id',  'apto_query_match_sort_id', 10, 4); 
    function apto_query_match_sort_id($sort_view_id, $orderBy, $query, $sorts_match_filter)
        {
            global $APTO;
            
            //if the's a custom sort, return
            if(!empty($sort_view_id))
                {
                    //ensure the list is not empty
                    $order_list  = $APTO->functions->get_order_list($sort_view_id);
                    if  ( is_array( $order_list ) &&  count ( $order_list )     >   1 )
                        return $sort_view_id;    
                }
            
            $query_post_types   =   $APTO->functions->query_get_post_types($query);
            
            $sorts_match_filter =   array(
                                            '_autosort'     =>  array('yes'),
                                            '_view_type'    =>  array('multiple')
                                            );
            $sort_items =   $APTO->functions->get_sorts_by_filters($sorts_match_filter);
            
            if(count($sort_items) < 1)
                return;
            
            foreach($sort_items as  $sort_item)
                {
                    $sort_settings  =   $APTO->functions->get_sort_settings($sort_item->ID);
                    ///check the sort rules if match the post types
                    $sort_rules =   $APTO->functions->get_sort_current_language_rules($sort_settings);
                    
                    //compare the post type args
                    $differences = array_diff($query_post_types, $sort_rules['post_type']);
                    if(count($query_post_types) != count($sort_rules['post_type']) || count($differences) > 0)
                        continue;
                    
                    //this match. Get the archive sort view
                    $attr = array(
                                    '_view_selection'       =>  'archive',
                                    '_view_language'        =>  $APTO->functions->get_blog_language()  
                                    );
                                                       
                    $sort_view_id   =   $APTO->functions->get_sort_view_id_by_attributes($sort_item->ID, $attr);
                    
                    break;
                }
            
            return $sort_view_id;
             
        }

If the order is updated for any term, this is being used instead rater applying the default Archive.

The post Apply Archive Order to Taxonomies Terms / Categories, if no custom order is defined appeared first on Nsp Code.

]]>
https://www.nsp-code.com/apply-archive-order-to-taxonomies-terms-categories-if-no-custom-order-is-defined/feed/ 0
Synchronize order across all languages when using Polylang https://www.nsp-code.com/synchronize-order-across-all-languages-when-using-polylang/ https://www.nsp-code.com/synchronize-order-across-all-languages-when-using-polylang/#respond Mon, 01 Apr 2019 18:54:39 +0000 https://www.nsp-code.com/?p=16644 WordPress Polylang plugin allows to create multilingual content for your site, easily. You write any content type, like post, pages, categories, tags, define the language for each and translate. Advanced Post Types Order can sort the Polylang content. Everything is manages through the same, easy to manage sort lists. If order is required to be […]

The post Synchronize order across all languages when using Polylang appeared first on Nsp Code.

]]>

WordPress Polylang plugin allows to create multilingual content for your site, easily. You write any content type, like post, pages, categories, tags, define the language for each and translate.

Advanced Post Types Order can sort the Polylang content. Everything is manages through the same, easy to manage sort lists.

If order is required to be the same on all site languages, the Advanced Post Types Order plugin include a specialized tool which synchronize the newly updated order to all other lists. This is integrated into the application and controlled through a sort option:

When set to Yes, on a sort update, the plugin recreate the same order for all active languages. If the synchronization is not required the option can be left off, in which case the order of each language can be controlled individually.

The post Synchronize order across all languages when using Polylang appeared first on Nsp Code.

]]>
https://www.nsp-code.com/synchronize-order-across-all-languages-when-using-polylang/feed/ 0
How to Order Posts by Category Name https://www.nsp-code.com/how-to-order-posts-by-category-name/ https://www.nsp-code.com/how-to-order-posts-by-category-name/#respond Mon, 04 Mar 2019 17:34:33 +0000 https://www.nsp-code.com/?p=16527 Creating custom Sort for Posts (or any other custom post type) within categories is an easy task using the Advanced Post Types Order plugin, a visual drag & drop interface is easy to set-up and self explanatory. The order can be customized for individual categories which apply accordingly on front side when view such area […]

The post How to Order Posts by Category Name appeared first on Nsp Code.

]]>
Creating custom Sort for Posts (or any other custom post type) within categories is an easy task using the Advanced Post Types Order plugin, a visual drag & drop interface is easy to set-up and self explanatory. The order can be customized for individual categories which apply accordingly on front side when view such area (e.g. category link).

But how to automatically re-order the Posts, when view the archive, by category name it belong? Or by child category name (in case to view a category which include child terms)?
For example we have the following categories:

  • Arts
  • Books
  • Movies

When view the archive (all posts) the default order of posts is set to Date, or to custom defined order if created. In this scenario we require the sorting of posts to be by category name, meaning all posts for Arts category comes first, then the posts from Books and lastly from the Movies. Even more, we need to apply the order of posts set-up for each category (if created).

This is not something easy to achieve and require basic level of adjustments at the code level, so the functionality does not come integrated into the core. The plugin contain the necessarily tools to use and implement such feature, mainly relaying on User Function sorting callback
First the order should be switched to Automatic and the Order By selection should be set for Custom Function The function name which will be used in current example is called sort_by_category_name so it should be updated accordingly with your.

Further a custom code which return the required order need to be implemented. The code block should be included with theme functions.php or a custom plugin. The function need to use the same name as defined in above interface.


/**
    * Sort the elements by category name, or customised catgory order
    * 
    * @param mixed $sort_list
    * @param mixed $sort_view_id
    * @param mixed $orderBy
    * @param mixed $query
    */
    function sort_by_category_name( $post_order_list, $sort_view_id, $orderBy, $query )
        {
                
            //Change to required taxonomy
            $_apply_for_taxonomy    =   "category";

In this example, the code will sort by categories taxonomy, but this can be changed to anything else, accordingly to required results. This can be done by changing the above line 13 at variable $_apply_for_taxonomy


			if ( count($post_order_list) > 1 ) 
			return $post_order_list; 
		//check if is archive or a taxonomy view 
		if ( count ($query->tax_query->queries) > 1 )
                	return $post_order_list;
                
                
            //avoid endless loop in case using this function on multiple level terms
            global $_SCN_in_the_loop;
            
            if  ( $_SCN_in_the_loop )
                return $post_order_list;
            
            $_is_archive    =   FALSE;
            $_is_term       =   FALSE;

The sorting by category name functionality can be used for Archive selection (all posts), also it can be set-up for individual Categories as well, as long they include child terms which can be used to order by. The following code part check on that:


	if  ( count ($query->tax_query->queries) > 0 )
                {
                    //ensure there's a single term
                    reset($query->tax_query->queries);
                    $tax    =   current($query->tax_query->queries);
                    
                    if  ( is_array($tax['terms'])   &&  count ($tax['terms'])  > 1 )
                        return $post_order_list;
                    
                    $_is_term   =   TRUE;
                }
                else
                $_is_archive    =   TRUE;
                
            //retrive the terms
            $args   =   array(
                                        'taxonomy'  =>  $_apply_for_taxonomy,
                                        'orderby'   => 'name',
                                        );

For retrieving the terms list, the code use an orderby argument by name. In case a custom order of categories is required to be used instead, the Advanced taxonomy Terms Order plugin can be used to change the order of categories. Then the orderby should be update to term_order in above code block at line 18

            if  ( $_is_term ) 
                {
                    //retrieve a list of existing terms
                    reset($query->tax_query->queries);
                    $tax    =   current($query->tax_query->queries);
                    
                    if  ( is_array( $tax['terms'] ))
                        {
                            reset( $tax['terms'] );
                            $term_id    =   current( $tax['terms'] );
                        }
                        else
                            $term_id    =   $tax['terms'];
                    
                    if ( $tax['field']  ==  'slug'  ||  $tax['field']  ==  'name' )
                        {
                            $term_data      =   get_term_by( $tax['field'], $term_id, $_apply_for_taxonomy );
                            $term_id        =   $term_data->term_id;
                        } 
                    
                    
                    $args['child_of']   =   $term_id;  

                }

At this point retrieve the categories (terms) which will be used to sort and build the ordered list of posts which will be returned:

	$terms  =   get_terms( $args );
            
            //retrieve a list of items for each of the terms
            if ( count ( $terms )   < 1 ) return $post_order_list; $_SCN_in_the_loop = TRUE; global $APTO; $sort_view_post = get_post( $sort_view_id ); $sort_list_settings = $APTO->functions->get_sort_settings( $sort_view_post->post_parent );
            
            $posts_list =   array();
            foreach ( $terms as  $term )
                {
                    $args =   array(
                                            'post_type'         =>  $sort_list_settings['_rules']['post_type'][0],
                                            'posts_per_page'    =>  -1,
                                            'fields'            =>  'ids',
                                            'orderby'           =>  'menu_order',
                                            'order'             =>  'ASC',
                                            'tax_query'         => array(
                                                                            array(
                                                                                'taxonomy' =>   $_apply_for_taxonomy,
                                                                                'field'    =>   'id',
                                                                                'terms'    =>   array( $term->term_id ),
                                                                            ),
                                                                        ),
                                    );
                    $term_posts_query  =  new WP_Query( $args );
                    $posts_list =   array_merge ( $posts_list , array_values( $term_posts_query->posts ));
                    
                }
                    
            $_SCN_in_the_loop = FALSE;
            
            return $posts_list; 
            
        }

The order list is returned to the plugin core and applied to the query.

This is a functionality which require a bit more resources than a regular ordering, specially on very large sites with thousand of posts, but can be easily overtaken using a cache plugin. This way the code will be process once, further being served by a static cached data.

The post How to Order Posts by Category Name appeared first on Nsp Code.

]]>
https://www.nsp-code.com/how-to-order-posts-by-category-name/feed/ 0
How to apply WooCommerce category order while using visual attributes filtering https://www.nsp-code.com/how-to-apply-woocommerce-category-order-while-using-visual-attributes-filtering/ https://www.nsp-code.com/how-to-apply-woocommerce-category-order-while-using-visual-attributes-filtering/#respond Tue, 15 Jan 2019 12:05:25 +0000 https://www.nsp-code.com/?p=16293 Sorting WooCommerce products is an easy job, specific area ordering is possible after selecting the appropriate taxonomy or attribute.  When using mix of multiple taxonomies or/and attributes a sort is still easy to create through advanced set-up Sometimes, there’s no need to apply a very specific order for all those areas, as it become impractical […]

The post How to apply WooCommerce category order while using visual attributes filtering appeared first on Nsp Code.

]]>

Sorting WooCommerce products is an easy job, specific area ordering is possible after selecting the appropriate taxonomy or attribute.  When using mix of multiple taxonomies or/and attributes a sort is still easy to create through advanced set-up

Sometimes, there’s no need to apply a very specific order for all those areas, as it become impractical and hard to maintain. Might be a better approach to use a simple sorting which apply to categories, even if there’s additional visual filters used.

The following image illustrate a category instance where the customized order is applied accordingly. There is no visual filter used so far.

When making a selection on the left filters, the internal WordPress query changes and will not match the simple category ordering anymore. It will try to locate an advanced sort which include the appropriate settings (e.g. selected category, selected filter etc). If none are found, the default query order is returned.

 

The above, is still a category area, but using additional filters. There’ still possible to use the simple category order and apply to above, without creating customized order for each of possible combinations. This can be achieved easily by enabling the functionality through the “Use category order for WooCommerce when apply filters” option, available at admin dashboard > Settings > Post Types Order:

The feature is available starting version 4.2.

For older versions this can be implemented through a filter ‘apto/query_filter_valid_data’. The following code should be used along with theme functions.php :

    add_filter('apto/query_filter_valid_data', 'custom_woocommerce_query_filter_valid_data', 99);
    function custom_woocommerce_query_filter_valid_data( $query )
        {
            
            if (!in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) )
                return $query;
                
            $tax_data   =   $query->tax_query->queries;
            
            if(isset($tax_data['relation']))
                unset($tax_data['relation']);
            
            $found  =   FALSE;    
            //ensure the query include a product_cat taxonomy
            foreach( $tax_data  as  $key    =>  $item_tax_data )
                {
                    if ( !isset ( $item_tax_data['taxonomy'] ) )
                        return $query;
                        
                    if ( $item_tax_data['taxonomy']  !=  'product_cat' )
                        continue;
                    
                    if( count((array)$item_tax_data['terms'])    !=  1 )
                        return $query;
                
                    $found  =   TRUE;
                }
                
            if ( $found === FALSE )
                return $query;
                
            //unest all other taxonomies
            foreach ( $query->tax_query->queries    as  $key    =>  $item_tax_data )
                {
                    if ( ! is_int($key) )
                        continue;
                        
                    if ( $item_tax_data['taxonomy']  !=  'product_cat' )
                        unset ( $query->tax_query->queries[$key] );
                    
                }
            
            return $query;
            
        }

The post How to apply WooCommerce category order while using visual attributes filtering appeared first on Nsp Code.

]]>
https://www.nsp-code.com/how-to-apply-woocommerce-category-order-while-using-visual-attributes-filtering/feed/ 0
Turn off visibility for WooCommerce Hidden products within sort list https://www.nsp-code.com/turn-off-visibility-for-woocommerce-hidden-products-within-sort-list/ https://www.nsp-code.com/turn-off-visibility-for-woocommerce-hidden-products-within-sort-list/#respond Tue, 18 Sep 2018 07:51:10 +0000 https://www.nsp-code.com/?p=15893 Catalog visibility for WooCommerce is a simple way to keep certain products visible or invisible for customers, hidden products will not show on front side shop. Mainly this is being used for content not yet available or under development. The option is being integrated within Publish widget or through Quick Edit. The Advanced Post Types […]

The post Turn off visibility for WooCommerce Hidden products within sort list appeared first on Nsp Code.

]]>

Catalog visibility for WooCommerce is a simple way to keep certain products visible or invisible for customers, hidden products will not show on front side shop. Mainly this is being used for content not yet available or under development. The option is being integrated within Publish widget or through Quick Edit.

The Advanced Post Types Order is an easy tool to control the WooCommece Products Order this can be achieved through sort lists. When the shop contain too many hidden products, the re-order process can become disorganized. An easy approach will be to add a meta data information within the re-order interface, right to each product title. This can be done using a filter described at Additional information’s for object sort row

As alternative, they can be removed from the list using another filter apto/interface_query_args The following code demonstrate how to achieve that:

    add_filter('apto/interface_query_args', 'apto_interface_query_args', 99, 2);
    function  apto_interface_query_args($args, $current_sort_view_ID)
        {
            
            global $APTO;
            
            //check if WooCommerce sort
            if  ( $APTO->functions->is_woocommerce ( $args['sort_id'] ) === FALSE )
                return $args;
                
            $additional_query   =   array(
                                            'taxonomy' =>   'product_visibility',
                                            'field'    =>   'slug',
                                            'terms'    =>   array('exclude-from-search', 'exclude-from-catalog'),
                                            'operator' =>   'NOT IN',
                                );
   
            if  ( isset($args['tax_query']) )
                $args['tax_query'][]    =   $additional_query;
                else
                $args['tax_query']  =   array ( $additional_query ) ;
                
            return $args;   
        }

The post Turn off visibility for WooCommerce Hidden products within sort list appeared first on Nsp Code.

]]>
https://www.nsp-code.com/turn-off-visibility-for-woocommerce-hidden-products-within-sort-list/feed/ 0
Using sorting functionality along with DIVI Filterable Portfolio module https://www.nsp-code.com/using-sorting-functionality-along-with-divi-filterable-portfolio-module/ https://www.nsp-code.com/using-sorting-functionality-along-with-divi-filterable-portfolio-module/#comments Tue, 07 Aug 2018 11:10:21 +0000 http://www.nsp-code.com/?p=1575 DIVI provided by Elegant Themes is just great! Excellent functionality provided through their visual composer and modules, make things easy to manage and stunning layout creation a breeze. Advanced Post Types order plugin provide total control over the content sorting for your DIVI powered website. Sorts are maintained easily through lists, which can apply globally […]

The post Using sorting functionality along with DIVI Filterable Portfolio module appeared first on Nsp Code.

]]>

DIVI provided by Elegant Themes is just great! Excellent functionality provided through their visual composer and modules, make things easy to manage and stunning layout creation a breeze.

Advanced Post Types order plugin provide total control over the content sorting for your DIVI powered website. Sorts are maintained easily through lists, which can apply globally or to different areas, independently, without conflicting with each other.

Recently we received questions upon the possibility to apply sorting for Filterable Portfolio module. Since the filtering is done on front side through a JavaScript code, the page does not refresh, making the customized order to do not apply for categories, except the All tab. The following code makes that possible. This create a new module called Filterable Portfolio – Sortable which should be used instead the default module.

First, we need to prepare the module loader. The following code should be placed within your theme child functions.php file:

    function DS_Custom_Modules()
        {
            if(class_exists("ET_Builder_Module"))
                {
                    include("divi-modules/filtrable-portfolio-sortable.php");
                }
        }

    function Prep_DS_Custom_Modules()
        {
            global $pagenow;

            $is_admin = is_admin();
            $action_hook = $is_admin ? 'wp_loaded' : 'wp';
            $required_admin_pages = array( 'edit.php', 'post.php', 'post-new.php', 'admin.php', 'customize.php', 'edit-tags.php', 'admin-ajax.php', 'export.php' ); // list of admin pages where we need to load builder files
            $specific_filter_pages = array( 'edit.php', 'admin.php', 'edit-tags.php' );
            $is_edit_library_page = 'edit.php' === $pagenow && isset( $_GET['post_type'] ) && 'et_pb_layout' === $_GET['post_type'];
            $is_role_editor_page = 'admin.php' === $pagenow && isset( $_GET['page'] ) && 'et_divi_role_editor' === $_GET['page'];
            $is_import_page = 'admin.php' === $pagenow && isset( $_GET['import'] ) && 'wordpress' === $_GET['import']; 
            $is_edit_layout_category_page = 'edit-tags.php' === $pagenow && isset( $_GET['taxonomy'] ) && 'layout_category' === $_GET['taxonomy'];

            if ( ! $is_admin || ( $is_admin && in_array( $pagenow, $required_admin_pages ) && ( ! in_array( $pagenow, $specific_filter_pages ) || $is_edit_library_page || $is_role_editor_page || $is_edit_layout_category_page || $is_import_page ) ) ) 
                {
                    add_action($action_hook, 'DS_Custom_Modules', 9789);
                }
        }
    Prep_DS_Custom_Modules();

The following code is the module. Since the above calls divi-modules/filtrable-portfolio-sortable.php file, the code should be placed within filtrable-portfolio-sortable.php inside a folder named divi-modules.

<?php

class ET_Builder_Module_Filterable_Portfolio_Sortable extends ET_Builder_Module_Type_PostBased {
    function init() {
        $this->name       = esc_html__( 'Filterable Portfolio Sortable', 'et_builder' );
        $this->slug       = 'et_pb_filterable_portfolio_sortable';
        $this->vb_support = 'on';

        $this->main_css_element = '%%order_class%%.et_pb_filterable_portfolio';

        $this->settings_modal_toggles = array(
            'general'  => array(
                'toggles' => array(
                    'main_content' => esc_html__( 'Content', 'et_builder' ),
                    'elements'     => esc_html__( 'Elements', 'et_builder' ),
                ),
            ),
            'advanced' => array(
                'toggles' => array(
                    'layout'  => esc_html__( 'Layout', 'et_builder' ),
                    'overlay' => esc_html__( 'Overlay', 'et_builder' ),
                    'text'    => array(
                        'title'    => esc_html__( 'Text', 'et_builder' ),
                        'priority' => 49,
                    ),
                    'image' => esc_html__( 'Image', 'et_builder' ),
                ),
            ),
        );

        $this->advanced_fields = array(
            'fonts'                 => array(
                'title'   => array(
                    'label'    => esc_html__( 'Title', 'et_builder' ),
                    'css'      => array(
                        'main' => "{$this->main_css_element} h2, {$this->main_css_element} .et_pb_module_header",
                        'plugin_main' => "{$this->main_css_element} h2, {$this->main_css_element} h2 a, {$this->main_css_element} h1.et_pb_module_header, {$this->main_css_element} h1.et_pb_module_header a, {$this->main_css_element} h3.et_pb_module_header, {$this->main_css_element} h3.et_pb_module_header a, {$this->main_css_element} h4.et_pb_module_header, {$this->main_css_element} h4.et_pb_module_header a, {$this->main_css_element} h5.et_pb_module_header, {$this->main_css_element} h5.et_pb_module_header a, {$this->main_css_element} h6.et_pb_module_header, {$this->main_css_element} h6.et_pb_module_header a",
                        'important' => 'all',
                    ),
                    'header_level' => array(
                        'default' => 'h2',
                    ),
                ),
                'filter' => array(
                    'label'    => esc_html__( 'Filter Criteria', 'et_builder' ),
                    'hide_text_align' => true,
                    'css'      => array(
                        'main' => "{$this->main_css_element} .et_pb_portfolio_filter",
                        'plugin_main' => "{$this->main_css_element} .et_pb_portfolio_filter, {$this->main_css_element} .et_pb_portfolio_filter a",
                        'color' => "{$this->main_css_element} .et_pb_portfolio_filter a",
                    ),
                ),
                'caption' => array(
                    'label'    => esc_html__( 'Meta', 'et_builder' ),
                    'css'      => array(
                        'main' => "{$this->main_css_element} .post-meta, {$this->main_css_element} .post-meta a",
                    ),
                ),
                'pagination' => array(
                    'label'    => esc_html__( 'Pagination', 'et_builder' ),
                    'css'      => array(
                        'main' => "{$this->main_css_element} .et_pb_portofolio_pagination a",
                        'text_align' => "{$this->main_css_element} .et_pb_portofolio_pagination ul",
                    ),
                    'text_align' => array(
                        'options' => et_builder_get_text_orientation_options( array( 'justified' ), array() ),
                    ),
                ),
            ),
            'background'            => array(
                'settings' => array(
                    'color' => 'alpha',
                ),
            ),
            'borders'               => array(
                'default' => array(
                    'css' => array(
                        'main' => array(
                            'border_radii' => "{$this->main_css_element} .et_pb_portfolio_item",
                            'border_styles' => "{$this->main_css_element} .et_pb_portfolio_item",
                        ),
                    ),
                ),
                'image' => array(
                    'css'          => array(
                        'main' => array(
                            'border_radii'  => "{$this->main_css_element} .et_portfolio_image",
                            'border_styles' => "{$this->main_css_element} .et_portfolio_image",
                        ),
                    ),
                    'label_prefix' => esc_html__( 'Image', 'et_builder' ),
                    'tab_slug'      => 'advanced',
                    'toggle_slug'   => 'image',
                ),
            ),
            'box_shadow'            => array(
                'default' => array(),
                'image'   => array(
                    'label'           => esc_html__( 'Image Box Shadow', 'et_builder' ),
                    'option_category' => 'layout',
                    'tab_slug'        => 'advanced',
                    'toggle_slug'     => 'image',
                    'css'             => array(
                        'main'         => '%%order_class%% .project .et_portfolio_image',
                        'custom_style' => true,
                    ),
                    'default_on_fronts'  => array(
                        'color'    => '',
                        'position' => '',
                    ),
                ),
            ),
            'margin_padding' => array(
                'css' => array(
                    'important' => array( 'custom_margin' ), // needed to overwrite last module margin-bottom styling
                ),
            ),
            'max_width'             => array(
                'css' => array(
                    'module_alignment' => '%%order_class%%.et_pb_filterable_portfolio.et_pb_module',
                ),
            ),
            'text'                  => array(
                'use_background_layout' => true,
                'options' => array(
                    'background_layout' => array(
                        'default' => 'light',
                    ),
                ),
            ),
            'filters'               => array(
                'css' => array(
                    'main' => '%%order_class%%',
                ),
                'child_filters_target' => array(
                    'tab_slug' => 'advanced',
                    'toggle_slug' => 'image',
                ),
            ),
            'image'                 => array(
                'css' => array(
                    'main' => '%%order_class%% .et_portfolio_image',
                ),
            ),
            'button'                => false,
        );

        $this->custom_css_fields = array(
            'portfolio_filters' => array(
                'label'    => esc_html__( 'Portfolio Filters', 'et_builder' ),
                'selector' => '.et_pb_filterable_portfolio .et_pb_portfolio_filters',
                'no_space_before_selector' => true,
            ),
            'active_portfolio_filter' => array(
                'label'    => esc_html__( 'Active Portfolio Filter', 'et_builder' ),
                'selector' => '.et_pb_filterable_portfolio .et_pb_portfolio_filters li a.active',
                'no_space_before_selector' => true,
            ),
            'portfolio_image' => array(
                'label'    => esc_html__( 'Portfolio Image', 'et_builder' ),
                'selector' => '.et_portfolio_image',
            ),
            'overlay' => array(
                'label'    => esc_html__( 'Overlay', 'et_builder' ),
                'selector' => '.et_overlay',
            ),
            'overlay_icon' => array(
                'label'    => esc_html__( 'Overlay Icon', 'et_builder' ),
                'selector' => '.et_overlay:before',
            ),
            'portfolio_title' => array(
                'label'    => esc_html__( 'Portfolio Title', 'et_builder' ),
                'selector' => '.et_pb_portfolio_item h2',
            ),
            'portfolio_post_meta' => array(
                'label'    => esc_html__( 'Portfolio Post Meta', 'et_builder' ),
                'selector' => '.et_pb_portfolio_item .post-meta',
            ),
            'portfolio_pagination' => array(
                'label'    => esc_html__( 'Portfolio Pagination', 'et_builder' ),
                'selector' => '.et_pb_portofolio_pagination',
            ),
            'portfolio_pagination_active' => array(
                'label'    => esc_html__( 'Pagination Active Page', 'et_builder' ),
                'selector' => '.et_pb_portofolio_pagination a.active',
            ),
        );

        $this->help_videos = array(
            array(
                'id'   => esc_html( 'AZheY1hVcJc' ),
                'name' => esc_html__( 'An introduction to the Filterable Portfolio module', 'et_builder' ),
            ),
        );
    }

    function get_fields() {
        $fields = array(
            'fullwidth' => array(
                'label'           => esc_html__( 'Layout', 'et_builder' ),
                'type'            => 'select',
                'option_category' => 'layout',
                'options'         => array(
                    'on'  => esc_html__( 'Fullwidth', 'et_builder' ),
                    'off' => esc_html__( 'Grid', 'et_builder' ),
                ),
                'affects' => array(
                    'hover_icon',
                    'zoom_icon_color',
                    'hover_overlay_color',
                ),
                'description'      => esc_html__( 'Choose your desired portfolio layout style.', 'et_builder' ),
                'computed_affects' => array(
                    '__projects',
                ),
                'tab_slug'         => 'advanced',
                'toggle_slug'      => 'layout',
                'default_on_front' => 'on',
            ),
            'posts_number' => array(
                'default'          => 10,
                'label'            => esc_html__( 'Posts Number', 'et_builder' ),
                'type'             => 'text',
                'option_category'  => 'configuration',
                'description'      => esc_html__( 'Define the number of projects that should be displayed per page.', 'et_builder' ),
                'computed_affects' => array(
                    '__projects',
                ),
                'toggle_slug'      => 'main_content',
            ),
            'include_categories' => array(
                'label'            => esc_html__( 'Include Categories', 'et_builder' ),
                'type'             => 'categories',
                'option_category'  => 'basic_option',
                'description'      => esc_html__( 'Select the categories that you would like to include in the feed.', 'et_builder' ),
                'computed_affects' => array(
                    '__project_terms',
                    '__projects',
                ),
                'taxonomy_name'    => 'project_category',
                'toggle_slug'      => 'main_content',
            ),
            'show_title' => array(
                'label'             => esc_html__( 'Show Title', 'et_builder' ),
                'type'              => 'yes_no_button',
                'option_category'   => 'configuration',
                'options'           => array(
                    'on'  => esc_html__( 'Yes', 'et_builder' ),
                    'off' => esc_html__( 'No', 'et_builder' ),
                ),
                'toggle_slug'       => 'elements',
                'description'       => esc_html__( 'Turn project titles on or off.', 'et_builder' ),
                'default_on_front'  => 'on',
            ),
            'show_categories' => array(
                'label'             => esc_html__( 'Show Categories', 'et_builder' ),
                'type'              => 'yes_no_button',
                'option_category'   => 'configuration',
                'options'           => array(
                    'on'  => esc_html__( 'Yes', 'et_builder' ),
                    'off' => esc_html__( 'No', 'et_builder' ),
                ),
                'toggle_slug'       => 'elements',
                'description'       => esc_html__( 'Turn the category links on or off.', 'et_builder' ),
                'default_on_front'  => 'on',
            ),
            'show_pagination' => array(
                'label'             => esc_html__( 'Show Pagination', 'et_builder' ),
                'type'              => 'yes_no_button',
                'option_category'   => 'configuration',
                'options'           => array(
                    'on'  => esc_html__( 'Yes', 'et_builder' ),
                    'off' => esc_html__( 'No', 'et_builder' ),
                ),
                'toggle_slug'       => 'elements',
                'description'       => esc_html__( 'Enable or disable pagination for this feed.', 'et_builder' ),
                'default_on_front'  => 'on',
            ),
            'hover_icon' => array(
                'label'               => esc_html__( 'Hover Icon Picker', 'et_builder' ),
                'type'                => 'select_icon',
                'option_category'     => 'configuration',
                'class'               => array( 'et-pb-font-icon' ),
                'depends_show_if'     => 'off',
                'tab_slug'            => 'advanced',
                'toggle_slug'         => 'overlay',
            ),
            'zoom_icon_color' => array(
                'label'             => esc_html__( 'Zoom Icon Color', 'et_builder' ),
                'type'              => 'color-alpha',
                'custom_color'      => true,
                'depends_show_if'   => 'off',
                'tab_slug'          => 'advanced',
                'toggle_slug'       => 'overlay',
            ),
            'hover_overlay_color' => array(
                'label'             => esc_html__( 'Hover Overlay Color', 'et_builder' ),
                'type'              => 'color-alpha',
                'custom_color'      => true,
                'depends_show_if'   => 'off',
                'tab_slug'          => 'advanced',
                'toggle_slug'       => 'overlay',
            ),
            '__project_terms' => array(
                'type'                => 'computed',
                'computed_callback'   => array( 'ET_Builder_Module_Filterable_Portfolio', 'get_portfolio_terms' ),
                'computed_depends_on' => array(
                    'include_categories',
                ),
            ),
            '__projects' => array(
                'type'                => 'computed',
                'computed_callback'   => array( 'ET_Builder_Module_Filterable_Portfolio', 'get_portfolio_item' ),
                'computed_depends_on' => array(
                    'show_pagination',
                    'posts_number',
                    'include_categories',
                    'fullwidth',
                ),
            ),
        );

        return $fields;
    }

    static function get_portfolio_item( $args = array(), $conditional_tags = array(), $current_page = array() ) {
        global $et_fb_processing_shortcode_object;

        $global_processing_original_value = $et_fb_processing_shortcode_object;

        $defaults = array(
            'show_pagination'    => 'on',
            'include_categories' => '',
            'fullwidth'          => 'on',
            'nopaging'           => true,
        );

        $query_args = array();

        $args = wp_parse_args( $args, $defaults );

        $include_categories = self::filter_invalid_term_ids( explode( ',', $args['include_categories'] ), 'project_category' );

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

        $default_query_args = array(
            'post_type'   => 'project',
            'post_status' => 'publish',
            'posts_per_page' => -1,
        );

        $query_args = wp_parse_args( $query_args, $default_query_args );

        // Get portfolio query
        $query = new WP_Query( $query_args );

        // Format portfolio output, and add supplementary data
        $width     = 'on' === $args['fullwidth'] ?  1080 : 400;
        $width     = (int) apply_filters( 'et_pb_portfolio_image_width', $width );
        $height    = 'on' === $args['fullwidth'] ?  9999 : 284;
        $height    = (int) apply_filters( 'et_pb_portfolio_image_height', $height );
        $classtext = 'on' === $args['fullwidth'] ? 'et_pb_post_main_image' : '';
        $titletext = get_the_title();

        // Loop portfolio item and add supplementary data
        if( $query->have_posts() ) {
            $post_index = 0;
            while ( $query->have_posts() ) {
                $query->the_post();

                $categories = array();

                $category_classes = array( 'et_pb_portfolio_item' );

                if ( 'on' !== $args['fullwidth'] ) {
                    $category_classes[] = 'et_pb_grid_item';
                }

                $categories_object = get_the_terms( get_the_ID(), 'project_category' );
                if ( ! empty( $categories_object ) ) {
                    foreach ( $categories_object as $category ) {
                        // Update category classes which will be used for post_class
                        $category_classes[] = 'project_category_' . urldecode( $category->slug );

                        // Push category data
                        $categories[] = array(
                            'id'        => $category->term_id,
                            'slug'      => $category->slug,
                            'label'     => $category->name,
                            'permalink' => get_term_link( $category ),
                        );
                    }
                }

                // need to disable processnig to make sure get_thumbnail() doesn't generate errors
                $et_fb_processing_shortcode_object = false;

                // Get thumbnail
                $thumbnail = get_thumbnail( $width, $height, $classtext, $titletext, $titletext, false, 'Blogimage' );

                $et_fb_processing_shortcode_object = $global_processing_original_value;

                // Append value to query post
                $query->posts[ $post_index ]->post_permalink     = get_permalink();
                $query->posts[ $post_index ]->post_thumbnail     = print_thumbnail( $thumbnail['thumb'], $thumbnail['use_timthumb'], $titletext, $width, $height, '', false, true );
                $query->posts[ $post_index ]->post_categories     = $categories;
                $query->posts[ $post_index ]->post_class_name     = array_merge( get_post_class( '', get_the_ID() ), $category_classes );

                // Append category classes
                $category_classes = implode( ' ', $category_classes );

                $post_index++;
            }
        } else if ( wp_doing_ajax() ) {
            // This is for the VB
            $query = array( 'posts' => self::get_no_results_template() );
        }

        wp_reset_postdata();

        return $query;
    }

    static function get_portfolio_terms( $args = array(), $conditional_tags = array(), $current_page = array() ) {
        $portfolio = self::get_portfolio_item( $args, $conditional_tags, $current_page );

        $terms = array();

        if ( ! empty( $portfolio->posts ) ) {
            foreach ( $portfolio->posts as $post ) {
                if ( ! empty( $post->post_categories ) ) {
                    foreach ( $post->post_categories as $category ) {
                        $terms[ $category['slug'] ] = $category;
                    }
                }
            }
        }

        return $terms;
    }

    function render( $attrs, $content = null, $render_slug ) {
        $fullwidth          = $this->props['fullwidth'];
        $posts_number       = $this->props['posts_number'];
        $include_categories = $this->props['include_categories'];
        $show_title         = $this->props['show_title'];
        $show_categories    = $this->props['show_categories'];
        $show_pagination    = $this->props['show_pagination'];
        $background_layout  = $this->props['background_layout'];
        $hover_icon          = $this->props['hover_icon'];
        $zoom_icon_color     = $this->props['zoom_icon_color'];
        $hover_overlay_color = $this->props['hover_overlay_color'];
        $header_level        = $this->props['title_level'];

        wp_enqueue_script( 'hashchange' );

        if ( '' !== $zoom_icon_color ) {
            ET_Builder_Element::set_style( $render_slug, array(
                'selector'    => '%%order_class%% .et_overlay:before',
                'declaration' => sprintf(
                    'color: %1$s !important;',
                    esc_html( $zoom_icon_color )
                ),
            ) );
        }

        if ( '' !== $hover_overlay_color ) {
            ET_Builder_Element::set_style( $render_slug, array(
                'selector'    => '%%order_class%% .et_overlay',
                'declaration' => sprintf(
                    'background-color: %1$s;
                    border-color: %1$s;',
                    esc_html( $hover_overlay_color )
                ),
            ) );
        }

        $current_category   =   isset($_GET['f'])   ?   $_GET['f']  :   '';
        $posts_include_categories =   !empty($current_category)    ?   $current_category  :  $include_categories;
            
        
        $projects = self::get_portfolio_item( array(
            'show_pagination'    => $show_pagination,
            'posts_number'       => $posts_number,
            'include_categories' =>  $posts_include_categories,
            'fullwidth'          => $fullwidth,
        ) );

        $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 );

                $main_post_class = sprintf(
                    'et_pb_portfolio_item%1$s %2$s',
                    ( 'on' !== $fullwidth ? ' et_pb_grid_item' : '' ),
                    $category_classes
                );

                ?>
                <div id="post-<?php the_ID(); ?>" <?php post_class( $main_post_class ); ?>>
                <?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();
                    $permalink = get_permalink();
                    $post_meta = get_the_term_list( get_the_ID(), 'project_category', '', ', ' );
                    $thumbnail = get_thumbnail( $width, $height, $classtext, $titletext, $titletext, false, 'Blogimage' );
                    $thumb = $thumbnail["thumb"];


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

                                $data_icon = '' !== $hover_icon
                                    ? sprintf(
                                        ' data-icon="%1$s"',
                                        esc_attr( et_pb_process_font_icon( $hover_icon ) )
                                    )
                                    : '';

                                printf( '<span class="et_overlay%1$s"%2$s></span>',
                                    ( '' !== $hover_icon ? ' et_pb_inline_icon' : '' ),
                                    $data_icon
                                );

                        ?>
                        <?php endif; ?>
                            </span>
                        </a>
                <?php
                    endif;
                ?>

                <?php if ( 'on' === $show_title ) : ?>
                    <<?php echo et_pb_process_header_level( $header_level, 'h2' ) ?> class="et_pb_module_header"><a href="<?php echo esc_url( $permalink ); ?>"><?php echo $titletext; ?></a></<?php echo et_pb_process_header_level( $header_level, 'h2' ) ?>>
                <?php endif; ?>

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

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

        wp_reset_postdata();

        if ( ! $posts = ob_get_clean() ) {
            $posts            = self::get_no_results_template();
            $category_filters = '';
        } else {
            
            $actual_link    = (isset($_SERVER['HTTPS']) ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
            $query_str      = parse_url($actual_link, PHP_URL_QUERY);
            $actual_link    =   str_replace("?" . $query_str , "" ,  $actual_link);
            
            
            $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">';
            $class_current  =   empty($current_category)    ?   'active'    :   '';
            $category_filters .= sprintf( '<li class="et_pb_portfolio_filter et_pb_portfolio_filter_all"><a href="'.$actual_link.'" class="'.$class_current.'" data-category-slug="all">%1$s</a></li>',
                esc_html__( 'All', 'et_builder' )
            );
            foreach ( $terms as $term  ) {
                
                $class_current  =   !empty($current_category)   &&  $term->term_id  == $current_category     ?   'active'    :   '';
                
                
                $category_filters .= sprintf( '<li class="et_pb_portfolio_filter"><a href="'.$actual_link.'?f='. $term->term_id.'" class="'.$class_current.'" data-category-slug="%1$s">%2$s</a></li>',
                    esc_attr( urldecode( $term->slug ) ),
                    esc_html( $term->name )
                );
            }
            $category_filters .= '</ul>';
        }

        $video_background = $this->video_background();
        $parallax_image_background = $this->get_parallax_image_background();

        // Images: Add CSS Filters and Mix Blend Mode rules (if set)
        if ( isset( $this->advanced_fields['image']['css'] ) ) {
            $this->add_classname( $this->generate_css_filters(
                $render_slug,
                'child_',
                self::$data_utils->array_get( $this->advanced_fields['image']['css'], 'main', '%%order_class%%' )
            ) );
        }

        // Module classnames
        $this->add_classname( array(
            'et_pb_portfolio',
            "et_pb_bg_layout_{$background_layout}",
            $this->get_text_orientation_classname(),
        ) );

        if ( 'on' === $fullwidth ) {
            $this->add_classname( 'et_pb_filterable_portfolio_fullwidth' );
        } else {
            $this->add_classname( array(
                'et_pb_filterable_portfolio_grid',
                'clearfix',
            ) );
        }

        $output = sprintf(
            '<div%4$s class="et_pb_filterable_portfolio et_pb_portfolio %1$s" data-posts-number="%5$d"%8$s>
                %10$s
                %9$s
                <div class="et_pb_portfolio_filters clearfix">%2$s</div><!-- .et_pb_portfolio_filters -->
                
                <script type="text/javascript">
                /* <![CDATA[ */
                jQuery(".et_pb_filterable_portfolio .et_pb_portfolio_filters a").on("click", function( event ) {
                    event.stopPropagation();
                    window.location.href    =   jQuery(this).attr("href");
                })
                /* ]]> */
                </script>

                <div class="et_pb_portfolio_items_wrapper %6$s">
                    <div class="et_pb_portfolio_items">%3$s</div><!-- .et_pb_portfolio_items -->
                </div>
                %7$s
            </div> <!-- .et_pb_filterable_portfolio -->',
            $this->module_classname( $render_slug ),
            $category_filters,
            $posts,
            $this->module_id(),
            esc_attr( $posts_number),
            ('on' === $show_pagination ? 'clearfix' : 'no_pagination' ),
            ('on' === $show_pagination ? '<div class="et_pb_portofolio_pagination"></div>' : '' ),
            is_rtl() ? ' data-rtl="true"' : '',
            $video_background,
            $parallax_image_background
        );

        return $output;
    }
}

new ET_Builder_Module_Filterable_Portfolio_Sortable;

?>

The new module setting are the same as default one, they should be used accordingly to this article.

The post Using sorting functionality along with DIVI Filterable Portfolio module appeared first on Nsp Code.

]]>
https://www.nsp-code.com/using-sorting-functionality-along-with-divi-filterable-portfolio-module/feed/ 8