We recently took on some client work where we are utilizing the Tailor Page Builder plugin. There have already been several posts by Pippin Williamson, Fred Meyer, and Ethan Ellis about Tailor that I will try and avoid emulating here, as they’ve all done a good job. Instead, I am using this post to be an exploration of my encounters working with Tailor.

Overall, I’ve been impressed with Tailor. I, like many other developers, am not normally a huge fan of page builders. For our particular build, we are turning a static HTML theme into a WordPress theme and utilizing tailor to give our clients the flexibility to build out layouts they want. The theme is very modular, which bodes well for integration with Tailor, but not without some challenges.

We also installed the Tailor Page Builder: Advanced Features plugin, which adds some IDs, animations, and videos. It also attempts a solution for allowing full width content. Our theme has repeating full width and then standard width sections. Tailor’s solution for full width did not work for us.

1. It’s a JS solution which I’d rather rely on CSS, especially since most users are mobile.

2. We never got a true full width, there was always annoying white space by the edge of the browser. There’s been a lot of back and forth about full width in the Tailor’s issues on github.

Fortunately, because our theme is so modular, I didn’t run into an overall wrapper surrounding all the content that forces margin or padding that must be overridden or hacked. I played around in inspector and discovered if I have my own custom section, that is a sibling of Tailor’s section, I got the desired effect of having a full width layout that matched the static HTML template.

I knew we were going to extend some of our own elements for our client’s needs, so I used Tailor’s extension plugin as a jumping off point to make my own custom section. I implemented my custom section only to discover Tailor will not let you extend your own section. Whatever you extend in Tailor will always be a child of a section. As I mentioned earlier, I needed a sibling section, a child section or wrapper would not do. Le sigh…

I went back to the drawing board. I really wanted two sections with two completely different class names so I didn’t have to undo the default class rules on my custom section. I ended up customizing the out of the box section that Tailor creates.

First, I unhooked the Advanced Features implementation of full width with the following code:

function zao_tailor_remove_advanced_width( $section_element ) {

    // Get the section's element's and style setting
    $style_setting = $section_element->get_setting( 'width' );

    // Remove the style control
    $section_element->remove_control( 'width' );
}
add_action( 'tailor_element_register_controls_tailor_section', 'zao_tailor_remove_advanced_width', 100 );

Then I tried to make my own control with a checkbox as to whether or not the section should be full width. I tried to create my own custom full_width parameter in the attributes array for Tailor’s section, but it only had width registered as attribute and wouldn’t take my custom attribute. Therefore, I was forced to use the width attribute that Advanced Features was playing with.

I basically regurgitated the function Advanced Features used to set up their stretched (or full width) layouts but renamed the setting for my purposes.

function zao_tailor_add_section_control( $section_element ) {

    // Add the full width setting/control
    $section_element->add_setting( 'width', array(
        'sanitize_callback' => 'tailor_sanitize_text',
    ) );

    $section_element->add_control( 'width', array(
        'label'    => __( 'Width', 'zao-tailor' ),
        'type'     => 'select',
        'section'  => 'general',
        'priority' => 1,
        'choices'  => array(
            ''           => __( 'Standard', 'zao-tailor' ),
            'full_width' => __( 'Full Width', 'zao-tailor' ),
        ),
    ) );
}
add_action( 'tailor_element_register_controls_tailor_section', 'zao_tailor_add_section_control', 110 );

This creates a dropdown control in the Tailor section where one can select if they want a standard or full width section. A standard section will have a max width of whatever number or percentage you set in Tailor’s settings in the customizer.

Next, I needed to make sure selecting “Full Width” from the dropdown would actually do something. The next best thing to having two different sections with different classes was to have my custom class name add to all sections that are set as full width. This code accomplished that.

function zao_tailor_add_section_class_name( $html_atts, $atts, $tag ) {
    if (
        'tailor_section' === $tag
        && array_key_exists( 'width', $atts )
        && 'full_width' === $atts['width']
    ) {
        $html_atts['class'][] = 'zao-tailor-full-width-section';
    }

    return $html_atts;
}
add_filter( 'tailor_shortcode_html_attributes', 'zao_tailor_add_section_class_name', 10, 7 );

Boom! We’re in business. All it required was styling .zao-tailor-full-width-section and I had two sections to work with. Since my class was added to the existing Tailor class, I had to utilize the :not() pseudo selector on occasion; there was styling I wanted to happen just on sections that weren’t full-width and vice versa.

While I had moments of Tailor resisting the marriage with our chosen theme, once I got the kinks worked out, I think it is turning out to be great solution. I’m not in love with Tailor’s approach to full-width, but I get the roadblocks they were running against, and we’re custom creating our theme to have Tailor in mind–most themes don’t do that.

What about you? Anything unexpected you learned about Tailor when you dug in?