Skip to main content

Template Tags

The starter theme offers a handful of template tags for your use right out of the box in order to take the legwork out of creating template tags to handle simple functionality. Here is a list of what we include and how to use it in your theme.

pp()​

This will pretty print any variable passed to it. This is useful for debugging and development.

Usage: <?php pp( $var ); ?>

Output:

<pre><code>whatever the $var value is</code></pre>

Output the html tag attributes in a tag.

Usage: <section><?php print_attributes( $attributes ); ?></section>

Output:

<section id="foo" class="bar"></section>

Prints an SVG inline. Good to use if the svg is not apart of the generated SVG sprite.

Usage: <?php print_inline_svg( $svg_path ); ?>

Output: <svg>...</svg>

Display numeric pagination on archive pages rather than the Previous/Next Posts links. This utilizes the core paginate_links function

The template tag accepts an array of arguments to customize the markup and functionality of the links based on the Codex link above.

Usage: <?php print_numeric_pagination( $array, $query ); ?>

Output:

<nav class="container pagination-container" aria-label="numeric pagination">
  <span aria-current="page" class="page-numbers current">1</span>

  <a class="page-numbers" href="https://devwebsite.local/blog/page/2/">2</a>

  <a class="page-numbers" href="https://devwebsite.local/blog/page/3/">3</a>

  <a class="page-numbers" href="https://devwebsite.local/blog/page/4/">4</a>

  <a class="next page-numbers" href="https://devwebsite.local/blog/page/2/"
    >»</a
  >
</nav>

Displays SVG markup for a supplied set of arguments.

SVG files in the /src/images/icons/ directory should have their fill and stroke values set to currentColor. This allows you the following bonuses:

  • You don't have to worry about whether an SVG is using stroke or fill when you try to use it. Just setting the color value will set the right value, whether it's stroke or fill.

  • If you wrap the SVG in a parent item (like an <h1>) and that parent item has a color value set via CSS, the SVG will automatically adopt the parent color.

Below is an example of what a src SVG should look like:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="28" viewBox="0 0 24 28">
    <path fill="currentColor" d="M19.5 2q1.859 0 3.18 1.32t1.32 3.18v15q0 1.859-1.32 3.18t-3.18 1.32h-2.938v-9.297h3.109l0.469-3.625h-3.578v-2.312q0-0.875 0.367-1.313t1.43-0.438l1.906-0.016v-3.234q-0.984-0.141-2.781-0.141-2.125 0-3.398 1.25t-1.273 3.531v2.672h-3.125v3.625h3.125v9.297h-8.313q-1.859 0-3.18-1.32t-1.32-3.18v-15q0-1.859 1.32-3.18t3.18-1.32h15z"></path>
</svg>

Usage:

print_svg( [
  'icon' => 'facebook-square',
  'title' => __( 'Facebook square icon', 'jaws' ),
  'desc' => __( 'A rounded square version of the Facebook logo', 'jaws' ),
  'color' => '#3b5998',
  'stroke-width' => '0.5',
  'height' => '16',
  'width' => '16',
]
);

Output:

<svg
  height="16"
  width="16"
  color="#3b5998"
  stroke-width="0.5"
  class="icon facebook-square"
  aria-labelledby="title-facebook-square-icon-67297 desc-facebook-square-icon-67297"
  role="img"
>
  <title id="title-facebook-square-icon-67297">Facebook square icon</title>

  <desc id="desc-facebook-square-icon-67297">
    A rounded square version of the Facebook logo
  </desc>

  <use xlink:href="#facebook-square"></use>
</svg>

write_log()​

Writes a variable to the debug.log file. This is useful for debugging and development.

In order for this to work, 'WP_DEBUG_LOG' needs to be enabled in the wp-config.php.

// Enable Debug logging to the /wp-content/debug.log file
define( 'WP_DEBUG_LOG', true );