Shortcode Ultimate – Examples / Code

January 11, 2026 | By

all-scribbly, coding, design - layout

Basic Code Wrapper – Prismatic

https://prismjs.com/examples.html

<pre><code class=”language-javascript”>
CODE
</code></pre>

pick a language – wrap code in it

“language-markup” / “language-html” / “language-mathml”

PLUGINS::
Adding tags to page – tags are added to body_class so they style the prism area as well

  1. rainbow-braces
  2. line-numbers
  3. match-braces
  4. no-brace-hover 

<pre><code class="language-javascript">
var myObject = {
    property1: "something",
    property2: 5,
    property3: true
}; 


{{{{{{{{}}}}}}}}
[[[[[[[[]]]]]]]]
((((((((((()))))))))))

[                 ]
&lbrack; and &rbrack;

</code></pre>
JavaScript

Simple Responsiveness



  <div class="clsWrap"></div>
          <div class="clsWrapPad"></div>
          
          <div class="HalfPageLeft"></div>
          <div class="HalfPageRight"></div>
          
          <div class="cls10"></div>
          <div class="cls20"></div>
          <div class="cls25"></div>
          <div class="cls33"></div>
          <div class="cls40"></div>
          <div class="cls50"></div>
          <div class="cls60"></div>
          <div class="cls66"></div>
          <div class="cls75"></div>
          
          <div class="cls10padR"></div>
          <div class="cls20padR"></div>
          <div class="cls25padR"></div>
          <div class="cls33padR"></div>
          <div class="cls40padR"></div>
          <div class="cls50padR"></div>
          <div class="cls60padR"></div>
          <div class="cls66padR"></div>
          <div class="cls75padR"></div>
		  
		   breadpoint to 100% @media screen and (max-width: 768px)







.
.clsWrap { width: 100%; display: inline-block; }

.clsWrapPad { width: 100%; display: inline-block;  padding: 1em;  box-sizing: border-box; }


.HalfPageLeft {float: left; width: 48%; margin-right: 2%; display: block;}
.HalfPageRight { float: left; width: 58%; margin-right: 2%;  display: block; }


.cls10 { width: 10%; float: left; }
.cls20 { width: 20%; float: left; }
.cls25 { width: 25%; float: left; }
.cls33 { width: 33%; float: left; }
.cls40 { width: 40%; float: left; }
.cls50 { width: 50%; float: left; }
.cls60 { width: 60%; float: left; }
.cls66 { width: 66%; float: left; }
.cls75 { width: 75%; float: left; }
.cls100 { width: 100%; float: left; }

.cls10padR { width: 9%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  padding: 0 1% 0 0; }
.cls20padR { width: 19%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  padding: 0 1% 0 0; }
.cls25padR { width: 23%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  padding: 0 2% 0 0; }
.cls33padR { width: 31%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  padding: 0 2% 0 0; }
.cls39padR { width: 37%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  padding: 0 2% 0 0; }
.cls40padR { width: 38%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  padding: 0 2% 0 0; }
.cls50padR { width: 48%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  padding: 0 2% 0 0; }
.cls60padR { width: 58%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  padding: 0 2% 0 0; }
.cls66padR { width: 64%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  padding: 0 2% 0 0; }
.cls75padR { width: 73%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  padding: 0 2% 0 0; }


@media screen and (max-width: 768px) {

.cls10 { width: 100%; float: left; }
.cls20 { width: 100%; float: left; }
.cls25 { width: 100%; float: left; }
.cls33 { width: 100%; float: left; }
.cls40 { width: 100%; float: left; }
.cls50 { width: 100%; float: left; }
.cls60 { width: 100%; float: left; }
.cls66 { width: 100%; float: left; }
.cls75 { width: 100%; float: left; }

.cls10padR { width: 100%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  padding: 0 0 0 0; }
.cls20padR { width: 100%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  padding: 0 0 0 0; }
.cls25padR { width: 100%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  padding: 0 0 0 0; }
.cls33padR { width: 100%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  padding: 0 0 0 0; }
.cls39padR { width: 100%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  padding: 0 0 0 0; }
.cls40padR { width: 100%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  padding: 0 0 0 0; }
.cls50padR { width: 100%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  padding: 0 0 0 0; }
.cls60padR { width: 100%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  padding: 0 0 0 0; }
.cls66padR { width: 100%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  padding: 0 0 0 0; }
.cls75padR { width: 100%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  padding: 0 0 0 0; }

}
Show more
Show less

