Can't integrate Wordpress Custom Fields Types

Hello to everyone from Oranienburg (Germany),

this is my first post and I also do my first steps with Blocs 4 Plus.
Due to the new Wordpress features I’m exited to get my own Wordpress-Template running.

I’m working with a live Wordpress Installation with custom post types and custom fields created with the premium plugin. Connecting my custom post type with blocs was easy, by just creating a custom post type inside Blocs wit the same name. I figured out that I can also just create a custom post type in Blocs, export the template and I have it in Wordpress without using any CPT plugin.
I wonder how can I add/connect custom fields to it? Is it possible within Blocs or do I need to do it in wordpress with a separate custom field plugin?

But the main issue I have, is my already existing custom fields created with The custom fields are connected to a custom post type by
I tried the Blocs examples, read the Blocs wordpress documentation pdf, tried to use %WP_CustomField (custom field name here)% and also set custom field types in the Blocs Custom Data Manager. I set it as data source for a headline. The headline is inside a wordpress loop of my custom post type. The Wordpress Developer Plugin is also installed. But the Wordpress Simulation Data Popup shows “Custom Fields: 0” and I get no real data. Also the exported Theme doesn’t show the data.

Does anybody have this already done and can give me an example or a hint what I’m missing?

best regards

I’ve just moved this topic to the new WordPress category for you. Hopefully somebody more expert with WordPress can help you on this, though I’ll take to take a look myself a little later.

After some trial and error I think I get closer to the problem.
At the moment I get custom fields working, but only with the native wordpress post type and not with custom post types.

Just to make my technically basic conditions clear:
Within the Metabox plugin custom fields are independend from any post type. So you create a group of custom fields and be able to assign it to one or more post types (as well native wordpress post as custom post types)

By assigning (inside Wordpress environment) the custom fields to wordpress post, the Blocs simulation data popup found successfully the custom fields after I declared the names in Blocs “Wordpress Custom Data Manager”. And of course only if the fields are filled with data before.

I tried the same with a custom post type but failed.
1st try: reassign/moved the custom fields to custom post type (removed from wordpress post). Blocs still showed custom fields but pointed to the custom fields data of the worpress post type, not to the custom fields data of the custom post type.
2nd try: repeated exactly the same steps (that leads me to success with wordpress post) with a custom post type and completely new created custom flields assigned to it. Nothing is shown in Blocs simulation data.

What I want to achive with that (my goal):

  1. create (within wordpress with metabox and pods plugins) custom post types for multiple datasets (e.g. events, testimonals) and custom admin/setting pages for single datasets (e.g. company address, Logo) with the help of custom fields --> to serve clean structured content edit pages to my clients.

  2. Inside Blocs: connect to wordpress custom fields that are assigned either to a custom post type or to a custom admin/settings page, to be able to build a theme that can directly work as a readymade website. That means all pages would be created in blocs, some with wordpress placeholder for single datasets (e.g. Contact page with address and phone) and some with wordpress placeholder for multiple datasets placeholder like an eventlist. The client just has to handle the content within a clean and custom tailored content edit structure in the wordpress backend.

@Norm: Just to be sure not trying something that is currently not yet possible with the new Blocs wordpress feature. Can you give me a short reply whether I can reach my goal (see point 2 above) or not with the current Blocs release?

If yes, do you or anybody else have a suggestion what I can try next or see something that I didn’t considered?

1 Like

So what is the exact problem.

You cant load custom field data that is assigned to custom posts types in the in-app preview?

Yes, I can’t load custom field data assigned to custom post types a) in the in-app preview and also b) with the exported template on a live wordpress installation.

1 Like

Ok leave this with me.

Hey @Dirk,

I’ve updated the developer plugin so that it now includes the custom field data from custom pots, in the rest API.

To access your custom fields from custom posts, just make sure the Wordpress Custom Data Manager in Blocs has the custom field types assigned to the project. Version 1.0.1 of the developer plugin will pull the data in now.

I’ll push it live next week, but you can access a copy early below. Let me know if you encounter any issues. (10.3 KB)


Hey @Norm,

I also have a question pertain to custom fields. Maybe you or any Blocs guru on here can help.

Here’s the scenario:

  1. I’m using a wordpress plugin AFC to create an image custom field type (recommendations-image01)to use on a regular post.
  2. On the actual post, I added the image in via upload to media library for that custom field.
  3. Then inside Blocs, I went in and add ‘recommendations-image01’ to the Custom Data Manager.
  4. After this I tagged an image on the page with the data source ‘recommendations-image01
  5. For some reason Blocs doesn’t get that data. All I’m seeing is a broken placeholder image.

