6. Custom Shortcodes

This tutorial will explain what custom shortcodes are and how to create them.

Creating a New Custom Shortcode

In the backend of WordPress under the Memberium tab, click on the Custom Shortcodes tab. From there, choose the Add New button and title the shortcode you’re creating once the new page loads.

Click the Publish button on the righthand side of your screen. The shortcode will be now be displayed in bold under the title bar. You’ll see the membc_ beginning of the title for all custom codes.

Copy the shortcode, then paste it into the area you’d like. In the example, the shortcode is pasted into a test page. When you view the test page in a different browser you see just the title of the page but no other information because the custom shortcode is empty.

Adding Custom Parameters

You can now add attributes to your original shortcode by typing in an attribute code, which starts as {{atts:}}.

In the example, the attributes are listed as:

Color: {{atts: color}}

Size: {{atts: size}}

Be sure to add line breaks between your lines of information so that it’s easier to read later, then update the page.

Now, you can navigate to the test page, insert the attributes, and set the values within your custom shortcode. The example lists the color and size attributes within the shortcode, which reads as:

[membc_smart color=red size=large]

Update the page and then refresh your test browser page. The values for those attributes should now be listed on the test page.

Custom Shortcode Example

Custom shortcodes come in handy if you want to make it easy to change your content, especially if you want to change several pieces at the same time.

For example, the article How to Ghost an Image Block Based on Visitor Access explains how to change the way your content appears to different viewers. Custom shortcodes allow you to make accessible content viewable while inaccessible content will display as grayed out.

Instead of taking the time to write long HTML codes for every piece of content you want to be affected, the shortcode in the article will make it easy to add attributes.

By adding a conditional statement in shortcode, you can make content either viewable or not viewable. The example in the video shows the conditional statement as:

[memb_can_view_post id=123]

Color Block

[else_memb_can_view_post]

Ghosted Block

[/memb_can_view_post]

Above shortcode ensures viewers who have access to your content see the colored image that leads to the appropriate content, viewers, who do not have permission to will see a grayed out image that leads to the sales page.

Using Custom Shortcodes

To make the shortcode in the example easier to use, you can return to your shortcodes tab and add another shortcode by clicking the Add New button.

The example titles this new shortcode as MenuBlock, but you can name it whatever you wish. When you have titled your code, Publish the page and your custom code will display below the title bar. The example code is titled [membc_menublock].

To experiment with the image block ghosting covered in the article, you can copy the HTML listed in the text boxes and paste it into the textbox under the MenuBlock title bar.

Once you update the page, a custom shortcode is created, but it needs to be used somewhere for it to work.

In the article, there is a textbox of custom code at the bottom of the page that looks like this:

[membc_menublock postid=123 desc=”Learn how to craft your clear message” img=”/wp-content/uploads/2016/04/clear-message.jpg” pageurl=”/course-crafting-a-clear-message/” salesurl=”/order/crafting-a-clear-message/”]

This code can be copied and pasted into a page as a shortcode. The tutorial copies the code into the test page after erasing the previous color and size attributes. Update the page and refresh the test page to see a block that shows the information in the code.

If the code is correct, it will display a block that shows an image. The image contains a title (or post ID), URL link, and the colored or grayed out setting that depends on viewer access.

You can copy/paste several codes on the test page so that you can change the titles, URLs, and images of each block. This way, each of your blocks will display different information.

If you want to make changes to your shortcode’s features, you can change the original custom shortcode.