Integrate custom post types into Flatsome 3 page builder application using a child theme; providing: (1.) Page Builder Editor support for custom post types, and (2.) Integration with page builder post element components.

flatsome3-custom-post-type-support.php

<?php
/**
* Integrate custom post types into Flatsome 3 page builder application using a child theme.
*
* This will provide: 
*
* 1. Page Builder Editor support for custom post types
* 2. Integration with page builder post element components
**/

/**
* File Structure: |___ /flatsome-child
*                   |___ /inc
*                     |___ /builder
*                     | |___ /shortcodes
*                     |___ /shortcodes
*
* 1. /flatsome-child/functions.php
* 2. /flatsome-child/inc/builder/shortcodes.php
* 3. /flatsome-child/inc/builder/shortcodes/blog_customPostType.php
* 4. /flatsome-child/inc/shortcodes/blog_customPostType.php
**/

/**
* 1.
* Placement: functions.php
* File System: /flatsome-child
**/

// Add custom Theme Functions here 
require get_stylesheet_directory() . '/inc/shortcodes/blog_customPostType.php';

/**
 * Enable UX Builder for custom post type
 */
add_action( 'init', function () {
	add_ux_builder_post_type( 'customPostType' );
} );

// Templates
add_action( 'ux_builder_setup', function () {
  require_once get_stylesheet_directory() . '/inc/builder/shortcodes.php';
} );

/**
* 1. End: functions.php
**/

/**
* 2.
* Placement: shortcodes.php
* File System: /flatsome-child/inc/builder
**/

require_once __DIR__ . '/shortcodes/blog_customPostType.php';

/**
* 2. End: shortcodes.php
**/

/**
* 3.
* Placement: blog_customPostType.php
* File System: /flatsome-child/inc/builder/shortcodes
**/

$parent_dir = '/inc/builder/shortcodes'; // define current directory path

// Set defaults
$repeater_columns = '4';
$repeater_type = 'slider';
$repeater_post_type = 'customPostType';
$repeater_col_spacing = 'normal';

$repeater_post_cat = 'customPostType_category';
$default_text_align = 'center';

