Australia's Leading Digital Marketing Experts. T. 1300 235 433  |  Aggreagtion Enquires Welcome

Add a Highlighter Text Effect in WordPress with Shortcode

The super simple shortcode on this page will show you how to easily apply a highlighter effect over your text. The highlight and font color can be altered if required, as can the text span padding.

Usage

The function requires opening and closing [highlight] tags around the content you would like the effect applied to. For example, default usage of just [highlight]Lorem Ipsum[/highlight] results in Lorem Ipsum.

The text of [highlight color="black" font="#ffffff" left="7" right="7"]Lorem Ipsum[/highlight] would be rendered as Lorem Ipsum. (in this case we're applying a 7px pad to the left and right of text).

Video Demonstration

While the video makes mention of a standalone plugin (that you may download below) we would recommend using our custom functions plugin for short snippets.

Shortcode Attributes

color

The highlight color should be an an allowed color name or a HEX color code with a leading '#'.

font

The font should be an an allowed color name, or a HEX color code (with a leading '#').

top, right, bottom & left

The top, right, bottom & left relates to the padding of the highlight color around the text. If required it can be altered (without px or em).

Shortcode Function

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.

1
<?php 
2
<?php
3
/*
4
 Add a Highlighter Text Effect in WordPress with Shortcode
5
 http://www.beliefmedia.com/highlight-text-wordpress-shortcode
6
*/
7
 
8
 
9
function beliefmedia_highlight_text($atts, $content = null) {
10
  extract(shortcode_atts(array(
11
    'color' => 'yellow',
12
    'font' => '#000000',
13
 
14
    /* Padding */
15
    'top' => '1',
16
    'right' => '2',
17
    'bottom' => '1',
18
    'left' => '2'
19
  ), $atts));
20
 
21
  /* Padding: top, right, bottom, left */
22
  return '<span style="background-color: ' . $color . '; color: ' . $font . '; padding:' . $top . 'px ' . $right . 'px ' . $bottom . 'px ' . $left . 'px;">' . $content . '</span>';
23
}
24
add_shortcode('highlight','beliefmedia_highlight_text');

If you require shortcode to work in a sidebar widget, you'll have to enable the functionality with a filter. If you're using our custom functions plugin, you'll have that feature enabled by default.

Download


Title: Add a Highlighter Text Effect in WordPress with Shortcode
Description: Add a highlighter text effect in WordPress with shortcode. Various attributes may be altered.
  Download • Version 0.1, 571.0B, zip, Category: WordPress Shortcodes
WordPress Plugins (General), (654.0B)    

Download our 650-page guide on Finance Marketing. We'll show you exactly how we generate Billions in volume for our clients.

  AUS Eastern Standard Time (Virginia)

  Want to have a chat?
 

Like this article?

Share on facebook
Share on Facebook
Share on twitter
Share on Twitter
Share on linkedin
Share on Linkdin
Share on pinterest
Share on Pinterest

Leave a comment

READY TO HAVE A CHAT? CALL US ANYTIME ON 1300 235 433