Jason on
24th July 2015

Visual Composer: Page Builder for WordPress by WPBakery is an incredible tool. We use it on almost every project now to give the client a massive amount of control over their content without adding any complexity.  Recently VC received an upgrade which included Grid Elements, here’s a video showing off the basics:

As you can see, pretty powerful stuff.  This “Grid” update (4.4) also brought changes to the Post Grid element.

Before the update the Post Grid element used to have a query builder when it was used with custom post types.  This allowed you to select the post type to query and also any custom taxonomies associated with that custom post type (categories and tags).  However the new Post Grid has none of this and instead features a very plain Custom Query text box:

The advice below the text box is to formulate your query using this page, unfortunately that codex page covers many ways to create a query, and what the Post Grid settings is after isn’t in the WPBakery documentation (at least I couldn’t find it!)

After some trial and error and a lot of things not working (too many!), it turns out we need to use a query string, with no surrounding PHP.  Such as:

cat=1&tag=apples&post_status=publish

 

Or, if used with a custom post type such as ‘package’ on a custom taxonomy like ‘package-tag’ with a tag slug of ‘premium’:

post_type=package&package-tag=premium&post_status=publish

 

I like the fact that it’s a custom query string now, it’s just as powerful as the old query builder, if not more so. I’m also a big fan of the new Grid Elements as often themes come with custom post types which go unused because of the way they are displayed (think ‘Staff’ or ‘Testimonies’). This blows them wide open for easy customisation.

Cross post from my blog.

