If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

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.

wordpress_shortcodes_ using1

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:
  2. [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.

    wordpress_shortcodes_ using2

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

  4. [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"] 
    

    wordpress_shortcodes_ using3

  5. 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:

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

    wordpress_shortcodes_ using4

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

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

    wordpress_shortcodes_ using5

  9. 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):

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

    wordpress_shortcodes_ using6

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

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

    wordpress_shortcodes_ using7

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

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

    wordpress_shortcodes_ using8

  15. Comments displays the latest comments:

  16. [recent_comments num="5"]
    

    wordpress_shortcodes_ using9

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

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

    wordpress_shortcodes_ using10

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

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

    wordpress_shortcodes_ using11

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

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

    wordpress_shortcodes_ using12

  23. 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:

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

    wordpress_shortcodes_ using13

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

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

    wordpress_shortcodes_ using14

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

  28. [categories class="plus"]
    

    wordpress_shortcodes_ using15

  29. Tags shortcode is used to display the tags:

  30. [tags]
    

    wordpress_shortcodes_ using16

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

  32. [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.

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

  34. [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]
    
  35. Multiple Columns (75% / 25%, etc.) shortcodes are used to simplify content forming by inserting the most used grid variants:

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

    wordpress_shortcodes_ using17

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

  38. [label style="default"]label[/label]
    
  39. Highlight is used to highlight a chosen text fragment:

  40. [highlight]Text[/highlight]
    
  41. Button is used to insert a button with various display settings (style, size, icon, etc.):

  42. [button text="Text" link="#" style="default" size="normal" target="_self" display="inline" icon="no"] 
    
  43. Dropcap is used to display a dropped capital letter:

  44. [dropcap]L[/dropcap] 
    
  45. Blockquote is used to display a quotation:

  46. [blockquote] Text... [/blockquote]
    
  47. 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:

  48. [check_list] List here ... [/check_list] 
    
  49. 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):

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

    wordpress_shortcodes_ using18

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

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

    wordpress_shortcodes_ using19

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

  54. [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]
    

    wordpress_shortcodes_ using20

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

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

    wordpress_shortcodes_ using21

  57. Table is used to display a table:

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

    wordpress_shortcodes_ using22

  59. 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:

  60. [map src="#" width="300" height="200"]
    
  61. 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

WordPress. How to use shortcodes (based on Cherry 3.x), 5.0 out of 5 based on 1 rating
  • This is a nice little plugin to consolidate all these different shortcodes.