1

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].

  • Not entirely sure, this is supported by WP (by default). [highlight color="red"]content[/highlight] is not an option? – kero Jun 19 '17 at 19:44
  • WordPress does not ship with a [highlight] shortcode, but similar functionality can be accomplished using the visual editor and the Text color button. – Dave Romsey Jun 19 '17 at 21:34
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 #

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.