Wordpress development - creating a shortcode with parameters

Shortcodes are the method provided by Wordpress to embeed php code snippets into either a post or page. Since you are able to embeed custom php code into a publication therefore the possibilities are endless!

In this tutorial we are going to code a shortcode which renders a Table to the web browser; it can handle parameters.

Calling the add_shortcode function

Call the add_shortcode function and declare the callback function which runs when this shortcode is embeeded into a publication:

function handle_prices_table_shortcode($atts = [], $content = null){

//here the shortcode logic will be placed...

}

add_shortcode("prices_table","handle_prices_table_shortcode");

The above shortcode can be embeeded into a publication by inserting the text string [prices_table] into a publication's content.

Checking the shortcode type

Inside the function declaration add the next lines of php code:

if($content){
    return;
 }

In case the shortcode is used to enclose content then nothing is printed by the shortcode because the shortcode is not design to work with enclosed content. Shortcodes which enclose content are other type of shortcode and they won't be covered here.

Formatting parameters

When the users add parameters to the shortcode they can mistype the parameter and use uppercase letters like ParamOne instead of paramone; turning all parameters names into lowercase prevents the code from crashing.

Add the next lines of php code:

$formattedAtts = array_change_key_case(
      $atts,
      CASE_LOWER
  );

The previous php code transforms the parameters names into lowercase; the names of the parameters are saved as keys into an array.

Overriding default parameters

Chances are the user forgets to insert parameters. In that case the default parameters will be used:

$finalAtts = shortcode_atts(
    array(
        "header" => array("#","Fruit Name","Fruit Price"),
        "body" => array(
            array("Fruit 1","Price 1"),
            array("Fruit 2","Price 2")
        )
    ),
    $formattedAtts
);

The first array contains the default values; these values will be overriden with the values provided by the $formattedAtts array.

Creating the header of the table

The first parameter will contain the table header text strings; these values will be transformed into HTML markup as shown below:

$htmlMarkup = "<table class='table'>
       <thead><tr>";

       for($i = 0; $i <= count($finalAtts['header']); $i++ ){


          $htmlMarkup .= "<th>".$finalAtts['header'][$i]."</th>";


       }

    $htmlMarkup .= "</tr></thead><tbody>";

In short the previous code snippet is iterating over the values of the $finalAtts['header'] array.

Creating the body of the table

The next code snippet iterates over the values of the $finalAtts['body'] array and generates a row on each iteration:

 foreach($finalAtts['body'] as $index => $rowValues ){

        $htmlMarkup .= "<tr>";

        $num = $index + 1;

        $htmlMarkup .= "<td>".$num."</td>";

          foreach($rowValues as $record ){

            $htmlMarkup .= "<td>".$record."</td>";

          }

        $htmlMarkup .= "</tr>";

    }


    $htmlMarkup .= "</tbody>
  </table>";

Returning the HTML markup

At the bottom a return statement must be placed; remember that shortcodes must return some value always:

  return $htmlMarkup;

The following screenshot displays the table in action. In my case the Bootstrap CSS framework was added to the project so the look of your table will be a bit different: