PHP: When using get_template_part to load php partials how to wrap each part with <div>...<-CodePudding

Q1. if get_template_part is used to load partials, Is there a way to inject

<div style="border: 1px solid blue"> around all partials </div>

so I can see the structure of my page and its partials for debugging purposes?

Q2.I would like to have a toggle that would do that for all partials loaded this way.

Q3.Eventually I would like to provide different border/backgroupd collors for partials loaded from different folders.

Q4.It would also be good to output partial names right after initial wrapper so I can see where it comes from.

Q5.Even more ideally would be to have a link to a file like:

file://C://testwordpress/...Theme/partials/Details/myinfo.php

Here is my attempt as suggested by Levi:

php partial debugging php partial debugging

Thanks

CodePudding user response：

Looking at the get_template_part() documentation there is a hook before the template is loaded but not after so the answer to your first question is: No.

You can, however, create your own function something like...

function get_and_wrap_template_part( string $slug, string $name = null, array $args = [] ) {
    $depth = substr_count( $slug, '/' )   1;

    $color = 'hsl(' . ( $depth * 10 ) . 'deg, 100%, 50%)';

    echo '<div style="border: 1px solid ' . esc_attr( $color ) . '">';
        get_template_part( $slug, $name, $args );
    echo '<div>';
}

And then replace any usage of get_template_part with get_and_wrap_template_part.

This function will change the color of the border by counting the number of /'s in your template part giving you an indication of depth. Keep in mind that this coloring method only works up to a nesting depth of 36, any deeper the color will reset.

You can obviously modify this function to include things like the full path etc.

This might answer your question but it's definitley not a good idea. For starters you're going to run into a bunch of display issues, for example if one of your template parts is an inline element, wrapping it in a div (which is a block element) you will affect the layout of your page. Another example is if your CSS or JS depends on a specific structure i.e. body > header and your header is then wrapped in a div, the body > header selector wont work as the header is no longer a direct child of body.