Applying Stylish CSS Box Design in WordPress

I think there are times when you want to decorate text with frames or highlight it. Since it’s tedious to write CSS and HTML each time, I want to make it easy to create frames with shortcodes.

Load CSS

functions.php

function load_import_css() {
    wp_enqueue_style( "import_style", get_stylesheet_directory_uri()."/css/main.css", false );
}
add_action('wp_enqueue_scripts', 'load_import_css');

Child theme’s /css/main.css

@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

.isa_info, .isa_success, .isa_warning, .isa_error {
margin: 10px 0px;
padding:12px;

}
.isa_info {
    color: #00529B;
    background-color: #BDE5F8;
}
.isa_success {
    color: #4F8A10;
    background-color: #DFF2BF;
}
.isa_warning {
    color: #9F6000;
    background-color: #FEEFB3;
}
.isa_error {
    color: #D8000C;
    background-color: #FFD2D2;
}
.isa_info i, .isa_success i, .isa_warning i, .isa_error i {
    margin:10px 22px;
    font-size:2em;
    vertical-align:middle;
}

Register Shortcodes

functions.php

//
// CSS Message Boxes With CSS3
//

function info($attr){
  return '<div class="isa_info"><i class="fa fa-info-circle"></i>' . $attr[0] . '</div>' ;
}

add_shortcode('info','info') ;

function warn($attr){

  // return '<div class="isa_warning"><i class="fa fa-warning-circle"></i>'. $attr[0] .'</div>' ;
  return '<div class="isa_warning"><i class="fa fa-warning"></i>'. $attr[0] .'</div>' ;
}

add_shortcode('warn','warn') ;

function succ($attr){

  // return '<div class="isa_warning"><i class="fa fa-warning-circle"></i>'. $attr[0] .'</div>' ;
  return '<div class="isa_success"><i class="fa fa-check"></i>'. $attr[0].'</div>'  ;
}

add_shortcode('succ','succ') ;

Verify

Now, let’s check if it displays correctly.

Create a new article and paste the following:

<div class="isa_info"><i class="fa fa-info-circle"></i>Replace this text with your own text.</div>
[info hogehoge]
[warn fuga]
[succ hoge]

When you “Preview Article”, the frames should be displayed properly.