Basic Flexbox



<div class="BasicFlexy">
<div class="BasicFlexyItem">

</div>
<div class="BasicFlexyItem">

</div>
</div>




/* basic flex box */

.BasicFlexy { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-evenly; align-items: stretch; align-content: flex-start; gap: 10px 20px; }

.BasicFlexy .BasicFlexyItem { flex: 1 0 25%; }

.BasicFlexy .OneThirdColumn { max-width: 33%; }

.BasicFlexy .TwoThirdColumn { max-width: 66%;   }
Show more
Show less

Edit Shortcode

MLA Gallery Codes

filter – can also be used for standard category / ptags in posts / pages

[mla_gallery post_mime_type="application/pdf"  post_parent=all size=large columns=3  orderby="description ASC"
 link="file" mla_caption="{+title+}" tax_query="array(array('taxonomy'=>'attachment_category','field'=>'slug','terms'=>'pdfs-attcat'),
array('taxonomy'=>'attachment_tag','field'=>'slug','terms'=>''),'relation'=>'OR')"]
<br> mla_caption='<a href="{+file_url+}" target="_blank" class="mlagallerycaption" rel="noopener">Title: {+title+}</a>'
[/mla_gallery]
display single pdf – large

[mla_gallery post_parent=all ids="151824" columns=1 size=large post_mime_type=application/pdf]
Version One


[mla_gallery  itemtag="div" icontag="div" captiontag="p" columns="4" posts_per_page=4 size_class=medium attachment_category="astute-atc" attachment_tag="" post_mime_type=application/pdf  mla_target="_blank" post_parent=all link=file  mla_caption="{+title+}"]
<br> mla_caption='<a href="{+file_url+}" target="_blank" class="mlagallerycaption" rel="noopener">Title: {+title+}</a>'
[/mla_gallery]
<div class="mlagalleryprevnxt-nav">
[mla_gallery itemtag="div" icontag="div" captiontag="p" columns="4" posts_per_page=4  size_class=medium attachment_category="astute-atc" attachment_tag="" post_mime_type=application/pdf post_parent=all  mla_target="_self" link=file mla_margin="520px"  mla_output="paginate_links,prev_next"][/mla_gallery]
</div>
Version Two


<div class="video-gallery woof">[mla_gallery  itemtag="div" icontag="div" captiontag="p" columns="4" posts_per_page=12 size_class=medium attachment_category="bumperv3" attachment_tag="" post_mime_type="image,video" link=file  mla_target="_blank" post_parent=all  mla_link_attributes='rel="shadowbox{sbalbum-{+instance+}};player=img"' mla_caption="{+title+}"]
<br> mla_caption='<a href="{+file_url+}" target="_blank" class="mlagallerycaption kg-video-js-skin" rel="noopener">Title: {+title+}</a>'
[/mla_gallery]
<div class="mlagalleryprevnxt-nav">
[mla_gallery itemtag="div" icontag="div" captiontag="p" columns="4" posts_per_page=12  size_class=medium attachment_category="bumperv3" attachment_tag="" post_mime_type="image,video" post_parent=all  mla_target="_self" link=file mla_margin="520px"  mla_output="paginate_links,prev_next"][/mla_gallery]
</div>
</div>
Show more
Show less

RESOURCES

    • TOPRESOURCESHEADONE
    • EntryOne
    • EntryTwo
    • EntryThree
      • TOPRESOURCESHEADTWO
      • SubListEntryOne
      • SubListEntryTwo
      • SubListEntryThree
      • SubListEntryFour

[su_top_resources]
<!-- ||||||||||||||||||| TopOfPageResources -->

<div class="TOPResources EditusIgnore">
<h2>RESOURCES</h2>
<ul class="topr-list">
<li class="TRSubHead">TOPRESOURCESHEADONE</li>
<li>EntryOne</li>
<li>EntryTwo</li>
<li>EntryThree</li>
<li class="topr-presublist-li">
<ul class="topr-list-sub">
  <li class="TRSubHead">TOPRESOURCESHEADTWO</li>
  <li>SubListEntryOne</li>
  <li>SubListEntryTwo</li>
  <li>SubListEntryThree</li>
  <li>SubListEntryFour</li>
