WordPress. How to use shortcodes (based on Cherry 3.x)

This tutorial is going to show you how to use shortcodes in your WordPress template.

WordPress. How to use shortcodes

A shortcode is a powerful content building tool http://codex.wordpress.org/Shortcode. In order to use the ones that come with your template:

Make sure to download and install Cherry plugin to use these shortcodes.

1. Open  a post/page in your WordPress admin panel.

2. Set the editing mode to Visual. Click the button for the shortcodes. Then select the shortcode you want to insert.

All available shortcodes are conditionally divided into these groups:

• Dynamic – used for content output (posts, custom post types, tags, etc.);

• Grid Columns – various columns for grid forming;

• Elements – additional elements for content forming;

• Other – additional elements for advanced/complex content forming.

Let’s take a closer look at the major ones:

1. Post Grid displays standard and custom posts in table view with a configurable number of columns and rows. When selected, it opens up a lightbox with shortcode options. Each of them comes with a short description, which makes everything quite self-explanatory. Click the Insert Shortcode button when you’ve finished setting the options to your liking. It will generate a shortcode like this:

[posts_grid columns="3" rows="3" order_by="date" order="DESC" thumb_width="100" thumb_height="100" meta="yes"
 excerpt_count="20" link="yes" link_text="more" custom_class="custom_class"]

Go ahead and click Update to save the shortcode, then click Preview Changes to see how it looks from the front end of your site.



2. Post List displays standard and custom posts as on the blog page:

[posts_list numb="3" thumbs="large" thumb_width="100" thumb_height="100" post_content="excerpt" order_by="date"
 order="DESC" link="yes" link_text="more" tags="yes" custom_class="custom_class"] 



3. Mini Post Grid is a more compact version of [post_grid] shortcode. It displays the images of standard and custom posts with a configurable image size:

[mini_posts_grid numb="3" thumbs="small" thumb_width="100" thumb_height="100" order_by="date" order="DESC" 
align="left"]



4. Mini Post List is a more compact version of [posts_list] shortcode. Displays standard and custom posts in list view:

[mini_posts_list numb="3" thumbs="small" thumb_width="100" thumb_height="100" meta="yes" order_by="date" 
order="DESC" excerpt_count="20"] 



5. Recent Posts displays the recent posts which can be configured with the following options (post type, posts amount, post format, excerpt length, button title and others):

[recent_posts num="3" post_format="standard" meta="false" thumb="true" excerpt_count="20"]



6. Recent Testimonials: displays the specified number of Testimonials custom post type posts, includes the ability to show/hide posts images and manage word count:

[recenttesti num="2" thumb="true"]



7. Banner used to display a block with static text and/or image, title, link, etc:

[banner img="#" banner_link="#" title="Title" text="Text" btn_text="Button" target="_self"]



8. Comments displays the latest comments:

[recent_comments num="5"]



9. Post Cycle displays different posts in mini-slider view:

[post_cycle num="5" type="portfolio" meta="false" thumb="true" thumb_width="50" thumb_height="50" effect="slide"]



10. Carousel displays the posts in carousel view, has various additional options:

[carousel num="5" type="blog" thumb="true" thumb_width="120" thumb_height="50" date="yes" author="yes"
 min_items="3"]



11. Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area:

[roundabout title="Title" num="3" type="blog"]



12. Service Box is used to display information blocks that include title, icon, text, button. The main feature of this shortcode is the existence of pre-installed icons. To get the icons to display, you need to upload your custom icon1.png, icon2.png, icon3.png, etc to the wp_content/themes/your_theme/images folder on the FTP:

[service_box title="Title" icon="icon1" text="Your text" btn_text="Button" btn_link="#" btn_size="normal"
 target="_self"]



13. Hero unit is used to display major website information, promotions, etc. It is usually located on the main website page, right after the header:

[hero_unit title="Title" text="Text" btn_text="Button" btn_link="#" btn_style="default" btn_size="normal"
 target="_self"]



14. Categories shortcode is used to display categories (both from blog posts and custom posts):

[categories class="plus"]



15. Tags shortcode is used to display the tags:

[tags]



16. Grid Columns (span1-12) is used to form structural grid elements, where # is a number from 1 to 12, which defines the element width:

[span#] [/span#]

Note, while forming a grid you should "wrap" grid elements into the [row] shortcode:

[row] [span6] Your Content... [/span6] [span6] t... [/span6] [/row]

Under the Page Attributes panel on the right, Fullwidth Page should be selected for Template.

17. Fluid Columns (one_half, one_third…) is used to form structural grid elements, their width is delineated with %:

[one_half] [/one_half] 

Note, while forming a fluid grid you should "wrap" grid elements into [row_fluid] shortcode:

[row_fluid] [five_sixth] Your content... [/five_sixth] [one_sixth... [/one_sixth] [/row_fluid]

18. Multiple Columns (75% / 25%, etc.) shortcodes are used to simplify content forming by inserting the most used grid variants:

[row]
[span8] t... [/span8] [span4] Your content... [/span4]
[/row]



19. Label is used to display a label with pre-defined styling:

[label style="default"]label[/label]

20. Highlight is used to highlight a chosen text fragment:

[highlight]Text[/highlight]

21. Button is used to insert a button with various display settings (style, size, icon, etc.):

[button text="Text" link="#" style="default" size="normal" target="_self" display="inline" icon="no"] 

22. Dropcap is used to display a dropped capital letter:

[dropcap]L[/dropcap] 

23. Blockquote is used to display a quotation:

[blockquote] Text... [/blockquote]

24. The Lists  shortcodes set (unstyled, check, check2, arrow, arrow2, star, plus, minus) is used to display various lists stylizations. Each shortcode implements its own marker for the list items:

[check_list] List here ... [/check_list] 

25. Video Preview is used to insert a video preview, which can be loaded from the off-site services (youtube, vimeo) or from your website (self hosted):

[video_preview post_url="http://demolink.org/blog/video-post-type/" title="yes" date="yes" author="yes"]



26. The Alert Boxes (message, info, success, danger) shortcodes set is used to display service messages:

[alert_box style="message" close="yes"]Hello, World![/alert_box]



27. Tabs shortcode is used to display content arranged into tabs. Tabs may contain static and dynamic content:

[tabs tab1="Title #1" tab2="Title #2" tab3="Title #3"] 
   [tab1] Tab 1 content... [/tab1] 
   [tab2] Tab 2 content... [/tab2] 
   [tab3] Tab 3 content... [/tab3]
[/tabs]



28. Accordion is used to display an accordion – fold up panels with titles:

[accordions] 
    [accordion title="title1" visible="yes"] tab content [/accordion] 
    [accordion title="title2"] another content tab [/accordion] 
[/accordions]



29. Table is used to display a table:

[table td1="#" td2="Title" td3="Value"] [td1] 1 [/td1] [td2] some title 1 [/td2] [td3] some value 1 [/td3] [/table]



30. Google Map is used to display Google maps. To make the shortcode work, you need to insert the desired location link from https://maps.google.com:

[map src="#" width="300" height="200"]

31. For the shortcodes not mentioned in this tutorial, please see the documentation that comes with your particular template. The number of shortcodes may vary depending on the template.

Feel free to check the detailed video tutorial below:

WordPress. How to use shortcodes