Forum Replies Created
-
Replies
-
The line you provided works, by disabling the cart icon in the header, great!
The floating cart HTML is still outputted in the source.
<div id="floating-shopping-cart" class="tb-cart-popup modal fade"><div class="modal-dialog modal-sm">
I was using a low priority.
Result: disabled the top header buttons, #floating-shopping-cart still outputs in the source.
Great article!
I have been able to create a new Layout Builder Element (Team Member Slider) which is saving all the data. I cant quite figure how to output on the front end. A
print_routputs theelement_27840564d1e4f60eb4.Breakdown of entire code.
Add Layout Builder Element
/** * * Adds Team Member Slider element to the layout builder */ $team_member_slider_options = array( array( 'id' => 'team_member_slide', 'name' => __( 'Team Member', 'theme-blvd-layout-builder' ), 'desc' => null, 'type' => 'team_member_slide' ), array( 'id' => 'slide', 'name' => __( 'Team Members per slide', 'theme-blvd-layout-builder' ), 'desc' => __( 'Select the amount of Team Members to display for each slide of the slider.', 'theme-blvd-layout-builder' ), 'type' => 'select', 'std' => '4', 'options' => array( '2' => __( '2 logos per slide', 'theme-blvd-layout-builder' ), '3' => __( '3 logos per slide', 'theme-blvd-layout-builder' ), '4' => __( '4 logos per slide', 'theme-blvd-layout-builder' ), '5' => __( '5 logos per slide', 'theme-blvd-layout-builder' ) ) ), array( 'id' => 'timeout', 'name' => __( 'Speed', 'theme-blvd-layout-builder' ), 'desc' => __( 'Enter the number of seconds you\'d like in between transitions. You may use 0 to disable the slider from auto advancing.', 'theme-blvd-layout-builder' ), 'type' => 'text', 'std' => '0' ), array( 'id' => 'nav', 'name' => null, 'desc' => __( 'Display slider navigation.', 'theme-blvd-layout-builder' ), 'std' => '1', 'type' => 'checkbox' ) ); themeblvd_add_builder_element( 'team_members_slider', 'Team Member Slider', 'none', $team_member_slider_options, 'mizzinc_team_members_slider' );Add Team Member Option Type
if ( class_exists('Theme_Blvd_Sortable_Option') ) { class Mizzinc_Team_Member_Option extends Theme_Blvd_Sortable_Option { /** * Constructor * * @since 2.5.0 */ public function __construct() { // Set type $this->type = 'team_member_slide'; // Run parent parent::__construct(); } /** * Get options * * @since 2.5.0 */ public function get_options() { $options = array( array( 'id' => 'image', 'name' => __( 'Image', 'theme-blvd-layout-builder'), 'desc' => __( 'Select an image for this person.', 'theme-blvd-layout-builder'), 'type' => 'upload', 'advanced' => true ), array( 'id' => 'name', 'name' => __( 'Name', 'theme-blvd-layout-builder'), 'desc' => __( 'Enter the name of this person.', 'theme-blvd-layout-builder'), 'type' => 'text' ), array( 'id' => 'tagline', 'name' => __( 'Tagline', 'theme-blvd-layout-builder'), 'desc' => __( 'Enter a brief tagline for this person.<br>Ex: Founder and CEO', 'theme-blvd-layout-builder'), 'type' => 'text' ), array( 'id' => 'link', 'name' => __( 'LinkedIn URL', 'theme-blvd-layout-builder'), 'desc' => __( 'Enter the Members URL.', 'theme-blvd-layout-builder'), 'type' => 'text' ) ); return $options; } /** * Get labels * * @since 2.5.0 */ public function get_labels() { $labels = array( 'add' => __('Add Team Member','themeblvd'), 'delete' => __('Remove Team Member','themeblvd'), 'delete_all' => __('Remove All Team Members','themeblvd'), 'delete_all_confirm' => __('Are you sure you want to remove all Team Members?','themeblvd'), 'modal_title' => __('Select Team Member','themeblvd'), 'modal_button' => __('Add Team Member','themeblvd') ); return $labels; } } }Instantiate, display and sanitize option
/** * Instantiate sortable option objects, so everything * is hooked into place, and ready to display. */ function mizzinc_setup_sortable_options() { if ( class_exists( 'Mizzinc_Team_Member_Option' ) ) { $GLOBALS["mizzinc_team_member_option"] = new Mizzinc_Team_Member_Option(); } } add_action( 'after_setup_theme', 'mizzinc_setup_sortable_options' ); /** * Display option. */ function mizzinc_option_type( $output, $option, $option_name, $val ) { global $mizzinc_team_member_option; if ( $option['type'] == 'team_member_slide' ) { $output .= $mizzinc_team_member_option->get_display( $option['id'], $option_name, $val ); $output = str_replace('section-team_member_slide', 'section-team_member_slide section-sortable', $output); } return $output; } add_filter( 'themeblvd_option_type', 'mizzinc_option_type', 10, 4 ); /** * Sanitize option */ function mizzinc_sanitize_team_member_slide( $input ) { $output = array(); if ( $input && is_array($input) ) { foreach ( $input as $item_id => $item ) { $output[$item_id]['image'] = apply_filters( 'themeblvd_sanitize_upload', $item['image'] ); $output[$item_id]['name'] = apply_filters( 'themeblvd_sanitize_text', $item['name'] ); $output[$item_id]['tagline'] = apply_filters( 'themeblvd_sanitize_text', $item['tagline'] ); $output[$item_id]['link'] = apply_filters( 'themeblvd_sanitize_text', $item['link'] ); } } return $output; } add_filter( 'themeblvd_sanitize_team_member_slide', 'mizzinc_sanitize_team_member_slide' );Get Team Member Slider for Frontend
function mizzinc_team_members_slider( $args ) { $defaults = array( 'team_member_slide' => array(), // Team Member 'slide' => '4', // If slider, number of logos per slide 'timeout' => '3', // If slider, seconds in between auto rotation 'nav' => '1' // If slider, whether to display nav ); $args = wp_parse_args( $args, $defaults ); //**Build the HTML below**// //Output the HTML// echo $output; }Hey Jason,
What about using the Partner Logos element as a base to work off? The only tricky part is creating a ‘Team Member’ sortable option.
We can build the class in the child theme which extends
Theme_Blvd_Slider_Optionand its just hooking into Theme Blvd Advanced Options.function my_shortcodes_groups( $groups ) { $groups['icon_box_product']['id'] = 'product_box'; $groups['icon_box_product']['name'] = __( 'Icon Box Product', 'theme-blvd-shortcodes' ); $groups['icon_box_product']['sub'] = array(); return $groups; } add_filter( 'themeblvd_shortcodes_groups', 'my_shortcodes_groups' );function my_shortcodes_options( $options ) { // Image $options['product_box']['image']['id'] = 'image'; $options['product_box']['image']['name'] = __( 'Image URL', 'theme-blvd-shortcodes'); $options['product_box']['image']['desc'] = __( 'Copy/Paste the image/icon to be used. Ex: http://yoursite.com/image.jpg', 'theme-blvd-shortcodes'); $options['product_box']['image']['type'] = 'text'; // Size $options['product_box']['size']['id'] = 'size'; $options['product_box']['size']['name'] = __( 'Icon Size', 'theme-blvd-shortcodes'); $options['product_box']['size']['desc'] = __( 'Enter a size for the icon - 16px to 128px', 'theme-blvd-shortcodes'); $options['product_box']['size']['type'] = 'text'; // Location $options['product_box']['location']['id'] = 'location'; $options['product_box']['location']['name'] = __( 'Icon Placement', 'theme-blvd-layout-builder' ); $options['product_box']['location']['desc'] = __( 'Select how the icon should be displayed within the block.', 'theme-blvd-shortcodes'); $options['product_box']['location']['std'] = 'above'; $options['product_box']['location']['type'] = 'select'; $options['product_box']['location']['options']['above'] = __('Icon is above title and content.', 'theme-blvd-shortcodes'); $options['product_box']['location']['options']['side'] = __('Icon is to the left of title and content.', 'theme-blvd-shortcodes'); $options['product_box']['location']['options']['side-alt'] = __('Icon is to the right of title and content.', 'theme-blvd-shortcodes'); // Title $options['product_box']['title']['id'] = 'title'; $options['product_box']['title']['name'] = __( 'Title', 'theme-blvd-shortcodes'); $options['product_box']['title']['desc'] = __( 'Add the title', 'theme-blvd-shortcodes'); $options['product_box']['title']['type'] = 'text'; // Text $options['product_box']['text']['id'] = 'sc_content'; $options['product_box']['text']['name'] = __( 'Content (optional)', 'theme-blvd-shortcodes'); $options['product_box']['text']['desc'] = __( 'Add content that will appear when mouse hovers over the product.', 'theme-blvd-shortcodes'); $options['product_box']['text']['std'] = 'Content here...'; $options['product_box']['text']['type'] = 'textarea'; // Link URL $options['product_box']['link_url']['id'] = 'link_url'; $options['product_box']['link_url']['name'] = __( 'Link URL', 'theme-blvd-shortcodes'); $options['product_box']['link_url']['desc'] = __( 'Enter the full URL where you want this link to go to.', 'theme-blvd-shortcodes'); $options['product_box']['link_url']['type'] = 'text'; // Background Colour $options['product_box']['bg_color']['id'] = 'bg_color'; $options['product_box']['bg_color']['name'] = __( 'Product', 'theme-blvd-shortcodes'); $options['product_box']['bg_color']['desc'] = __( 'Please select the product which will automatically apply the background gradient colour', 'theme-blvd-shortcodes'); $options['product_box']['location']['std'] = 'hydrocolloids'; $options['product_box']['bg_color']['type'] = 'select'; $options['product_box']['bg_color']['options']['hydrocolloids'] = __('Hydrocolloids', 'theme-blvd-shortcodes'); $options['product_box']['bg_color']['options']['colours'] = __('Colours', 'theme-blvd-shortcodes'); $options['product_box']['bg_color']['options']['emulsifiers'] = __('Emulsifiers', 'theme-blvd-shortcodes'); $options['product_box']['bg_color']['options']['flavourings'] = __('Flavourings', 'theme-blvd-shortcodes'); $options['product_box']['bg_color']['options']['fortificants'] = __('Fortificants', 'theme-blvd-shortcodes'); $options['product_box']['bg_color']['options']['andmore'] = __('And more....', 'theme-blvd-shortcodes'); $options['product_box']['bg_color']['options']['andmore'] = __('None', 'theme-blvd-shortcodes'); return $options; } add_filter( 'themeblvd_shortcodes_options', 'my_shortcodes_options' );That was super helpful! I added the icon box with a few adjustments.
The only bug: when opening the generator the icon box (new item) is set to active and looking at the source code it appears the Button is as well. Any thoughts?
Button Icon Box Product
– Michael
Hey Jason,
Just noticed the apostrophe should be inside the closing bracket.
From:
return esc_url( get_stylesheet_directory_uri() . '/assets/images/sticky-logo.png )';
To:
return esc_url( get_stylesheet_directory_uri() . '/assets/images/sticky-logo.png' );
🙂
I have implemented these suggestions into the following example and it hasn’t worked for me at least.
http://clients.mizzinc.co.nz/crackspecialists.co.nz/The only solution I found that worked is to close the off-canvas menu when a menu-item is clicked.
Hey Jason, slept on this.
So with a fresh mind. I used Post Showcase Element instead of Post Grid Element and that worked.
As I wanted to embed video, I simply moved content-showcase.php to my child theme and modified the file to include themeblvd_content_video(true);
Anyway the following class (.row) is targeted using the Post Showcase Element.
.post_showcase.no-gutters .showcase-wrap>.row {
margin: 0;
}So when using Post Grid Element with the element display ‘popout’ you simply need to add the following class to remove the horizontal scroll.
.popout .post_grid .grid-wrap>.row {
margin: 0;
}
