Shortcodes

Brief about shortcodes

When a shortcode is inserted in a WordPress post or page, it is replaced with some other content. In other words, we instruct WordPress to find the macro that is in square brackets   [] and replace it with the appropriate dynamic content, which is produced by a PHP function.

Enable Jannah shortcodes

To let the shortcodes to be in action, you should install Jannah Extension plugin that comes with the theme for free. It's Required.

Go to Jannah > Install Plugins > Jannah Extensions plugin, and click on Activate.

Jannah Shortcodes

Jannah comes with a big variety of shortcodes that you always need them while editing process.
After installing the Jannah Extensions plugin, the TieLabs shortcode icons will appear as the following:

We’ll walk through what each of these shortcodes will do.

1. Boxes

Click on Box from the shortcodes menu, the popup window will appear

  1. Style - the box style, chose one from (Shadow, Info, Success, Warning, Error, Download, and Note).
  2. Alignment - Box Alignment left, right or center.
  3. Custom Class - if you want more customization by CSS, you can add a custom class and use it in your CSS file.
  4. Width - the width of the box, add the unit to the value e.g. 500px or 50%.
  5. Content - box content, your text goes here.
  6. After finishing, click on OK button to add the shortcode to the page content.

Boxes Live Preview

2. Buttons

Click on Button from the shortcodes menu, the popup window will appear

  1. Color - the button color, choose one from the available colors.
  2. Size - small, medium or Big.
  3. Link - the button link that will go to it.
  4. Text - the button text.
  5. Icon (use full Font Awesome name) - such as "fa fa-home", Font Awesome Cheatsheet
  6. Open the link in a new window/tab or open it in the same tab.
  7. Nofollow - "Nofollow" provides a way for webmasters to tell search engines "Don't follow this specific link." it's important for Untrusted content, Paid links and Crawl prioritization. More Info
  8. After finishing, click on OK button to add the button shortcode to your page content.

Buttons Live Preview

3. Tabs

Click on Tabs from the shortcodes menu, the popup window will appear

Choose the tabs style, Horizontal or Vertical then click on OK button to add the shortcode, the tabs shortcode will look like:

Replace the " Tab x Title" with your custom head title, and  "Tab x | Your Content" with the tab content.

Tabs Live Preview

4. Toggle Boxes

Click on Toggle Box from the shortcodes menu, the popup window will appear

  1. Title - the toggle box title.
  2. State - the default toggle box state (opened or closed).
  3. Content - the toggle box content.
  4. after finishing, click on OK button.

Toggle Live Preview

5. Content Slideshow

Locate the cursor pointer in any place in the page content, then click on the Content Slideshow from the shortcodes menu

The content slideshow shortcode will be added in the place of the cursor pointer

Put your content in each slide Instead of the   Slide x | Your Content in the [tie_slide] Slide 1 | Your Content [/tie_slide]. 
By default, we add three slides for you, you can add more slides by copy and paste the slide code  [tie_slide] Slide 1 | Your Content [/tie_slide] below of each [tie_slide]. Also, You can put any content you want, text, images, or video.

Content Slideshow Preview

6. Author Bio

Click on Author Box from the shortcodes menu, the popup window will appear

  1. Title - the author bio box title (most often is the author name).
  2. Author Image URL - the full author image URL.
  3. Content - the author bio content.
  4. After finishing click on OK button to add the author bio shortcode to the page content.

Author Bio Live Preview

7. Flickr

Click on Flickr from the shortcodes menu, the popup window will appear

  1. Account-ID - the account id, you can get it from http//idgettr.com.
  2. Number of Photos - the number of photos you want to display.
  3. Sorting - sort the photos by recent or random.
  4. After finishing click on OK button to add the Flickr shortcode to the page content.

Flickr Live Preview

8. Display Feeds

Click on Display Feeds from the shortcodes menu, the popup window will appear

  1. The feeds URL.
  2. The number of feeds you want to display.
  3. After finishing click on OK button to add the Feeds shortcode to the page content.

Feeds Live Preview

9. Tooltip

Click on Tooltip from the shortcodes menu, the popup window will appear

  1. Title - the text that you will hover over it to display the tooltip.
  2. Content - the text that will display in the tooltip bubble when you hover over the tooltip title.
  3. Direction - the tooltip direction, display on the top of the title, bottom, right, or left.
  4. After finishing click on OK button to add the tooltip shortcode to the page content.

Tooltip Live Preview

10. Share Buttons

Click on Share Buttons from the shortcodes menu, the popup window will appear

  1. Check the buttons you want to display.
  2. Twitter Follow Button - show/hide the twitter follow button.
  3. Twitter Username - used by Twitter follow button. Also, will display the following button.
  4. After finishing click on OK button to add the shortcode to the page content.

11. Dropcap

Select the  drop-cap  character then click on Dropcap from the shortcodes menu, the drop-cap shortcode will be added as the following:

Dropcap Live Preview

12. Tags Cloud

  1. Locate the Cursor Pointer.
  2. Click on Tags Cloud from the shortcodes menu, the Tags Cloud shortcodes will be added, as the following

Tags Cloud Live Preview

13. Highlight Text

Locate the cursor pointer at the place you want to add the highlighted text and then Click on Highlight Text from the shortcodes menu, the popup window will appear

  1. Color - choose the highlight color.
  2. Text - the text that will be in the highlight color.
  3. After finishing click on OK button to add the shortcode to the page content.

HighLight Text Live Preview

14. Padding

If you want to take some paddings for some of the content paragraphs, you can do that. You can control the padding Left/Right Values.
Click on Padding from the shortcodes menu, the popup window will appear

  1. Padding left amount, you can specify the amount by one of the CSS measurements units.
  2. Padding right amount.
  3. After finishing click on OK button to add the shortcode to the page content.

Padding Live Preview

15. Divider Line

Click on Divider Line from the shortcodes menu, the popup window will appear

  1. Style - choose the style of the divider line, Solid, Dashed, Normal, Double, or Dotted.
  2. Margin Top/Bottom - the margin space above/below the line.
  3. After finishing click on OK button to add the shortcode to the page content.

Divider Line Live Preview

16. Lists

Locate the cursor pointer at the place you want to add the list, from the shortcodes menu select  Lists → choose the list type, the list shortcodes will be added as the following:

tack more space between the opening and closing shortcode tags as the following:

and then click on the Bulleted list 

then add the menu items:

Lists Live Preview

17. Restrict Content

Select the content that you want to restrict for registered or guests only, from the shortcodes menu select Restrict Content → choose Registered or Gusts, the shortcode will be added around the content that you selected as the following:

Now, this line " Register on our site to get our new updates" will be displayed for Guests only. Also, you can restrict some of the content for Registered users only.

18. Columns

Click on Columns from the shortcodes menu and choose the layout you want, Jannah offers 9 columns layouts.

After clicking on the layout you want, the shortcode will be added to the place that you refer to by the cursor pointer as the following:

Then add your content instead of Add Content here statement in each column.

Columns Live Preview

19. Google Maps

Locate the cursor pointer at the place you want to add the map, Click on Google Maps from the shortcodes menu, the popup window will appear

Enter the Google Maps URLmore info about getting the map URL

Google Map Live Preview

20. Video

Click on Video from the shortcodes menu, the popup window will appear

  1. Video URL - the full video URL.
  2. Video width.
  3. Video height.
  4. After finishing click on OK button to add the shortcode to the page content.

Video Live Preview

21. Audio

Click on Audio from the shortcodes menu, the popup window will appear

Enter the MP3 or M4A or OGG file at the place that you refer to by the cursor pointer.

Audio Live Preview

22. Lightbox

Click on Lightbox from the shortcodes menu, the popup window will appear

  1. Full Image or Youtube/Vimeo Video URL.
  2. Title - will appear at the bottom of the opened lightbox model.
  3. Content - the links text, when clicking on it the lightbox will be opened.
  4. After finishing, click on OK button to add the shortcode to the page content.

23. Quote

Click on Quote from the shortcodes menu, the popup window will appear

  1. Content - the quote content.
  2. Alignment - the quote alignment, Left, Right, or Center.
  3. Auther - the quote author, will appear at the bottom of the quote.
  4. Style - the quote style, Dark, Light, or Simple.

Quotes Live Preview

24. Login Form


Click on Login Form from the shortcodes menu, the login shortcode will be added as the following image

Login Form Live Preview

25. Fullwidth Image

Click on Fullwidth Image from the shortcodes menu, the Fullwidth image shortcode will be added as the following

Then put the cursor pointer after the opening tag  [tie_full_img] and upload the image by clicking on Add Media button, upload a new image or select one from existing images.

Fullwidth Image Preview

26. Content Index

Content Index Shortcode is one of the coolest features that Jannah comes with, For more info check this article