$options =  array(
'style_options' => array(
    'type' => 'group',
    'heading' => __( 'Style' ),
    'options' => array(
         'style' => array(
            'type' => 'select',
            'heading' => __( 'Style' ),
            'default' => '',
            'options' => require(  get_template_directory() . $parent_dir . '/values/box-layouts.php' )
        )
    ),
),
'layout_options' => require(  get_template_directory() . $parent_dir . '/commons/repeater-options.php' ),
'layout_options_slider' => require(  get_template_directory() . $parent_dir . '/commons/repeater-slider.php' ),
'post_options' => require(  get_template_directory() . $parent_dir . '/commons/repeater-posts.php' ),
'post_title_options' => array(
    'type' => 'group',
    'heading' => __( 'Title' ),
        'options' => array(
            'title_size' => array(
                'type' => 'select',
                'heading' => 'Title Size',
                'default' => '',
                'options' => require(  get_template_directory() . $parent_dir . '/values/sizes.php' )
            ),
            'title_style' => array(
                'type' => 'radio-buttons',
                'heading' => 'Title Style',
                'default' => '',
                'options' => array(
                    ''   => array( 'title' => 'Abc'),
                    'uppercase' => array( 'title' => 'ABC'),
                )
        ),
    )
),
'read_more_button' => array(
    'type' => 'group',
    'heading' => __( 'Read More' ),
        'options' => array(
            'readmore' => array(
                'type' => 'textfield',
                'heading' => 'Text',
                'default' => '',
            ),
            'readmore_color' => array(
            'type' => 'select',
            'heading' => 'Color',
            'conditions' => 'readmore',
            'default' => 'primary',
            'options' => array(
                '' => 'Blank',
                'primary' => 'Primary',
                'secondary' => 'Secondary',
                'alert' => 'Alert',
                'success' => 'Success',
                'white' => 'White',
            )
        ),
        'readmore_style' => array(
            'type' => 'select',
            'heading' => 'Style',
            'conditions' => 'readmore',
            'default' => 'outline',
            'options' => array(
                '' => 'Default',
                'outline' => 'Outline',
                'link' => 'Simple',
                'underline' => 'Underline',
                'shade' => 'Shade',
                'bevel' => 'Bevel',
                'gloss' => 'Gloss',
            )
        ),
        'readmore_size' => array(
            'type' => 'select',
            'conditions' => 'readmore',
            'heading' => 'Size',
            'default' => '',
            'options' => require(  get_template_directory() . $parent_dir . '/values/sizes.php' ),
        ),
    )
),


'post_meta_options' => array(
    'type' => 'group',
    'heading' => __( 'Meta' ),
    'options' => array(

    'show_date' => array(
        'type' => 'select',
        'heading' => 'Date',
        'default' => 'badge',
        'options' => array(
            'badge' => 'Badge',
            'text' => 'Text',
            'false' => 'Hidden',
        )
    ),
    'badge_style' => array(
        'type' => 'select',
        'heading' => 'Badge Style',
        'default' => '',
        'conditions' => 'show_date == "badge"',
        'options' => array(
            '' => 'Default',
            'outline' => 'Outline',
            'square' => 'Square',
            'circle' => 'Circle',
            'circle-inside' => 'Circle Inside',
        )
    ),
    'excerpt' => array(
        'type' => 'select',
        'heading' => 'Excerpt',
        'default' => 'visible',
        'options' => array(
            'visible' => 'Visible',
            'fade' => 'Fade In On Hover',
            'slide' => 'Slide In On Hover',
            'reveal' => 'Reveal On Hover',
            'false' => 'Hidden',
        )
    ),
   'excerpt_length' => array(
        'type' => 'slider',
        'heading' => 'Excerpt Length',
        'default' => 15,
        'max' => 50,
        'min' => 5,
    ),
    'show_category' => array(
        'type' => 'select',
        'heading' => 'Category',
        'default' => 'false',
        'options' => array(
            'label' => 'Label',
            'text' => 'Text',
            'false' => 'Hidden',
        )
    ),
    'comments' => array(
        'type' => 'select',
        'heading' => 'Comments',
        'default' => 'visible',
        'options' => array(
            'visible' => 'Visible',
            'false' => 'Hidden',
        )
    ),
    ),
));

$box_styles = require(  get_template_directory() . $parent_dir . '/commons/box-styles.php' );
$options = array_merge($options, $box_styles);

add_ux_builder_shortcode( 'blog_customPostType', array(
    'name' => __( 'Blog customPostType' ),
    'category' => __( 'Content' ),
    'thumbnail' => get_template_directory_uri() . '/inc/builder/shortcodes/thumbnails/blog_posts.svg', // absolute path to thumbnail
    'scripts' => array(
        'flatsome-masonry-js' => get_template_directory_uri() .'/assets/libs/packery.pkgd.min.js',
    ),

    'presets' => array(
        array(
            'name' => __( 'Normal' ),
            'content' => '[blog_customPostType style="normal" columns="3" columns__md="1" image_height="56.25%"]'
        ),
        array(
            'name' => __( 'Bounce' ),
            'content' => '[blog_customPostType style="bounce" badge_style="square" image_height="75%"]'
        ),
        array(
            'name' => __( 'Push' ),
            'content' => '[blog_customPostType style="push" columns="3" columns__md="1" badge_style="circle-inside" image_height="75%"]'
        ),
        array(
            'name' => __( 'Vertical' ),
            'content' => '[blog_customPostType style="vertical" slider_nav_style="simple" slider_nav_position="outside" columns="2" columns__md="1" depth="2" image_height="89%" image_width="43"]'
        ),
        array(
            'name' => __( 'Overlay' ),
            'content' => '[blog_customPostType style="overlay" depth="1" title_style="uppercase" show_date="text" image_height="144%" image_overlay="rgba(0, 0, 0, 0.17)" image_hover="zoom"]'
        ),
        array(
            'name' => __( 'Overlay - Grayscale' ),
            'content' => '[blog_customPostType style="overlay" depth="1" animate="fadeInLeft" title_style="uppercase" show_date="text" image_height="144%" image_overlay="rgba(0, 0, 0, 0.56)" image_hover="color" image_hover_alt="overlay-remove-50"]'
       ),
        array(
            'name' => __( 'Masonery' ),
            'content' => '[blog_customPostType type="masonry" columns="3" depth="2" image_height="180px"]'
       ),
       array(
            'name' => __( 'Grid' ),
            'content' => '[blog_customPostType style="shade" type="grid" columns="3" depth="1" posts="4" title_size="larger" title_style="uppercase" readmore="Read More" badge_style="circle-inside" image_height="180px"]'
       ),
       array(
            'name' => __( 'Full Slider' ),
            'content' => '[blog_customPostType style="shade" type="slider-full" grid="2" slider_nav_style="circle" columns="1" title_size="larger" show_date="text" excerpt="false" show_category="label" comments="false" image_size="large" image_overlay="rgba(0, 0, 0, 0.09)" image_hover="overlay-remove" text_size="large" text_hover="bounce" text_padding="10% 0px 10% 0px"]'
        ),
),

    'options' => $options
) );

