{"id":43,"date":"2016-06-23T13:08:55","date_gmt":"2016-06-23T13:08:55","guid":{"rendered":"http:\/\/blog.onclickinnovations.com\/?p=43"},"modified":"2016-08-03T05:27:39","modified_gmt":"2016-08-03T05:27:39","slug":"filter-sort-post-by-categories-using-ajax-in-wordpress","status":"publish","type":"post","link":"https:\/\/onclickinnovations.com\/blog\/filter-sort-post-by-categories-using-ajax-in-wordpress\/","title":{"rendered":"Filter \/ Sort post by categories using Ajax in WordPress."},"content":{"rendered":"<p>Using Ajax in wordpress you can create your custom ajax filter to sort your post\/Custom post according to categories without page refresh.<\/p>\n<p>Following are the procedure to achieve it :<br \/>\n<strong>1. HTML<\/strong><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;a href=&quot;javascript:void(0);&quot;  onClick=&quot;filter_posts_by_category('cat1', 1)&quot;&gt;cat1&lt;\/a&gt;\r\n&lt;a href=&quot;javascript:void(0);&quot;  onClick=&quot;filter_posts_by_category('cat2', 1)&quot;&gt;cat2&lt;\/a&gt;\r\n&lt;a href=&quot;javascript:void(0);&quot;  onClick=&quot;filter_posts_by_category('cat3', 1)&quot;&gt;cat3&lt;\/a&gt;\r\n&lt;a href=&quot;javascript:void(0);&quot;  onClick=&quot;filter_posts_by_category('all', 1)&quot;&gt;all&lt;\/a&gt;\r\n<\/pre>\n<p><strong>Note : Here filter_posts_by_category(&#8216;cat1&#8217;, 1) cat1 is slug of the category.<\/strong><\/p>\n<p><strong>2. JS<\/strong><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;script type=&quot;text\/javascript&quot;&gt;\r\n    jQuery(document).ready(function(){\r\n       \r\n       \r\n        filter_posts_by_category('all', 1);\r\n       \r\n    });\r\n   \r\n   \r\n    var filter_posts_by_category = function(cat_slug, paged){\r\n        var ajax_url = window.location.protocol + &quot;\/\/&quot; + window.location.host +'\/wp-admin\/admin-ajax.php';\r\n       \r\n        var total_posts = -1; \/\/ -1 for show all posts\r\n       \r\n        var data = {\r\n            'action'    : 'filter_posts_by_category',\r\n            'cat_slug'    : cat_slug,\r\n            'posts'        : total_posts,\r\n            'paged'        : paged,\r\n        };\r\n       \r\n        jQuery.ajax({\r\n            method:&quot;POST&quot;,\r\n            url: ajax_url,\r\n            data: data,\r\n            beforeSend : function(){\r\n                \/\/ functionality to select unselect category\r\n                jQuery('.filter_icon').each(function(){\r\n                    jQuery(this).removeClass('selected_cat');\r\n                });\r\n               \r\n                jQuery('.'+cat_slug).addClass('selected_cat');\r\n               \r\n                \/\/ function to set calender icon url to another location\r\n                setCalenderUrl(cat_slug);\r\n               \r\n                jQuery('#post_filtered').html('&lt;p style=&quot;text-align:center&quot;&gt;&lt;img class=&quot;img_loader&quot; src=&quot;' + window.location.protocol + '\/\/' + window.location.host + '\/images\/postloading.gif&quot; \/&gt;&lt;\/p&gt;');\r\n            },\r\n            success: function(result){\r\n                jQuery('#post_filtered').html(result);\r\n            },\r\n            error: function(xhr,status,error){\r\n                \/\/ console.log(error);\r\n            }\r\n        });\r\n    }\r\n   \r\n    &lt;\/script&gt;\r\n<\/pre>\n<p><strong>3. PHP<\/strong><\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\n&lt;?php\r\nadd_action('wp_ajax_filter_posts_by_category', 'ajax_filter_posts_by_category');\r\nadd_action('wp_ajax_nopriv_filter_posts_by_category', 'ajax_filter_posts_by_category');   \r\n   \r\nfunction ajax_filter_posts_by_category(){\r\n    $terms = isset($_POST&#x5B;'cat_slug']) &amp;&amp; !empty($_POST&#x5B;'cat_slug']) ? $_POST&#x5B;'cat_slug'] : 'all';\r\n    $paged = $_POST&#x5B;'paged'];\r\n    $posts = $_POST&#x5B;'posts'];\r\n   \r\n    $wp_query = null;\r\n    $wp_query = new WP_Query();\r\n   \r\n    if($terms != 'all'){\r\n      $args = array(\r\n                      'post_type' =&gt; 'cours',\r\n                      'showposts'=&gt;$posts,\r\n                      'paged'=&gt;$paged,\r\n                      'tax_query' =&gt; array(\r\n                          array(\r\n                              'taxonomy' =&gt; 'cours_category',\r\n                              'field'    =&gt; 'slug',\r\n                              'terms'    =&gt; $terms\r\n                          )\r\n                      ),\r\n                                          'order'=&gt;'asc',\r\n                                          'orderby'=&gt;'title',\r\n                  );\r\n    }\r\n    else{\r\n        $args = array(\r\n                      'post_type' =&gt; 'cours',\r\n                      'showposts'=&gt;$posts,\r\n                                  'paged'=&gt;$paged,\r\n                                          'order'=&gt;'asc',\r\n                                          'orderby'=&gt;'title',\r\n                   \r\n                  );\r\n    }\r\n   \r\n     \r\n    $wp_query-&gt;query($args);\r\n\r\n    $counter = 1;\r\n    while ($wp_query-&gt;have_posts()) : $wp_query-&gt;the_post();\r\n      global $post;\r\n     \/\/ var_dump($post);\r\n?&gt;   \r\n     &lt;?php echo $post-&gt;post_title;  ?&gt;\r\n&lt;?php\r\n\r\n    endwhile;\r\n\r\n\r\n    \/\/ Set up next and prev links\r\n    $this_page = $wp_query-&gt;get('paged');\r\n    $max_page = $wp_query-&gt;max_num_pages;\r\n    if ($this_page &gt; 1) {\r\n      echo '&lt;a class=&quot;filtered-posts-newer&quot; href=&quot;javascript:void(0);&quot; onClick=&quot;filter_posts_by_category(\\''.$terms.'\\','.($this_page - 1).');&quot;&gt;Newer posts&lt;\/a&gt; &amp;nbsp; &amp;nbsp;';\r\n    }\r\n    if ($this_page &lt; $max_page) {\r\n      echo '&lt;a class=&quot;filtered-posts-older&quot; href=&quot;javascript:void(0);&quot; onClick=&quot;filter_posts_by_category(\\''.$terms.'\\','.($this_page + 1).');&quot;&gt;Older posts&lt;\/a&gt;';\r\n    }\r\n    echo &quot;&lt;\/nav&gt;&quot;;\r\n   \r\n    die();\r\n}\r\n?&gt;\r\n<\/pre>\n<p><strong>Note : Here &#8220;course&#8221; is my custom post type and &#8220;course_category&#8221; is my custom taxonomy.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Using Ajax in wordpress you can create your custom ajax filter to sort your post\/Custom post according to categories without page refresh. Following are the procedure to achieve it : 1. HTML &lt;a href=&quot;javascript:void(0);&quot; onClick=&quot;filter_posts_by_category(&#8216;cat1&#8217;, 1)&quot;&gt;cat1&lt;\/a&gt; &lt;a href=&quot;javascript:void(0);&quot; onClick=&quot;filter_posts_by_category(&#8216;cat2&#8217;, 1)&quot;&gt;cat2&lt;\/a&gt; &lt;a href=&quot;javascript:void(0);&quot; onClick=&quot;filter_posts_by_category(&#8216;cat3&#8217;, 1)&quot;&gt;cat3&lt;\/a&gt; &lt;a href=&quot;javascript:void(0);&quot; onClick=&quot;filter_posts_by_category(&#8216;all&#8217;, 1)&quot;&gt;all&lt;\/a&gt; Note : Here filter_posts_by_category(&#8216;cat1&#8217;, 1) cat1 is [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":44,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[31,33,32,34,30,28],"class_list":["post-43","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-custom-software-development-solutions","tag-ajax","tag-categories","tag-custom","tag-filter","tag-javascript","tag-php"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Filter \/ Sort post by categories using Ajax in Wordpress. | Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/onclickinnovations.com\/blog\/filter-sort-post-by-categories-using-ajax-in-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Filter \/ Sort post by categories using Ajax in Wordpress. | Blog\" \/>\n<meta property=\"og:description\" content=\"Using Ajax in wordpress you can create your custom ajax filter to sort your post\/Custom post according to categories without page refresh. Following are the procedure to achieve it : 1. HTML &lt;a href=&quot;javascript:void(0);&quot; onClick=&quot;filter_posts_by_category(&#039;cat1&#039;, 1)&quot;&gt;cat1&lt;\/a&gt; &lt;a href=&quot;javascript:void(0);&quot; onClick=&quot;filter_posts_by_category(&#039;cat2&#039;, 1)&quot;&gt;cat2&lt;\/a&gt; &lt;a href=&quot;javascript:void(0);&quot; onClick=&quot;filter_posts_by_category(&#039;cat3&#039;, 1)&quot;&gt;cat3&lt;\/a&gt; &lt;a href=&quot;javascript:void(0);&quot; onClick=&quot;filter_posts_by_category(&#039;all&#039;, 1)&quot;&gt;all&lt;\/a&gt; Note : Here filter_posts_by_category(&#8216;cat1&#8217;, 1) cat1 is [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/onclickinnovations.com\/blog\/filter-sort-post-by-categories-using-ajax-in-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/officialonclick\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-06-23T13:08:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-08-03T05:27:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/onclickinnovations.com\/blog\/wp-content\/uploads\/2016\/06\/wordpress-ajax-tutorial.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"416\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"it_geeks\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@OnClick_web\" \/>\n<meta name=\"twitter:site\" content=\"@OnClick_web\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"it_geeks\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/filter-sort-post-by-categories-using-ajax-in-wordpress\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/filter-sort-post-by-categories-using-ajax-in-wordpress\\\/\"},\"author\":{\"name\":\"it_geeks\",\"@id\":\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/#\\\/schema\\\/person\\\/45db30038e5cd799aa868257635fa78d\"},\"headline\":\"Filter \\\/ Sort post by categories using Ajax in WordPress.\",\"datePublished\":\"2016-06-23T13:08:55+00:00\",\"dateModified\":\"2016-08-03T05:27:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/filter-sort-post-by-categories-using-ajax-in-wordpress\\\/\"},\"wordCount\":574,\"commentCount\":8,\"publisher\":{\"@id\":\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/filter-sort-post-by-categories-using-ajax-in-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/06\\\/wordpress-ajax-tutorial.jpg\",\"keywords\":[\"Ajax\",\"categories\",\"Custom\",\"filter\",\"Javascript\",\"PHP\"],\"articleSection\":[\"Custom Software Development Solutions\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/filter-sort-post-by-categories-using-ajax-in-wordpress\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/filter-sort-post-by-categories-using-ajax-in-wordpress\\\/\",\"url\":\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/filter-sort-post-by-categories-using-ajax-in-wordpress\\\/\",\"name\":\"Filter \\\/ Sort post by categories using Ajax in Wordpress. | Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/filter-sort-post-by-categories-using-ajax-in-wordpress\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/filter-sort-post-by-categories-using-ajax-in-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/06\\\/wordpress-ajax-tutorial.jpg\",\"datePublished\":\"2016-06-23T13:08:55+00:00\",\"dateModified\":\"2016-08-03T05:27:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/filter-sort-post-by-categories-using-ajax-in-wordpress\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/filter-sort-post-by-categories-using-ajax-in-wordpress\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/filter-sort-post-by-categories-using-ajax-in-wordpress\\\/#primaryimage\",\"url\":\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/06\\\/wordpress-ajax-tutorial.jpg\",\"contentUrl\":\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/06\\\/wordpress-ajax-tutorial.jpg\",\"width\":825,\"height\":416,\"caption\":\"wordpress-ajax-tutorial\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/filter-sort-post-by-categories-using-ajax-in-wordpress\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Filter \\\/ Sort post by categories using Ajax in WordPress.\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/\",\"name\":\"Blog - OnclickInnovations Pvt. Ltd.\",\"description\":\"Onclick Innovations Pvt. Ltd.\",\"publisher\":{\"@id\":\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/#organization\",\"name\":\"Onclick Innovations Pvt. Ltd.\",\"url\":\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/onclick-innovations-primary-3.png\",\"contentUrl\":\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/onclick-innovations-primary-3.png\",\"width\":1010,\"height\":258,\"caption\":\"Onclick Innovations Pvt. Ltd.\"},\"image\":{\"@id\":\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/officialonclick\\\/\",\"https:\\\/\\\/x.com\\\/OnClick_web\",\"https:\\\/\\\/www.instagram.com\\\/onclickinnovations\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/onclick-innovations\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/#\\\/schema\\\/person\\\/45db30038e5cd799aa868257635fa78d\",\"name\":\"it_geeks\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/00c7f0c3a8435946184e7242e37b82566322f8a4cf989c04c4594511716e2645?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/00c7f0c3a8435946184e7242e37b82566322f8a4cf989c04c4594511716e2645?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/00c7f0c3a8435946184e7242e37b82566322f8a4cf989c04c4594511716e2645?s=96&d=mm&r=g\",\"caption\":\"it_geeks\"},\"url\":\"https:\\\/\\\/onclickinnovations.com\\\/blog\\\/author\\\/it_geeks\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Filter \/ Sort post by categories using Ajax in Wordpress. | Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/onclickinnovations.com\/blog\/filter-sort-post-by-categories-using-ajax-in-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"Filter \/ Sort post by categories using Ajax in Wordpress. | Blog","og_description":"Using Ajax in wordpress you can create your custom ajax filter to sort your post\/Custom post according to categories without page refresh. Following are the procedure to achieve it : 1. HTML &lt;a href=&quot;javascript:void(0);&quot; onClick=&quot;filter_posts_by_category('cat1', 1)&quot;&gt;cat1&lt;\/a&gt; &lt;a href=&quot;javascript:void(0);&quot; onClick=&quot;filter_posts_by_category('cat2', 1)&quot;&gt;cat2&lt;\/a&gt; &lt;a href=&quot;javascript:void(0);&quot; onClick=&quot;filter_posts_by_category('cat3', 1)&quot;&gt;cat3&lt;\/a&gt; &lt;a href=&quot;javascript:void(0);&quot; onClick=&quot;filter_posts_by_category('all', 1)&quot;&gt;all&lt;\/a&gt; Note : Here filter_posts_by_category(&#8216;cat1&#8217;, 1) cat1 is [&hellip;]","og_url":"https:\/\/onclickinnovations.com\/blog\/filter-sort-post-by-categories-using-ajax-in-wordpress\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/officialonclick\/","article_published_time":"2016-06-23T13:08:55+00:00","article_modified_time":"2016-08-03T05:27:39+00:00","og_image":[{"width":825,"height":416,"url":"https:\/\/onclickinnovations.com\/blog\/wp-content\/uploads\/2016\/06\/wordpress-ajax-tutorial.jpg","type":"image\/jpeg"}],"author":"it_geeks","twitter_card":"summary_large_image","twitter_creator":"@OnClick_web","twitter_site":"@OnClick_web","twitter_misc":{"Written by":"it_geeks","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/onclickinnovations.com\/blog\/filter-sort-post-by-categories-using-ajax-in-wordpress\/#article","isPartOf":{"@id":"https:\/\/onclickinnovations.com\/blog\/filter-sort-post-by-categories-using-ajax-in-wordpress\/"},"author":{"name":"it_geeks","@id":"https:\/\/onclickinnovations.com\/blog\/#\/schema\/person\/45db30038e5cd799aa868257635fa78d"},"headline":"Filter \/ Sort post by categories using Ajax in WordPress.","datePublished":"2016-06-23T13:08:55+00:00","dateModified":"2016-08-03T05:27:39+00:00","mainEntityOfPage":{"@id":"https:\/\/onclickinnovations.com\/blog\/filter-sort-post-by-categories-using-ajax-in-wordpress\/"},"wordCount":574,"commentCount":8,"publisher":{"@id":"https:\/\/onclickinnovations.com\/blog\/#organization"},"image":{"@id":"https:\/\/onclickinnovations.com\/blog\/filter-sort-post-by-categories-using-ajax-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/onclickinnovations.com\/blog\/wp-content\/uploads\/2016\/06\/wordpress-ajax-tutorial.jpg","keywords":["Ajax","categories","Custom","filter","Javascript","PHP"],"articleSection":["Custom Software Development Solutions"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/onclickinnovations.com\/blog\/filter-sort-post-by-categories-using-ajax-in-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/onclickinnovations.com\/blog\/filter-sort-post-by-categories-using-ajax-in-wordpress\/","url":"https:\/\/onclickinnovations.com\/blog\/filter-sort-post-by-categories-using-ajax-in-wordpress\/","name":"Filter \/ Sort post by categories using Ajax in Wordpress. | Blog","isPartOf":{"@id":"https:\/\/onclickinnovations.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/onclickinnovations.com\/blog\/filter-sort-post-by-categories-using-ajax-in-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/onclickinnovations.com\/blog\/filter-sort-post-by-categories-using-ajax-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/onclickinnovations.com\/blog\/wp-content\/uploads\/2016\/06\/wordpress-ajax-tutorial.jpg","datePublished":"2016-06-23T13:08:55+00:00","dateModified":"2016-08-03T05:27:39+00:00","breadcrumb":{"@id":"https:\/\/onclickinnovations.com\/blog\/filter-sort-post-by-categories-using-ajax-in-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/onclickinnovations.com\/blog\/filter-sort-post-by-categories-using-ajax-in-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/onclickinnovations.com\/blog\/filter-sort-post-by-categories-using-ajax-in-wordpress\/#primaryimage","url":"https:\/\/onclickinnovations.com\/blog\/wp-content\/uploads\/2016\/06\/wordpress-ajax-tutorial.jpg","contentUrl":"https:\/\/onclickinnovations.com\/blog\/wp-content\/uploads\/2016\/06\/wordpress-ajax-tutorial.jpg","width":825,"height":416,"caption":"wordpress-ajax-tutorial"},{"@type":"BreadcrumbList","@id":"https:\/\/onclickinnovations.com\/blog\/filter-sort-post-by-categories-using-ajax-in-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/onclickinnovations.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Filter \/ Sort post by categories using Ajax in WordPress."}]},{"@type":"WebSite","@id":"https:\/\/onclickinnovations.com\/blog\/#website","url":"https:\/\/onclickinnovations.com\/blog\/","name":"Blog - OnclickInnovations Pvt. Ltd.","description":"Onclick Innovations Pvt. Ltd.","publisher":{"@id":"https:\/\/onclickinnovations.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/onclickinnovations.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/onclickinnovations.com\/blog\/#organization","name":"Onclick Innovations Pvt. Ltd.","url":"https:\/\/onclickinnovations.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/onclickinnovations.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/onclickinnovations.com\/blog\/wp-content\/uploads\/2026\/05\/onclick-innovations-primary-3.png","contentUrl":"https:\/\/onclickinnovations.com\/blog\/wp-content\/uploads\/2026\/05\/onclick-innovations-primary-3.png","width":1010,"height":258,"caption":"Onclick Innovations Pvt. Ltd."},"image":{"@id":"https:\/\/onclickinnovations.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/officialonclick\/","https:\/\/x.com\/OnClick_web","https:\/\/www.instagram.com\/onclickinnovations\/","https:\/\/www.linkedin.com\/company\/onclick-innovations\/"]},{"@type":"Person","@id":"https:\/\/onclickinnovations.com\/blog\/#\/schema\/person\/45db30038e5cd799aa868257635fa78d","name":"it_geeks","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/00c7f0c3a8435946184e7242e37b82566322f8a4cf989c04c4594511716e2645?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/00c7f0c3a8435946184e7242e37b82566322f8a4cf989c04c4594511716e2645?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/00c7f0c3a8435946184e7242e37b82566322f8a4cf989c04c4594511716e2645?s=96&d=mm&r=g","caption":"it_geeks"},"url":"https:\/\/onclickinnovations.com\/blog\/author\/it_geeks\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/onclickinnovations.com\/blog\/wp-content\/uploads\/2016\/06\/wordpress-ajax-tutorial.jpg","jetpack_shortlink":"https:\/\/wp.me\/pe8hCy-H","jetpack-related-posts":[{"id":644,"url":"https:\/\/onclickinnovations.com\/blog\/reactjs\/","url_meta":{"origin":43,"position":0},"title":"ReactJS","author":"it_geeks","date":"March 6, 2017","format":false,"excerpt":"#ReactJS #DOM #JavaScript #AJAX #MVCframework #UI React is a JavaScript UI library for dynamic websites. React allows to build complex UI using components as the basis of each building blocks. A component is the smallest possible representative of a group of DOM elements along with its corresponding actions and state.\u00a0\u2026","rel":"","context":"In &quot;Custom Software Development Solutions&quot;","block_context":{"text":"Custom Software Development Solutions","link":"https:\/\/onclickinnovations.com\/blog\/category\/custom-software-development-solutions\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/onclickinnovations.com\/blog\/wp-content\/uploads\/2017\/03\/react-js-framework.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/onclickinnovations.com\/blog\/wp-content\/uploads\/2017\/03\/react-js-framework.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/onclickinnovations.com\/blog\/wp-content\/uploads\/2017\/03\/react-js-framework.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":75,"url":"https:\/\/onclickinnovations.com\/blog\/javascript-object-notation-json\/","url_meta":{"origin":43,"position":1},"title":"JavaScript Object Notation  ( JSON )","author":"it_geeks","date":"June 28, 2016","format":false,"excerpt":"JSON is JAVASCRIPT OBJECT NOTATION \u00a0and is\u00a0a way to store information in an organized, easy-to-access manner.\u00a0In a nutshell, it gives us a human-readable collection of data that we can access in a really logical manner. JSON notation is however not only readable by JavaScript, but most languages today have some\u2026","rel":"","context":"In &quot;Custom Software Development Solutions&quot;","block_context":{"text":"Custom Software Development Solutions","link":"https:\/\/onclickinnovations.com\/blog\/category\/custom-software-development-solutions\/"},"img":{"alt_text":"JavaScript Object Notation","src":"https:\/\/i0.wp.com\/onclickinnovations.com\/blog\/wp-content\/uploads\/2016\/06\/json.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/onclickinnovations.com\/blog\/wp-content\/uploads\/2016\/06\/json.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/onclickinnovations.com\/blog\/wp-content\/uploads\/2016\/06\/json.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/onclickinnovations.com\/blog\/wp-content\/uploads\/2016\/06\/json.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":508,"url":"https:\/\/onclickinnovations.com\/blog\/node-js-2\/","url_meta":{"origin":43,"position":2},"title":"Node.js","author":"it_geeks","date":"December 6, 2016","format":false,"excerpt":"Node.js\u00a0 is a open source cross-platform runtime environment has been written in JavaScript, which makes it an exceptional choice for real-time applications. Node.js is\u00a0packed with features which have helped it become a top choice for developers when they consider web application development. Node.js is event-based so all the wonderful\u00a0Ajax -like\u2026","rel":"","context":"In &quot;Custom Software Development Solutions&quot;","block_context":{"text":"Custom Software Development Solutions","link":"https:\/\/onclickinnovations.com\/blog\/category\/custom-software-development-solutions\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/onclickinnovations.com\/blog\/wp-content\/uploads\/2016\/12\/node.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/onclickinnovations.com\/blog\/wp-content\/uploads\/2016\/12\/node.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/onclickinnovations.com\/blog\/wp-content\/uploads\/2016\/12\/node.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/onclickinnovations.com\/blog\/wp-content\/uploads\/2016\/12\/node.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":701,"url":"https:\/\/onclickinnovations.com\/blog\/vue-js\/","url_meta":{"origin":43,"position":3},"title":"Vue.js","author":"it_geeks","date":"April 13, 2017","format":false,"excerpt":"Vue.js is a javascript framework to build user interfaces. Vue.js is a library for building web interfaces. Vue.js is simple, minimal core with an incrementally adoptable stack that can handle apps of any scale. Vue is designed from the ground up to be incrementally adoptable. The core library is focused\u2026","rel":"","context":"In &quot;Custom Software Development Solutions&quot;","block_context":{"text":"Custom Software Development Solutions","link":"https:\/\/onclickinnovations.com\/blog\/category\/custom-software-development-solutions\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1094,"url":"https:\/\/onclickinnovations.com\/blog\/hire-javascript-developers\/","url_meta":{"origin":43,"position":4},"title":"Reasons to Hire a JavaScript Developers","author":"it_geeks","date":"November 12, 2018","format":false,"excerpt":"JavaScript is all over the place. From extravagant receptive interface components on a site to clever highlights in hearty disconnected competent, geolocation-based web applications - JavaScript powers them all. It's a great opportunity to hire a web development company, and that is most likely a smart thought. JavaScript doesn't simply\u2026","rel":"","context":"In &quot;Custom Software Development&quot;","block_context":{"text":"Custom Software Development","link":"https:\/\/onclickinnovations.com\/blog\/category\/custom-software-development\/"},"img":{"alt_text":"hire frontend developers","src":"https:\/\/i0.wp.com\/onclickinnovations.com\/blog\/wp-content\/uploads\/2018\/11\/hire-javascript-developers.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/onclickinnovations.com\/blog\/wp-content\/uploads\/2018\/11\/hire-javascript-developers.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/onclickinnovations.com\/blog\/wp-content\/uploads\/2018\/11\/hire-javascript-developers.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/onclickinnovations.com\/blog\/wp-content\/uploads\/2018\/11\/hire-javascript-developers.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":1567,"url":"https:\/\/onclickinnovations.com\/blog\/react-2026-why-react-is-still-winning\/","url_meta":{"origin":43,"position":5},"title":"React Is 13 Years Old \u2014 And It&#8217;s Still Winning in 2026. Here&#8217;s Why.","author":"it_geeks","date":"June 23, 2026","format":false,"excerpt":"Every year since 2016, someone has written the obituary for React. Angular was going to kill it. Then Vue. Then Svelte. Then SolidJS. Then Qwik. Then htmx. Then a wave of developers declaring that vanilla JavaScript was the future all along. React is still here. Still the default choice for\u2026","rel":"","context":"In &quot;AI Development&quot;","block_context":{"text":"AI Development","link":"https:\/\/onclickinnovations.com\/blog\/category\/ai-development\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/onclickinnovations.com\/blog\/wp-content\/uploads\/2026\/06\/re1.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/onclickinnovations.com\/blog\/wp-content\/uploads\/2026\/06\/re1.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/onclickinnovations.com\/blog\/wp-content\/uploads\/2026\/06\/re1.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/onclickinnovations.com\/blog\/wp-content\/uploads\/2026\/06\/re1.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/onclickinnovations.com\/blog\/wp-content\/uploads\/2026\/06\/re1.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/onclickinnovations.com\/blog\/wp-content\/uploads\/2026\/06\/re1.png?resize=1400%2C800&ssl=1 4x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/onclickinnovations.com\/blog\/wp-json\/wp\/v2\/posts\/43","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onclickinnovations.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/onclickinnovations.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/onclickinnovations.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/onclickinnovations.com\/blog\/wp-json\/wp\/v2\/comments?post=43"}],"version-history":[{"count":7,"href":"https:\/\/onclickinnovations.com\/blog\/wp-json\/wp\/v2\/posts\/43\/revisions"}],"predecessor-version":[{"id":51,"href":"https:\/\/onclickinnovations.com\/blog\/wp-json\/wp\/v2\/posts\/43\/revisions\/51"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/onclickinnovations.com\/blog\/wp-json\/wp\/v2\/media\/44"}],"wp:attachment":[{"href":"https:\/\/onclickinnovations.com\/blog\/wp-json\/wp\/v2\/media?parent=43"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/onclickinnovations.com\/blog\/wp-json\/wp\/v2\/categories?post=43"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/onclickinnovations.com\/blog\/wp-json\/wp\/v2\/tags?post=43"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}