Wordpress development - shortcodes and arrays as parameters

When inserting a shortcode into the Wordpress editor we can use strings or numbers as parameters; but what if we want to pass in an array as a parameter? How can we code a shortcode which handles arrays as parameters?

In this article I'll cover how to code a shortcode which receives arrays as parameters as well as how to pass in an array to a shortcode in the Wordpress editor.

Calling the add_shortcode function

First the add_shortcode must be called to configure a new shortcode; this function requires two parameters:

function rch_handle_render_table( $atts = [] ){}

 //shortcode logic will be here...

}
add_shortcode("render_table","rch_handle_render_table");

Note how the name of the function is prefix; this is important to prevent collisions with other functions from other plugins.

Formatting the array of parameters

Sometimes users insert a shortcode and when adding the parameters the user mistypes the parameters; let's say the name of the parameter is paramone and the user types in ParamOne which contains uppercases. That's the reason why the names of the parameters must be turned into lowercase so that the php code does not crash.

See the code below:

    $formattedAtts = array_change_key_case(
          $atts,
          CASE_LOWER
    );

The $atts array holds the parameters and the names of the parameters are the keys.

Unserializing the arrays passed in as parameters

Passing in the array directly into the shortcode when using the Wordpress editor is not possible; you must transform the array into a text string with an special format; that process is called serialization.

When the parameters are received they must be unserialized so that they can be used:

  if(isset($formattedAtts['header'])){

        $formattedAtts['header'] = unserialize($formattedAtts['header']);

    }

     if(isset($formattedAtts['body'])){

        $formattedAtts['body'] = unserialize($formattedAtts['body']);

    }

Overwriting the default parameters

Shortcodes must be able to work is case the parameters ain't passed in; therefore default parameters must be declared and overwritten only if the user passes in the required parameters:

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

The shortcode_atts function call replaces the default parameters with the corresponding parameters passed in. The first array represents the default parameters.

Generating the header of the table

In this case the shortcode displays a table; the php code necessary to generate the table header looks as follows:

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

    foreach($finalAtts['header'] as $value ){

        $htmlMarkup .=  "<th>".$value."</th>";
    }

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


    $htmlMarkup .= "<tbody>";

Generating the table body

The php code necessary to render the body of the table looks as shown below:

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

        $rowNumber = $index + 1;

        $htmlMarkup .= "<tr><td>".$rowNumber."</td>";

        foreach($singlerow as $value ){

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

        }

        $htmlMarkup .= "</tr>";
    }

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

Inserting the shortcode

Open the Wordpress block editor and insert the shortcode by using the shortcode block.

Below appears an screenshot of the shortcode with both parameters being used. Note how the values for the parameters are serialized text strings:

Remember that the values for the parameters must be arrays and also don't forget that there are many free online tools where you can serialize your arrays in a few clicks.

Below appears an screenshot of the render_table shortcode in action: