Dynamic Templating Intro & Shortcodes

From version 3.2 of the plugin, dynamic templating can be enabled via a backend option setting called "Handle WordPress Templates". Watch this video to grab the basics:

Here is a comprehensive list of the shortcodes you can use in dynamic templates.

Shortcodes for Single & Archive templates:

[lc_the_title]

Returns the post title.

Attributes:

link (defaults to 0): Set to 1 to have the article title wrapped with a link to the single post.
link_class The CSS class to apply to each link

Examples:

Show only the title as a link to the post, with a bootstrap link class.

[lc_the_title link=1 link_class="link-secondary"]

Show only the title

[lc_the_title link=0]

Show the title as a link without the underline decoration

[lc_the_title link=1 link_class="text-decoration-none"]

Shortcode overview:

Here is our own code to do this shortcode - so you understand how easy it is to make your own ones, in case you need some custom feature.

add_shortcode( 'lc_the_title', function( $atts ) {	
	$attributes = shortcode_atts( array(
		'link' => 0,
		'link_class' => '',   
	), $atts );
	global $post;		
	
	if ($attributes['link']!=0) {
		return  '<a  class="' . esc_attr( $attributes['link_class'] ).'" href="' . esc_attr( get_permalink( $post->id)).'"> ' . get_the_title( absint( $post->id ) ) . '</a>';
	} else {
		return get_the_title( absint( $post->id ) );
	}
});

[lc_the_content]

Returns the post content.

Examples:

[lc_the_content]

HTML example - Content within a Styled Section

<section class="post-content">
  [ lc_the_content]
</section>

[lc_edit_post_link]

Returns the post edit link.

Examples:

[lc_edit_post_link class="btn btn-danger btn-sm my-5"]

Custom text for the edit link (button link):

[lc_edit_post_link text="Modify This Post" class="btn btn-primary"]

[lc_the_id]

Returns the post ID.

Examples:

[lc_the_id]

[lc_the_date]

Returns the post date.

Examples:

Default date format:

[lc_the_date]

Custom date format: January 1, 2024:

[lc_the_date format="F j, Y"]

Verbose date format: Wednesday, April 26, 2023:

[lc_the_date format="l, F j, Y"]

HTML example - Date in a Post Meta Layout

<div class="post-meta">
  Published on: [ lc_the_date format="Y-m-d"]
</div>

[lc_the_time]

Returns the post time.

Examples:

[lc_the_time]

[lc_the_author]

Returns the author fields.

Attributes:

field (defaults to display_name). Accepted values for the field parameter:
- admin_color
- aim
- comment_shortcuts
- description
- display_name
- first_name
- ID
- jabber
- last_name
- nickname
- plugins_last_view
- plugins_per_page
- rich_editing
- syntax_highlighting
- user_activation_key
- user_description
- user_email
- user_firstname
- user_lastname
- user_level
- user_login
- user_nicename
- user_pass
- user_registered
- user_status
- user_url
- yim

Examples:

Show the display name

[lc_the_author field="display_name"]

Show the Description

[lc_the_author field="description"]

HTML example - Bio for a Single Post Template

<div class="lc-block card col-md-8 mx-auto mb-4">
	<div class="card-body">
		<h2 class="mb-3">About the Author:</h2>
		<div class="d-grid gap-3 d-md-flex pb-3 mb-3 border-bottom">
			<!-- Author Avatar -->
			[lc_the_avatar size='72' class='rounded-circle shadow border border-primary border-2']
			<div>
				<p class="h5 mb-1">[lc_the_author field="display_name"]</p>
			</div>
		</div>
		<div class="small">
			<p class="text-body text-opacity-75">[lc_the_author field="description"]</p>
		</div>
		<div class="mt-4">
			<a class="link-dark" href="[lc_the_author_posts_url]">Read all my post</a>
		</div>
	</div>
</div>

[lc_the_avatar]

Returns the author avatar.

Attributes:

size (defaults to 96) Desired image size
class CSS class to apply to the image tag
placeholder_url The URL of the desired placeholder image

Examples:

[lc_the_avatar size="24px" class="rounded-circle" placeholder_url="https://i.pravatar.cc/48"]

[lc_the_author_posts_url]

Returns the author posts URL.

[lc_the_permalink]

Returns the post URL.

[lc_the_previous_post_link]

Returns the previous post URL as per get_previous_post_link

Attributes:

format: (defaults to %link ») Link anchor format
link (defaults '%title'. ) The permalink format.
in_same_term (defaults to false) Whether link should be in a same taxonomy term.
excluded_terms comma-separated list of excluded term IDs to exclude
taxonomy (defaults to category) Taxonomy, if $in_same_term is true.
class The CSS class to apply to the link

handling the very same parameters as attributes.

[lc_the_next_post_link]

Returns the next post URL as per get_next_post_link

Attributes:

