Template Tags

Default Template Tags

wd_s 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 WordPress functionality. Here is a list of what we include and how to use it in your theme.

Post Date

print_post_date

Prints HTML with the post date for the current post.

Usage: <?php print_post_date(); ?>

Output:

<span class="posted-on">
  Posted on
  <a href="http://wdunderscores.test/hello-world/" rel="bookmark">
    <time class="entry-date published" datetime="2021-10-12T16:27:10+00:00">
      October 12, 2021
    </time>
  </a>
</span>

Location: /inc/template-tags/print-post-date.php

Post Author

print_post_author

Prints HTML with the post author for the current post.

Usage: <?php print_post_author(); ?>

Output:

<span class="post-author">
  by
  <span class="author vcard">
    <a class="url fn n" href="http://wdunderscores.test/author/admin/">admin</a>
  </span>
</span>

Location: /inc/template-tags/print-post-author.php

Entry Footer

print_entry_footer

Prints HTML with meta information for the categories, tags and comments.

Usage: <?php print_entry_footer(); ?>

Output:

<span class="cat-links">
  Posted in
  <a href="https://wdunderscores.test/category/sticky/" rel="category tag">
    Sticky
  </a>
</span>

<span class="comments-link">
  <a href="https://wdunderscores.test/2013/01/07/sticky/#respond">
    Leave a comment
  </a>
</span>

<span class="edit-link">
  <a
    class="post-edit-link"
    href="https://wdunderscores.test/wp-admin/post.php?post=1241&amp;action=edit"
  >
    Edit <span class="screen-reader-text">"Sticky"</span>
  </a>
</span>

Location: /inc/template-tags/print-entry-footer.php

Display SVG Image

print_svg

Displays SVG markup for a supplied set of arguments.

SVG files in the /src/ 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:

<?xml version="1.0" encoding="utf-8"?>

<!-- Generated by IcoMoon.io -->

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<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', '_s' ),

'desc' => __( 'A rounded square version of the Facebook logo', '_s' ),

'color' => '#ffff00',

'stroke-width' => '0.5',

'height' => '48',

'width' => '48',

]

);

Output:

<svg
  height="48"
  width="48"
  color="#ffff00"
  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>

Location: /inc/template-tags/print-svg.php

Copyright Text (via Customizer)

print-copyright-text

Echo the copyright text saved in the customizer.

Usage: <?php print-copyright-text(); ?>

Output: <span class="copyright-text">This is some <strong>very important</strong> copyright text and it contains <a href="http://www.webdevstudios.com" title="a link to another site">a link!</a></span>

Location: /inc/template-tags/print-copyright-text.php

Display Social Links (via Customizer)

print_social_network_links

Display the social links saved in the customizer.

Usage: <?php print_social_network_links(); ?>

Location: /inc/template-tags/print-social-network-links.php

Output:

<ul class="social-icons">
  <li class="social-icon facebook">
    <a href="https://www.facebook.com/webdevstudios">
      <svg class="icon icon-facebook-square" aria-hidden="true">
        <title>Link to Facebook</title>
        <use
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xlink:href="#icon-facebook-square"
        ></use>
      </svg>

      <span class="screen-reader-text">Link to Facebook</span>
    </a>
  </li>
  <!-- .social-icon -->

  <li class="social-icon instagram">
    <a href="http://www.instagram.com/name-here">
      <svg class="icon icon-instagram-square" aria-hidden="true">
        <title>Link to Instagram</title>
        <use
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xlink:href="#icon-instagram-square"
        ></use>
      </svg>

      <span class="screen-reader-text">Link to Instagram</span>
    </a>
  </li>
  <!-- .social-icon -->

  <li class="social-icon linkedin">
    <a href="https://www.linkedin.com/company/webdevstudios-llc-">
      <svg class="icon icon-linkedin-square" aria-hidden="true">
        <title>Link to Linkedin</title>
        <use
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xlink:href="#icon-linkedin-square"
        ></use>
      </svg>

      <span class="screen-reader-text">Link to Linkedin</span>
    </a>
  </li>
  <!-- .social-icon -->

  <li class="social-icon twitter">
    <a href="https://twitter.com/webdevstudios">
      <svg class="icon icon-twitter-square" aria-hidden="true">
        <title>Link to Twitter</title>
        <use
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xlink:href="#icon-twitter-square"
        ></use>
      </svg>

      <span class="screen-reader-text">Link to Twitter</span>
    </a>
  </li>
  <!-- .social-icon -->
</ul>

Location: /inc/template-tags/print-social-network-links.php

Display Numeric Pagination

print_numeric_pagination

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 ); ?>

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://wdunderscores.test/blog/page/2/">2</a>

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

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

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

Location: /inc/template-tags/print-numeric-pagination.php

Mobile Menu

print_mobile_menu

This displays the mobile off-canvas menu. Called in the footer.php partial. It does not accept any external arguments and has a set of default menu arguments.

Defaults:

$mobile_args = array(
  'theme_location'  => $menu_location,
  'container'       => 'div',
  'container_class' => 'off-canvas-content',
  'container_id'    => '',
  'menu_id'         => 'site-mobile-menu',
  'menu_class'      => 'mobile-menu',
  'fallback_cb'     => false,
  'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
);

The menu will not display unless a primary or mobile menu is set in the admin. If the primary is set, but not the mobile, it will display the primary navigation menu items. If the mobile menu is assigned, that will be displayed.

Usage: <?php print_mobile_menu(); ?>

Location: /inc/template-tags/print-mobile-menu.php

Output:

<div class="off-canvas-screen"></div>

<nav
  class="off-canvas-container"
  aria-label="Mobile Menu"
  aria-hidden="true"
  tabindex="-1"
>
  <div class="off-canvas-content">
    <ul id="site-mobile-menu" class="mobile-menu">
      <li
        class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1"
      >
        <a href="#">Menu Item</a>
      </li>
    </ul>
  </div>
</nav>

Styles are located in _mobile-menus.scss.

Location: /inc/template-tags/print-mobile-menu.php

Print Comments

print_comments

Displays the comments section if the count is more than 0

Usage: <?php print_comments(); ?>

Output: Displays the contents of the comments.php template

Location: /inc/template-tags/print-comments.php