How to Create Your First Shortcode in Solodev

With Solodev CMS, users can utilize shortcodes to build dynamic, feature rich applications with maximum functionality and little coding knowledge. Solodev CMS 9 allows developers to create their own custom shortcodes that can be leveraged to create custom modules inside Solodev. In this article, we'll show how developers can to build custom shortcodes in Solodev 9. As an example, we will build a blockquote short code. 

Solodev uses square brackets [] to insert dynamic content created with PHP. With shortcodes, developers and non-developers alike can insert specific features such as recent blog posts, galleries, sliders and so much more. A shortcode basically looks like this:

[recent_posts]

Types of shortcodes

There are two types of shortcodes:

• Self-closing shortcodes: A self-closing shortcode is a content enclosed in square brackets. For example, a [recent_posts] or a [image_gallery] is a self-closing shortcode. Whenever you put this shortcode inside a page, it will display the content inside the square brackets. It is similiar to an <img /> tag. In HTML, the <img /> tag is empty; we specify a URL via the src attribute and the tag displays an image. It doesn't need a closing tag. Similarly, a self-closing shortcode can take attributes but it doesn't need a closing tag.
• Enclosing shortcodes: Enclosing shortcodes have a closing tags: [shortcode]your content here[/shortcode]. Enclosing shortcodes are needed when the content inside the opening and closing tags need to be manipulated. For example, for our blockquote example, the content inside the blockquote needs to be changed for each blockquote so it needs to be enclosed in tags like this: [blockquote]blockquote content to be manipulated[/blockquote]. We'll show you a step-by-step tutorial on how to do this below.

Note: $content = null registers the shortcode as an enclosing type. The $content variable inside your handler function changes the output based on the content it holds.

Now that we explained the types of shortcodes, let's get to building a sample shortcode in Solodev.

Step 1 - Create a PHP short code file 

While you can give your file any name you want, we recommend creating a file called shortcodes.php and store all your shortcode functions  . You can put the shortcodes.php file inside the _ folder under the www folder. Depending on the theme you use, there may be a php folder inside the www folder but if there is not, you can either create a php folder or create another folder to put your shortcodes file in:

In the shortcodes.php file, add the opening and closing tags for PHP. All the functions will be put inside these opening and closing PHP tags:

<?php // shortcode functions go here ?>

Create a shortcode function called ‘blockquote’. The name of the function is the name of the shortcode. In the code below, attributes are passed to the function as arguments and the required Solodev function is called. The blockquote shortcode takes one argument name. We do this by creating a variable called quote_author and passing its contents as an argument. When the [blockquote name="Author name"]Quote[/blockquote] shortcode is put on a page, whatever is put inside the name string will be passed on the function and will be displayed inside the </p> <p> tag with the class of .quote-author. 

function blockquote($atts, $content = null){ notify_solodev_shortcode(); $quote_author = $atts['name']; $blockquote .= '<div class="blockquote"> <i class="fa fa-quote-left fa-2x '. $sClasses.'"></i> <p class="lead mt-4 mb-4">'.$content.'</p> <p class="quote-author">'.$quote_author.'</p> </div>'; return $blockquote; } add_shortcode('blockquote', 'blockquote');

When the $content value is set to null, users can set the content within the shortcode using the following format:

[blockquote]

Quote goes here

[/blockquote]

The $atts, which is short for "attributes", is an array of attributes that allow users to set strings and variables when using shortcodes.

Step 2 – Map the shortcode file to the website

In order for the shortcodes to work on Solodev, we need to map the shortcodes to the website. This can be easily done by by following the steps below:

• Go to the dashboard and click Settings to bring up the Settings modal. 

• Click the arrow to the right of Advanced to expand the tab. 

• Under the ‘Custom Shortcodes File’ section click Browse. Select the shortcodes.php file. Click Submit. 

Using the shortcode

To test the shortcode, you can open any template or HTML file and put the [blockquote] [/blockquote] shortcode with custom content inside. As an example, we have a sample .tpl file created for testimonials. Inside this file, we used Bootstrap to create layout structure and styling:

When we go to a page, in our case, testimonials.stml page, and insert the testimonials.tpl file inside, we get this result with the FontAwesome blockquote icon, the quote and the quote author at the bottom:

In this article, we showed you how to create a custom shortcode in Solodev. For built-in shortcodes in Solodev and other information, you can refer to our help section.