Blog, WordPress, WordPress Plugins, WordPress Shortcode

Text Boxes With WordPress Shortcode

A text box is a small box embedded within your post that is styled in a manner that draws user attention, and reflects the mood of the message you're telling people. This post will provide shortcode that'll permit you to style a textbox on your WordPress website in virtually any manner with just one function.

Our textbox function is a little different to most of those you'll find floating around the web. Our former code included three blocks of code for an [alert], [caution], and [warning] textbox (among others). Our up-to-date function provides for multiple box appearances via a single shortcode function, with a type attribute used in your shortcode to specify style. The various types are defined by a default array in the shortcode function... but can be overwritten with shortcode attributes.

The Result

Default Textbox

The default textbox below was designed specifically for this site... although you'll define yours for your own website. The shortcode of [bmtextbox]text in here[/bmtextbox] returns the following:

This is the default BeliefMedia textbox. There's no image and no title. Colors were chosen because they fit with the theme of the website.

Alert Textbox

The alert textbox has taken on the traditional green colors. The shortcode of [bmtextbox type="alert"]text in here[/bmtextbox] returns the following:

This is a caution textbox. This is a caution textbox. This is a caution textbox. This is a caution textbox. This is a caution textbox.

When we add a title (via title="Some Title"), the title bar inherits the border color background, and we'll display a small HTML-entity tick before the title text. So, shortcode of [bmtextbox type="alert" title="This Is An Alert Title" image="0"]text in here[/bmtextbox] returns the following. Note that we've removed the icon by using the shortcode of image="0".

✓ This Is An Alert Title

The title bar has inherited the the color of the border. The title text color may be altered in the alert type option array or in your shortcode.

Caution Textbox

The caution textbox would normally be colored yellow or orange. We've used a blue border to fit in with the color theme of our brand. Shortcode of [bmtextbox type="caution"]text in here[/bmtextbox] returns the following:

A more appropriate color for the textbox border might be a darker orange, with a lighter orange for the background color.

If you don't want to show an image for any textbox type, use image="0" as a shortcode attribute. The shortcode of [bmtextbox type="caution" image="0"]text in here[/bmtextbox] returns the following:

A shortcode attribute will overwrite that value in the textbox type image array.

Warning Textbox

A warning textbox is normally reserved for rendering error or warning notices. The shortcode of [bmtextbox type="warning"]text in here[/bmtextbox] returns the following:

This is a warning textbox without a title.

With a title, user the shortcode of [bmtextbox type="warning" title="Warning Textbox" image="0"]text in here[/bmtextbox]. The result:

✗ Warning Textbox

This is a warning textbox with a title. We've used image="0" to remove the image.

Custom Texbox

With the exception of an image, our company custom textbox is not totally unlike our default textbox. Shortcode of [bmtextbox type="bm"]text in here[/bmtextbox] returns the following.

This is the Belief Media textbox. This is the Belief Media textbox.

With a title, we've chosen a black title bar (same color as the border). Shortcode of [bmtextbox type="bm" title="BeliefMedia Custom Textbox"]text in here[/bmtextbox] returns

+ BeliefMedia Custom Textbox

This is the default BeliefMedia textbox. This is the default BeliefMedia textbox.

We can alter the colors of our defined textbox types with shortcode attributes. For example, [bmtextbox type="bm" title="BeliefMedia Custom Textbox" image="0" textcolor="#000000"]text in here[/bmtextbox] returns:

+ BeliefMedia Custom Textbox

This is an example of a BeliefMedia textbox with black text. We've removed the image with shortcode="0".

Custom Usage

When we first wrote this a few months ago, it was a quick solution to cater for mortgage brokers that need to use multiple textbox types for individual banks. Following is a few Aussie bank examples.

Commonwealth Bank

This is a Commonwealth Bank example. Print live interest rates, product updates, new deals, or other bank information in here.

St George

This is a St George Bank example. The colors are taken from their website.

+ Example Title

This is a St George Bank example. The colors are taken from their website.

Westpac

For the last bank example, we'll render a Westpac example. Brokers make up a core portion of our media business.

If you're a client, get in touch and we'll supply you with the 60+ Aussie bank examples.

Using the textbox for social messages or alerts might be more useful. What follows is just a few examples.

You may use shortcode inside of your textbox. You may use shortcode inside of your textbox.

+ Facebook Title In Here

We've used a lighter color for the bordercolor, and the darker blue for the bgcolor. White (#ffffff) text was used.

You might consider your last tweet or some other relevant text in the Twitter textbox.

The first YouTube example. We've saturated the textbox with a #DA0000 red, and used white text. Very basic.

We've used a YouTube textbox to render views, total subscribers, and total number of videos for a number of years.

We use the same textbox code to render airline data (with live stock value etc) on one of our aviation websites. There are literally millions of combinations.

WordPress Shortcode

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin. You may optionally download and install our plugin from the bottom of of the page.

<?php

Text Box With WordPress Shortcode

http://www.beliefmedia.com/wordpress-text-box