</ul><!-- endtopr-list-sub -->
</li><!-- endsubtable -->
</ul>
</div>

<!-- ||||||||||||||||||| ENDTopOfPageResources -->
Markup

https://getshortcodes.com/docs-category/shortcodes/

Heading – su_heading

Heading text

Heading text
Markup

Tabs – su_tabs

TabbbbbbbbbTabbbbbbbbTabbbbbbbbb
Tabbbbbbbbbbcontent
Tabbbbbbbbbbcontent
Tabbbbbbbbbcontent



TabbbbbbbbTabbbbbbbTabbbbbbb

Tabbbbbbbbcontent




Tabbbbbbbbbcontent




Tabbbbbbbbcontent




added filter for tocer
Markup

Spoiler – su_spoiler

Spoiler title
Hidden content
Spoiler title
Hidden content
Markup

Accordion – su_accordion

Accordion title
Hidden content
Accordion title
Hidden content
Accordion title
Hidden content





Accordion title
Hidden content


Accordion title
Hidden content


Accordion title
Hidden content
Markup

Divider – su_divider

Go to top

Go to top
Markup

Spacer – su_spacer (empty – adjust height)

Markup

Highlight – su_highlight

 Highlighted text  
 Highlighted text 
Markup
Edit Shortcode

Label – su_label

Label 
Label
Markup
Edit Shortcode

Quote – su_quote

Quote

Quote
Markup

PullQuote – su_pullquote

Pellentesque in est eget erat pellentesque condimentum nec quis neque. Aliquam gravida pellentesque pellentesque. Ut molestie justo nec urna placerat dapibus. Duis vestibulum hendrerit orci vel rhoncus. Vivamus tortor tellus, tincidunt condimentum turpis ac,

Pullquote
gravida volutpat eros. Vivamus eget felis elit. Integer rhoncus libero vel molestie accumsan. Duis vitae iaculis lectus. Etiam eleifend pretium sollicitudin. In sed turpis non nunc dictum consequat vitae sed dui. Proin luctus mauris et quam dapibus, vitae fringilla orci dignissim. Curabitur scelerisque neque a urna consequat, quis tempor eros cursus.

DropCap – su_dropcap

D 
D
Markup
Edit Shortcode

Columns – su_row / su_column

Column content
Column content



Column content


Column content
Markup

Button – su_button

Button text 
 Button text
Markup
Edit Shortcode
buttons linking

buttons styles

Edit Shortcode

url Button link

Default value: Site URL
target Button link target

Default value: self
style Button background style

Possible values:
default
flat
ghost
soft
glass
bubbles
noise
stroked
3d

Default value: default
background Button background color

Possible values: #HEX color
Default value: #2D89EF
color Button text color

Possible values: #HEX color
Default value: #FFFFFF
size Button size

Possible values: Number from 1 to 20
Default value: 3
wide Set this option to yes to make the button fullwidth

Possible values: yes or no
Default value: no
center Is button centered on the page

Possible values: yes or no
Default value: no
radius Button border radius. Automatic calculation of the radius is based on the button size

Possible values:
auto
round
0 (Square)
5 (5px)
10 (10px)
20 (20px)

Default value: auto
icon You can upload a custom icon for this button or use a built-in one

Possible values: Fork Awesome icon name with icon: prefix or image URL.
Example values: icon: star, http://example.com/icon.png

The list of available Fork Awesome icons
icon_color Color of the vector icon used in the icon option. This color won’t be applied to uploaded images.

Possible values: #HEX color
Default value: #FFFFFF
text_shadow Button text shadow

Possible values: CSS text-shadow shorthand property
Default value: none
desc A short description below the button text. This option is not compatible with icon.
download A non-empty download attribute tells the browser that the button URL should be downloaded when a user clicks on the button. The value of the attribute will be the name of the downloaded file. The download attribute is not supported in IE or Edge (prior version 18) and in Safari (prior version 10.1). Browser compatibility.
onclick A custom JavaScript code for the onclick HTML attribute.
rel A custom value for the rel HTML attribute.

