» » 10 WordPress Template Tags You May Not Know

10 WordPress Template Tags You May Not Know

10 WordPress Template Tags You May Not Know

If you have been developing a WordPress theme, you may be familiar with some of these Template Tags, such as the_title that shows the post title, the_author that shows the name of the post’s author, and the link of the post.

How to Create Custom WordPress Template Tags

Building a WordPress Theme is so easy with template tags. You can add the_title() to display the post…Read more

WordPress keeps evolving. Every new release often introduces a few new Template Tags. So much so that keeping up with all these Template Tags — old or new — can be quite challenging. Check out the these 20 template tags you might have overlooked.

Capital P

WordPress, as per their guideline and standard, has to be written with the capital P i.e. WordPress is a no no; the right way is to spell it as WordPress.

The capital "P” is an issue with so much importance to the extend that Matt Mullenweg (founder of WordPress) has included it in his resolution back in 2009. The capital_p_dangit() function is introduced as part of the initiative.

Since: 3.0.0

// Using it straightforwardly$footer_text = get_theme_mod( "footer_text", "" );
$footer_text = captial_p_dangit( $footer_text ); // Any WordPress text is turned with capital P.
// Or, using it in a WordPress Filter.
add_filter( "the_excerpt", function( $text ) {
return captial_p_dangit( $text );
} );

Custom Logo

In 4.5, WordPress introduced the ability to upload a logo for themes through the Customizer. This new feature requires theme support: by adding add_theme_support( 'site-logo' ), the logo will appear in the Customizer.

This feature leads to the use of a few new Template Tags that can handle the logo image output on Themes, namely: has_custom_logo()get_custom_logo(), and the_custom_logo().

Since: 4.5.0