/**
* 3. End: blog_customPostType.php
**/

/**
* 4.
* Placement: blog_customPostType.php
* File System: /flatsome-child/inc/shortcodes
**/

// [blog_posts]
function shortcode_latest_from_customPostType($atts, $content = null, $tag) {

	extract(shortcode_atts(array(
		"_id" => 'row-'.rand(),
		'style' => '',
		'class' => '',

		// Layout
		"columns" => '4',
		"columns__sm" => '1',
		"columns__md" => '',
		'col_spacing' => '',
		"type" => 'slider', // slider, row, masonery, grid
		'width' => '',
		'grid' => '1',
		'grid_height' => '600px',
		'grid_height__md' => '500px',
		'grid_height__sm' => '400px',
		'slider_nav_style' => 'reveal',
		'slider_nav_position' => '',
		'slider_nav_color' => '',
		'slider_bullets' => 'false',
	 	'slider_arrows' => 'true',
		'auto_slide' => 'false',
		'infinitive' => 'true',
		'depth' => '',
   		'depth_hover' => '',

		// posts
		'posts' => '12',
		'ids' => false, // Custom IDs
		'cat' => '',
		'excerpt' => 'visible',
		'excerpt_length' => 15,
		'offset' => '',

		// Read more
		'readmore' => '',
		'readmore_color' => '',
		'readmore_style' => 'outline',
		'readmore_size' => 'small',

		// div meta
		'post_icon' => 'true',
		'comments' => 'true',
		'show_date' => 'badge', // badge, text
		'badge_style' => '',
		'show_category' => 'false',

		//Title
		'title_size' => 'large',
		'title_style' => '',

		// Box styles
		'animate' => '',
		'text_pos' => 'bottom',
	  	'text_padding' => '',
	  	'text_bg' => '',
	  	'text_size' => '',
	 	'text_color' => '',
	 	'text_hover' => '',
	 	'text_align' => 'center',
	 	'image_size' => 'medium',
	 	'image_width' => '',
	 	'image_radius' => '',
	 	'image_height' => '56%',
	    'image_hover' => '',
	    'image_hover_alt' => '',
	    'image_overlay' => '',
	    'image_depth' => '',
	    'image_depth_hover' => '',

	), $atts));

	ob_start();

	$classes_box = array();
	$classes_image = array();
	$classes_text = array();

	// Fix overlay color
    if($style == 'text-overlay'){
      $image_hover = 'zoom';
    }
    $style = str_replace('text-', '', $style);

	// Fix grids
	if($type == 'grid'){
	  if(!$text_pos) $text_pos = 'center';
	  $columns = 0;
	  $current_grid = 0;
	  $grid = flatsome_get_grid($grid);
	  $grid_total = count($grid);
	  echo flatsome_get_grid_height($grid_height, $_id);
	}

	// Fix overlay
	if($style == 'overlay' && !$image_overlay) $image_overlay = 'rgba(0,0,0,.25)';

	// Set box style
	if($style) $classes_box[] = 'box-'.$style;
	if($style == 'overlay') $classes_box[] = 'dark';
	if($style == 'shade') $classes_box[] = 'dark';
	if($style == 'badge') $classes_box[] = 'hover-dark';
	if($text_pos) $classes_box[] = 'box-text-'.$text_pos;

	if($image_hover)  $classes_image[] = 'image-'.$image_hover;
	if($image_hover_alt)  $classes_image[] = 'image-'.$image_hover_alt;
	if($image_height) $classes_image[] = 'image-cover';

	// Text classes
	if($text_hover) $classes_text[] = 'show-on-hover hover-'.$text_hover;
	if($text_align) $classes_text[] = 'text-'.$text_align;
	if($text_size) $classes_text[] = 'is-'.$text_size;
	if($text_color == 'dark') $classes_text[] = 'dark';

	$css_args_img = array(
	  array( 'attribute' => 'border-radius', 'value' => $image_radius, 'unit' => '%' ),
	  array( 'attribute' => 'width', 'value' => $image_width, 'unit' => '%' ),
	);

	$css_image_height = array(
      array( 'attribute' => 'padding-top', 'value' => $image_height),
  	);

	$css_args = array(
      array( 'attribute' => 'background-color', 'value' => $text_bg ),
      array( 'attribute' => 'padding', 'value' => $text_padding ),
  	);

    // Add Animations
	if($animate) {$animate = 'data-animate="'.$animate.'"';}

	$classes_text = implode(' ', $classes_text);
	$classes_image = implode(' ', $classes_image);
	$classes_box = implode(' ', $classes_box);

	// Repeater styles
	$repeater['id'] = $_id;
	$repeater['tag'] = $tag;
	$repeater['type'] = $type;
	$repeater['class'] = $class;
	$repeater['style'] = $style;
	$repeater['slider_style'] = $slider_nav_style;
	$repeater['slider_nav_position'] = $slider_nav_position;
	$repeater['slider_nav_color'] = $slider_nav_color;
	$repeater['slider_bullets'] = $slider_bullets;
  $repeater['auto_slide'] = $auto_slide;
	$repeater['row_spacing'] = $col_spacing;
	$repeater['row_width'] = $width;
	$repeater['columns'] = $columns;
	$repeater['columns__md'] = $columns__md;
	$repeater['columns__sm'] = $columns__sm;
	$repeater['depth'] = $depth;
	$repeater['depth_hover'] = $depth_hover;

	$args = array(
		'post_status' => 'publish',
		'post_type' => 'customPostType',
		'offset' => $offset,
		'cat' => $cat,
		'posts_per_page' => $posts,
		'ignore_sticky_posts' => true
	);

	// If custom ids
	if ( !empty( $ids ) ) {
		$ids = explode( ',', $ids );
		$ids = array_map( 'trim', $ids );
		$posts = 9999;
		$offset = 0;

		$args = array(
			'post__in' => $ids,
			'numberposts' => -1,
			'orderby' => 'post__in',
			'posts_per_page' => 9999,
			'ignore_sticky_posts' => true,
		);
	}

$recentPosts = new WP_Query( $args );

// Disable slider if less than selected products pr row.
if ( $recentPosts->post_count < ($repeater['columns']+1) ) {
	if($repeater['type'] == 'slider') $repeater['type'] = 'row';
}

// Get Repater HTML
echo get_flatsome_repeater_start($repeater);

while ( $recentPosts->have_posts() ) : $recentPosts->the_post();

		$col_class = array('post-item');

			if(get_post_format() == 'video') $col_class[] = 'has-post-icon';

			if($type == 'grid'){
	        if($grid_total > $current_grid) $current_grid++;
	        $current = $current_grid-1;

	        $col_class[] = 'grid-col';
	        if($grid[$current]['height']) $col_class[] = 'grid-col-'.$grid[$current]['height'];

	        if($grid[$current]['span']) $col_class[] = 'large-'.$grid[$current]['span'];
	        if($grid[$current]['md']) $col_class[] = 'medium-'.$grid[$current]['md'];

	        // Set image size
	        if($grid[$current]['size']) $image_size = $grid[$current]['size'];

	        // Hide excerpt for small sizes
	        if($grid[$current]['size'] == 'thumbnail') $excerpt = 'false';
	    }

		?>
		<div class="col <?php echo implode(' ', $col_class); ?>" <?php echo $animate;?>>
			<div class="col-inner">
			<a href="<?php the_permalink() ?>" class="plain">
				<div class="box <?php echo $classes_box; ?> box-blog-post has-hover">
          <?php if(has_post_thumbnail()) { ?>
  					<div class="box-image" <?php echo get_shortcode_inline_css($css_args_img); ?>>
  						<div class="<?php echo $classes_image; ?>" <?php echo get_shortcode_inline_css($css_image_height); ?>>
  							<?php the_post_thumbnail($image_size); ?>
  							<?php if($image_overlay){ ?><div class="overlay" style="background-color: <?php echo $image_overlay;?>"></div><?php } ?>
  							<?php if($style == 'shade'){ ?><div class="shade"></div><?php } ?>
  						</div>
  						<?php if($post_icon && get_post_format()) { ?>
  							<div class="absolute no-click x50 y50 md-x50 md-y50 lg-x50 lg-y50">
  				            	<div class="overlay-icon">
  				                    <i class="icon-play"></i>
  				                </div>
  				            </div>
  						<?php } ?>
  					</div><!-- .box-image -->
          <?php } ?>
					<div class="box-text <?php echo $classes_text; ?>" <?php echo get_shortcode_inline_css($css_args); ?>>
					<div class="box-text-inner blog-post-inner">

					<?php do_action('flatsome_blog_post_before'); ?>

					<?php if($show_category !== 'false') { ?>
						<p class="cat-label <?php if($show_category == 'label') echo 'tag-label'; ?> is-xxsmall op-7 uppercase">
					<?php
						foreach((get_the_category()) as $cat) {
						echo $cat->cat_name . ' ';
					}
					?>
					</p>
					<?php } ?>
					<h5 class="post-title is-<?php echo $title_size; ?> <?php echo $title_style;?>"><?php the_title(); ?></h5>
					<?php if((!has_post_thumbnail() && $show_date !== 'false') || $show_date == 'text') {?><div class="post-meta is-small op-8"><?php echo get_the_date(); ?></div><?php } ?>
					<div class="is-divider"></div>
					<?php if($excerpt !== 'false') { ?>
					<p class="from_the_blog_excerpt <?php if($excerpt !== 'visible'){ echo 'show-on-hover hover-'.$excerpt; } ?>"><?php
					  $the_excerpt = get_the_excerpt();
					  $excerpt_more = apply_filters( 'excerpt_more', ' ' . '[...]' );
					  echo flatsome_string_limit_words($the_excerpt, $excerpt_length) . $excerpt_more;
					?>
					</p>
					<?php } ?>
                    <?php if ( $comments == 'true' && comments_open() && '0' != get_comments_number() ) { ?>
                        <p class="from_the_blog_comments uppercase is-xsmall">
                            <?php
                                $comments_number = get_comments_number( get_the_ID() );
                                printf( _n( '%1$s Comment', '%1$s Comments', $comments_number, 'flatsome' ),
                                    number_format_i18n( $comments_number ) )
                            ?>
                        </p>
                    <?php } ?>

					<?php if($readmore) { ?>
						<button href="<?php echo get_the_permalink(); ?>" class="button <?php echo $readmore_color; ?> is-<?php echo $readmore_style; ?> is-<?php echo $readmore_size; ?> mb-0">
							<?php echo $readmore ;?>
						</button>
					<?php } ?>

					<?php do_action('flatsome_blog_post_after'); ?>

					</div><!-- .box-text-inner -->
					</div><!-- .box-text -->
					<?php if(has_post_thumbnail() && ($show_date == 'badge' || $show_date == 'true')) {?>
					<?php if(!$badge_style) $badge_style = flatsome_option('blog_badge_style'); ?>
						<div class="badge absolute top post-date badge-<?php echo $badge_style; ?>">
							<div class="badge-inner">
								<span class="post-date-day"><?php echo get_the_time('d', get_the_ID()); ?></span><br>
								<span class="post-date-month is-xsmall"><?php echo get_the_time('M', get_the_ID()); ?></span>
							</div>
						</div>
					<?php } ?>
				</div><!-- .box -->
				</a><!-- .link -->
			</div><!-- .col-inner -->
		</div><!-- .col -->
<?php endwhile;
wp_reset_query();

// Get repeater end
echo get_flatsome_repeater_end($atts);

$content = ob_get_contents();
ob_end_clean();
return $content;
}

