Posts Grid and custom posts (with custom fields)

[fundlr]

Hi there,

I have custom posts (CPT) with custom fields.
I’d like to have them on my Home Page, as a Post Grid.
As I want to display custom fields, i created a new Grid Element (with VC I guess, hope it’s the correct way)
And created a new page (to be used as Home page…?)
Then, as I want to use this Grid Element, I have to use Post Grid, and not Kleo Post Grid (which doesn’t have an option to choose a custom VC Grid Element)

However, in the data source setting of the Post Grid, i can’t find my custom Posts.
Does this mean I have to choose “Custom Query”?
If so, I have no idea what to type in there to get my custom posts…
The link to generic WordPress Codex is not really helpful…

Am I doing right for my need?
Sorry if that seems newbish (it probably is anyway…)

Thank you !

[fundlr]

(not really related, but do we get support from VC by buying Kleo, as it’s included? The purchase code from ThemeForest won’t allow to register on their site)

[fundlr]

Never mind, after intensive search in the interwebz, I found the solution.
(not thanks to VC’s poor documentation on this topic)

Although CPT should appear in Source setting, it doesn’t for me. (can’t find why)
Then the Custom Query must be without quotes, like this for my need:
post_type=project
(where project is the name of my CPT)

[fundlr]

Works, but with default WP query parameters: 10 posts per page, no pagination…
And no parameter in VC Post Grid to change this when you build a custom query…
Damn…

[Andrei]

Hi, a new update of the theme and also of Visual Composer will be released probably next week.
Hope it will help you fix your issue.
Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[fundlr]

Hi,
Thanks for the reply.
I posted a comment on ThemeForst comments section, I guess here is more appropriate.
Here it is:

1. I want the Grid to display Custom Posts (using a custom Grid Element, because I want to display custom fields in there), but the type is not listed in the Source setting. (only have Post, Page, Attachment, Acf, Kleo_clients, Kleo-testimonials, Portfoli, Custom query, List of IDs) The workaround I found is to make a Custom query: post_type=project (where obviously “project” is the name of my custom post type) But then, we lose all settings for posts per page, and pagination. -> I read somewhere that CPT should be listed in the Source dropdown list. Any idea why it’s not? How to get the pagination back, if not possible?

2. In my Grid Element, i’d like to retrieve the custom post image (set as a custom field for this CPT). I’ve tried Custom Field and ADF element, none of them displays the “image” custom field. (neither url of the image, or the image itself)

3. I want to add a bar chart to that Grid Element (just a progress bar actually, e.g. 40/100 achieved) Not sure it’s possible to do that, or how. A workaround could be get the values from my custom fields, and do a bit of CSS on them. But I can’t find a way to build custom HTML from there, by retrieving values. A possible resulting markup, with my example: <div class=”progress-bar”><div class=”progress” style=”width:40%” /></div> (where the 40 value would be calculated from total/current*100)

-> I guess i should wait for the next update and pray for these topics to be possible?

[Andrei]

Hi,

1. This issue might be because caused because of the plugin with which you’re using to create those cpt’s, it probably registers the cpt’s after the full initialization of the Visual Composer plugin. As you have already founded, you can use the manually written query args, in which you can add pagination and other limitations as well.
You can find all the needed information to create your own query string in the following page: https://codex.wordpress.org/Class_Reference/WP_Query

2. Here is a small function which will create a shortcode which you can use to get custom field values.

3. Our theme is built on top of bootstrap, so you can use the following markup in combination with the custom field shortcode to create your progress bars: http://getbootstrap.com/components/#progress

Hope this information helped you.
Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[fundlr]

Hi, thanks for the reply

1. The plugin I use is CPT UI.
This is my query in the custom query field:
post_type=project&post_status=publish&posts_per_page=10
Navigation is not displayed. (besides, i don’t know how I would have a choice between lazy loading and classic pagination this way)
Adding paged=1 does nothing (no pagination either)
Adding nopaging (to true OR false), will lead into all posts to be displayed.

2. The code is missing.

3. I guess this has to be done in some of the php pages of the child theme?
Couldn’t find in Grid Element (grid builder) a way to add some code based on retrieved values from custom fields.

[Andrei]

1. You should try to contact the author of the CPT UI plugin and see if he has any workarounds for enabling the cpt’s to appear into Visual Composer.

2. Sorry, there is the link: http://wpsnipp.com/index.php/functions-php/get-custom-field-value-with-shortcode/

3. In Grid Element, you can add a text block where you can format it’s value with the shortcode provided above.

Ex:

COPY CODE

<div class="[field cf_key]">[field cf_another_key]</div>

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[fundlr]

Hi,
thanks for the reply.

1. Found that CPT UI was loaded after VC, so VC can’t get declared custom post types.
I fixed this by changing the CPT UI plugin priority to high.
i.e. in custom-post-type-ui/custom-post-type-ui.php changing:
add_action( 'init', 'cptui_create_custom_post_types');
to:
add_action( 'init', 'cptui_create_custom_post_types', 0 );

2. and 3. Doesn’t work…
Outputs nothing for me. With or without quotes around key/field value. (double quotes seems needed according to snippet author)
Yet the shortcode function is called because I changed the return by
return get_post_meta($post_id, $field, true) . '---';
And the display of
<span class="test-class">[field "price"]</span>
is
<span class="test-class">---</span>
So it doesn’t get the value at all.

I’m sure this value is set because it is displayed using Custom field or Advanced Custom Field in my Grid Element.

Cheers

[Andrei]