61 thoughts on “How To: Visual Composer’s Grid Custom Query

    1. Would anyone know a way to get a custom post type to just show up in the list of posts? It seems the theme I am working with figured it out because their post types they included are in there (ie. portfolio, staff, testimonials, etc.)

      1. Are you registering the custom post type by yourself in functions, or is it registered by a plugin?

        1. I Registered it manually using a plugin I created from scratch using standard WordPress protocol. I just did it in a plugin so I didn’t have to mess with the functions.php and it would work cross-template .

      2. Registered it manually using a plugin I created from scratch using standard WordPress protocol. I just did it in a plugin so I didn’t have to mess with the functions.php and it would work cross-template.

  1. anyone know how i can use the custom query to get woocommerce categories? Not the products in the categories, but the actual categories…Thanks,

    1. I think you’ll have to use a different element for this Alberto, the Posts Grid won’t output the categories. Maybe in the future though, as this would be helpful!

  2. Thanks alot for this explanation. I have a question i hope you can help answer.
    Lets say i have created 3 custom post types. TypeA, TypeB and TypeC. Those 3 post types all share same categories.
    I have created one post in each posttype and these 3 posts are all placed in same category with ID 1.
    Howcome nothing shows when i just type “cat=1”?
    If i put “post_type=typea&cat=1” it show this 1 post just fine, but how can i include all posts from category with ID = 1 (regarding type) types like this?

    1. Hi Mikael, this is a tricky one. Are you sure the categories are actually registered as taxonomies for the custom post types as well?

      Can you try this:

      “post_type[]=typea&post_type[]=typeb&post_type[]=typec&cat=1”

      1. Unfortunately it does not work. It show like this on the page (exactly):

        =typea&post_type[]=typeb&post_type[]=typec&cat=1″]

        I am using the default post categories for this.

        1. One last try, ugly though!

          post_type& #91;& #93;=typea&post_type& #91;& #93;=typeb&post_type& #91;& #93;=typec&cat=1

          Remove the space between each & and # character. Had to post it with spaces as Disqus converts the characters.

          The problem is to pass the array using the string you must use square brackets, but square brackets exit the shortcode used by Visual Composer. In the above string I have encoded the square brackets to HTML entities, but it may not work.

          1. Thanks alot for trying. appreciate it 🙂
            If i ever come up with a working solution i will post here so others can see aswell

          2. I had the same problem when trying to pass an array to the ”category__and’ argument, in my case, the correct escaping was [ = %5B and ] = %5D.
            So, ‘category__and[0]=27&category__and[1]=48’ needs to be encoded as
            category__and%5B20%5D=27&category__and%5B21%5D=48
            in order to work.

  3. Thank Jason, your article very interesting.

    But I have a question, Post Grid with Custom Query can display 10 posts, how I can increase it?

    1. If you use posts_per_page=20 in your custom query it will allow you to set the number of posts (in this case to 20). Note that -1 means display all posts.

  4. Thanks for sharing this info! I searched for quite a while before I found what kind of format VC wanted for the query! Do you know if there’s a way to put the query in an array that VC will like? I’m trying to get the sticky posts from a custom post type and my args look like this:

    ‘post_type’ => ‘custom’,
    ‘ignore_sticky_posts’ => ‘false’,
    ‘post__in’ => get_option(‘sticky_posts’)

    That get_options(‘sticky_posts’) looks likes it needs to in an array…. any ideas?

  5. Thank you so much for this. I was successful in using your code for my custom post types, however, it is not including the link for the user to be able to click through to the page. Currently, when I click it, it just shows the image. What am I doing wrong?

  6. Need help, I would like to display only some WP pages and not post, somebody can help me to tell me how to choose or exclude some pages. The problem is I don’t know the taxonomy for pages and how to setting include or exclude some pages, and more the wp pages how to categories or tag like post, so how to to to display only certain pages in a post grid for exemple???

  7. I have a category “subjects” and subcategories like “physics”.
    How can I display all the subcategories of “pages” that a post belongs to?

  8. I have a question. What if I need to insert variables in the query? For example, I need to filter the loop by date(Ymd).
    Do you think it’s possibile to define the query in the function.php and pass to the POST GRID element by a function?

    1. I made it! 🙂
      After too much hours of coding and coffees, I made a customised VC who can filter advanced query. Ask me how to do. alchemy@raffaeleturci:disqus .com
      I’m gonna develop a plugin who makes possibile easy “injections”; co-workers welcome!

      1. Raffaele I’ve sent you an email. I need similar functionality but want to pass the ID of the page. Would appreciate your help!

        1. Hi Matt, First you must develop the QUERY in a “codex” formatted query. Set the variable “YOUR_ID” who will be changed as your dynamic data on as PHP (date, id, global variable, …).
          Then, parse it by using this PHP:

          ‘post’,

          ‘posts_per_page’ => 9,

          ‘orderby’ => ‘date’,

          ‘order’ => ‘DESC’,

          ‘meta_query’ => array(

          array(

          ‘key’ => ‘colonna’,

          ‘value’ => ‘centrale’

          ),

          array(

          ‘key’ => ‘pubblica_nella_homepage_fino_al’,

          ‘value’ => ‘2016-03-02’,

          ‘type’ => ‘DATE’,

          ‘compare’ => ‘>=’

          )

          )

          );

          echo http_build_query($data) . “n”;

          echo http_build_query($data, ”, ‘&’);

          ?>

          And then fill the VC’s CUSTOM QUERY panel with the obtained parsed query. Something like:
          post_type=post_mission_trip&post_status=publish&posts_per_page=3&orderby=meta_value_num&meta_key=trip_begin&order=desc&meta_query%5Brelation%5D=and&meta_query%5B0%5D%5Bkey%5D=trip_options&meta_query%5B0%5D%5Bvalue%5D=private_event&meta_query%5B0%5D%5Bcompare%5D=%3D%3D&meta_query%5B1%5D%5Bkey%5D=trip_limit&meta_query%5B1%5D%5Bvalue%5D=0&meta_query%5B1%5D%5Bcompare%5D=%3E

          If you need to pass a variable, edit the file js_composer/include/classes/shortcodes/vc-basic-grid.php

          //FILTER CUSTOM SHORTCODE BY ADDING DATE
          $date_today = date(‘Ymd’);
          $post_data = query_posts( str_replace(‘TODAY_DATE_CUSTOM’, $date_today, $query) );
          //$post_data = query_posts( $query );

  9. Thanks for the info!

    I need to create a query that will include all of the following within one post grid:

    6 selected pages (can be identified by slug or similar).
    1 latest blog post.
    1 specific blog post within a specific category.

    Can posts and pages be combined in one grid?

  10. I cannot get the orderby meta value to work. I have tried many different ways. VC does recognize the field (meta-key, as I can have it display on the grid element with the field value(meta value) but it will not sort the order by the value. The elements only display in the order in which they were created.

  11. Hi !
    do you know how to pass a php variable into the visual composer post grid custom query ?

    I have a variable $variablename that contain the category number

    if I put cat=$variablename&post_status=publish in the custom query field, it doesn’t seems to work…

    thanks a lot !

      1. Never found any solution… end up using the Essential Grid plugin which allows to use custom filters…

  12. I purchased material_mag WordPress theme by default theme having visual composer plug in. When i am using post grid element , it showing only featured image.Not showing post title, expert in the grid. Any one can help me out from this. Thanks in advance..

  13. Hey, I can’t figure out how to build a grid like this on Visual Composer… any advice would be greatly appreciated, thank you!

  14. You need to Add an element called TAXONOMY to the grid builder, so we can show what category/tag that post belongs to.

    Right now I’m using a shortcode

  15. Any idea how I can limit to a particular group of sub PAGES. I thought something like child_of=7 (with that being an ID) I can get pages with post_type=page but can’t seem to limit pages in any other way?

  16. I want to include events from multiple categories via The Events Calendar. Just getting started with Visual Composer this week so any resources would be greatly appreciated!

    1. I got the custom query figure out for what I’m doing. It will pull events into the post grid for today & the future, from two different categories:

      post_type=tribe_events&post_status=publish&_EventStartDate=>$today&orderby=_EventStartDate&order=asc&include_category=(concerts,entertainment)

      Hopefully this helps someone because it was a nightmare to find help for & figure out.

      1. Are you defining the $today variable somewhere else? Or do you define it in the custom query box?

  17. Do you know if I could create a custom post type with this or does this just pull it up on the loop and I would have to register the custom post type in the functions page anyway? Thanks

  18. Hello, could you pls help me, i want to create a custom query for 2 post types, i tried

    post_type[]=post&post_type[]=event&posts_per_page=8&order_by=date&order=DESC

    in the visual composer it is shown right, but when i safe and look at it again its changed to

    post_type[]=post&post_type`{“}`=event&posts_per_page=8&order_by=date&order=DESC

    so it changes the [] into `{“}`, how can i solve the problem?

    Would be great if i get a useful answer.

    Thx

  19. One thing I’ve found is that if you use a custom post type, you can’t then exclude that from the custom query. For example I’m working on a site right now where I’ve had to create custom post types because we need several categories to be called interchangeably, and “cat=6&cat=7&post_status=publish” won’t work. So instead I have “post_type=something&cat=6 etc” to display what I want. HOWEVER, I can’t seem to get JUST “cat=6&post_status=publish” to work anymore – any ideas as to why that is? I’m looking at having to duplicate posts, which is a nightmare.

  20. Hi Eric,

    Raitis from Visual Composer over here! Wanted to personally thank you for showcasing Visual Composer Page Builder on your blog. We’re happy you appreciate our product. I noticed that the link under Visual Composer leads to other resource than our website. It would be great if you would change it to visualcomposer.io as it would be direct link to the product as it has a lot more information.

    Also we are interested in establishing closer relationship with you as we like what you’re writing about (what you’re doing). If you ever need any information or comments from our side, feel free to write to me. I will be glad to provide more information about plugin we both enjoy.

    My best,
    Raitis

    1. Hi Raitis,

      Ross from Design33 here – thanks for the comment! I’ve gone ahead and updated the link to Visual Composer at the start of this post.

Comments are closed.