Example values: nofollow, lightbox
title A custom value for the title HTML attribute.
id A custom value for the id HTML attribute.
class Additional CSS class name(s) separated by space(s)
Edit Shortcode

Service – su_service

Service title
Service description

 Service title
Service description
Markup

Box content – su_box

Box title
Box content
Box title
Box content
Markup

Note – su_note

Note text
Note text
Markup

Expand – su_expand

Thistextblockcanbeexpanded
Show more
Show less


Thistextblockcanbeexpanded

Show more
Show less
Markup

Lightbox – su_lightbox

Click here to open lightbox 
Click here to open lightbox
Markup
Edit Shortcode

Tooltip – su_tooltip

Hover me to open tooltip 
Hover me to open tooltip
Markup
Edit Shortcode

Private Note – su_private

Markup

Any content wrapped with this shortcode will only be visible to post authors (users with publish_posts capability).

Table – su_table

TD TD
TD TD 






TD
TD




TD
TD
Markup

CSV Table – su_csv_table

needs url to csv

Markup

permalink – su_permalink

link by post / page id

Markup
Edit Shortcode

Members Only – su_members

This content is for registered users only. Please login.
This content is for registered users only. Please login.
Markup
Edit Shortcode

Guests – su_guests

This content will be available only for non-logged visitors
This content will be available only for non-logged visitors
Markup
Edit Shortcode

Feed – su_feed

needs url

Markup

Menu – su_menu

needs menu name

Markup
Edit Shortcode

List of Sub-Pages – su_subpages

Markup
Edit Shortcode

Siblings – su_siblings

https://yoast.com/hierarchical-post-type-seo-link-parent-child/

Markup

Google Map – su_gmap

Markup

Image Carousel – su_image_carousel
Markup

https://getshortcodes.com/docs/image-carousel/

Source: This option defines which images will be shown in the gallery. Images can be selected manually from media library or fetched automatically from post featured images, or even filtered by a taxonomy

media: 1,2,3 (Media file IDs) – DOES NOT DISPLAY SVGs
posts: 1,2,3 (Post IDs)
posts: recent (Recent posts)
taxonomy: book/3,5 (Taxonomy term slug / term IDs)

Gallery – su_custom_gallery

Markup

Posts List – su_posts






	
					
			
			


				
				
SpiffyPalace – Plants – April 2026


				

					Posted: April 26, 2026				


				

					
ContentsBasic Code Wrapper – PrismaticSimple ResponsivenessBasic FlexboxMLA Gallery Codesfilter – can also be used for standard category / ptags in posts / pagesdisplay single pdf – largeVersion OneVersion TwoRESOURCESHeading – su_headingTabs – su_tabsSpoiler – su_spoilerAccordion – su_accordionDivider – su_dividerSpacer – su_spacer (empty – adjust height)Highlight – su_highlightLabel – su_labelQuote – su_quotePullQuote – su_pullquoteDropCap – su_dropcapColumns […]

				


				
			


					
			
			


				
				
DaVinci Resolve – Resolution To Learn It


				

					Posted: April 25, 2026				


				

					
ContentsBasic Code Wrapper – PrismaticSimple ResponsivenessBasic FlexboxMLA Gallery Codesfilter – can also be used for standard category / ptags in posts / pagesdisplay single pdf – largeVersion OneVersion TwoRESOURCESHeading – su_headingTabs – su_tabsSpoiler – su_spoilerAccordion – su_accordionDivider – su_dividerSpacer – su_spacer (empty – adjust height)Highlight – su_highlightLabel – su_labelQuote – su_quotePullQuote – su_pullquoteDropCap – su_dropcapColumns […]

				


				
			


					
			
			


				
				
LIFX – Internet Of Things – Connectivity Issues


				

					Posted: April 24, 2026				


				

					
