How to Create a Homepage with Shortcode

Shortcode is quite useful. With the shortcodes, we can insert almost everything we need to our pages and posts. As people can only find shortcodes in premium WordPress themes, a lot of WordPress users do not know what they are or how to use them when they purchase a new theme. So, bearing this in mind, we write this article to show how to create a homepage with shortcode.

This article will go through some common sections in the homepage including slider, service or product, slogan, and portfolio sections. Hope they can help you understand how to use shortcodes.

Steps to Insert Shortcode to a Page

1. Insert slider

In the editor, hit the Shortcode icon, select slider, and then select the slider you published before. Hit Insert shortcode at the bottom.

Now, in the editor, you can see a code like this appear:

[slider id='1601' ] 

Now you have inserted a slider to your homepage successfully.

2. Slogan

Select Slogan in the shortcode panel, input necessary content including button text, button link, and your slogan texts. The css content is not necessary. Hit Insert shortcode at the bottom.

If you would like to box the slogan, select the Box in the shortcodes before you select slogan in the shortcodes.

After you finish all the operations, the code like this should appear in the editor:

[boxed] [slogan btn_text='BUY ME' btn_link='https://www.example.com/' ] Your Content [/slogan] [/boxed]

3. Service

Before create this section, you need set some columns according to your items number. Here, you can set 1 to 4 columns. Below is how.

Take three columns for example, select Column in the shortcodes, then in the medium grid, set 4/12 (Midium grid>768px represents most displays, 4 each column’s width and 12 the whole width). Click on Insert shortcode. Add two more columns in this way.

Next, add content to the columns. Select Service in shortcodes, then add an icon, add your service content. Hit Insert shortcode at last. Add two items like this.

After the service section is finishes, you should get code like this:

[section background_color='green' background_repeat='repeat' ] [boxed] [column col_sm='4'] [service title='FEATURE 1' icon='fa-leaf' link='#' ] your content. [/service] [/column] [column col_sm='4'] [service title='FEATURE 2' icon='fa-star-half-empty' link='#' ] your content. [/service] [/column] [column col_sm='4'] [service title='FEATURE 3' icon='fa-gift' link='#' ] your content. [/service] [/column] [/boxed] [/section] 

Tip: to make your page look better, you’d better use Section and Boxed shortcodes, though you do not have to do that.

3. Portfolio

Select Portfolio in the shortcodes, then set list number, column number and select portfolio category. Hit Insert shortcode in the end.

Then you will get code in the editor like this:

[section padding='40px 0'] [boxed] [portfolio num='4' columns='4' ] [/boxed] [/section]

4. Other sections

Similarly, you can add other sections to your homepage, and then add items to the section. Using some shortcodes together is the key to create the homepage. Hope this article can give you some clues to use the shortcodes.