Last active
March 6, 2024 15:58
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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 | |
| **/ |
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
I commented this code and it worked
/*
'image_size' => array(
'type' => 'select',
'heading' => __( 'Size' ),
'default' => '',
'options' => flatsome_ux_builder_image_sizes(
array(
'' => 'Default'
)
),
),
*/