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
**/
@Le1Tatsuhi
Copy link

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"

@nadia-am
Copy link

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!

@greyzusht
Copy link

Works!!! Thank You

@mgdew
Copy link

mgdew commented Mar 18, 2021

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.

@marypopper
Copy link

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.

@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