Uncode: Extend Post Module
2 min read

Uncode: Extend Post Module

Uncode: Extend Post Module
Photo by AltumCode / Unsplash

The Post module is without a doubt one of the most used and powerful module in Uncode, yet there are some limitations.

For example you want to create something like this:

Post Module 4/12

We are in need of a second image, where as you might know, there is only one Media element that you can add in a block.

The structure that is possible would be:

  • Media
  • Title
  • Text (Excerpt)
  • Button (or icon)

Getting started

First I installed Pods, where I extended the already custom post type "Projects" with a "File / Image / Video" field. I made sure to name it Banner, so that maybe in future projects i wouldn't need to start over.

Pods settings

I need to register the Field inside Uncode, so that when i create my post module, i can "fetch" the data.

Go to Theme Options -> Single -> Project -> Custom Fields

Source

And add the Pods created field id (in my case banner)

Theme Options

This way, there will be a Banner element inside the Post module, like here:

This would output the selected image I select in the field, but unfortunately it will output "Array".

We receive an array, something that Uncode can't output correctly.

The Snippet

To edit the way Post Module outputs the "banner" field you need to locate.

wp-content/themes/uncode/partials/elements.php

Where on line 1867:

default:
if ($key !== 'media') {
	$get_cf_value = get_post_meta($block_data['id'], $key, true);
		if (isset($get_cf_value) && $get_cf_value !== '') {
			$inner_entry.= '<div class="t-entry-cf-'.$key;
		if ( isset( $block_data['table_heading'] ) ) {
			$inner_entry .= ' ' . trim(implode(' ', $meta_class));
		}
	  $inner_entry.= '">' . $get_cf_value . '</div>';
	}
}
Before

$inner_entry.= '">' . $get_cf_value . ''; is what outputs the array.

if (isset($get_cf_value) && $get_cf_value !== '') {
    $inner_entry .= '<div class="t-entry-cf-' . $key;

    //Table layout
    if (isset($block_data['table_heading'])) {
        $inner_entry .= ' ' . trim(implode(' ', $meta_class));

    } elseif ($key == 'banner') {  //Allow ACF
        $inner_entry .= '"><img src="' . pods_field_display('banner') . '"/></div>';
    }

    if ($key != 'banner') {
        $inner_entry .= '">' . $get_cf_value . '</div>';
    }
}
After

Here I wrap the banner (what gives back the image url) inside a img element.

$inner_entry.= '"><img src="' . pods_field_display( 'banner' ) . '"/ ';

Future updates

Unfortunately there is no way to create this inside the Uncode child theme, so beware when updating!

Have a better solutions? Please let me know!

Version

As of writing the latest version is 2.5.0.5