Move the template icon to the topbar’s right wrapper

Since the v1.9.9 release of Bricks, the Template icon has now been moved to the left side of the builder’s topbar, which created confusion for some users.

This article will show you how to restore the Template icon position to the right.

The code

If you’d like to move the Template icon to the right side of the topbar, paste the following code inside the functions.php file of your child theme:

add_filter('wp_head', function() {
	if(!function_exists('bricks_is_builder') || !bricks_is_builder() || !function_exists('bricks_is_builder_iframe') || bricks_is_builder_iframe()) return;
	
    $script = <<<EOD
    <script>
    function moveTemplatesToRightWrapper() {
        const templatesLi = document.querySelector('#bricks-toolbar .templates');
        const rightWrapper = document.querySelector('#bricks-toolbar .group-wrapper.right');

        if (templatesLi && rightWrapper) {
            rightWrapper.insertBefore(templatesLi, rightWrapper.firstChild);
        } else {
            console.error('Could not find the Templates <li> element or the right wrapper <ul> element.');
        }
    }
    document.addEventListener('DOMContentLoaded', moveTemplatesToRightWrapper);
    </script>
    EOD;
    echo $script;
}, 10, 1);

This code will add the JavaScript code to the head of your document only when the builder mode is activated.