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
[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 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:
The alert textbox has taken on the traditional green colors. The shortcode of
[bmtextbox type="alert"]text in here[/bmtextbox] returns the following:
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
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:
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 warning textbox is normally reserved for rendering error or warning notices. The shortcode of
[bmtextbox type="warning"]text in here[/bmtextbox] returns the following:
With a title, user the shortcode of
[bmtextbox type="warning" title="Warning Textbox" image="0"]text in here[/bmtextbox]. The result:
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.
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
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:
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.
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.
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.
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.
While the default options for each textbox type are defined in the shortcode function, they can be overwritten with the following attributes.
urlattribute. If you're using the plugin, defining the url isn't necessary.
typeis not defined in your shortcode, your default type array with apply. If you want another options array applied by default, enter it here.
imageis false (
image="0"), an icon won't be displayed in your textbox. Generally, we won't use an image whenever we use a title.
textcoloras defined in your type options array, use
bgcolorcolor as defined in your type options array, use
bordercolorcolor as defined in your type options array, use
borderthickness as defined in your type options array, use
bordertypethickness as defined in your type options array, use
widthof 90% by default. Alter by using something like
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.
- 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.