Actually, I'm trying my hands on PHP coding for this plugin. https://codecanyon.net/item/arena-products-store-wordpress-plugin I want to make a sidebar for filters and brands (look) like this website https://www.geekdashboard.com/finder/mobiles/ I've managed to get few things done in php file for my website page https://www.mobilesradar.com/phones/upcoming-mobiles/ but it's not working correctly. The php file I need to edit is aps-archive-cat.php <?php if (!defined('APS_VER')) exit('restricted access'); /* * @package WordPress * @subpackage APS Products */ get_header(); // get aps design settings $design = get_aps_settings('design'); $template = 'archive-cat'; ?> <div class="aps-container"> <div class="aps-row clearfix"> <div class="aps-content aps-content-<?php echo $design['content']; ?>"> <?php // aps-cats archive global $wp_query; $settings = get_aps_settings('settings'); $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1; $cat = get_query_var('aps-cats'); $cat_term = get_term_by('slug', $cat, 'aps-cats'); $term_link = get_term_link($cat_term); $archive_link = add_query_arg( null, null, home_url( $wp->request ) .'/' ); $sort = isset($_GET['sort']) ? trim(strip_tags($_GET['sort'])) : null; $display = isset($_COOKIE['aps_display']) ? trim(strip_tags($_COOKIE['aps_display'])) : $settings['default-display']; $perpage = ($num = $settings['num-products']) ? $num : 12; $url_args = array(); // query paraps $args = array( 'post_type' => 'aps-products', 'posts_per_page' => $perpage, 'aps-cats' => $cat, 'paged' => $paged ); // get filters query params if (isset($_GET['filters'])) { $get_filters = trim($_GET['filters']); $filters = explode('_', $get_filters); if ($filters) { $taxonomies = array(); $filters_terms = array(); foreach ($filters as $filter) { $tax = explode('.', $filter); $terms = explode(',', $tax[1]); $taxonomies[] = array( 'taxonomy' => 'fl-' .$tax[0], 'field' => 'slug', 'terms' => $terms ); $filters_terms[$tax[0]] = $terms; } // add filters in query args $args['tax_query'] = array( 'relation' => 'AND', array( 'relation' => 'OR', $taxonomies ) ); } $url_args['filters'] = $get_filters; } // sort posts by user input if ($sort) { if ($sort == 'name-az') { $args['orderby'] = 'title'; $args['order'] = 'ASC'; } elseif ($sort == 'name-za') { $args['orderby'] = 'title'; $args['order'] = 'DESC'; } elseif ($sort == 'rating-hl') { $args['orderby'] = 'meta_value_num'; $args['meta_key'] = 'aps-product-rating-total'; } elseif ($sort == 'rating-lh') { $args['orderby'] = 'meta_value_num'; $args['order'] = 'ASC'; $args['meta_key'] = 'aps-product-rating-total'; } elseif ($sort == 'reviews-hl') { $args['orderby'] = 'comment_count'; } elseif ($sort == 'reviews-lh') { $args['orderby'] = 'comment_count'; $args['order'] = 'ASC'; } $url_args['sort'] = $sort; } // product sorting $sorts = array( 'default' => __('Date (default)', 'aps-text'), 'name-az' => __('Name (A-Z)', 'aps-text'), 'name-za' => __('Name (Z-A)', 'aps-text'), 'rating-hl' => __('Rating (high > low)', 'aps-text'), 'rating-lh' => __('Rating (low > high)', 'aps-text'), 'reviews-hl' => __('Reviews (high > low)', 'aps-text'), 'reviews-lh' => __('Reviews (low > high)', 'aps-text'), ); // create urls using query string params if (isset( $url_args['filters'] )) { $unsort_url = $archive_link .'?filters=' .$url_args['filters']; $sort_url = $archive_link .'?filters=' .$url_args['filters'] .'&sort='; $filter_url = $term_link .'?filters='; $un_filter_url = $archive_link; } elseif (isset( $url_args['sort'] )) { $unsort_url = $archive_link; $sort_url = $archive_link .'?sort='; $filter_url = $term_link .'?sort=' .$url_args['sort'] .'&filters='; $un_filter_url = $archive_link .'?sort=' .$url_args['sort']; } else { $unsort_url = $archive_link; $sort_url = $archive_link .'?sort='; $filter_url = $term_link .'?filters='; $un_filter_url = $archive_link; } ?> <h1 class="aps-main-title"><?php echo $term->name; ?></h1> <?php // call after title hook do_action('aps_archive_archive_after_title'); // get compare page link $comp_link = get_compare_page_link(); // get aps filters $filters = get_aps_filters(); $cat_id = $cat_term->term_id; // get and display cat image and description $cat_image_id = get_aps_cat_image($cat_id); if ($cat_image_id) { $cat_image = get_product_image(960, 320, '', $cat_image_id); } $cat_desc = $cat_term->description; $cat_filters = get_aps_cat_filters($cat_id); $cat_filters = ($cat_filters) ? $cat_filters : array(); $cat_display = get_aps_cat_display($cat_id); ?> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { $( "#accordion" ).accordion(); } ); </script> <style> .aps-filters{position:static; width: 30%; float: left;} .cats-custom-length{ width:68%; float:right;} </style> <div class="aps-column"> <div class="aps-display-controls"> <span><?php _e('Display', 'aps-text'); ?>:</span> <ul> <li><a class="aps-display-grid aps-icon-grid<?php if ($display == 'grid') echo ' selected'; ?>" title="<?php _e('Grid View', 'aps-text'); ?>"></a></li> <li><a class="aps-display-list aps-icon-list<?php if ($display == 'list') echo ' selected'; ?>" title="<?php _e('List View', 'aps-text'); ?>"></a></li> </ul> </div> <div class="aps-sort-controls aps-dropdown"> <span class="aps-current-dp"><?php echo (isset($sort)) ? $sorts[$sort] : $sorts['default']; ?></span> <ul> <?php foreach ($sorts as $sk => $sv) { if ($sk == 'default' && $sort) { ?> <li><a href="<?php echo $unsort_url; ?>"><?php echo $sv; ?></a></li> <?php } elseif ($sk != 'default' && $sk != $sort) { ?> <li><a href="<?php echo $sort_url .$sk; ?>"><?php echo $sv; ?></a></li> <?php } } ?> </ul> <span class="aps-select-icon aps-icon-down"></span> </div> <div class="aps-brands-controls aps-dropdown"> <?php // get aps cats $cats = get_all_aps_cats('a-z'); if ($cats) { ?> <span class="aps-current-dp"><?php echo $cat_term->name; ?></span> <ul> <?php foreach ($cats as $cat) { if ($cat_term->term_id != $cat->term_id) { ?> <li><a href="<?php echo get_term_link($cat); ?>"><?php echo $cat->name; ?></a></li> <?php } } ?> </ul> <span class="aps-select-icon aps-icon-down"></span> <?php } ?> </div> <?php if ($cat_filters) { /* ?> <div class="aps-filters-control"> <a class="aps-filters-sw" href=""><?php echo $settings['filter-title']; ?> <i class="aps-icon-down"></i></a> </div> <?php */} ?> </div> <?php // loop filters if ($cat_filters) { ?> <div class="aps-filters aps-column<?php if ($filters_terms) echo ' active-filters'; ?>" style="display:block;"> <span class="aps-filters-arrow"></span> <ul id="accordion" class="aps-filters-list"> <?php foreach ($filters as $filter) { if (in_array($filter->term_id, $cat_filters)) { ?> <li > <?php // get filter tax $filter_cbs = $filter->slug; $filter_slug = 'fl-' .$filter_cbs; // get filter terms $filter_terms = get_aps_tax_terms($filter_slug, 'a-z', false); $filter_tax = (isset($filters_terms[$filter_cbs])) ? $filters_terms[$filter_cbs] : array(); // print all terms fields if ($filter_terms && !is_wp_error($filter_terms)) { ?> <h5><?php echo $filter->name; ?></h5> <div class="content-custom"> <?php foreach ($filter_terms as $term) { $checked = false; if ($filter_tax && in_array($term->slug, $filter_tax)) { $checked = true; } ?> <span class="aps-cb-label"> <input type="checkbox" class="" name="<?php echo $filter_cbs; ?>" value="<?php echo $term->slug; ?>"<?php if ($checked) echo ' checked="checked"'; ?> /> <?php /* <span class="aps-cb-holder<?php if ($checked) echo ' aps-cb-active'; ?>"><i class="aps-icon-check"></i></span> */?> <?php echo $term->name; ?> </span> <?php } ?> </div> <?php } ?> </li> <?php } } ?> </ul> <button class="aps-button aps-btn-skin aps-filter-submit alignright" data-url="<?php echo $filter_url; ?>" data-reset="<?php echo $un_filter_url; ?>"><i class="aps-icon-search"></i> <?php _e('Search', 'aps-text'); ?></button> </div> <?php } ?> <div class="cats-custom-length"> <?php // call after controls hook do_action('aps_cat_archive_after_controls'); if ($cat_image) { ?> <div class="aps-cat-img aps-column"> <img src="<?php echo $cat_image['url']; ?>" alt="" /> </div> <div class="clear"></div> <?php } if (!empty($cat_desc)) { ?> <div class="aps-brand-desc aps-column"><?php echo $cat_desc; ?></div> <div class="clear"></div> <?php } // display sub categories if ($cat_display == 'cats' || 'both') { // get child of queried cat $sub_cats = get_terms('aps-cats', "child_of=$cat_term->term_id&hide_empty=0"); if ($sub_cats && !is_wp_error($sub_cats)) { ?> <h2 class="aps-sub-title"><?php _e('Sub Categories', 'aps-text'); ?></h2> <ul class="aps-sub-cats"> <?php foreach ($sub_cats as $sub_cat) { echo '<li><i class="aps-icon-folder"></i> <a href="' .get_term_link($sub_cat) .'">' .$sub_cat->name .'</a></li>'; } ?> </ul> <div class="clear"></div> <?php } } if ($cat_display == 'products' || 'both') { // query products $args = apply_filters('aps_cat_archive_query_args', $args); $products = new WP_Query($args); // start the loop if ( $products->have_posts() ) : ?> <ul class="aps-products aps-row clearfix <?php echo ($display == 'grid') ? 'aps-products-grid' : 'aps-products-list'; if ($settings['grid-num'] == 4) echo ' aps-grid-col4'; ?>"><!-- <?php while ( $products->have_posts() ) : $products->the_post(); ?> --><li> <div class="aps-product-box"> <?php // get product thumbnail $thumb = get_product_image(400, 400); // get main features attributes $features = get_aps_product_features($post->ID); $rating = get_product_rating_total($post->ID); $title = get_the_title(); ?> <span class="aps-product-thumb"> <a href="<?php the_permalink(); ?>"> <img src="<?php echo $thumb['url']; ?>" width="400" height="400" alt="<?php the_title_attribute(); ?>" /> </a> </span> <h2 class="aps-product-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php echo $title; ?></a></h2> <span class="aps-view-info aps-icon-info"></span> <div class="aps-product-details"> <?php if (!empty($features)) { ?> <ul> <?php foreach ($features as $feature) { ?> <li><strong><?php echo $feature['name']; ?>:</strong> <?php echo $feature['value']; ?></li> <?php } ?> <li class="aps-specs-link"><a href="<?php the_permalink(); ?>"><?php _e('View Details', 'aps-text'); ?> →</a></li> </ul> <?php } ?> <span class="aps-comp-rating"><?php echo $rating; ?></span> </div> </div> <div class="aps-buttons-box"> <a class="aps-btn-boxed aps-add-compare" href="#" data-pid="<?php echo $post->ID; ?>" data-title="<?php echo $title; ?>" title="<?php _e('Add to Compare', 'aps-text'); ?>"><i class="aps-icon-compare"></i></a> <a class="aps-btn-boxed aps-add-cart" href="#" data-pid="<?php echo $post->ID; ?>" title="<?php _e('Add to Cart', 'aps-text'); ?>"><i class="aps-icon-cart"></i></a> </div> </li><!-- <?php endwhile; ?> --></ul> <?php // call before pagination hook do_action('aps_cat_archive_before_pagination'); // pagination, need an unlikely integer $big = 999999999; $paginate = paginate_links( array( 'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ), 'format' => '?paged=%#%', 'end_size' => 3, 'mid_size' => 3, 'current' => max( 1, $paged ), 'total' => $products->max_num_pages ) ); // print paginate links echo ($paginate) ? '<div class="aps-pagination">' .$paginate .'</div>' : ''; else: ?> <p><?php _e('Nothing to display yet.', 'aps-text'); ?></p> <?php endif; // reset query data wp_reset_postdata(); // call after results hook do_action('aps_cat_archive_after_results'); } ?> </div> </div> <div class="aps-sidebar"> <?php aps_get_sidebar($template); ?> </div> </div> <script type="text/javascript"> (function($) { /*$(".aps-filters-sw").click(function(e) { $(".aps-filters").slideToggle(); e.preventDefault(); });*/ if ($(".aps-filters").hasClass("active-filters")) { $(".aps-filters").slideDown(); } $(".aps-filter-submit").click(function() { var url = $(this).data("url"), reset = $(this).data("reset"), filters = [], filters_query = []; $(".aps-filter-cb:checked").each(function(e) { var filter_name = $(this).attr("name"), filter_values = []; $("[name='" +filter_name+ "']:checked").each(function() { filter_values.push(this.value); }); if ($.inArray(filter_name, filters) < 0) { filters.push(filter_name); filters_query.push(filter_name + "." + filter_values.join(",")); } }); if (filters.length !== 0) { filters_query = filters_query.join("_"); location = url + filters_query; } else { location = reset; } }); })(jQuery); </script> </div> <?php get_footer(); ?> PHP: I'll list you the things which do not work with the above code: 1st: when you click on that checkbox button it does not refresh the page for filters. 2nd: when you click on the checkbox and hit search it does not show the results.it simply reloads to the same page my website: https://www.mobilesradar.com/phones/upcoming-mobiles/ lacking this part from the slug (?filters=battery.bat-6mah) So it should be like this after the filer result https://www.mobilesradar.com/phones/upcoming-mobiles/?filters=battery.bat-6mah 3rd: 1st filter option Battery drop-down does not close when you click on it. 4th It really looks messy when you see the same on mobile devices. How can I fix this errors and make it compatible with mobile devices? just like above another website. so what code should I add or edit in this above file and how to make it work? or can someone edit this file and make it work and send it to me that would really a great help. Please look into this and assist me as soon as possible many thanks in advance. Kind Regards
I believe you would get more responses (especially if the job is urgent, as you described) from programmers who can help you, if you post how much you are going to pay for this custom coding.