Built-in Shortcodes
Inside LiveCanvas, as in standard WordPress posts and pages, you can use shortcodes to implement dynamic parts ("PHP code").
The LiveCanvas plugin defines some extremely barebone but powerful shortcodes to simplify your work and get you started quicker.
Menu
[lc_nav_menu]
This shortcode calls the WordPress wp_nav_menu function, passing all shortcode parameters.
It can be used for including the navigation in your header, or wherever you want.
Accepted parameters and default values:
| Parameter | Description | Default (example) Parameter |
|---|---|---|
| theme_location | Set the menu | theme_location="primary" |
| container_class | Add classeS to the container | container_class="" |
| container_id | Add ID to the container | container_id="" |
| menu_class | Add classeS to the ul | menu_class="" |
| fallback_cb | fallback class | fallback_cb="" |
| menu_id | Add id to the menu | menu_id="" |
| depth | Set the deepth of the submenus items | depth="2" |
| walker | Navbar walker, learn more | walker="$the_walker" |
It is using as a default walker function:
- the bootstrap_5_wp_nav_menu_walker class, if defined, for Bootstrap 5 support (eg for Picostrap5 theme support)
- the WP_Bootstrap_Navwalker class, if defined, for Bootstrap 4 support (eg for Picostrap4 theme support)
- the Understrap_WP_Bootstrap_Navwalker class, if defined, for UnderStrap theme support.
Examples:
[lc_nav_menu theme_location="primary" container_class="" container_id="" menu_class="navbar-nav"]
[lc_nav_menu theme_location="secondary" container_class="" container_id="" menu_class="navbar-nav"]
HTML example:
<div lc-helper="shortcode" class="live-shortcode"> [lc_nav_menu theme_location="primary" container_class="" container_id="" menu_class="navbar-nav"] </div>
Home URL
[lc_home_url]
This shortcode calls the WordPress home_url function.
It's typical use case is in a custom header, to link the logo to the site's homepage.
No parameters are allowed.
HTML examples:
<a class="navbar-brand" href="[lc_home_url]"> <img src="https://getbootstrap.com/docs/5.1/assets/brand/bootstrap-logo.svg" width="30" height="24" class=" " alt="my logo"> </a>
<a class="navbar-brand" href="[lc_home_url]">Homepage</a>
WordPress Custom Logo
[lc_custom_logo]
This shortcode calls the WordPress get_custom_logo function.
It's typical use case is in a custom header, to display the site logo.
No parameters are allowed.
Example
[lc_custom_logo]
Default HTML Output of the shortcode
<a href="https://yoursite.com/" class="custom-logo-link" rel="home"> <img src="https://yoursite.com/yourlogo.jpg" class="custom-logo" alt="Site title" decoding="async"> </a>
Get Posts
[lc_get_posts]
This shortcode calls the WordPress get_posts function, passing all shortcode parameters.
It can be used for displaying a list of posts of any custom post type.
The simplest use case could be when you want to show a listing of your most recent blog posts in your homepage.
It allows also for custom callback functions, so you can precisely decide how your posts should be rendered.
For more details, please have a look at the post loops documentation page.
Accepted parameters and default values:
Input Parameters
| Parameter | Description | Default (example) Parameter |
|---|---|---|
| posts_per_page | Specifies how many posts per page to show. | posts_per_page="10" |
| offset | Specifies the number of posts to skip before starting to display the posts. | offset="0" |
| category | Displays posts that have been assigned to a specific category. | category="category_slug_or_id" |
| category_name | Displays posts that have been assigned to a specific category by name. | category_name="category_name" |
| orderby | Specifies the field to order the results by. | orderby="date" |
| order | Specifies the order to display the results in. | order="DESC" |
| include | Displays posts whose IDs are specified in the include parameter. | include="comma-separated-list-of-post-ids" |
| exclude | Excludes posts whose IDs are specified in the exclude parameter. | exclude="comma-separated-list-of-post-ids" |
| meta_key | Specifies the custom field key to use for ordering results. | meta_key="custom_field_key" |
| meta_value | Specifies the custom field value to use for ordering results. | meta_value="custom_field_value" |
| post_type | Specifies the post type to retrieve. | post_type="post" |
| post_mime_type | Specifies the post MIME type to retrieve. | post_mime_type="image/jpeg" |
| post_parent | Displays attachments with a specific parent ID. | post_parent="parent_post_id" |
| author | Displays posts from a specific author. | author="author_id" |
| post_status | Displays posts with a specific status (e.g. published, draft, pending). | post_status="publish" |
| suppress_filters | Disables parsing of filters. | suppress_filters="true" |
| tax_query | Specifies the taxonomy and term ID to retrieve. | tax_query="taxonomy=term_id" |
Output Parameters
| Parameter | Description | Default (example) Parameter |
|---|---|---|
| output_view | Specifies the custom output view for the posts display. | output_view="lc_get_posts_default_view" |
| output_wrapper_class | Specifies the class for the wrapper element surrounding the post items. | output_wrapper_class="" |
| output_link_class | Specifies the class for the link element of each post item. | output_link_class="" |
| output_number_of_columns | Specifies the number of columns for the posts display. | output_number_of_columns="3" |
| output_article_class | Specifies the class for the article element of each post item. | output_article_class="" |
| output_heading_tag | Specifies the HTML heading tag for the post title. | output_heading_tag="h2" |
| output_hide_elements | Specifies elements to hide in the post output (e.g. post title, post date). | output_hide_elements="" |
| output_excerpt_length | Specifies the maximum length of the post excerpt. | output_excerpt_length="45" |
| output_excerpt_text | Specifies the text to append to the end of the post excerpt. | output_excerpt_text="…" |
| output_featured_image_before | Specifies whether the featured image should appear before or after the post content. | output_featured_image_before="" |
| output_featured_image_format | Specifies the image size to use for the featured image. | output_featured_image_format="large" |
| output_featured_image_class | Specifies the class for the featured image element. | output_featured_image_class="attachment-thumbnail img-responsive alignleft" |
About the output_view parameter
Possible values: lc_get_posts_listing_view, lc_get_posts_card_view, lc_get_posts_collapsible_view_bs5.
Or your custom callback. Please refer to the post loops documentation page.
Examples
Listing the articles, as Bootstrap cards:
[lc_get_posts post_type="post" output_view="lc_get_posts_card_view" output_number_of_columns="4" output_featured_image_class="card-img-top" output_article_class="shadow"]
Listing the site pages, with links:
[lc_get_posts post_type="page" output_view="lc_get_posts_listing_view" output_wrapper_class="list-unstyled" output_link_class="d-block mb-2"]
A Live HTML example of the last row, with the parameters above
<ul class="list-unstyled"> <li> <a class="d-block mb-2" href="https://docs.livecanvas.com/">Homepage</a> </li> </ul>
Dynamic Sidebar
[lc_widgetsarea]
This shortcode calls the WordPress dynamic_sidebar function.
It can be used to display a sidebar and it's widgets of course, inside any page, or in the footer for example.
Accepted parameters and default values:
| Parameter | Description | Default (example) Parameter |
|---|---|---|
| id | Specifies the taxonomy (e.g. post_tag, category) to retrieve terms from. | id="main-sidebar" |
Examples
[lc_widgetsarea id="main-sidebar"]
Get Terms
[lc_get_categories]
[lc_get_tags]
[lc_get_terms]
These shortcodes call the WordPress get_terms function, passing all shortcode parameters.
It can be used for listing your blog terms, categories and tags.
Accepted parameters and default values:
| Parameter | Description | Default (example) Parameter |
|---|---|---|
| taxonomy | Specifies the taxonomy (e.g. post_tag, category) to retrieve terms from. | taxonomy="post_tag/category" |
| orderby | Specifies the field to use for ordering the terms (e.g. name, count, term_id). | orderby="name" |
| order | Specifies the order in which to display the terms (ASC, DESC). | order="ASC" |
| hide_empty | Specifies whether to hide terms with no posts associated with them. | hide_empty="FALSE" |
| include | Specifies specific term IDs to include in the result set. | include="" |
| exclude | Specifies specific term IDs to exclude from the result set. | exclude="" |
| exclude_tree | Specifies whether to exclude terms that are descendants of the specified term IDs. | exclude_tree="" |
| count | Specifies whether to display the number of posts associated with each term. | count="FALSE" |
| link_class | Specifies the class for the link element of each term. | link_class="" |
| class | Specifies the class for the wrapper element of each term. | class="badge rounded-pill bg-warning" |
| parent | Specifies whether to display only the top-level terms or all terms. | parent="FALSE" |
| link | Specifies whether to add a link to each term (1 for yes, 0 for no). | link="1" |
Get List Categories
[lc_get_cats]
This shortcode calls the WordPress wp_list_categories function, passing all shortcode parameters.
It can be used for listing your blog categories.
Accepted parameters and default values:
| Parameter | Description | Formatted Parameter |
|---|---|---|
| child_of | Specifies the category ID to use as the parent when displaying subcategories. | child_of="0" |
| current_category | Specifies the category to highlight as the current category. | current_category="0" |
| depth | Specifies the maximum depth of the category hierarchy to show. | depth="0" |
| echo | Specifies whether to output the results to the screen (default) or return them as a string | echo="false" |
Input Related Paramters
| Parameter | Description | Formatted Parameter |
|---|---|---|
| exclude | Exclude categories by ID or slug (comma-separated list). | exclude="false" |
| exclude_tree | Exclude categories and their descendants by ID or slug (comma-separated list). | exclude_tree="false" |
| hide_empty | Hide categories with no posts. | hide_empty="1" |
| hide_title_if_empty | Hide the list title if no categories are found. | hide_title_if_empty="false" |
| hierarchical | Show categories in a hierarchical order. | hierarchical="true" |
| order | Category order (ASC or DESC). | order="ASC" |
| orderby | Order categories by ID, name, slug, or count. | orderby="ID" |
| separator | Separator between categories. | separator="< br >" |
| show_count | Show the number of posts in each category. | show_count="0" |
| show_option_all | Show an "All Categories" link. | show_option_all="false" |
| show_option_none | Text to display when no categories are found. | show_option_none="No categories" |
| style | Display style: list or dropdown. | style="list" |
| taxonomy | Which taxonomy to use. Typically "category" or "post_tag". | taxonomy="category" |
| title_li | Text to use as the list title or false to hide it. | title_li="Categories" |
| use_desc_for_title | Use term description for the title attribute (1 for yes, 0 for no). | use_desc_for_title="1" |
Output Related Parameters
| Parameter | Description | Formatted Parameter |
|---|---|---|
| output_view | Custom parameter that sets the output view for `wp_list_categories()`. | output_view="lc_get_cats_default_view" |
Examples
[lc_get_cats title_li='']
Get Post Content
[lc_get_post]
This shortcode returns a specific post's content. Useful to grab LiveCanvas partials. Just pass the post id OR the slug as parameter.
Accepted parameters and default values:
| Parameter | Description | Formatted Parameter |
|---|---|---|
| id | Specifies the ID of a specific block/section/partial to retrieve. | id=" " |
| slug | Specifies the slug of a specific block/section/partial to retrieve. | slug=" " |
| post_type | Specifies the post type of the block/section/partial to retrieve, which can be either lc_block, lc_section, or lc_partial. | post_type="lc_block|lc_section|lc_partial" |
'id' => '' 'slug' => '' 'post_type' => '' (optional. Set to lc_block|lc_section|lc_partial)
Get Gutenberg Post Content
[lc_get_gt_block]
This shortcode returns a specific post's content, parsing Gutenberg blocks, if present.
Accepted parameters and default values:
'id' => ''
[lc_get_gt_block id="2"]
Get Custom Fields value
[lc_get_cf]
This shortcode returns the value of a specified custom field of the current page / post.
Accepted parameters and default values:
[lc_get_cf field="my_field"]
Get content from static html files inside your child theme
[lc_get_file]
This shortcode allows you to get content from static html files inside your child theme.
Accepted parameters and default values:
| Parameter | Description | Formatted Parameter |
|---|---|---|
| type | Specifies the type of block/section/partial to retrieve, which can be either "partial", "block", or "section". | type="partial|block|section" |
| name | Specifies the name of the partial/block/section file to retrieve. | name="My_test_Partial.html" |
'type' => 'partial', (or block / section) 'name' => 'My test Partial' (The file to retrieve, in this case: partials/My test Partial.html)
MultiLanguage Tool
[lc_label]
This shortcode returns a translated string. Useful for multilanguage labels. It uses the __() WordPress function. It basically returns the text input parameter, and a translation if available.
Accepted parameters and default values:
| Parameter | Description | Formatted Parameter |
|---|---|---|
| text | The text string to be translated to the current language. | text=" " |
'text' => '',
Templating Call Tool
[lc_function]
This shortcode is useful to call 'templating' functions. You can use it for functions that both return a value, or echo it.
Example for integration with the Breadcrumbs Nav XT plugin: [lc_function name="bcn_display"]
Accepted parameters and default values:
| Parameter | Description | Formatted Parameter |
|---|---|---|
| name | The name of the templating function to be called. | name="" |
'name' => '', (the function name)
Dummy Content
[lc_dummyshortcode]
This is just a test shortcode to display a test message. No parameters are allowed.
[lc_dummyshortcode]Next Topic: How to store and reuse HTML sections »