Shortcodes and Components

Pegasus features like sliders, tabs, and counters come from Pegasus plugins. Each one is installed separately, only if your site needs it. They’re added to a page with a shortcode, a bit of text in square brackets.

How to add a shortcode

1. Edit the page and add a Shortcode block (click + and search “shortcode”).
2. Paste the shortcode, change the text or settings, and Update.
3. View the page to check it.

Note

A shortcode only works if its plugin is installed and active on your site. If one shows up on your page as plain text, the plugin probably isn’t active. Ask us before installing anything.

You can see every component live on the Pegasus demo page.

Usage help inside your Dashboard

Each active Pegasus plugin adds a “… Usage” page (e.g. Slider Usage, Tabs Usage) under Pegasus Plugins Suite in the WordPress admin menu, so the instructions are right there in your Dashboard.

Callout

Bold call-to-action blocks with buttons and background colors.

[callout button="yes" link="http://example.com" external="yes" color="white" link_text="Learn More"]
Get your copy now!
[/callout]

Attribute	What it does	Example
background	Background image	background="https://…/image.png"
backgroundcolor	Background color (hex, rgb, or rgba)	backgroundcolor="#dedede"
button	Show the button? (yes/no)	button="yes"
color	Text color	color="white"
external	Open the button link in a new tab	external="yes"
link	Button link URL	link="http://example.com"
link_text	Button text	link_text="Learn More"

Carousel

Logo sliders and testimonial carousels, driven by any post type. The logos and testimonials themselves are managed under Pegasus Logo Slider and Pegasus Testimonial in your admin menu (turned on in Pegasus Options → Additional Options).

[logo_slider the_query="showposts=100&post_type=logo_slider"]
[testimonial_slider image="circle" type="bubble" the_query="post_type=testimonial&showposts=100"]

These are the examples from the Pegasus demo. The post_type your site uses may be different, so ask us if a carousel shows up empty.

Slider

Full-width hero sliders with captions and controls. Includes a regular slider, a thumbnail slider, and a news/posts slider.

[slider]
  [slide]<img src="https://…/slide-1.jpg" alt="">[/slide]
  [slide]<img src="https://…/slide-2.jpg" alt="">[/slide]
[/slider]

[news_slider the_query="showposts=100&post_type=post"]

[thumb_slider]
  [thumb_slide title="slide1" number="1"]<img src="https://…/image-1.jpg" alt="Caption 1">[/thumb_slide]
  [thumb_slide title="slide2" number="2"]<img src="https://…/image-2.jpg" alt="Caption 2">[/thumb_slide]
[/thumb_slider]

Blog and post grids

Show a list or grid of posts. the_query picks which posts (post type, how many, category, order).

[blog the_query="post_type=post&order_by=title&order=ASC"][/blog]
[loop the_query="post_type=post&showposts=10"]
[loop-posts the_query="post_type=post&showposts=10"]
[loop-grid the_query="showposts=99&post_type=post" bkg_color="#dedede"]

Example: only posts in the “hot-news” category, A–Z: [loop the_query="post_type=post&showposts=100&category_name=hot-news&order=ASC&order_by=title"]

Posts filter

A filterable list of posts.

[ajax_filter_posts per_page="4"]

Attribute	What it does	Example
per_page	Number of posts per page	per_page="8"

Tabs

Tabbed content panels for organizing dense sections.

[tabs]
  [tab class="first" title="Home"]First tab content[/tab]
  [tab class="second" title="Profile"]Second tab content[/tab]
[/tabs]

Attribute	What it does	Example
title	The tab’s label	title="Home"
class	Optional CSS class	class="first"

Toggle slide

Accordion toggles that slide open and closed.

[toggleslide title="Your question here"]The answer or content[/toggleslide]

Attribute	What it does	Example
title	The clickable heading	title="Opening hours"

Popup

Lightboxes and modal popups for images and content.

[popup type="inline" text="More..." caption="This is a hippo."]
<img src="https://…/photo.jpg" alt="">
[/popup]

Attribute	What it does	Example
type	inline, gallery, html, image, video, or iframe	type="gallery"
text	Button text	text="More..."
caption	Caption text	caption="This is the caption."
class	Optional CSS class	class="test"

Count Up

Numbers that animate up on scroll, perfect for metrics.

[counter_up number="24" container="h4"]

Attribute	What it does	Example
number	The number to count up to	number="90"
container	HTML tag for the number (h1–h6, div, span, p)	container="h1"
class	Optional CSS class	class="text-align-center"

Circle Progress

Animated circular meters for stats and skill bars.

[circle_progress number="90" color="#fb4f14"]

Attribute	What it does	Example
number	The percentage shown	number="90"
color	Circle color (default #3498db)	color="#3498db"

Masonry and Packery

Image grids: Masonry for masonry galleries and filterable grids, Packery for tight, gap-less layouts. Put images between the tags.

[masonry class="gallery"]
<img src="https://…/one.png" alt="">
<img src="https://…/two.png" alt="">
[/masonry]

[packery]
<img src="https://…/one.png" alt="">
<img src="https://…/two.png" alt="">
[/packery]

One Page sections

Scrollspy one-page navigation, built from sections.

[section id="section-1" bkg_color="#dedede" text_color="#000000"]Section content[/section]

Attribute	What it does	Example
id	Section ID	id="about"
class	Optional CSS class	class="test"
bkg_color	Background color	bkg_color="#3498db"
text_color	Text color	text_color="#ffffff"
image	Background image	image="https://example.com/image.png"

Wow (scroll animations)

Animations that play as content scrolls into view. id is any Animate.css effect name, e.g. fadeIn, fadeInUp, bounceIn, zoomIn, slideInLeft, tada.

[wow id="fadeInUp"]Content that animates in[/wow]

Blurb

[blurb title="Your title" subtitle="Your subtitle"]The content for the blurb[/blurb]

Nav menu

Display a menu inside page content.

[menu menu="primary"]
[bootstrap_menu menu="primary" additional_classes="navbar-expand"]

menu is the menu’s theme location or name (e.g. Primary, User, Footer).