Creating shortcode with parameter

Question

I am working with shortcodes.

function bold_text_shortcode( $atts , $content = null ) {
    return '<b>' . $content . '</b>';
}
add_shortcode( 'b', 'bold_text_shortcode' );  

I created shortcode for bold [b]content[b].

I need to create like [color=red]content[/color].

Answer 1

Here's an example of a [color] shortcode. If a parameter is specified, we assume (but verify) that it is a color. $content is then wrapped in <span> tags and the color is applied using inline styles.

The color can be passed as a named color or hex color. Hex colors in 3 or six digits are accepted and the # is optional.

/**
 * A shortcode that outputs the content in the color
 * specified. 
 *
 * @param array $atts
 * @param string content
 * @return string
 */
add_shortcode( 'color', 'wpse_color' );
function wpse_color( $atts, $content = '' ) {
    // Bail if there is no content or color to work with.
    if ( ! $content || ! isset( $atts[0] ) ) {
        return false;
    }

    $color = $atts[0];
    $valid_color = false;

    // Validate color: Allow named color or 
    // 3 or 6 digit hex color with/without preceding #.
    // @link https://stackoverflow.com/a/23541977/3059883       
    preg_match('/(#?[a-f0-9]{3}([a-f0-9]{3})?)/i', $color, $color_matches );
    if ( isset( $color_matches[1] ) ) {
        $valid_color = true;
        // Maybe add preceeding #
        if ( strncmp( $color, "#", 1 ) !== 0 ) {
            $color = '#' . $color;
        }
    } else { // Named color
    $named_colors = array( 'aliceblue', 'antiquewhite', 'aqua', 'aquamarine', 'azure', 'beige', 'bisque', 'black', 'blanchedalmond', 'blue', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategray', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'fuchsia', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'gray', 'green', 'greenyellow', 'honeydew', 'hotpink', 'indianred', 'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategray', 'lightsteelblue', 'lightyellow', 'lime', 'limegreen', 'linen', 'magenta', 'maroon', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite', 'navy', 'oldlace', 'olive', 'olivedrab', 'orange', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'purple', 'rebeccapurple', 'red', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'silver', 'skyblue', 'slateblue', 'slategray', 'snow', 'springgreen', 'steelblue', 'tan', 'teal', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat', 'white', 'whitesmoke', 'yellow', 'yellowgreen' );
    if ( in_array( strtolower( $color ), $named_colors ) ) {
            $valid_color = true;
    }
    }

    // If we have a valid color, colorize $content.
    if ( $valid_color ) {
        return '<span style="color:' . esc_attr( $color ) . '">' . $content . '</span>';
    }
}

Example usage:

This is [color red]a test[/color] of the color shortcode using a named color.

This is [color #bada55]another test[/color] of the color shortcode using a 6 digit hex color with preceding #.

This is [color 2200ff]another test[/color] of the color shortcode using a 6 digit hex color without preceding #.

This is [color #808]another test[/color] of the color shortcode using a 3 digit hex color with preceding #.

This is [color 777]another test[/color] of the color shortcode using a 3 digit hex color without preceding #