ContentsBasic Code Wrapper – PrismaticSimple ResponsivenessBasic FlexboxMLA Gallery Codesfilter – can also be used for standard category / ptags in posts / pagesdisplay single pdf – largeVersion OneVersion TwoRESOURCESHeading – su_headingTabs – su_tabsSpoiler – su_spoilerAccordion – su_accordionDivider – su_dividerSpacer – su_spacer (empty – adjust height)Highlight – su_highlightLabel – su_labelQuote – su_quotePullQuote – su_pullquoteDropCap – su_dropcapColumns […]
Markup
Built In Templates: /wp-content/plugins/shortcodes-ultimate/includes/partials/shortcodes/posts/templates/

  1. Description
  2. Options
  3. Pagination
  4. Built-in templates
    1. Default template
    2. Teasers
    3. Single post template
    4. List
  5. Template editing
  6. Creating custom templates
  7. Adding custom template paths
Post Example

SpiffyPalace – Plants – April 2026

Posted: April 26, 2026

ContentsBasic Code Wrapper – PrismaticSimple ResponsivenessBasic FlexboxMLA Gallery Codesfilter – can also be used for standard category / ptags in posts / pagesdisplay single pdf – largeVersion OneVersion TwoRESOURCESHeading – su_headingTabs – su_tabsSpoiler – su_spoilerAccordion – su_accordionDivider – su_dividerSpacer – su_spacer (empty – adjust height)Highlight – su_highlightLabel – su_labelQuote – su_quotePullQuote – su_pullquoteDropCap – su_dropcapColumns […]

DaVinci Resolve – Resolution To Learn It

Posted: April 25, 2026

ContentsBasic Code Wrapper – PrismaticSimple ResponsivenessBasic FlexboxMLA Gallery Codesfilter – can also be used for standard category / ptags in posts / pagesdisplay single pdf – largeVersion OneVersion TwoRESOURCESHeading – su_headingTabs – su_tabsSpoiler – su_spoilerAccordion – su_accordionDivider – su_dividerSpacer – su_spacer (empty – adjust height)Highlight – su_highlightLabel – su_labelQuote – su_quotePullQuote – su_pullquoteDropCap – su_dropcapColumns […]

Dummy Text – su_dummy_text

Mauris et nulla ac elit commodo pharetra. Vivamus placerat vitae risus ut sollicitudin. Aenean imperdiet est vel euismod blandit. Vestibulum lacinia, est nec scelerisque mattis, mauris lorem ultrices nulla, in egestas erat velit eget lacus. Suspendisse aliquam odio ac dui sagittis, id euismod augue egestas. Aliquam blandit lacinia diam, sed pulvinar lorem. Ut ut tellus ut quam condimentum ornare. Duis tristique tristique ante. Sed risus felis, cursus mollis elementum commodo, aliquet sed diam. In laoreet justo sit amet facilisis finibus. Mauris consequat, diam id posuere viverra, magna massa tempus nulla, sit amet hendrerit leo felis a tortor. In sed felis euismod, dictum est porttitor, suscipit risus. In ac erat non velit congue luctus et et metus. Phasellus sed luctus orci. Praesent tempor nibh vitae mauris volutpat, sed convallis arcu feugiat.

Mauris et nulla ac elit commodo pharetra. Vivamus placerat vitae risus ut sollicitudin. Aenean imperdiet est vel euismod blandit. Vestibulum lacinia, est nec scelerisque mattis, mauris lorem ultrices nulla, in egestas erat velit eget lacus. Suspendisse aliquam odio ac dui sagittis, id euismod augue egestas. Aliquam blandit lacinia diam, sed pulvinar lorem. Ut ut tellus ut quam condimentum ornare. Duis tristique tristique ante. Sed risus felis, cursus mollis elementum commodo, aliquet sed diam. In laoreet justo sit amet facilisis finibus. Mauris consequat, diam id posuere viverra, magna massa tempus nulla, sit amet hendrerit leo felis a tortor. In sed felis euismod, dictum est porttitor, suscipit risus. In ac erat non velit congue luctus et et metus. Phasellus sed luctus orci. Praesent tempor nibh vitae mauris volutpat, sed convallis arcu feugiat.
Markup

Dummy Image – su_dummy_image

Dummy image 
Dummy image
Markup
Edit Shortcode

Animate – su_animate

Animated content

Animated content
Markup

Wrapper – any content will be animated

Animation Choices
Animation Choices
Markup

Animation duration (seconds) Number from 0 to 20

Animation delay (seconds) Number from 0 to 20

