tailor.php

<?php

/**
 * Loads the custom Tailor element(s).
 */
function hb_tailor_load_custom_element() {
    /**
     * Creates a Full Width Section.
     */

    if ( class_exists( 'Tailor_Element' ) && ! class_exists( 'Tailor_Full_Width_Section_Element' ) ) {
        /**
         * Tailor custom wrapper element class.
         */
        class Tailor_Full_Width_Section_Element extends Tailor_Element {
            /**
             * Registers element settings, sections and controls.
             *
             * @access protected
             */
            protected function register_controls() {

                $this->add_section( 'general', array(
                    'title'                 =>  __( 'General' ),
                    'priority'              =>  10,
                ) );
                $this->add_section( 'colors', array(
                    'title'                 =>  __( 'Colors' ),
                    'priority'              =>  30,
                ) );
                $this->add_section( 'attributes', array(
                    'title'                 =>  __( 'Attributes' ),
                    'priority'              =>  40,
                ) );
                $priority = 0;
                // Add as many custom settings as you like..
                $this->add_setting( 'title', array(
                    'sanitize_callback'     =>  'tailor_sanitize_text',
                    'default'               =>  'Full Width Section',
                ) );
                $this->add_control( 'title', array(
                    'label'                 =>  __( 'Full Width Section' ),
                    'type'                  =>  'text',
                    'section'               =>  'general',
                    'priority'              =>  $priority += 10,
                ) );
                $this->add_setting( 'description', array(
                    'sanitize_callback'     =>  'tailor_sanitize_text',
                ) );
                $this->add_control( 'description', array(
                    'label'                 =>  __( 'A section for heros and other elements that need to be full width' ),
                    'type'                  =>  'text',
                    'section'               =>  'general',
                    'priority'              =>  $priority += 10,
                ) );

                // See the custom content element for an example of how to use/modify standard control types
                $general_control_types = array();
                $general_control_arguments = array();
                tailor_control_presets( $this, $general_control_types, $general_control_arguments, $priority );
                // Standard color settings..
                $priority = 0;
                $color_control_types = array(
                    'color',
                    'link_color',
                    'heading_color',
                    'background_color',
                    'border_color',
                );
                $color_control_arguments = array();
                tailor_control_presets( $this, $color_control_types, $color_control_arguments, $priority );
                // Standard attribute settings..
                $priority = 0;
                $attribute_control_types = array(
                    'class',
                    'padding',
                    'margin',
                    'border_style',
                    'border_width',
                    'border_radius',
                    'shadow',
                    'background_image',
                    'background_repeat',
                    'background_position',
                    'background_size',
                );
                $attribute_control_arguments = array();
                tailor_control_presets( $this, $attribute_control_types, $attribute_control_arguments, $priority );
            }
            /**
             * Returns custom CSS rules for the element.
             *
             * @param $atts
             * @return array
             */
            public function generate_css( $atts ) {
                $css_rules = array();
                $excluded_control_types = array();
                // Just generate the default setting CSS
                $css_rules = tailor_css_presets( $css_rules, $atts, $excluded_control_types );
                return $css_rules;
            }
        }
    }
}

add_action( 'tailor_load_elements', 'hb_tailor_load_custom_element', 20 );

/**
 * Registers your custom element.
 */
function hb_tailor_register_custom_element( $element_manager ) {
    
    // Wrapper element contain one or more content elements
    $element_manager->add_element( 'full_width_section_element', array(
        'label'             =>  __( 'Full Width Section' ),
        'description'       =>  __( 'A section for heros and other elements that need to be full width' ),
        'type'              =>  'wrapper',
        //'badge'             =>  __( 'Custom', 'text-domain' ), // Optional
        'child_container'   =>  '.tailor-full-width-section__content', // Optional selector for childViewContainer
    ) );
    
}
add_action( 'tailor_register_elements', 'hb_tailor_register_custom_element' ); 

if ( ! function_exists( 'hb_tailor_shortcode_full_width_section_wrapper_element' ) ) {
    /**
     * Defines the shortcode rendering function for the custom wrapper element.
     *
     * @param array $atts
     * @param string $content
     * @param string $tag
     * @return string
     */

    function hb_tailor_shortcode_full_width_section_wrapper_element( $atts, $content = null, $tag ) {
        /**
         * Filter the default shortcode attributes.
         *
         * @param array
         */
        $default_atts = apply_filters( 'tailor_shortcode_default_atts_' . $tag, array() );
        $atts = shortcode_atts( $default_atts, $atts, $tag );
        $html_atts = array(
            'id'            =>  empty( $atts['id'] ) ? null : $atts['id'],
            'class'         =>  explode( ' ', "tailor-element tailor-full-width-section {$atts['class']}" ),
            'data'          =>  array(),
        );
        
        // Do something with the element settings
        $content = '';
        if ( ! empty( $atts['title'] ) ) {
            $content .= '<h2>' . esc_attr( $atts['title'] ) . '</h2>';
        }
        if ( ! empty( $atts['description'] ) ) {
            $content .= '<p>' . esc_attr( $atts['description'] ) . '</p>';
        }
        
        /**
         * Filter the HTML attributes for the element.
         *
         * @param array $html_attributes
         * @param array $atts
         * @param string $tag
         */
        $html_atts = apply_filters( 'tailor_shortcode_html_attributes', $html_atts, $atts, $tag );
        $html_atts['class'] = implode( ' ', (array) $html_atts['class'] );
        $html_atts = tailor_get_attributes( $html_atts );
        $outer_html = "<div {$html_atts}>%s</div>";
        $inner_html = '<div class="tailor-full-width-section__content">%s</div>';
        $html = sprintf( $outer_html, sprintf( $inner_html, $content ) );
        /**
         * Filter the HTML for the element.
         *
         * @param string $html
         * @param string $outer_html
         * @param string $inner_html
         * @param string $html_atts
         * @param array $atts
         * @param string $content
         * @param string $tag
         */
        $html = apply_filters( 'tailor_shortcode_html', $html, $outer_html, $inner_html, $html_atts, $atts, $content, $tag );
        return $html;
    }
    add_shortcode( 'full_width_section_element', 'hb_tailor_shortcode_full_width_section_wrapper_element' );
}