Skip to content

Instantly share code, notes, and snippets.

@webseo-onilne

webseo-onilne/flatsome3-custom-post-type-support.php

Last active June 3, 2025 16:44
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.
Download ZIP

Revisions

  1. webseo-onilne revised this gist Jan 25, 2018. No changes.
  2. webseo-onilne revised this gist Jan 25, 2018. 1 changed file with 9 additions and 0 deletions.
    9 changes: 9 additions & 0 deletions flatsome3-custom-post-type-support.php
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,13 @@
    <?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
  3. webseo-onilne revised this gist Jan 25, 2018. No changes.
  4. webseo-onilne revised this gist Jan 25, 2018. No changes.
  5. webseo-onilne created this gist Jan 25, 2018.
    596 changes: 596 additions & 0 deletions flatsome3-custom-post-type-support.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,596 @@
    <?php
    /**
    * 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
    **/