add_shortcode("blog_customPostType", "shortcode_latest_from_customPostType");

/**
* 4. End: blog_customPostType.php
**/

Hello

How i can fix this???

"Parse error: syntax error, unexpected '}', expecting end of file in C:\xampp\htdocs\sites\encontro\wp-content\themes\encontro-online-as-melhores-acompanhantes\inc\shortcodes\blog_customPostType.php on line 311"

I can't add shortcode to ux builder, it have problem with shortcode. when i add shortcode in a specific place , all my design break apart. and shortcode design goes at the top of the page!

Works!!! Thank You

thank you for the work, for the most part this worked perfectly for me, with the exception that in the UX builder if I pick either the custom post or custom post category to filter the results, my custom posts dissapear, if I leave both blank all my custom post types show in the results.

I have a custom post type called mempost, and a custom taxonomy called mempost-category, I edited all the files accordingly and I get the new blog mempost in ux, add it to a page and all my mempost posts show inside it visually, if I then attempt filter the searches bring back the mempost-category results correctly, or the post names also, but if I select any to filter nothing ever visually results in UX or on the saved page.

I expect I have gotten something wrong somewhere, in the wordpress admin the posts all exist, and the cateogories I made are attached to the posts all fine also.

if anyone can share where they think I might have gone wrong I would be greatful.

