3

I need to inject some underscore templates into admin screen without modifying the core. The templates look like this:

<script type="text/template" id="template-123">
    <div class="section intro">
        {{{ data.section.intro }}}
    </div>

    <div class="section content">
        {{{ data.section.content }}}
    </div>
    ...
</script>

All templates depend on certain script handle, so I thought about using wp_add_inline_script() but it doesn't allow me to specify type and id attribute.

So, is there a hacky solution to add that attributes while adding inline scripts? Or There's a better way?

I really appreciate you help!

3

Here's one demo suggestion:

add_action( 'admin_enqueue_scripts', function()
{
   wp_enqueue_script(    'my-script', '/my-script.js', ['underscore', 'backbone'], '1.0' );
   wp_add_inline_script( 'my-script', 'alert("hello world");' );

   // Add our template
   if( function_exists( 'wpse_add_inline_tmpl' ) )
       wpse_add_inline_tmpl( 
           $handle = 'my-script', 
           $id     = 'my-tmpl', 
           $tmpl   = '<div class="section intro">{{{ data.section.intro }}}</div>' 
       );

} );

where we define our custom wpse_add_inline_tmpl() function as:

function wpse_add_inline_tmpl( $handle, $id, $tmpl )
{
    // Collect input data
    static $data = [];
    $data[$handle][$id] = $tmpl;

    // Append template for relevant script handle
    add_filter( 
        'script_loader_tag', 
        function( $tag, $hndl, $src ) use ( &$data, $handle, $id )
        {   
            // Nothing to do if no match
            if( ! isset( $data[$hndl][$id] ) )
                return $tag;

            // Script tag replacement aka wp_add_inline_script()
            if ( false !== stripos( $data[$hndl][$id], '</script>' ) )
                $data[$hndl][$id] = trim( preg_replace( 
                    '#<script[^>]*>(.*)</script>#is', 
                    '$1', 
                     $data[$hndl][$id] 
                ) );

            // Append template
            $tag .= sprintf(
                "<script type='text/template' id='%s'>\n%s\n</script>" . PHP_EOL,
                esc_attr( $id ),
                $data[$hndl][$id]
            );

            return $tag;
        }, 
   10, 3 );
}

Here we use the script_loader_tag filter to inject the template code and use both the handle and id to reference it. We also use the script tag replacement from the core wp_add_inline_script() function.

Hope you can test this further and modify to your needs. Writing this as a class might be a better approach ;-)

  • Thank you! You have saved me a lot of time. It works great! – MinhTri Jul 19 '16 at 13:56
  • ok great, you're welcome @Dan9 – birgire Jul 19 '16 at 16:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.