Developing niolabs.com

October 2, 2017

One of the big tasks since I joined niolabs was coming out of stealth and showing the world about our product. The existing n.io site was built in WordPress using the “Divi Theme”.

We had one engineer dedicated to the development of our new WordPress theme.

They were attempting to hide certain elements, read from and inject into the DOM from others using ::before and ::after selectors and generally fighting the Divi theme. This caused some tension between the developer and management as they did not understand why certain things were taking so long and the developer thought they were setup to fail.

After observing both sides I thought it best to offer my own expertise in WordPress.

This article is what put me over the edge. On our own site, I copied over the database and with a vanilla WordPress installation this is what our homepage looked like:

[et_pb_section bb_built=”1″ admin_label=”section” fullwidth=”off” specialty=”off” transparent_background=”off” background_color=”#000000″ inner_shadow=”off” parallax=”off” parallax_method=”off” background_video_width=”960″ background_video_height=”540″ module_id=”video-overlay” background_video_mp4=”″ module_class=”why-nio-video” background_image=”” background_video_webm=””]
[et_pb_row admin_label=”row” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” padding_mobile=”off” allow_player_pause=”off” parallax=”off” parallax_method=”off” make_equal=”off” parallax_1=”off” parallax_method_1=”off” padding_top_1=”50px” padding_bottom_1=”50px” column_padding_mobile=”on”]
[et_pb_column type=”4_4″]
[et_pb_blurb title=”the digital genie is out of the bottle” url_new_window=”off” use_icon=”off” icon_color=”#f4bc26″ use_circle=”off” circle_color=”#f4bc26″ use_circle_border=”off” circle_border_color=”#f4bc26″ icon_placement=”top” animation=”top” background_layout=”dark” text_orientation=”center” max_width=”900px” use_icon_font_size=”off” use_border_color=”off” border_color=”#ffffff” border_style=”solid” header_font_size=”40″]

Today, every business has a simple choice – embrace digital transformation or put your company at risk. At nio we’ve spent the last three years building a platform that enables the rapid transformation of markets and society promised by megatrends such as the 4th industrial revolution, the Internet of things, machine learning, artificial intelligence and more…

[/et_pb_blurb]
[/et_pb_column]
[/et_pb_row]
[/et_pb_section]
[et_pb_section bb_built=”1″ admin_label=”section” fullwidth=”off” specialty=”off” transparent_background=”off” background_color=”#ffffff” inner_shadow=”off” parallax=”off” parallax_method=”off” module_class=”why-nio-text”]
[et_pb_row admin_label=”row” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” padding_mobile=”off” allow_player_pause=”off” parallax=”off” parallax_method=”off” make_equal=”off” parallax_1=”off” parallax_method_1=”off” column_padding_mobile=”on”]

[et_pb_column type=”4_4″]
[et_pb_text background_layout=”light” text_orientation=”center” use_border_color=”off” border_color=”#ffffff” border_style=”solid” text_font=”Lato||||” max_width=”700px” text_line_height=”2.5em”]
...

Yikes!

We were given the go ahead to move away from the Divi theme if we could find a replacement that still allowed our Design and Copy teams to build highly customizable pages. I knew just the solution.

I am a big fan of the Roots Ecosystem and wanted to push to make the move to using Bedrock and Sage. With Bedrock, all the WordPress plugins and core code is out of the repository and just the versions are checked into a composer.json file. This allows for you to not keep any core WordPress or plugin code into your repository. The Sage theme offers you a modern development experience using webpack and Blade templates.

The next step was to find a great customizable plugin that would allow our Design & Copy teams to build the pages they wanted with no interaction with an Engineer. I spent a day exploring plugins and found that the Page Builder by SiteOrigin plugin is extremely well engineered and allows for easy extensibility right from the theme.

We did not want to have to make unique CSS classes for each variant of colors they wanted to try, as that would involve a code update and deploy, which defeats the purpose of using WordPress. We needed a solution that supported choosing of a background gradient within the Page Builder. We were able to extend the Page Builder plugin very easily and add this customization using this snippet:

add_filter( 'siteorigin_panels_row_style_fields', function($fields) {
    $fields['background_bottom'] = array(
        'name'        =>   ( 'Background Bottom Color', 'siteorigin-panels' ),
        'type'        => 'color',
        'group'       => 'design',
        'description' =>    ( 'Bottom color of gradient', 'siteorigin-panels' ),
        'priority'    => 5,
    );

    return $fields;
}, 20 );

Another great feature of Page Builder is that it allows our Engineers to create custom Widgets based on Design’s styleguide with components we knew they would need to reuse. For example, we were able to create a custom button widget which featured only the allowed styles based on the styleguide allowing Design to change the button theme, size and placement.

Page Builder allowed our design team to make various adjustments throughout the week leading up to the launch.

xD

This freedom for the design and copy team was the key to creating a marketing site that was loved by both marketers and engineers.