Widgets & Shortcodes

In this chapter, we will explore the available widgets and shortcodes in RedWaves.

Widgets

RedWaves – Posts

This widget is very powerful. And frankly, it might be the most powerful widget RedWaves has to offer. You can use this widget to display recent posts, latest updated posts or most commented posts. Additionally, you can filter the posts by a specific category or even filter them by a list of post IDs (when a list of IDs is set, posts will appear in the order the IDs were inserted.

Layout – Post layout/style.

IDs (Comma separated) – List of post IDs separated by comma (the order matters here).

Category – Filter posts by a specific category.

Order By – The order by which the retrieved posts will be sorted.

Order – Designates the ascending or descending order of the “Order By” option.

Number of Posts to show – How many posts to display in total.

Load more posts by Ajax? – When enabled, additional posts will be loaded by Ajax.

RedWaves – Tabbed Posts

Works very similar to the previous widget. But it allows you to display multiple tabs of posts. You can hold and drag the tabs to order them. Check/uncheck to activate/deactivate the tabs.

RedWaves – Related Posts

This one too is similar to the previous widgets. But it will always display the related posts relative the the current post being displayed. So this widget will only work on individual posts, else, it will display nothing.

RedWaves – Author Posts

This widget displays a list of posts created by the same author of the current post being displayed. This widget will only work on single posts whose author has more than one post, else, nothing will be displayed.

RedWaves – Author Profile

This widget displays the biography and avatar (and social links if available) of the author of current single post being displayed. Again, this widget will only work on individual posts.

RedWaves – Latest Tweets

This widget make use of the Twitter’s API to retrieve your Twitter account recent tweets. So it requires an active Twitter app with valid credentials. To create a Twitter app, visit this link while logged in and create an app (if you don’t have one already). Once your app is created, go to “Keys and Access Tokens” and copy the provided keys to your widget.

Cache Tweets for (in Hours) – Make sure to set this option to 1 at least. You really don’t want to call the Twitter API every time someone visits your website.

Tweets Number – How many tweets you want to display.

RedWaves – Social Icons

This widget offers a wide variety of styling options, so take your time to find the design that suits your website the most.

Show Labels? – Enable this option to display social media names.

Open links in a new tab? – If enabled, the link will open in new tab when clicked.

Add NoFollow Tag? – When enabled, social media buttons will have a “nofollow” attribute.

You can hold and drag the buttons to reorder them. Check/uncheck to activate/deactivate them.

RedWaves – Login Widget

This widget displays a simple login form when not logged in. If you are logged, the widget will display a welcome text, your avatar and some useful links.

RedWaves – Facebook Page Plugin

This widget displays your Facebook page plugin.

App ID (Optional) – If you have a Facebook app, enter its ID here. For now, this field is totally optional.

Page URL – Enter your Facebook page URL here.

Width – This can be any number from 180 to 500 (in pixels).

Display timeline? – When enabled, your page timeline will be displayed.

RedWaves – Recent Comments

This widget displays the most recent comments with avatars.

Shortcodes

RedWaves provide a GUI (Graphical User Interface) to deal with shortcodes. So you don’t have to remember all shortcodes and their parameters. Those shortcodes are grouped into two groups:

Builder Shortcodes – These shortcodes are mapped to the Visual Composer page builder. And they are available under Theme elements section. These shortcodes are the following:

  • Blog
  • Posts
  • Blog Grid
  • Blog Slider
  • Newsbar
  • Gallery (Theme version)
  • Social Icons
  • Share Icons
  • Section Title
  • Sidebar
  • Button

Editor Shortcodes – These shortcodes are available as buttons in the TinyMCE editor (aka visual editor) and they are the following:

  • Highlight
  • Dropcap
  • Notification
  • Styled List
  • Button

The “Button” shortcode is available under both groups.

Blog

“Blog” shortcode simply displays an archive of posts just like your blog page. This shortcode is very customizable.

Usage example:

[rw_blog title="Recent Posts" columns="2" excerpt="30"]

Title (title) – Section title.

Title Color (color) – Section color.

Posts (ids) – List of posts IDs separated by comma.

Categories (categories) – List of categories IDs separated by comma.

Order By (orderby) – The order by which posts will be sorted. Accepted values: date, ID, author, title, modified, rand, comment_count.

Sort Order (order) – Designates the ascending or descending order of the “orderby” parameter. Accepted values: ASC, DESC.

Posts per Page (per_page) – Number of posts to display.

Layout (layout) – Blog layout. Accepted values: grid, masonry.

Columns (columns) – Number of posts per row. Accepted values: 1, 2, 3, 4.

Style (style) – Post box style. Accepted values: style1, style2, style3, style4.

Excerpt Length (excerpt) – Excerpt length (in words). 0 to disable.

Readmore (readmore) – Readmore button text.

Pagination (pag) – Pagination type. Accepted values: simple, numbered, loadmore, infinite. Leave empty to disable.

Spacing (spacing) – Spacing between posts (in pixels). Accepted values: 0, 2, 3, 5, 8, 10, 15, 20.

Extra Class Name (el_class) – Custom CSS class name.

Css (css) – Css styles (supported by Visual Composer plugin).

Posts

This shortcode displays a stylish grid of posts. It supports multiple layouts.

Usage example:

[rw_posts title="Trending" per_page="5" columns="2" nav="true"]

Title (title) – Section title.

Title Color (color) – Section color.

Posts (ids) – List of posts IDs separated by comma.

Categories (categories) – List of categories IDs separated by comma.

Order By (orderby) – The order by which posts will be sorted. Accepted values: date, ID, author, title, modified, rand, comment_count.

Sort Order (order) – Designates the ascending or descending order of the “orderby” parameter. Accepted values: ASC, DESC.

Posts per Page (per_page) – Number of posts to display.

Layout (layout) – Shortcode layout. Accepted values: layout1, layout2, layout3.

Columns (columns) – Number of posts per row. Accepted values: 1, 2, 3, 4. Require the “layout” parameter to be set to “layout3”.

Enable Navigation? (nav) – If enabled, more posts will be loaded by Ajax.

Style (style) – Post box style. Accepted values: style1, style2, style3, style4.

Spacing (spacing) – Spacing between posts (in pixels). Accepted values: 0, 2, 3, 5, 8, 10, 15, 20.

Extra Class Name (el_class) – Custom CSS class name.

Css (css) – Css styles (supported by Visual Composer plugin).

Blog Grid

This shortcode displays a gallery of posts in a compact way.

Usage example:

[rw_posts_grid layout="layout1"]

Title (title) – Section title.

Title Color (color) – Section color.

Posts (ids) – List of posts IDs separated by comma.

Categories (categories) – List of categories IDs separated by comma.

Order By (orderby) – The order by which posts will be sorted. Accepted values: date, ID, author, title, modified, rand, comment_count.

Sort Order (order) – Designates the ascending or descending order of the “orderby” parameter. Accepted values: ASC, DESC.

Layout (layout) – Shortcode layout. Accepted values: layout1, layout2, layout3.

Extra Class Name (el_class) – Custom CSS class name.

Css (css) – Css styles (supported by Visual Composer plugin).

Blog Slider

This shortcode displays a simple yet powerful slider.

Usage example:

[rw_posts_slider per_page="4" animin="fadeIn" animout="fadeOut" shadow="style1" timeout="4000" loop="true" autoplay="true" lazyload="true" nav="true" dots="true" hover="true" pause="true" touch="true" mouse="true"]

Title (title) – Section title.

Title Color (color) – Section color.

Posts (ids) – List of posts IDs separated by comma.

Categories (categories) – List of categories IDs separated by comma.

Order By (orderby) – The order by which posts will be sorted. Accepted values: date, ID, author, title, modified, rand, comment_count.

Sort Order (order) – Designates the ascending or descending order of the “orderby” parameter. Accepted values: ASC, DESC.

Posts per Page (per_page) – Number of slides (posts) to display.

Style (style) – Slide style. Accepted values: style1, style2, style3.

Entrance Animation (animin) – Animation of next slide. Supports all animate.css animations.

Exit Animation (animout) – Animation of current slide. Supports all animate.css animations.

Shadow Style (shadow) – Shadow effect style. Accepted values: style1, style2, style3. Leave empty for no shadows.

Timeout (timeout) – Delay between slides in milliseconds (when autoplay is enabled).

Infinite Loop (loop) – Duplicate last and first items to get loop illusion.

Autoplay (autoplay) – Autoplay.

Lazyload (lazyload) – Lazy load images.

Navigation Arrows (nav) – Show next/prev buttons.

Pagination Bullets (dots) – Show pagination (dots). Show Navigation

Arrows on Mouseover? (hover) – Show next/prev buttons on mouseover only.

Pause on Mouseover? (pause) – Pause on mouseover.

Touch Drag (touch) – Enable touch drag.

Mouse Drag (mouse) – Enable mouse drag.

Extra Class Name (el_class) – Custom CSS class name.

Css (css) – Css styles (supported by Visual Composer plugin).

Newsbar

Displays a news bar.

Usage example:

[rw_newsbar timeout="4000"]Lorem ipsum dolor sit amet, eam sonet nominati intellegebat te, eu vel novum nullam. | Quem necessitatibus per in, mei soluta apeirian ut. Nec cu doming delicata omittantur. | Vis in amet partem laoreet, splendide definitiones ius ut, qui summo essent eu.[/rw_newsbar]

Title (title) – Section title.

Title Color (color) – Section color.

Content – News content separated by vertical bar “|”. You can add links.

Color Scheme (style) – Color scheme or style. Supported values: style1, style2.

Timeout (timeout) – Delay between slides in milliseconds (when autoplay is enabled).

Autoplay (autoplay) – Autoplay.

Navigation Arrows (nav) – Show next/prev buttons.

Pause on Mouseover? (pause) – Pause on mouseover.

Touch Drag (touch) – Enable touch drag.

Mouse Drag (mouse) – Enable mouse drag.

Extra Class Name (el_class) – Custom CSS class name.

Css (css) – Css styles (supported by Visual Composer plugin).

Gallery (Theme version)

Displays an image gallery.

Usage example:

[rw_gallery images="1999,1998" lightbox="true" columns="2" spacing="3"]

Title (title) – Section title.

Title Color (color) – Section color.

Images (images) – Images IDs separated by comma.

Link To (link) – Whether the image will link to media file or attachment page or nothing. Accepted values: file, post, none.

Lightbox – Open gallery in lightbox.

Columns (columns) – Number of images per row. Accepted values: 1, 2, 3, 4, 6.

Layout (layout) – Gallery layout. Accepted values: grid, masonry, mosaic, carousel.

Thumbnail Size (size) – Image size. Accepts all registered thumbnail sizes.

Spacing (spacing) – Spacing between posts (in pixels). Accepted values: 0, 2, 3, 5, 8, 10, 15, 20.

Entrance Animation (animin) – Animation of next slide. Supports all animate.css animations.

Exit Animation (animout) – Animation of current slide. Supports all animate.css animations.

Timeout (timeout) – Delay between slides in milliseconds (when autoplay is enabled).

Infinite Loop (loop) – Duplicate last and first items to get loop illusion.

Autoplay (autoplay) – Autoplay.

Lazyload (lazyload) – Lazy load images.

Navigation Arrows (nav) – Show next/prev buttons.

Pagination Bullets (dots) – Show pagination (dots).

Show Navigation Arrows on Mouseover? (hover) – Show next/prev buttons on mouseover only.

Pause on Mouseover? (pause) – Pause on mouseover.

Touch Drag (touch) – Enable touch drag.

Mouse Drag (mouse) – Enable mouse drag.

Extra Class Name (el_class) – Custom CSS class name.

CSS (css) – Css styles (supported by Visual Composer plugin).

The WP Gallery shortcode has been modified to support almost the same parameters this shortcode supports. So if you can update your old WP galleries with the parameters listed here.

Social Icons

Displays social buttons.

Usage example:

[rw_social_icons new_tab="true" no_follow="true" facebook="true" twitter="true" google_plus="true" youtube="true" pinterest="true" linkedin="true" rss="true"]

Size (size) – Buttons size. Supported values: small, medium, large.

Design (design) – Buttons design. Supported values: flat, material, 3d.

Style (style) – Buttons style. Supported values: simple, bordered, filled.

Shape (shape) – Buttons shape. Supported values: circle, rounded, square.

Color (color) – Buttons color. Supported values: light, dark, colored.

Alignment (align) – Buttons alignment. Supported values: left, center, right.

Open links in a new tab? (new_tab) – Open links in new browser tab.

Add Nofollow Tag? (no_follow) – Add NoFollow attribute to links.

Extra Class Name (el_class) – Custom CSS class name.

CSS (css) – Css styles (supported by Visual Composer plugin).

Supported social media channels: facebook, twitter, google_plus, youtube, pinterest, linkedin, rss, email, stumbleupon, reddit, instagram, soundcloud, github, skype, amazon, vimeo, behance, vk, telegram, paypal, steam.

Share Icons

Displays share icons.

Usage example:

[rw_share_icons new_tab="true" no_follow="true" facebook="true" twitter="true" google_plus="true" pinterest="true" linkedin="true" tumblr="true"]

Size (size) – Buttons size. Supported values: small, medium, large.

Design (design) – Buttons design. Supported values: flat, material, 3d.

Style (style) – Buttons style. Supported values: simple, bordered, filled.

Shape (shape) – Buttons shape. Supported values: circle, rounded, square.

Color (color) – Buttons color. Supported values: light, dark, colored.

Alignment (align) – Buttons alignment. Supported values: left, center, right.

Open links in a new tab? (new_tab) – Open links in new browser tab.

Add Nofollow Tag? (no_follow) – Add NoFollow attribute to links.

Extra Class Name (el_class) – Custom CSS class name.

CSS (css) – Css styles (supported by Visual Composer plugin).

Supported social media channels: facebook, twitter, google_plus, pinterest, linkedin, tumblr, digg, stumbleupon, reddit, skype, delicious, whatsapp, vk.

Section Title

Displays a section title just like the sidebar widget title.

Usage example:

[rw_section_title title=”Section Title” color="#dd3333"]

Title (title) – Section title.

Title Color (color) – Section color.

Extra Class Name (el_class) – Custom CSS class name.

CSS (css) – Css styles (supported by Visual Composer plugin).

Sidebar

Displays a WordPress sidebar.

Usage example:

[rw_sidebar sidebar=”sidebar-1”]

Sidebar (sidebar) – Sidebar ID. Leave empty to display the Primary Sidebar.

Extra Class Name (el_class) – Custom CSS class name.

CSS (css) – Css styles (supported by Visual Composer plugin).

Button

Displays a button.

Usage example:

[button anchor="Click Me" url="#" style="metro" color="blue-sky" new_tab="true" no_follow="true"]

Anchor (anchor) – Button text.

URL (url) – Button URL.

Size (size) – Button size. Supported values: medium, lg, sm.

Style (style) – Button style. Supported values: default, hero, metro, material.

Color (color) – Button background color scheme. Supported values: primary, default, success, info, warning, danger, flickr, sunset, juicy-orange, blue-sky, stripe, happiness, deep-space.

Full-Width? (block) – Make the button as wide as its container.

Open links in a new tab? (new_tab) – Open links in new browser tab.

Add Nofollow Tag? (no_follow) – Add NoFollow attribute to links.

Extra Class Name (el_class) – Custom CSS class name.

CSS (css) – Css styles (supported by Visual Composer plugin).

Highlight

Highlight a text.

Usage example:

[highlight color="#8c1515"]Lorem ipsum dolor sit amet, eam sonet nominati intellegebat te, eu vel novum nullam.[/highlight]

Content – Text to highlight.

Color – Highlight color. Supports Hex colors only.

Dropcap

Displays a dropcap.

Usage example:

[dropcap]Lorem ipsum dolor sit amet, eam sonet nominati intellegebat te, eu vel novum nullam.[/dropcap]

Content – Text to which a dropcap will be added.

Notification

Displays an alert (notification).

Usage example:

[notification style="success"]Lorem ipsum dolor sit amet, eam sonet nominati intellegebat te, eu vel novum nullam.[/notification]

Content – Notification text.

Style (style) – Notification style. Supported values: success, info, warning, danger.

Styled List

Displays a styled list.

Usage example:

[styledlist style="star"]
<ul>
	<li>Lorem ipsum dolor sit amet.</li>
	<li>Vis in amet partem laoreet.</li>
	<li>Quem necessitatibus per in.</li>
</ul>
[/styledlist]

Content – A HTML unordered list.

Style (style) – List style. Supported values: normal, star, yes, no.