function beliefmedia_textbox($atts, $content = null) {

$atts = shortcode_atts(array(

'url' => 'http://www.yourDomain.com/image-dir',

'type' => false,

'title' => false,

'image' => true,

'padding' => '',

'textcolor' => '',

'bgcolor' => '',

'bordercolor' => '',

'border' => '',

'bordertype' => '',

'width' => '90%',

), $atts);

switch ($atts['type']) {

case 'caution':

$options = array('textcolor' => '#555555', 'bgcolor' => '#FFFFBF','bordercolor' => '#09A3E2', 'border' => '1px', 'bordertype' => 'solid', 'img' => 'caution.png', 'titlecolor' => '#ffffff', 'entity' => '&excl;');

break;

case 'alert':

$options = array('textcolor' => '#555555', 'bgcolor' => '#CFFFCC', 'bordercolor' => '#88C882','border' => '1px', 'bordertype' => 'solid', 'img' => 'alert.png', 'titlecolor' => '#000000', 'entity' => '&check;');

break;

case 'warning':

$options = array('textcolor' => '#ffffff', 'bgcolor' => '#D84242', 'bordercolor' => '#C01A19', 'border' => '1px','bordertype' => 'solid', 'img' => 'warning.png', 'titlecolor' => '#ffffff', 'entity' => '&cross;');

break;

case 'bm':

$options = array('textcolor' => '#ffffff', 'bgcolor' => '#09A3E2', 'bordercolor' => '#000000','border' => '1px','bordertype' => 'solid', 'img' => 'bm.png', 'titlecolor' => '#ffffff', 'entity' => '+');

break;

/* Default */

default:

$options = array('textcolor' => '#ffffff', 'bgcolor' => '#09A3E2', 'bordercolor' => '#000000', 'border' => '1px', 'bordertype' => 'solid', 'image' => false, 'titlecolor' => '#000000', 'entity' => '&ofcir;');

break;

}

/* Overwrite the option defaults */

$options = array_replace($options, array_filter($atts));

/* If padding defined, we'll use it. Otherwise we'll use a default (based on image used) */

$padding = ($atts['padding'] !== '') ? $atts['padding'] : (($atts['image'] !== false) && (array_key_exists('image', $options)) && ($atts['type'] !== false) ) ? '15px 30px 18px 65px' : '8px 30px 10px 30px';

/* Build our little box with a title */

$return .= '<div style="width: ' . $atts['width'] . '; margin: auto; border: ' . $options['bordercolor'] . ' ' . $options['border'] . ' ' . $options['bordertype'] . '">';

if ($atts['title'] !== false) $return .= '<div style="background-color: ' . $options['bordercolor'] . '; padding: 2px 30px 2px 30px ; font-weight: bold; color: ' . $options['titlecolor'] . ';">' . $options['entity'] . ' ' . $atts['title'] . '</div>';

/* Content */

$return .= '<div style="padding: 8px 30px 10px 30px; color: ' . $options['textcolor'] . ';';

$return .= ( ($atts['image'] != 0) && (array_key_exists('image', $options)) ) ? ' padding: ' . $padding . '; background: ' . $options['bgcolor'] . ' url(' . $img_url = (stripos($options['img'], 'http://') !== false) ? $options['img'] : $options['url'] . '/' . $options['img'] . ') no-repeat 10px 50%;' : ' background-color: ' . $options['bgcolor'] . ';';

$return .= '">' . do_shortcode($content) . '</div>

</div>';

return $return;

}

add_shortcode('bmtextbox','beliefmedia_textbox');

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.

Shortcode Attributes

While the default options for each textbox type are defined in the shortcode function, they can be overwritten with the following attributes.

url

You must alter the URL to your preferred icon image directory. Having a default directory means you only have to use the image filename in your type options array. That said, you can use a full URL in the options array negating any need to consider the url attribute. If you're using the plugin, defining the url isn't necessary.

type

If type is not defined in your shortcode, your default type array with apply. If you want another options array applied by default, enter it here.

title

To use a title in your textbox, use title="Something".

image

If image is false (image="0"), an icon won't be displayed in your textbox. Generally, we won't use an image whenever we use a title.

padding

Alternate textbox padding.

textcolor

To overwrite the textcolor as defined in your type options array, use textcolor="#000000".

bgcolor

To overwrite the bgcolor color as defined in your type options array, use bgcolor="#ffffff".

bordercolor

To overwrite the bordercolor color as defined in your type options array, use bordercolor="#ffffff".

border

To overwrite the border thickness as defined in your type options array, use border="3px".

bordertype

To overwrite the bordertype thickness as defined in your type options array, use bordertype="dashed".

width

We use a width of 90% by default. Alter by using something like width="80%" or width="500px"

Type Options Array

You may create as many textbox types as you like, with each of them defined by a type array (each of them is printed on a single line in the shortcode).

$options = array( 'textcolor' => '#ffffff', 'bgcolor' => '#D84242', 'bordercolor' => '#C01A19', 'border' => '1px', 'bordertype' => 'solid', 'img' => 'warning.png', 'titlecolor' => '#ffffff', 'entity' => '✗' );

For each new type, add it to the switch statement.

Considerations

We've used an image dimension of 40x40 pixels in our examples. Larger images will take up more textbox real-estate.
When using multiple lines of text, the image will continue to center. It's often best to leave out the image on these occasions.
We've designed the shortcode to be easy to use with minimal code. If you have any suggestions, please let us know.
You may use shortcode inside of your textbox.

Download

Title: Text Boxes With WordPress Shortcode (WP Plugin)
Description: Create customised text boxes with WordPress shortcode. Any number of customised boxes can be created.
Download • Version 0.2, 21.2K, zip, Category: WordPress Plugins (General)
WordPress Shortcodes, (1.2K)

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