INLINE: (yes or no) This parameter determines what HTML tag will be used for animation wrapper. Turn this option to YES and animated element will be wrapped in SPAN instead of DIV. Useful for inline animations, like buttons

Animations
flash (flash)
bounce (bounce)
shake (shake)
tada (tada)
swing (swing)
wobble (wobble)
pulse (pulse)
flip (flip)
flipInX (flipInX)
flipOutX (flipOutX)
flipInY (flipInY)
flipOutY (flipOutY)
fadeIn (fadeIn)
fadeInUp (fadeInUp)
fadeInDown (fadeInDown)
fadeInLeft (fadeInLeft)
fadeInRight (fadeInRight)
fadeInUpBig (fadeInUpBig)
fadeInDownBig (fadeInDownBig)
fadeInLeftBig (fadeInLeftBig)
fadeInRightBig (fadeInRightBig)
fadeOut (fadeOut)
fadeOutUp (fadeOutUp)
fadeOutDown (fadeOutDown)
fadeOutLeft (fadeOutLeft)
fadeOutRight (fadeOutRight)
fadeOutUpBig (fadeOutUpBig)
fadeOutDownBig (fadeOutDownBig)
fadeOutLeftBig (fadeOutLeftBig)
fadeOutRightBig (fadeOutRightBig)
slideInDown (slideInDown)
slideInLeft (slideInLeft)
slideInRight (slideInRight)
slideOutUp (slideOutUp)
slideOutLeft (slideOutLeft)
slideOutRight (slideOutRight)
bounceIn (bounceIn)
bounceInDown (bounceInDown)
bounceInUp (bounceInUp)
bounceInLeft (bounceInLeft)
bounceInRight (bounceInRight)
bounceOut (bounceOut)
bounceOutDown (bounceOutDown)
bounceOutUp (bounceOutUp)
bounceOutLeft (bounceOutLeft)
bounceOutRight (bounceOutRight)
rotateIn (rotateIn)
rotateInDownLeft (rotateInDownLeft)
rotateInDownRight (rotateInDownRight)
rotateInUpLeft (rotateInUpLeft)
rotateInUpRight (rotateInUpRight)
rotateOut (rotateOut)
rotateOutDownLeft (rotateOutDownLeft)
rotateOutDownRight (rotateOutDownRight)
rotateOutUpLeft (rotateOutUpLeft)
rotateOutUpRight (rotateOutUpRight)
lightSpeedIn (lightSpeedIn)
lightSpeedOut (lightSpeedOut)
hinge (hinge)
rollIn (rollIn)
rollOut (rollOut)

MetaData – su_meta

Markup
Option name Possible values Default value
key
Meta key name		 Any text value – none –
default
This text will be shown if data is not found		 Any text value – none –
before
This content will be shown before the value		 Any text value – none –
after
This content will be shown after the value		 Any text value – none –
post_id
You can specify custom post ID. Leave this field empty to use an ID of the current post. Current post ID may not work in Live Preview mode		 Any text value – none –
filter
You can apply custom filter to the retrieved value. Enter here function name. Your function must accept one argument and return modified value. Name of your function must include word filter. Example function:
function my_custom_filter( $value ) {return 'Value is: ' . $value;}		 Any text value – none –

User Data – su_user

display a user data, like login or email, including meta fields

Markup
Edit Shortcode

Post Data – su_post

Shortcode Ultimate – Examples / Code 
Shortcode Ultimate – Examples / Code
Markup
Edit Shortcode
Option name Possible values Default value
field
Post data field name		 ID (Post ID)
post_author (Post author)
post_date (Post date)
post_date_gmt (Post date GMT)
post_content (Post content)
post_title (Post title)
post_excerpt (Post excerpt)
post_status (Post status)
comment_status (Comment status)
ping_status (Ping status)
post_name (Post name)
post_modified (Post modified)
post_modified_gmt (Post modified GMT)
post_content_filtered (Filtered post content)
post_parent (Post parent)
guid (GUID)
menu_order (Menu order)
post_type (Post type)
post_mime_type (Post mime type)
comment_count (Comment count)		 post_title
default
This text will be shown if data is not found		 Any text value – none –
before
This content will be shown before the value		 Any text value – none –
after
This content will be shown after the value		 Any text value – none –
post_id
You can specify custom post ID. Post slug is also allowed. Leave this field empty to use ID of the current post. Current post ID may not work in Live Preview mode		 Any text value – none –
post_type
Post type of the post you want to display the data from		 Post type slug(s) separated by comma(s) post
filter
You can apply custom filter to the retrieved value. Enter here function name. Your function must accept one argument and return modified value. Name of your function must include word filter. Example function:
function my_custom_filter( $value ) {return 'Value is: ' . $value;}		 Any text value – none –

Template – su_template – NON-FUNCTIONING

Markup

Use template file name (with optional .php extension). If you need to use templates from theme sub-folder, use relative path. Example values: page, page.php, includes/page.php

QRCode – su_qrcode
Markup
Edit Shortcode
Option name Possible values Default value
data
The text to store within the QR code. You can use here any text or even URL		 Any text value – none –
title
Enter here short description. This text will be used in alt attribute of QR code		 Any text value – none –
size
Image width and height (in pixels)		 Number from 10 to 1000 200
margin
Thickness of a margin (in pixels)		 Number from 0 to 50 0
align
Choose image alignment		 none (None)
left (Left)
center (Center)
right (Right)		 none
link
You can make this QR code clickable. Enter here the URL		 Any text value – none –
target
Select link target		 self (Open in same tab)
blank (Open in new tab)		 blank
color
Pick a primary color		 #HEX color #000000
background
Pick a background color		 #HEX color #ffffff
class
Additional CSS class name(s) separated by space(s)		 CSS class name(s) separated by space(s) – none –

Scheduler – su_scheduler
Markup
Edit Shortcode
schedler

Edit Shortcode

Option name Possible values Default value
time
In this field you can specify one or more time ranges. Every day at this time the content of shortcode will be visible.Examples (click to set)
9-18 – show content from 9:00 to 18:00
9-13, 14-18 – show content from 9:00 to 13:00 and from 14:00 to 18:00
9:30-10:15 – example with minutes (content will be visible each day, 45 minutes)
9:00:00-17:59:59 – example with seconds		 Any text value – none –
days_week
In this field you can specify one or more days of the week. Every week at these days the content of shortcode will be visible.0 – Sunday
1 – Monday
2 – Tuesday
3 – Wednesday
4 – Thursday
5 – Friday
6 – SaturdayExamples (click to set)
1-5 – show content from Monday to Friday
0 – show content only at Sunday
0, 3-5 – show content at Sunday and from Wednesday to Friday		 Any text value – none –
days_month
In this field you can specify one or more days of the month. Every month at these days the content of shortcode will be visible.Examples (click to set)
1 – show content only at first day of month
1-5 – show content from 1th to 5th
10-15, 20-25 – show content from 10th to 15th and from 20th to 25th		 Any text value – none –
months
In this field you can specify the month or months in which the content will be visible.Examples (click to set)
1 – show content only in January
2-6 – show content from February to June
1, 3, 5-7 – show content in January, March and from May to July		 Any text value – none –
years
In this field you can specify the year or years in which the content will be visible.Examples (click to set)
2014 – show content only in 2014
2014-2016 – show content from 2014 to 2016
2014, 2018, 2020-2022 – show content in 2014, 2018 and from 2020 to 2022		 Any text value – none –
alt
In this field you can type the text which will be shown if content is not visible at the current moment		 Any text value – none –

Splash Screen – su_splash

Splash screen content



Splash screen content
Markup
Option name Possible values Default value
style
Choose splash screen style		 dark (Dark)
dark-boxed (Dark boxed)
light (Light)
light-boxed (Light boxed)
blue-boxed (Blue boxed)
light-boxed-blue (Light boxed blue)
light-boxed-green (Light boxed green)
light-boxed-orange (Light boxed orange)
maintenance (Maintenance)		 dark
width
Width of splash screen content		 Number from 100 to 1600 480
opacity
Background opacity in percents		 Number from 0 to 100 80
onclick
Choose splash screen behavior when it is clicked		 none (Do nothing)
close (Close splash screen (click anywhere))
close-bg (Close on background click)
url (Go to specified url)		 close-bg
url
Enter url to go when splash screen is clicked (this option must selected in dropdown list above)		 Any text value https://getshortcodes.com
delay
Specify the time in which the splash screen will be shown (in seconds)		 Number from 0 to 120 0
esc
Close the screen by pressing Esc		 yes or no yes
close
Show Close button		 yes or no yes
once
Show this splash screen only once on this page		 yes or no no
class
Additional CSS class name(s) separated by space(s)		 CSS class name(s) separated by space(s) – none –

