Wrappers

Wrappers in other words layouts are files containing basic html struture of the website. Sometimes you need one colum layout on other page you need layout with sidebar sometimes you need layout without header and footer or you need completly different design and structure for some sub page used as landing page. Usually you nned to hack this feature to your theme if you need it or do annoying conditiononing like is_page and template is XY then do not use this div, or any other reason. Hete the solutions comes.

The idea came from magento where you define multiple layouts and you use a getContent function  (where first param is location) which renders blocks defined to that location. Pretty good concept huh?

So I have decided to implement it since it’s very useful, easy to use and transparent solution. One difference is the naming, I call layouts as wrappers and blocks as sections. Why? Wrappers are wrapping sections/content and from user perspective you have sections on website and not blocks. Yes wrappers should be also called layouts, the naming is discutable don’t get into it.

How to create wrapper

Creating wrapper is very simple. Requires creating a file and registering in functions.php

In this example we will create 4 column wrapper with header and footer

Creating template for wrapper

Create a file in [theme_root]/view/wrappers/ called 4column.php with content as follows

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <?php wp_head() ?>
    </head>
    <body>
        <div id="wrapper">
            <?php theme()->getContent("top"); ?>
            <div id="main">
                <main role="main" class="container">
                    <div class="row">
                        <div class="col-sm-12 col-md-3">
                            <?php theme()->getContent("col1"); ?>
                        </div>
                        <div class="col-sm-12 col-md-3">
                            <?php theme()->getContent("col2"); ?>
                        </div>
                        <div class="col-sm-12 col-md-3">
                            <?php theme()->getContent("col3"); ?>
                        </div>
                        <div class="col-sm-12 col-md-3">
                            <?php theme()->getContent("col4"); ?>
                        </div>
                    </div>
                </main>
            </div>
            <?php theme()->getContent("bottom"); ?>
        </div>
        <?php wp_footer(); ?>
    </body>
</html>

Notice the getContent() function. What it does is basically renders sections that are assigned in template file to given location using locationKey (in this case: top, col1,col2,col3,col4,bottom)

[template-foobar.php]
theme()->render("4column", [
    ["sectionKey", "locationKey"],
]);

[some wrapper]
theme()->getContent("locationKey")

In which order are assigned sections rendered? In the same order as you assign them, that means if you register for example 3 sections (section1,section2,section3) at col2 in following order

theme()->render("4column", [
    ["section2", "col2"],
    ["someOtherSection", "col1"],
    ["section1", "col2"],
    ["someFooSection", "col4"],
    ["section3", "col2"],
]);

Then at location “col2” sections will be rendered in order: section2, section1, section3. Good practice for readability is to group these sections by location like

theme()->render("4column", [
    ["someOtherSection", "col1"],
    ["section2", "col2"],
    ["section1", "col2"],
    ["section3", "col2"],
    ["someFooSection", "col4"],
]);

Registering wrapper

In functions.php find the “### Register wrappers” part you will see a hook that looks something like

### Register wrappers
add_action("on_theme_register_wrappers", function () {
    theme()->registerWrapper("2column-right", "view/wrappers/2column-right.php");
    theme()->registerWrapper("2column-left", "view/wrappers/2column-left.php");
    theme()->registerWrapper("1column", "view/wrappers/1column.php");
});

Here register your wrapper

theme()->registerWrapper("4column", "view/wrappers/4column.php");

First parameter is the wrapperKey (or name of the wrapper) and the second is the path to template file relative to [theme_root]

Using wrapper

In any page, post,… template just tell the render method that you want to use the “4column” section: theme()->render(“4column”, […assign sections here…]);

That’s all.