format: (defaults to %link ») Link anchor format
link (defaults '%title'. ) The permalink format.
in_same_term (defaults to false) Whether link should be in a same taxonomy term.
excluded_terms comma-separated list of excluded term IDs to exclude
taxonomy (defaults to category) Taxonomy, if $in_same_term is true.
class The CSS class to apply to the link

[lc_the_terms]

Returns the post terms.

Attributes:

taxonomy (defaults to category)
link (defaults to 1) Set to 0 if you just want to display the post term, without linking it
class (defaults to 'badge rounded-pill bg-secondary') The CSS class to apply to each tag
parent (optional) Specify a term ID to show only children of a specific term
link_class The CSS class to apply to each link
prefix The text that should be printed before the output, if any output is present
suffix The text that should be printed after the output, if any output is present

Show categories, with a badge decoration:

[lc_the_terms taxonomy="category"]

Show tags with a link and custom class

[lc_the_terms taxonomy="post_tag" link=1 class="badge bg-info"]

[lc_the_categories]

Returns the post categories. It uses lc_the_terms internally.

Attributes:

link (defaults to 1) Set to 0 if you just want to display the post term, without linking it
class (defaults to 'badge rounded-pill bg-warning') The CSS class to apply to each tag
parent (optional) Specify a category ID to show only children of a specific category
link_class The CSS class to apply to each link
prefix The text that should be printed before the output, if any output is present
suffix The text that should be printed after the output, if any output is present

[lc_the_tags]

Returns the post tags. It uses lc_the_terms internally.

Attributes:

link (defaults to 1) Set to 0 if you just want to display the post term, without linking it
class (defaults to 'badge rounded-pill bg-info') The CSS class to apply to each tag
parent (optional) Specify a tag ID to show only children of a specific tag
link_class The CSS class to apply to each link
prefix The text that should be printed before the output, if any output is present
suffix The text that should be printed after the output, if any output is present

[lc_the_cf]

Returns the value of a given custom field. If no value is present, nothing will be returned. Please note that if you're using plugins such as Advanced Custom Fields, you can use their built-in shortcode ([acf field='fieldname' ]) for best versatility.

Attributes:

field Name of the Custom field to retrieve
filter Optional name of a function that should be applied to filter the field value
prefix The text that should be printed before the output, if any output is present
suffix The text that should be printed after the output, if any output is present
output (Defaults to "span") Controls how data is displayed. Possible values:
- "span": wraps prefix, custom field value, and suffix in individual span tags
- "raw" : outputs the raw value only, without any wrapper tag
- "a" creates an a tag using the custom field value as href attribute value. Useful to make a link / button
class Set the class of the main span (or a) tag.
prefix_class Set the class attribute of the prefix span tag.
suffix_class Set the class attribute of the suffix span tag.
anchor_text (defaults to 'More Details...') Sets the link anchor text. Is only relevant is output is set to "link"
target (defaults to '') The target attribute of the a. Set to _blank to open in a new window.
title (defaults to '') The title attribute.

Examples:

Simple example:

[lc_the_cf field="YOURFIELDNAMEHERE"]

Button example:

[lc_the_cf field="url" output="a" anchor_text="Open URL" class="btn btn-warning me-3" target="_blank"]

The HTML output will be:
let's imagine that the url field is populated by the https://yoursite.com value

<a target="_blank" title="" href="https://yoursite.com" class="btn btn-warning me-3">Open URL</a>

ACF example:

Take an image field url and use it as a background image like style="background: url(shortcode)"

background-image: url('[ lc_the_cf output='raw' filter='esc_url' field='bg_image_url']');"

The HTML output will be:

background-image: url('http://__imageurl___.com')

ACF example:
get the price and add a currency symbol before it.


[ lc_the_cf prefix="$" prefix_class="display-5" output="span" class="h1 display-1" field="my_custom_price"]

The HTML output will be:


<span class="display-5">€</span><span class="h1 display-1">900</span>

Workaround: Avoid double quotes issues
Sometimes, it can be useful to use single quotes ' instead of double quotes (") to avoid code interpretation issues.

[lc_the_thumbnail]

Returns the featured image (thumbnail) of a post.

Attributes:

size (defaults to 'post-thumbnail') Desired image format
class CSS class to apply to the image tag
style Inline style to apply to the image tag
placeholder (defaults to 1) Set to 0 to disable the placeholder image which is shown when no image is present
placeholder_url The URL of the desired placeholder image

Examples:

Returns the full image size:

[lc_the_thumbnail size="full"]

Returns the image in a larger format and applies a class and inline style.

[lc_the_thumbnail size="large" class="w-100" style="height: 256px;object-fit: cover"]

Thumbnail with explicit dimensions:

 
[lc_the_thumbnail size="thumbnail" style="width:150px;height:150px;"]

[lc_the_thumbnail_url]

Returns the URL of the featured image (thumbnail) of a post.
The shortcode is designed to fetch and display the URL of the featured image of a post or page in WordPress.
This shortcode is particularly useful when you want to link to the image directly or use the image URL for custom integrations.

