Creating Shortcodes in WordPress for Custom Colored Boxes

There’s different ways to create colored boxes in WordPress.

• You can install a plugin which uses short codes to display different types of boxes
• You can make colored boxes using css code in your child themes style.css file
• Create different shortcodes using php & css code for different boxes

In this tutorial, i’ll show you how to create different shortcodes which you can insert before and after the content you want displayed in a box.

[warning]Always backup your themes functions file before adding/editing php code. Also make sure you have access to FTP so you can restore your backup quickly![/warning]

Create Your Shortcode Function

First step is to create the php code for the shortcode.

This php code simply creates a function which we’ve named tickbox.

This creates a div class for the shortcode named tick

[downit] Sometimes, for reasons not even known to WordPress, PHP code just doesn’t display properly! Use Github Gists which always work.[/downit]

Which you can insert in your content area

To use this shortcode, simply wrap the content you want inside the box in the shortcode brackets.

Style Your Box Using CSS

Now you need to style your boxes using CSS code.

Here you can edit the border color, background color, font type & size, padding and position etc.

We’ll also add an icon and you can use this code to create a set of boxes like we did in the previous post for:

• Tick box
• Alert box
• Note box
• Info box

Name each icon the same as the boxes you’ll be using them in and upload them to your child theme’s images file.

Example: /wp-content/themes/child/images

Here’s the PHP & CSS code you can duplicate and modify for each style of box:

Here’s the result:

[tick] Change the icon and edit the PHP & CSS code to make note different boxes. Simply change the name tick to another name like note or alert in the code. [/tick]

[notable] This is the notable box. The reason i named it notable is because i already have CSS boxes and need to use a unique name for each box[/notable]

[warning] This is the warning box and the other box which looks like it, but created using pure CSS is named the alert box. Gotta use unique names![/warning]

[wphelp] The wphelp box is a box created for people that need extra help with WordPress. Its a unique box and an example of what you can create yourself[/wphelp]

[data]Finally the last box is named the data box because everyone else uses info box. As i already have created an info box with CSS, i’ll use a different name. [/data]