If you’re using ACF then you might try to use their own shortcodes:
http://www.advancedcustomfields.com/resources/shortcode/

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[fundlr]

Hi,

Doesn’t work either…

Too bad we can’t have support from VC team without useless additional purchasing of their plugin…

[Andrei]

I don’t think it’s from VC in this case, it’s probably from your custom field, double check that they have some values stored and that the field key is right. If you made those cf’s with ACF, then their shortcodes should work 100%.

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[fundlr]

Hi,
I’m not sure about this.
Because if I use a Custom Field or Advanced Custom Field item in my Grid Element (same key), it is displayed fine.
It renders the value as a div, with optional label.

Except the “bug” with ACF with image type which renders nothing (as this field is an Array. It should detect its an image, and create an tag, with [‘url’] array item as src property – as well as alt, title, etc. if available)

[fundlr]

Additional info:
If I output the $post_id from the returned value in the custom shortcode (from here), it outputs nothing.
Which lead me to think that within a grid element, this is not the proper way to get the current post ID…
$post_id = (NULL === $post_id) ? $post->ID : $post_id;

Example:
My content in text block in Grid Element:
test: [field "price"]

In the shortcode function in my functions.php, I Changed
return get_post_meta($post_id, $field, true);
to
return (get_post_meta($post_id, $field, true) . '<b>'. $post_id .'</b>');

and the output is:

COPY CODE

<div class="kleo_text_column wpb_content_element ">
	<div class="wpb_wrapper">
		<p><span class="test">test: <b></b></span></p>
	</div> 
</div>

[fundlr]

….and I just realized that I have to do some operations on the fields…
I have the current value, the total, so I have to calculate the current percentage to display my bar…
e.g. [current]/[total]*100

complicates the need, I guess…
Or might be done with nested shortcodes, if possible.
something like
[calculate]
[acf field=”current”][/acf]
[acf field=”total”][/acf]
[/calculate]

[Andrei]

Hi,

In this case you might need to create your own custom shortcodes to make the math that you need.
You can start from the code provided in the first example link, and also you can find a few more info about how to build shortcodes here: https://codex.wordpress.org/Shortcode_API

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[fundlr]

Yes, i’ll try this in a second phase.

The main issue now is that I can’t even get values with shortcodes.

[Andrei]

Hi mate,

I’ve given a deeper look at how vc grid item works and unfortunately they aren’t giving us the $post global inside the grid elements loop but I found another way in which you can get a custom field value in your grid element, assuming your custom field key is “test”, you can use the following code:

COPY CODE

<div class="field-value-{{ post_meta_value:test }}">My custom field value: {{ post_meta_value:test }}</div>

So any shortcode that makes use of the $post global it won’t work in grid elements, we’ll investigate for a workaround but if you really need this right now I’ll recommend you to contact the author of VC plugin.

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[fundlr]

Wow, seems like a life saving !!!

I can now get my values in a shortcode!! Hurray!!

Here is how it looks:
[create_progress current="{{ post_meta_value:current }}" total="{{ post_meta_value:total }}"]

But i’m having difficulties treating them as numbers.
If i do this:
return $atts['total'].'": '.gettype($atts['total']).' ('.strlen($atts['total']);
This is what I get:
50000: string (29)

and intval($atts[‘total’]) will return 0

So i’m not sure what kind of value it is, and why I get this 29 length for all values (whatever it is).
My custom fields types are Number.

(I guess this is a bit out of your theme scope, indeed)
I’ll post the final complete code when working, for others who’d like to achive similar.

[Andrei]

Hi,

Here is a damn hell of a hack but it works, and pretty nice:

COPY CODE

function get_post_id_as_custom_field($meta_value, $post_id, $meta_key, $single ){

    if($meta_key == 'get_post_id'){
        return $post_id;
    }

    if($meta_key == 'get_custom_progress'){
        $current = (int)get_post_meta($post_id, 'current_cf_key', true);
        $total = (int)get_post_meta($post_id, 'total', true);
        return $current / $total * 100;
    }

    return $meta_value;
    
}
add_filter('get_post_metadata', 'get_post_id_as_custom_field', 10, 4);

Hooking in this level you can also grab the current post id, and also do any other math that you might need.
You should use them in this tags: {{ post_meta_value:get_post_id }} and {{ post_meta_value:get_custom_progress }}

Hope it will help you,
Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[fundlr]

Andrei, you’re my hero!
Many thanks !

Here’s my full code, for people who need it.
It displays a bootstrap progress bar in a Grid Element (Post Grid), based on custom fields values (keys: ‘current’ and ‘total’) from custom post type.

In a grid element, add a Text block with this content:
{{ post_meta_value:get_custom_progress }}

In functions.php:

COPY CODE

function get_post_id_as_custom_field($meta_value, $post_id, $meta_key, $single ){
 
    if($meta_key == 'get_post_id'){
        return $post_id;
    }
 
    if($meta_key == 'get_custom_progress'){
        $current = (int)get_post_meta($post_id, 'current', true);
        $total = (int)get_post_meta($post_id, 'total', true);
	$prct = round($current / $total * 100);

	return '<div class="progress"><div class="progress-bar" aria-valuemin="0" aria-valuemax="' . $total . '" aria-valuenow="' . $current . '" style="width:' . $prct . '%">' . $prct . '%</div></div>';
    }
 
    return $meta_value;
    
}
add_filter('get_post_metadata', 'get_post_id_as_custom_field', 10, 4);

One can extend this, with other than ‘get_custom_progress’, getting the needed values, and returning other markup.

Thanks again, Andrei !

[Andrei]

I’m glad I could help.
Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Author]

Posts