Exit Popup – su_exit_popup

Exit popup content



Exit popup content
Markup

Panel – su_panel

Panel content



Panel content
Markup

Photo Panel – su_photo_pane

Panel content



Panel content
Markup

Icon Panel – su_icon_panel

Uses FontAwesome

Panel content



Panel content
Markup

Text with Icon – su_icon_text

Uses FontAwesome

Content



Content
Markup

Progress Pie – su_progress_pie

75




75
Markup

Progress Bar – su_progress_bar

75

75
Markup

Team Member – su_member

John DoeDesigner
Type here some info about this team member



John DoeDesigner
Type here some info about this team member
Markup

Section – su_section

Section content



Section content
Markup

Pricing Table – su_pricing_table


  • Option 1
  • Option 2
  • Option 3
  • Option 1
  • Option 2
  • Option 3
  • Option 1
  • Option 2
  • Option 3



    
 	
  • Option 1
    • 
 	
  • Option 2
    • 
 	
  • Option 3
    • 



    
 	
  • Option 1
    • 
 	
  • Option 2
    • 
 	
  • Option 3
    • 



    
 	
  • Option 1
    • 
 	
  • Option 2
    • 
 	
  • Option 3
    •
Markup

Testimonial – su_testimonial

Testimonial text

Testimonial text
Markup

Icon – su_icon

Uses FontAwesome
Markup
Edit Shortcode

Content Slider – su_content_slider

Slide content
Slide content
Slide content





Slide content


Slide content


Slide content
Markup

Shadow – su_shadow



- VERTICAL SHADOW - 





openssl@3

<p>Info</p>
Markup

Nest

around content

shadow

Box title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque imperdiet purus. Curabitur pretium, purus nec venenatis vestibulum, quam massa maximus nisi, dignissim pharetra dolor urna et arcu. Nulla erat nisl, elementum sit amet nibh non, hendrerit rutrum ex. Nunc eget nisl nec augue euismod faucibus sit amet viverra felis. Nullam risus ipsum, accumsan nec neque eget, viverra gravida justo. Proin consectetur blandit diam non mattis. Sed eget nulla vel tellus sollicitudin consequat. Donec quis blandit arcu.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur non lectus accumsan, cursus libero maximus, vulputate mi. Nunc vulputate ullamcorper mauris id placerat. Mauris ut ipsum enim. Sed sodales magna vitae dui egestas, sed dictum nisi ullamcorper. Nulla porta nisl in ligula congue molestie. Cras faucibus mollis mauris vel dignissim.

Donec rhoncus est erat, ut cursus purus finibus id. Fusce quis mi sem. Donec id tellus sollicitudin, lobortis nisl nec, sodales neque. Fusce facilisis dui cursus, pellentesque neque sed, porttitor dolor. Sed vel urna nec ante ullamcorper rutrum. Phasellus sed libero interdum, convallis massa vitae, dictum lectus. Donec tempor, massa in semper dapibus, purus justo aliquam mi, in porttitor enim purus a eros. Suspendisse non nisi vel neque ultrices placerat iaculis ut leo. Integer risus nisi, facilisis vitae felis sit amet, lobortis consequat augue. Phasellus facilisis convallis vulputate. Praesent in purus a est bibendum consectetur. Phasellus vestibulum dui a velit vulputate sagittis. Morbi hendrerit urna eget magna pretium tempor. Vivamus ut tincidunt odio.






Box title

Box content
Markup

Related Posts

Open Coding Post

coding /

ContentsBasic Code Wrapper – PrismaticSimple ResponsivenessBasic FlexboxMLA…

June-8-Notes

all-scribbly /

ContentsBasic Code Wrapper – PrismaticSimple ResponsivenessBasic FlexboxMLA…