Shortcodes Tutorials

Portfolios

Porfolio Five   Onetake Pro WordPress Theme Demo
Shortcode Portfolios is used to show Portfolios in pages, posts or section content where you want to display. To use the Shortcode Portfolios, let’s begin with creating Portfolios.

  • Create Portfolio Categories
  • Create Portfolios for created Categories
  • Insert Shortcode of Portfolios

Step 1. Create Portfolio Categories

In your wordpress admin, go to Portfolio > Categories > Add New Category, type the title Name, Descriptions for your category and then click Add New Category button. You can create one more categories in this way.

20150531211301

Step 2. Create Portfolios for created Categories

In your wordpress admin, go to  Portfolio  > Add New, you should see the pictures like below.

Add New Post ‹ HOOTHEME DEMO — WordPress

Name the Portfolio title, write descriptions for the portfolio, Select a category created earlier.

Add New Post ‹ HOOTHEME DEMO — WordPress2

Add Featured Image and then add Gallery.

Edit Post ‹ HOOTHEME DEMO — WordPress3

Write information about Attributes.

When the above options are done, click Publish button.

You need to create more portfolios by the above process.

Step 3. Use Shortcode Portfolios

Go to the editors of page, post or section content, click the Shortcode button above the Editors. Then select Shortcode Portfolios.

fox(05-31-22-58-42)(1)

Set the options of Portfolios, then click Insert Shortcodes button.

fox(05-31-22-58-42)(1)

Team Member

screenshot-demo.hoosoft.com 2015-05-29 18-07-27 (1) - hao123

We need to list the Team Members in our site sometimes, just like the picture above. How to use Team Member Shortcodes? You can use it with another Shortcode Column. Follow these steps.

Step 1. Click the Shortcodes button above each editor, it will pop up a lightbox of short codes, then select Team Member.

20150320225701

20150320225848

Fill in the information of the Team Member, then click Insert Shortcode button.

screenshot-demo.imylife.com 2015-05-29 22-49-33 - hao123

Step 2. Cut and paste the inserted Team Member Shortcode content to Shortcodes Columns.

1. Cut the inserted Team Member Shortcode content.

2. Select Shortcodes Columns.

3. Paste the Team Member shortcode to the Text of Columns.

20150529162142

20150529162201

Finally, click Insert Shortcode button. You can Preview it before Publish it.

fox(05-30-17-19-(05-31-07-54-03)(2)

Google Maps

Nowadays, Google Maps is very useful and it offers powerful, user-friendly mapping technology and local business information — including business locations, contact information, and driving directions.

Here, we are talking about how to embed Google Map Using Shortcodes by HooThemes

You can add a Google Map to posts, pages or any sections of our themes by Shortcodes.

In the dashboard, go to Editors of posts, pages or sections, click the Shortcodes button on the top of the Editor.

20150513230220

20150513230702

20150513231433

 

 

20150513232932

Once all the settings are done, click Insert Shortcodes button. You will see the map looks like below.

20150513233800

Service

Shortcode of Service are available by HooThemes. With the Service, you can present and explain the features and functions of your products clearly, thus it will make your product outstanding and highly attractive to buyers. Besides, you can use the Service to introduce your business scope etc. Service has powerful functions and it is easy to use. The only thing you need to do is to insert the shortcode Service to the Editor of the Themes by HooThemes.

Step 1 . In your WordPress admin, go to the Editor of post, page, section content etc, click the shortcodes button.

Step 2. Select Service in the lightbox.

20150320225848

 

Step 3. Type a title in Title and add a Read more link, choose color for the icons.

20150418001933

Step 4. Select the Icons you like to display, fill in the content in Text, select the animation types for Icons, Titles and Content, then select the Speed of Animation(form 0.1 to 3).

20150418002759

 

20150418003200

There are many Animation Type for you to choose.

20150418003501

Step 5. Click Insert Shortcodes. You can add more Service by repeating the above process.

20150418004423

Dropcap

drop-caps

What is Dropcap? See the features of Dropcap.

  • It is the first letter of a paragragh.
  • It is much bigger than the other words of the paragragh.
  • It drops down two or more lines of the text.

With our shortcode, you can use the Dropcap without typing any code.

First, go to the Editor of post, page, section content etc, click the shortcode button on the top of the Editor box.

Select Dropcap in the lightbox.

20150417165645

 

Then type the first letter of your paragraph in the Dropcap Letter, select the color for the letter you type.

20150417165938

Next, choose Yes or No for Boxed Dropcap, type the radius of the letter.

After all these done, click Insert Shortcode button to insert the code to the Editor box.

20150417171018

Button

You may need to use buttons in your site. We have the shortcodes for creating Buttons, you can easily insert buttons in your site – page/post editor, section content,sidebars,etc.

In your wordpress admin, go to the Editors of your page, post or section content,etc, click the Shortcodes button on the top of the Editors.

20150320225701

Then in the lightbox, choose Button.

33

Fill in your  Button Text and the Link you want to display. select _blank and _self for Target(_blank means open link in new window). Select any colors you like for your buttons.

44

For the Button Size, you can select normal, medium and large. Finally, click Insert Shortcodes button.

55

Alert

Alerts are some elements that you can drop into a form or inline on a page to show information,success, warnings or error. The alert displays an alert box with a specified message and the alert box is often used if you want to make sure information comes through to the user.

The shortcodes for Alert are available by HooThemes. You can use them easily.

1) First, in the wordpress admin, go to the Editor of Pages or Posts, click the Shortcodes button on the top of the Editor box.

20150320225848

2) In the lightbox, select Alert. Then choose the Alert Box Type, you can choose info, success warning and error to show in your site.

2015041113344

3) Click the Insert Shortcode button, the codes will be inserted to the Editor box. Then click Preview, it will show like below.

20150411134456

(Note:  The Alert prevents the user from accessing other parts of the page until the box is closed, make sure not to overuse it.)

Accordion

As we know, Shortcodes are very useful and powerful feature of  Wordpress, they allow you to add various functionality into posts, pages, and widgets without actually writing any code. For our HooThemes, there are many powerful wordpress shortcodes available. Here we’d like to tell you how to use them one by one.

1. How to use Shortcode Accordion

Accordion is extremely useful for organizing and displaying large amounts of content without cluttering the page, and make it easy for the user to find what they’re looking for.

You can easily add accordions into your posts and pages using the accordion shortcode.

1) In your wordpress admin, go to the Editor of Pages or Posts, you should see Shortcodes button on the top of the Editor box.

20150320225701

2) Click the Shortcodes button, it will pop up a lightbox, select Accordion.

20150320225848

3) Add the Title and Text Content, then click Add New Accordion Item, add another Title and Text content. Repeat this process as many times as you like and then click Insert Shortcode button.

20150321201656

4) Preview the page, it’ll show as below.

20150321203542

Contact Form

It’s easy to use Contact Form Shortcode to add Contact Form for your site page.

single page contact form

Step 1.  Go to the Editor of your Home Page sections, Click the Shortcodes button above the Editor, then select Contact Form in the lightbox.

20150710124856

Step 2. Fill out the settings of the Contact Form.

contact form1

contact2

Step 3. Click Add New Field Item button to add more items. Then click Insert Shortcode button.

contact form3

3 comments to “Shortcodes Tutorials”

You can leave a reply or Trackback this post.
    • You can try to change to another e-mail address, if the problem persists, please send your wp-admin details to support[at]hoosoft.com, we will check it for you.

  1. Hi there,

    I am curious about what was the solution to this issue. I am not receiving any mails: this is the shortcode I am using.
    I tried different email addresses:

    [contact_form class=""id="" receiver_email="alexca@learnwings.nl" color="#ffffff" border_color="#dd3333" button_text="Send it"][contact_form_field type="text" placeholder="Subject" width="full" required="yes"][/contact_form_field][contact_form_field type="textarea" placeholder="Your text" width="full" required="yes"][/contact_form_field][contact_form_field type="email" placeholder="Your e-mail" width="full" required="yes"][/contact_form_field][contact_form_field type="text" placeholder="Your name" width="full" required="yes"][/contact_form_field][/contact_form]

    Thanks, best regards,
    Al

You must be logged in to post a comment.