Attributes:

size (defaults to 'post-thumbnail') Desired image format
placeholder (defaults to 1) Set to 0 to disable the placeholder image which is shown when no image is present
placeholder_url The URL of the desired placeholder image

Examples:

Basic usage

[lc_the_thumbnail_url]

With Size Attribute:

[lc_the_thumbnail_url size='full']

Creating a Clickable Thumbnail that Opens the Full Image:

<a href="[ lc_the_thumbnail_url size='full']" target="_blank">
    [lc_the_thumbnail size="thumbnail"]
</a>

Using the Thumbnail URL as a Background Image in a Div:

<div style="background-image: url('[lc_the_thumbnail_url size='full']'); height: 300px; width: 100%; background-size: cover;">
</div>

Displaying a Button Link to the Full Image

[ lc_the_thumbnail_url size="full" output="a" anchor_text="View Full Image" class="btn btn-primary" target="_blank"]

Returns post sharing buttons for FaceBook, WhatsApp, Telegram, Twitter.

[lc_the_comments_number]

Returns the number of comments. Uses the get_comments_number WordPress function.

[lc_the_comments]

Returns the comments form.

[lc_widgetsarea]

Returns the sidebar widget area.

Attributes:

id (defaults to 'main-sidebar') Desired widgeted area

Shortcodes for Archive templates

[lc_loop] ... [/lc_loop]

Returns the link for post editing, if user has the rights to do so

[lc_the_excerpt]

Returns the article excerpt, followed by a "read more" anchor.

Attributes:

length (defaults to 1). Number of words before the cut is applied
read_more_text The "read more" anchor text.
read_more_link (defaults to 1). Set to zero to disable the "read more" anchor.
read_more_link_class Optional class to add to the "read more" anchor element.

Examples:

[lc_the_excerpt read_more_link=1 length=20]

Returns the excerpt with a button link and a maximum character length of 20.

[lc_the_excerpt read_more_link=1 length=0]

Returns only a button link with no excerpt.

[lc_the_excerpt read_more_text="read the full story" read_more_link=1 length=15]

Customize the read_more_text with a specific text.

Shortcode overview:

add_shortcode( 'lc_the_excerpt', function( $atts ) {
     
	$attributes = shortcode_atts( array(
		'length' => 10,
		'read_more_text' => 'Read more...',
		'read_more_link' => 1,
		'read_more_link_class' => ''
	), $atts );

	extract($attributes); //assign as variables
		
	global $post;

	remove_filter( 'wp_trim_excerpt', 'picostrap_all_excerpts_get_more_link' ); //remove the read more from excerpt
 
	$text = (has_excerpt( $post->ID )) ? get_the_excerpt() : wp_strip_all_tags( $post->post_content);

	$read_more_text = __( $read_more_text, 'livecanvas' );

	$read_more = ($read_more_link == 0) ? $read_more_text : ' <a class="' . $read_more_link_class .'" href="'.get_permalink($post->ID).'">'.$read_more_text.'</a>';

	$output = '<p>'.wp_trim_words($text, $length, $read_more).'</p>';

	return $output;
				
});

[lc_the_archive_title strip_label="1"]

Returns the archive title

Attributes:

strip_label (defaults to empty). Set to 1 to eliminate the "Category:" label

[lc_the_archive_description]

Returns the category / archive description

[lc_the_archive_meta]

Returns the metadata of a specified field for the current category archive.

Attributes:

field (defaults to empty). Specifies the metadata field to retrieve.
filter (defaults to empty). Optional. Specifies a filter to apply to the metadata value (e.g. the_content).

Examples:

[lc_the_archive_meta field="description"]

Fetches the category description.

[lc_the_archive_meta field="custom_field_name"]

Fetches a custom metadata field.

[lc_the_archive_meta field="custom_field_name" filter="the_content"]

Useful to print properly rich content fields: applies filter to the metadata value.

[lc_the_pagination]

Returns the pagination

[lc_the_search_query]

Useful for the Search results page. Returns the current searched string.

[lc_get_template_part]

Returns the template partial file in the theme/child theme folder

Attributes:

slug Name of the template file to grab, as in the get_template_part WordPress function

In order to recall related posts, you can use the get_posts shortcode and configure it accordingly to the desired taxonomy

Related posts by category, display as cards:

[lc_get_posts post_type="post" posts_per_page="4"
	tax_query="category=related" output_view="lc_get_posts_card_view" output_number_of_columns="2"
	output_no_results_message="No other posts in this category" output_article_class="h-100 "
	output_hide_elements="Author, Date, Excerpt, Category, Comments" output_excerpt_length="15" output_heading_tag="h5"
	output_link_class="link-dark text-decoration-none" output_featured_image_format="medium"
	output_featured_image_class="w-100" ]

Next Topic: Emmet cheatsheet code for Bootstrap »