// 1. Output includes the image logo and the link back to home.
// 2. Get the custom logo output "string".
$logo = get_custom_logo();
// 3. Conditional
if ( has_custom_logo() ) {
$logo = get_custom_logo();
// 4. Using the 'get_custom_logo' to wrap the logo with a div;
add_filter( "get_custom_logo", function( $html ) {
return ' ';
} );

Thumbnail Image URL

WordPress has a long-integrated, native utility to add a thumbnail image or featured image. The Template Tag, the_post_thumbnail(), shows the image tag along with their attributes.

But what if you want to show the image thumbnail as a background through CSS instead? Use the Template Tag, get_the_post_thumbnail_url().

Since: 4.4.0


<?php echo get_the_post_thumbnail_url(); // e.g. "https://example.com/path/to/image/thumbnail.jpg"?><div class="image-thumbnail" style="background-image; url(<?php echo get_the_post_thumbnail_url() ?>)"></div>

Generate Random Number

This Template Tag will give you a random number based on a specified range. WordPress is using this function internally to generate a random password. You can probably use it to generate a random coupon number for your WooCommerce site.

Since: 2.6.2


// Generate a number from 1 to 200$rand_number = wp_rand( 1, 200 ); // output will not be below 0 or 201 above.

Comments Pagination

Most Themes are currently using the the_comments_navigation() which will give the "Next” and "Prev” type of navigation link. If you want to show a numbered navigation (pagination), replace the tag with the_comments_pagination() instead.

Bear in mind that the Template Tag is only available in WordPress 4.4.0 upwards. Make sure to run a check before deploying it.

Since: 4.4.0


// Replace the `the_comments_navigation()`
if ( function_exists( 'the_comments_pagination' ) ) {
} else {
<ol class="comment-list">
wp_list_comments( array(
'style' => 'ol',
'short_ping' => true,
'avatar_size' => 42,
) );
<!-- .comment-list -->

Shortening URL

This Template Tag will shorten a url length. And such a very long URL won’t break into a new line within the body content. There are 2 options you can take: add overflow-wrap: break-word; in your CSS, or trim the length of the URL with the url_shorten() Template Tag.

Since: 1.2.0


$link = get_the_permalink();$url_text = url_shorten( $link ); // e.g. www.hongkiat.com/blog/css...echo '<a href="'. $link .'">'. $url_text .'</a>';

Add Inline Scripts

We have always used the wp_enqueue_script to register, load a script and its dependencies. Loading an internal script however was not quite straightforward, until this Template Tag, wp_add_inline_script is introduced.

Adding an inline script requires a known enqueued script to which it will be attached. This handler is passed as the first parameter of the script similar to the wp_localize_script() function. The second parameter should pass the content of the script. The third parameters specifiy whether the inline should be output ‘before’ or ‘after’ .

Since: 4.5.0


function enqueue_script() {   wp_enqueue_script( 'twentysixteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20160412', true );wp_add_inline_script( 'twentysixteen-script', 'window.hkdc = {}', 'before' );
add_action( 'wp_enqueue_scripts', 'enqueue_script' );// Output:// <script type='text/javascript'>window.hkdc = {}</script>// <script type='text/javascript' src='https://local.wordpress.dev/wp-content/themes/twentysixteen/js/functions.js?ver=20160412'></script>

Dropdown Language

The wp_dropdown_languages Template Tag will output an HTML option showing a list of languages in your WordPress site. You will find this template tag useful if you need to localize your website. You can use it to show your language options in the User Editor screen or in the front-end of your site to allow users to select their language preference.


10 WordPress Template Tags You May Not Know


Since: 4.0.0


wp_dropdown_languages( array(
'id' => 'lang_options',
'name' => 'lang_options',
'languages' => get_available_languages(),
'translations' => array( 'id_ID', 'ja' ), // Indonesia, and Japan
'selected' => 'en_US',
'show_available_translations' => false,

Get the Avatar Image URL

As the name suggests, this Template Tag, get_avatar_url(), will retrieve the image path of the user’s avatar. It allows you to display and mold the avatar in any way you like, instead of simply displaying it through the HTML image tag.

Since: 4.2.0


$avatar = get_avatar_url( 'admin@domain.com' );<div class="avatar-url" style="background-image: url(<?php echo $avatar; ?>)"></div>

Get Theme

This function retrieves an object containing information of the currently active Theme. This information includes the theme Slug, Name, Version, Text Domain, Author, etc.

In the following code snippet, we use it to retrieve the version and pass it as the script version.

Since: 3.4.0


$theme = wp_get_theme();define( 'THEME_SLUG', $theme->template ); //twentysixteendefine( 'THEME_NAME', $theme->get( 'Name' ) ); // Twenty Sixteendefine( 'THEME_VERSION', $theme->get( 'Version' ) ); //1.2function load_scripts() {wp_enqueue_script( 'script-ie', $templateuri .'js/ie.js', array( "jquery" ), THEME_VERSION );wp_script_add_data( 'script-ie', 'conditional', 'lt IE 9' );}add_action( 'wp_enqueue_scripts', 'load_scripts' );

Deja un comentario

Redes Sociales

Recupera Tus Mensajes O Chats De WhatsApp Borrados

Recupera Tus Mensajes O Chats De WhatsApp Borrados

  Recuperar mensajes y chats borrados de tu aplicación WhatsApp para Android es una tarea que puede resultar  necesaria alguna vez. A menudo, estamos tratando de liberar espacio físico de nuestro dispositivo Android y llegamos incluso a borrar...
Integrar El Boton de Whatsapp En Tu Web

Integrar El Boton de Whatsapp En Tu Web

  De todos es conocido que WhatsApp se ha convertido en una herramienta para compartir fotos y vídeos con tus amigos, familiares y compañeros de trabajo. También cada vez más usado, para compartir enlaces de contenidos de la web y otras aplicaciones móviles. Para ayudar a compartir los contenidos...
Crees que las redes sociales te están haciendo bien o mal

Crees que las redes sociales te están haciendo bien o mal

Las redes sociales te ofrecen una forma única de observar a la gente. Por ejemplo, el lenguaje utilizado en Twitter puede usarse para predecir si alguien está en riesgo de morir de una enfermedad cardíaca. El análisis de las actualizaciones de Facebook muestra que las mujeres son generalmente más...
Crea una imagen para las redes sociales

Crea una imagen para las redes sociales

Aprenda a combinar una foto, texto y material gráfico en Photoshop para su Facebook, Twitter y otras publicaciones en redes sociales. Utilice estas habilidades para crear sus propias imágenes de redes sociales o cualquier diseño que cree en Photoshop. Adobe Photoshop es un editor de gráficos...
Comparte instantáneamente tus fotos y diseños

Comparte instantáneamente tus fotos y diseños

Muestre rápidamente su trabajo a clientes y compañeros de trabajo, o comparta una idea al instante por correo electrónico, texto, redes sociales y más, todo dentro de Adobe Photoshop CC. Nota: Necesitará la última versión de Photoshop CC para usar esta función. Comparte tu trabajo ahoraHaz clic en...