Arrow shortcode WP

Arrow Shortcode WP

#-----------------------------------------------------------------#
# Add Shortcode to add arrows to divs
#-----------------------------------------------------------------#

function divider_arrow_function($atts, $content = null) {
  extract(shortcode_atts(array(
      'direction' => 'down',
      'class' => '',
      'width' => '100',
      'height' => '60',
      'color' => '#000'
  ), $atts));

  switch ($atts['direction']) {
    case 'up':
      return '<div class="arrow-' . $atts['direction'] . ' ' . $atts['class'] . '" style="width: 0; height: 0; border-left: ' . $atts['width'] . 'px solid transparent; border-right: ' . $atts['width'] . 'px solid transparent; border-bottom: ' . $atts['width'] . 'px solid ' . $atts['color'] . ';"></div>';
      break;
    case 'down':
      return '<div class="arrow-' . $atts['direction'] . ' ' . $atts['class'] . '" style="width: 0; height: 0; border-left: ' . $atts['width'] . 'px solid transparent; border-right: ' . $atts['width'] . 'px solid transparent; border-top: ' . $atts['width'] . 'px solid ' . $atts['color'] . ';"></div>';
      break;
    case 'left':
      return '<div class="arrow-' . $atts['direction'] . ' ' . $atts['class'] . '" style="width: 0; height: 0; border-top: ' . $atts['width'] . 'px solid transparent; border-bottom: ' . $atts['width'] . 'px solid transparent; border-right: ' . $atts['width'] . 'px solid ' . $atts['color'] . ';"></div>';
      break;
    case 'right':
      return '<div class="arrow-' . $atts['direction'] . ' ' . $atts['class'] . '" style="width: 0; height: 0; border-top: ' . $atts['width'] . 'px solid transparent; border-bottom: ' . $atts['width'] . 'px solid transparent; border-left: ' . $atts['width'] . 'px solid ' . $atts['color'] . ';"></div>';
      break;
  }
}
add_shortcode('arrow', 'divider_arrow_function');

How to use?

There are a couple of default parameters that take certain values

Parameter	Values	Required
description	up, down, left, right	yes
width	number (i.e. 60)	yes
color	hex value	no
class	class name	no

Example usage:

[arrow class="custom-arrow" direction="down" width="60" color="#000000"]