-
Notifications
You must be signed in to change notification settings - Fork 138
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.
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
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
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&action=edit"
>
Edit <span class="screen-reader-text">"Sticky"</span>
</a>
</span>
Location: /inc/template-tags/print-entry-footer.php
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
orfill
when you try to use it. Just setting thecolor
value will set the right value, whether it'sstroke
orfill
. -
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
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
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
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
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
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