Building Shortcodes Overview

Solodev CMS 8 utilizes shortcodes to build dynamic, feature rich applications with maximum functionality and no coding knowledge required. Simply use our library of shortcodes to build your own Solodev CMS modules or create your own custom shortcodes to build your own custom modules inside of Solodev. This article will teach you how to build shortcodes of your own in Solodev CMS 8. Solodev allows you to turn any code or function into a shortcode by simply creating a function with the code you'd like inside of it. For example, let's say you want to build a shortcode so you can easily add Captcha validation to any form.

Create a file name custom-shortcodes.php in a folder called Shortcodes in the 'www' folder. This is where you will create your custom shortcodes.

The function below must be included in all shortcodes for Solodev CMS to recognize it.

function notify_solodev_shortcode(){
  $GLOBALS['has_shortcodes'] = 1;
}

So every shortcode function should begin as such passing in to arguments, the variable $atts (attributes) as well as $content which is set to null:

function foo_bar($atts, $content = null) {
  notify_solodev_shortcode(); 

Below we use a PHP function to create a shortcode for 'Captcha' for form validation. Pay close attention to each line of code.

function captcha($atts, $content = null){
  notify_solodev_shortcode(); 
  $captchaCode = "<?php Form_Parser::generateCaptcha2(); ?>";
  ob_start();
  eval("?>" . $captchaCode);
  $captchaCode = ob_get_contents();
  ob_end_clean();
  return do_shortcode($captchaCode);
}
add_shortcode('captcha', 'captcha');

We start off by naming the function, this is important, as it will also be the name of your shortcode. Below we have named the function/shortcode Captcha, passed in its attributes and called the required Solodev shortcode function.

function captcha($atts, $content = null){
  notify_solodev_shortcode(); 

Ok so we've named our shortcode/function and are ready to code our first shortcode. Let's begin by creating a PHP variable to store the captcha codes and call PHP's native output buffering function on the following line.

function captcha($atts, $content = null){
  notify_solodev_shortcode(); 
  $captchaCode = <?php Form_Parser::generateCaptcha2(); ?>";
  ob_start();

Now we need to generate the actual Captcha code on the front end and need to call an eval function on our new variable.

function captcha($atts, $content = null){
  notify_solodev_shortcode(); 
  $captchaCode = <?php Form_Parser::generateCaptcha2(); ?>";
  ob_start();
  eval("?>" . $captchaCode);

Now we need to get the contents of the generated Captcha Code and prepare it for front-end display when called.

function captcha($atts, $content = null){
  notify_solodev_shortcode(); 
  $captchaCode = "<?php Form_Parser::generateCaptcha2(); ?>";
  ob_start();
  eval("?>" . $captchaCode);
  $captchaCode = ob_get_contents();
  ob_end_clean();
  return do_shortcode($captchaCode);
}

So now you have updated the $captchaCode variable to get the contents of the output buffer and call a return statement to get the result. However, one more function is required to create the shortcode itself called directly after the function:

add_shortcode('captcha', 'captcha');

So now we've created a Captcha Shortcode. So now how do we use it? We save our PHP file and go to a Datatable where we'd like to add Captcha validation to a form. We go to the HTML form powering the datatable and add the [captcha] shortcode opening and closing tags at the end of the form as shown below.

<div class="form-group">
<label class="control-label" for="Name">Name</label>
<input type="text" class="form-control" name="name" id="name">
</div>

<div class="form-group">
<label class="control-label" for="Email">Email</label>
<input type="text" class="form-control" name="email" id="email">
</div>

<div class="form-group">
<label class="control-label" for="Phone">Phone</label>
<input type="text" class="form-control" name="phone" id="phone">
</div>

<div class="form-group">
<label class="control-label" for="Info">More Information</label>
<textarea class="form-control" id="info" name="info"></textarea>
</div>
[captcha]
 
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Submit">
</div>

Now the form will display on the front end as such:

 

 

0 Comments

Please sign in to leave a comment.
Have more questions? Submit a request