Should I replace 'customPostType' for my post type name?
I can see Blog CustomPostType in UX builder, but there's no option to select any of my custom post types.

https://docs.uxthemes.com/article/221-how-to-enable-ux-builder-for-custom-post-types

  /**
   * Code goes in theme functions.php
   */
  add_action( 'init', function () {
	  if ( function_exists( 'add_ux_builder_post_type' ) ) {
		  add_ux_builder_post_type( 'custom_post_type' );
	  }
  } );

Hi all
I have implemented and created all requested files and folders; I have even included my custom type post name in the function code. All is fine so far, but there are no custom type posts when I try the 'Blog custom post type "elements.
Any idea's how to overcome the issue, please.

Cheers

Currently with version 3.16.2 it is no longer possible to use this way.

Please tell me how to solve this error:
Fatal error: Uncaught Error: Call to undefined function flatsome_ux_builder_image_sizes() in D:\XAMPP\htdocs\Webroot\DesignWeb\NoviLand\wp-content\themes\flatsome\inc\builder\shortcodes\commons\box-styles.php:61 Stack trace: #0 D:\XAMPP\htdocs\Webroot\DesignWeb\NoviLand\wp-content\themes\flatsome-child\inc\builder\shortcodes\blog_customPostType.php(168): require() #1 D:\XAMPP\htdocs\Webroot\DesignWeb\NoviLand\wp-content\themes\flatsome-child\inc\builder\shortcodes.php(2): require_once('D:\XAMPP\htdocs...') #2 D:\XAMPP\htdocs\Webroot\DesignWeb\NoviLand\wp-content\themes\flatsome-child\functions.php(17): require_once('D:\XAMPP\htdocs...') #3 D:\XAMPP\htdocs\Webroot\DesignWeb\NoviLand\wp-includes\class-wp-hook.php(308): {closure}('') #4 D:\XAMPP\htdocs\Webroot\DesignWeb\NoviLand\wp-includes\class-wp-hook.php(332): WP_Hook->apply_filters('', Array) #5 D:\XAMPP\htdocs\Webroot\DesignWeb\NoviLand\wp-includes\plugin.php(517): WP_Hook->do_action(Array) #6 D:\XAMPP\htdocs\Webroot\DesignWeb\NoviLand\wp-content\themes\flatsome\in in D:\XAMPP\htdocs\Webroot\DesignWeb\NoviLand\wp-content\themes\flatsome\inc\builder\shortcodes\commons\box-styles.php on line 61

Thank @ALL.

I commented this code and it worked
/*
'image_size' => array(
'type' => 'select',
'heading' => __( 'Size' ),
'default' => '',
'options' => flatsome_ux_builder_image_sizes(
array(
'' => 'Default'
)
),
),
*/

You should add require_once get_template_directory() . '/inc/builder/helpers.php'; in function.php file and it will work.
Tested on flatsome 3.18.1