Shortcode Ultimate – Examples / Code

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

Edit Shortcode



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

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

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/


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



ACCID Build Steps

Do all work in /ACCID_SOURCE/ ACCID_MANAGEMENT/accid_pre_scripts/sync_to_clean.sh ACCID_MANAGEMENT/accid_pre_scripts/verify_build_folder.sh Then:

connecting ai to any application

https://ai-sdk.dev/docs/introduction

all general post

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

ACCID Build Steps

Do all work in /ACCID_SOURCE/ ACCID_MANAGEMENT/accid_pre_scripts/sync_to_clean.sh ACCID_MANAGEMENT/accid_pre_scripts/verify_build_folder.sh Then:

connecting ai to any application

https://ai-sdk.dev/docs/introduction


Dummy Text – su_dummy_text

Fusce hendrerit eros eget finibus ullamcorper. Maecenas porta in neque vel semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris a sollicitudin neque. Etiam sed feugiat ex. Fusce et auctor tortor. Cras consectetur sagittis tortor sit amet facilisis. Nullam placerat ac ex ut porta. Phasellus sollicitudin erat eu lacus maximus, at congue augue sodales. Vestibulum semper fringilla tortor. Donec consequat tellus sagittis, ornare ipsum a, facilisis dolor. Sed varius sollicitudin nisl a sodales. Etiam laoreet, turpis quis dictum finibus, metus lectus luctus sapien, hendrerit egestas purus enim id leo. In aliquam et turpis lacinia facilisis. Nam neque elit, facilisis nec scelerisque sit amet, gravida in est.

Fusce hendrerit eros eget finibus ullamcorper. Maecenas porta in neque vel semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris a sollicitudin neque. Etiam sed feugiat ex. Fusce et auctor tortor. Cras consectetur sagittis tortor sit amet facilisis. Nullam placerat ac ex ut porta. Phasellus sollicitudin erat eu lacus maximus, at congue augue sodales. Vestibulum semper fringilla tortor. Donec consequat tellus sagittis, ornare ipsum a, facilisis dolor. Sed varius sollicitudin nisl a sodales. Etiam laoreet, turpis quis dictum finibus, metus lectus luctus sapien, hendrerit egestas purus enim id leo. In aliquam et turpis lacinia facilisis. Nam neque elit, facilisis nec scelerisque sit amet, gravida in est.

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




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