How to Create Shortcodes in Your WordPress?

Note: This document will show you how to make a homepage in Magee Theme with shortcodes.

The proliferation of WordPress sites throughout the Web has delivered some

amazing page designs that are striking in their originality, helping to create a

unique web presence.

A general benefit of WordPress is that it allows people with little code experience

the opportunity to load a theme, install some plugins and deliver a competent

and visually appealing website.

However, if you aspire to creating a unique web page design, you can learn to

customise your page designs. Now we are going to share how to createa a

wonderful homepage with shortcodes.

Why You Need WordPress Shortcodes?

When you write content for your website, chances are, you’ll use a lot of the

same HTML and CSS to include special functionality on specific pages. The

problem is, repeating this code, day in and day out, can be tedious and prone to

errors. How can you avoid this heart-ache?

There’s a WordPress feature called shortcodes, and when you implement them,

you’ll be able to call regularly used pieces of code in seconds while decreasing

the chance of mistakes.

What Are WordPress Shortcodes?

Shortcodes are just that, short bits of code that cut down on repetitive strings

of HTML, and can be inserted anywhere in your site. For instance, you could

create a shortcode to insert a call to action button, or to display a Google

AdSense ad, or to create 3 columns of content without any HTML markup.

What do shortcodes look like?

A shortcode is a descriptive bit of text wrapped in square brackets, e.g.

[adsense] – which could be dropped into your WordPress post to display a block

of Google ads. The question is, how does this save you considerable time?

Take a look at this button code I made for a client:

<a class="button" href="http://www.google.com"><span>Google</span></a>

Using that as raw code, my client would have to remember to:

assign a class to a link

wrap the button in a span tag

Think about it…

Every time my client needed a button, she would have to remember to do those

two specific steps, which, for non-technical people, is like asking them to get a

root canal without an injection.

Generally, shortcode design templates are placed inside the page editor and

you can add or modify with necessary data to generate custom designs.

The following image shows a shortcode used for creating a design with tabs.

How to Create a Wonderful Homepage with Shortcodes?

As is known to WordPress web developers, shortcode is quite useful. Almost

everything they need, they can insert shortcode to add to the page. But to some

website beginners, shortcode is a little difficult to use. Then let I’ll l show you

how to make a homepage with Magee shortcodes.

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.

After that, select the silder you want to insert to your homepage. In the editor,

you can see the code appear like this:

[slider id='1601' ]

You have added a slider to your homepage.

2. Service section

The next important section in your homepage is the service or product section.

You can put one or two or more rows of items in the homepage.

A). add column

Three columns are recommended when you edit service section. 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.

Tip: before insert columns, you need to add [row][/row] code.

B) add content to the column

Next, add service icon, and content, link.

You will get codes like this:

[row]

[column col_sm='4'] [service title='FEATURE 1' icon='fa-leaf'

link='#' ]your content.[/service] [/column]

---(two and three columns here)

[/row]

3. Similarly, you can add other sections like slogan, testimonial,

portfolios, and more to your homepage. Why not do it yourself in this

Magee now?

Check out the example here:

https://www.mageewp.com/demo/?theme=magee