Add Your Own Shortcode in WordPress

How often have you been facing this situation?

You are working on a project and for the 10th time the same task appears, something maybe like “Make this paragraph bold, font size 24rem, color like this, padding here and there, put it in a box with border and shadow, etc…”, all sorts of specific rules that you will have to implement again and again, or at least set the correct markup around the text so that CSS can act on it.

How about creating your own shortcode and telling the admin next time to just enclose their text with it, and everything will be formatted like magic?

This is only a very simple scenario of what can actually been done, of course.

But let’s not waste any time.

Simple shortcode

It will output the copyright with your company name and the current year.

You can use this shortcode in different ways:

1. Without parameters:
   [jemarea-comp-cpr]
   In this case the output will just be a medium size
   
   © My Company 2023
2. With a custom company name:
   [jemarea-comp-cpr company="Green House Protection"]
   This would be the result:
   
   © Green House Protection 2023
3. Adding a text size parameter:
   [jemarea-comp-cpr company="Green House Protection" size="big"]
   Size could be “small”, “medium” (default), of “big”. The result for this one:
   
   © Green House Protection 2023

And here the code that you would add to your functions.php:

/* SHORTCODE: COMPANY COPY RIGHT
* USAGE: [jemarea-comp-cpr company="Best Company"]
* generates copyright for your company
*/

add_shortcode('jemarea-comp-cpr','company_copyright');
function company_copyright( $atts ) {

  extract( shortcode_atts( array(

    'company' => 'My Company',
    'size' => 'medium'

  ), $atts ) );

  switch( $size ) {

    case "small": $fontsize = 'font-size:12px;';
      break;
    case "big"  : $fontsize = 'font-size:28px;';
      break;
    default     : $fontsize = 'font-size:20px';

  }

  $text = '<div style="'.$fontsize.'color:#000;">&copy; ' . $company . ' ' . date("Y") . '</div>';

  return $text;

}

Enclosing Shortcode

Here we can use the situation that I was describing to you at the top of this article.

So let’s describe the task again:

• Text has to be bold and 24rem
• Color of text please #2875bd
• put the whole in a box, background #f2f2f2
• border 1px, solid, color: #888
• simple, light box shadow
• add some padding

Good, we know all we have to do is to create a div enclosing the text, then defining a class and the corresponding CSS for this div.

For the purpose of this article I will add the CSS inline instead of writing it into my CSS file. You can choose what is best for you.

/**
* SHORTCODE : FORMATTED TEXT BOX
*
* USAGE: [jemarea-special-box]some-text-here[/jemarea-special-box]
*
*/
function jemarea_special_box( $atts, $content = null ) {

  extract( shortcode_atts( array(

    'background' 	=> '#f2f2f2',
    'color'		=> '#2875bd',
    'size' 		=> 'medium'

  ), $atts ) );

  $div = '';

  $style 	= 'color:' . $color . ';';
  $style .= 'background:' . $background . ';';
  $style .= ($size == 'medium') ? 'font-size:24px;' : ($size == 'big' ? 'font-size:40px;' : 'font-size:12px;');
  $style .= 'border:1px solid #888;';
  $style .= 'box-shadow: 2px 2px #AAA;';
  $style .= 'padding:10px;';
  $style .= 'text-align:center;';

  if ( !empty( $content ) ) {
    $div = '<div style="' . $style . '">' . $content . '</div>';
  }
  
  return $div;
  
}
add_shortcode('jemarea-special-box', 'jemarea_special_box');

.. and here is the example:

[jemarea-special-box] I wonder how this box will look like once the shortcode is executed [/jemarea-special-box]