Skip to content

Instantly share code, notes, and snippets.

@webseo-onilne
Last active March 6, 2024 15:58
Show Gist options
  • Save webseo-onilne/6aaee7a04b33bf3a2f0a4903fa721c2f to your computer and use it in GitHub Desktop.
Save webseo-onilne/6aaee7a04b33bf3a2f0a4903fa721c2f to your computer and use it in GitHub Desktop.
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.
<?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
**/
@andyg2
Copy link

andyg2 commented Nov 30, 2021

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' );
	  }
  } );

@joehammeruk
Copy link

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

@DuyNKs
Copy link

DuyNKs commented Dec 7, 2022

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

@tuanabba148
Copy link

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.

@tuanabba148
Copy link

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

@gambe
Copy link

gambe commented Nov 16, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment