How to Use WordPress Shortcodes in Pages or Posts with Example

wordpress shortcode tutorial
Are you creating a WordPress site and you have come across Shortcodes but have no idea how to use Shortcodes in a page or post?

This is a very common scenario for the majority of WordPress new users. Today, I want us to focus on how to use WordPress Shortcodes in a page or post.

WordPress Shortcodes

Most of my clients always ask me about Shortcodes after reading the documentation I write after creating websites with WordPress.

I would like to share the most basic approach to WordPress Shortcodes and how to use them for complete beginners.

What is a WordPress Shortcode?

Shortcode comprises of word or number words enclosed in corner brackets like this – [njengah]. This is one of the simplest examples of a WordPress Shortcode.

Shortcodes can be single like the example above or can have an opening and closing Shortcodes – [njengah]    ……[/njengah].

When Shortcodes exist in pairs you must make sure you have both the opening and the closing Shortcodes for it to work.  

Why Use WordPress Shortcodes?

Shortcodes are created by theme or WordPress plugin developers to help users who have little or no knowledge of coding to implement some layout modification or introduce functionality without writing a single line of code. 

Easy to Use

The basic idea of using Shortcodes is to save time and customize WordPress themes and plugins without messing with the code.

Ideally, Shortcodes are created by a specific plugin or theme authors and they give users the documentation on how to use them.

Example – Contact Form 7 Plugin

For instance, the most popular WordPress contact form plugin comes with a Shortcode that enables users to quickly publish the contact form on any page or post.

Where do you find Shortcodes?

WordPress Shortcodes can be found anywhere on your WordPress site, the most common places you can add Shortcodes include posts, pages, custom post types, and widgets. For this tutorial, we will focus on adding Shortcodes to pages and posts.

Adding Shortcodes to Page or Post

Basically, adding a Shortcode to a page or post is the same as the steps. You need to first identify the Shortcode you want to add to the WordPress page or post, then click on the menu to create a page or a post as shown in the image below:

WordPress Shortcodes

Adding Contact Form 7 Shortcode to a Page or Post

For this tutorial, we will be adding the Contact Form 7 shortcode to a page to publish the contact form. This tutorial presumes you know how to install and activate a WordPress plugin.

Install the Contact Form 7 Plugin & Create a Form

We need to first install this plugin – Contact Form 7, and then create a basic contact form by adding the name and saving the setting as shown in the image below:

WordPress Shortcode

Copy Shortcode to WordPress Page or Post

Now we need to copy the shortcode generated when we saved the form settings and paste it on our new WordPress page or post. You can add more information on the page as you wish before you publish the new page with the contact form WordPress shortcode. WordPress Shortcodes

 

It is also important to note that when adding WordPress shortcodes to a page or post, you need to ensure you are in the visual mode of the WordPress post or page editor.


WordPress Shortcode

Publish the Page or Post and Review

Save and publish the page to see the shortcode functionality on the live site. As you can see in the image below, the shortcode introduced to the page a new functionality of the contact form that works. This not only takes a few minutes to implement but also can be done by every WordPress user irrespective of their coding skills.

adding contact form 7 shortcode

Conclusion

WordPress shortcodes by design are meant to save time and make it easy for users to customize their sites without worries.

There are dozens of shortcodes that can be added to pages and posts. Nearly, all WordPress themes and plugins come with shortcode functionality and you can utilize them to customize and add unique features to your WordPress site. If you are not sure how a certain shortcode works, you may seek guidance and help from a WordPress developer.

Similar Articles

Comments are closed.