Any idea or workaround to solve this?

When you export and run the theme in Wordpress does the image show?

@Norm it doesn’t show up in the exported view. I’ve attached a photo (see #4). Checked the source and got img src =“34” and data src=“34” instead of the image url.

@Norm thanks for the plugin update, now I can load custom fields and can see texts as well in-app as in the live wordpress install. But like @rongvang I run into an issue with showing an image. Did the same steps as with a text element, exported the theme, but get only a number.

My research brought me to a post that covers the issue.

Seemingly custom post type plugins return the attachment id instead of the image url.
For me in Metabox and Pods I can’t find any setting to change the return to image url.

The above mentioned post delivers some html and php code snipped to call the image url and show the image.
@Norm: I would like to test this code snipped, but not really know how to do it. You provide a lot of WP Shortcodes for general WP things like %WP_link% including the php code behind (in your documentation).
Question: Is it possible to create an own shortcode with own specific PHP code or rather can I just take a Headline bric and insert/inject some php code like I’m able to do it with your shortcodes?
(I tried something with the html bric, but due to I’m new to Blocs I don’t really have a clue how to get it running and didn’t find something suitable in the forum).

I appreciate any hints :grinning:

Hey @Dirk just curious… we’re you able to find any workaround with pulling the image url to show via custom fields.?

Anyone else having this issue?
@Mood I saw this thread you open around using AFC. Do you have any insights that could help.?

Thanks All!

Hi @rongvang, I tried several things. Maybe my results can help you further (I guess there is also an AFC url casting function like in my approach C).

In short:
getting the image url is possible but my approach is still not working correctly (see approach C below). But I got something else working with the built-in Featured Image (see approach B below). I will see how far I come with it to serve my requirements --> inside the wordpress loop for 1 to many posts it should be okay at the moment.

I apprechiate any suggestions and corrections of my code, due to coding is not my area of expertise and I guess there could be side effects I cannot see.

In more Detail:
the following is a summary of testing several approches.

A) using custom field (type: custom image) (this is the issue we try to solve)
Pro: using Blocs nativ without “hacking”
Con: not working => custom image field returns id instead of the url

  1. create custom post type within Blocs (export theme to make it accessible in wordpress)
  2. create custom field with image type inside wordpress with AFC, Metabox, …
  3. assign custom field with image type inside wordpress to custom post type
  4. in Blocs declare your custom image field
  5. set the column Wordpress Loop to your custom post type and for your image data source choose your custom image field

B) using built-in featured image (currently the only working way for me)
Pro: using Blocs nativ without hacking
Con: no custom image types possible, just one image usable

  1. create custom post type within Blocs (it has “featured image” like normal posts, that my Metabox Plugin has not)
  2. in wordpress just use featured image for inserting your image
  3. in Blocs set the column Wordpress Loop to your custom post type and for your image data source choose “Featured Image”

C) using code bric to re-assign image source url (still trying to get it working)
Pro: (if working) using custom image types until Blocs has native support
Con: not native Blocs, semi-working-> problems with active lazyload, native wordpress function call issuses, change php files manually for working

  1. create custom post type within Blocs (export theme to make it accessible in wordpress)
  2. create custom field with image type inside wordpress with AFC, Metabox, …
  3. assign custom field with image type inside wordpress to custom post type
  4. in Blocs set the column Wordpress Loop to your custom post type and for your image data source choose “Local”
  5. insert a code bric below your image bric
  6. set the id of your image bric to be able to address it inside the code bric
    (in my example id = testimage)
  7. using the code that fits for you:

a) use Metabox helper functions
put the code inside script tags

    var image = document.getElementById('testimage');
    image.src="<?php echo rwmb_meta( 'event_image', array( 'size' => 'medium' ) )['url']?>";

b) or Wordpress helper functions
put the code inside script tags

var image = document.getElementById('testimage');
image.src="<?php echo wp_get_attachment_image_url( get_post_meta(get_the_ID(), 'event_image', true), 'medium' );?>";

remaining issues approach C):

  • works only with deactive lazy load => Workaround: instead of using script, set the code manually to the “img src” attribute inside the corresponding php file (need to be done after each export).

  • by using wordpress helper functions the last post has the same image like the first post => I guess it has something to do with the wp loop and code execution timing.

Wow. :pray: Thank you @Dirk for the detailed suggestions. Can’t wait to test out the methods you mentioned here. I did try the Approach B before using the featured image… but yeah to your point it only support one image.