Дмитрий

// [bartag foo="foo-value"]
function bartag_func( $atts ) {
    $a = shortcode_atts( array(
        'foo' => 'something',
        'bar' => 'something else',
    ), $atts );

    return "foo = {$a['foo']}";
}
add_shortcode( 'bartag', 'bartag_func' );

Shortcode API и учитесь работать с массивами

Кастомные поля

У меня такое было, когда код криво вставился

flexbox не дружит с IE. я бы сделал так:

<div class="left box">
<div>

<div class="right box">
<div class="s-box"></div>
<div class="s-box"></div>
</div>

.box {
  display: inline-box;
  width: 50%;
}
.s-box {
  height: 50%;
}

.tool-tip-box {
background: #353535;
width: 430px;
padding: 10px 12px;
min-height: initial;
position: absolute;
bottom: 34px;
left: -65px;
top: initial;
font-style: normal;
font-weight: 300;
font-size: 12px;
line-height: 12px;
letter-spacing: -.15px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
cursor: text;
z-index: 10;
display: none;
}

Все дело в том, что inline-block элементы имеют небольшой отступ, бороться с этим можно несколькими способами:
1.

<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

2.

<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul>

3.

<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>
4. Отрицательное margine

5.

<ul>
  <li>one
  <li>two
  <li>three
</ul>

6.

nav {
  font-size: 0;
}
nav a {
  font-size: 16px;
}

7. flexbox