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.
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
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.
Here’s the PHP & CSS code you can duplicate and modify for each style of box:
Here’s the result: