Проблама с добавлением html кода

Здравствуйте

Столкнулся с непреодолимой проблемой. Мне нужно добавить html код в страницу. Добавляю через вкладку «текст» на странице редактирования записи (т.е. там где html-код страницы).

Но контент с моего html-кода отображается не полностью. С чем это может быть связано и что я делаю не так?

Интересно, что при просмотре кода обновленной страницы мой код виден. После того как я в редакторе меняю вкладу с «текст» на «визуально», код пропадает в html и в странице просмотра кода пропадает так же после обновления. Пропадают только все теги <a>.

Ниже мой код:

<div class="colorScheme">
        <div class='img-color-box afina'>
            <!-- <img src="/wp-content/uploads/2014/04/afina/1003.jpg"> -->
             <img src="/img/afina/1003.jpg">
        </div>
        <div class='link-box afina'>
            <a class='link-color ral1003' data-color='1003' href='#'></a>
            <a class='link-color ral1014' data-color='1014' href='#'></a>
            <a class='link-color ral3005' data-color='3005' href='#'></a>
            <a class='link-color ral3009' data-color='3009' href='#'></a>
            <a class='link-color ral3011' data-color='3011' href='#'></a>
            <a class='link-color ral5005' data-color='5005' href='#'></a>
            <a class='link-color ral6002' data-color='6002' href='#'></a>
            <a class='link-color ral6005' data-color='6005' href='#'></a>
            <a class='link-color ral6020' data-color='6020' href='#'></a>
            <a class='link-color ral7004' data-color='7004' href='#'></a>
            <a class='link-color ral7024' data-color='7024' href='#'></a>
            <a class='link-color ral8004' data-color='8004' href='#'></a>
            <a class='link-color ral8017' data-color='8017' href='#'></a>
            <a class='link-color ral8019' data-color='8019' href='#'></a>
            <a class='link-color ral9003' data-color='9003' href='#'></a>
            <a class='link-color ral9006' data-color='9006' href='#'></a>
        </div>
    </div>

CSS (добавил код в style.css своей темы):

.colorScheme {
    margin: 0 auto;
    width: 500px;
}
.link-box {
    margin: 0 auto;
    width: 300px;
}
.link-color {
    display: inline-block;
    margin: 0 1px;
    width: 12px;
    height: 12px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #4679BD;
}
.ral1003 {
    background: rgb(245,221,27);
}
.ral1014 {
    background: rgb(222,221,164);
}
.ral3005 {
    background: rgb(80,2,0);
}
.ral3009 {
    background: rgb(144,2,0);
}
.ral3011 {
    background: rgb(222,0,0);
}
.ral5005 {
    background: rgb(19,108,250);
}
.ral6002 {
    background: rgb(2,177,14);
}
.ral6005 {
    background: rgb(0,124,0);
}
.ral6020 {
    background: rgb(23,92,0);
}
.ral7004 {
    background: rgb(204,204,204);
}
.ral7024 {
    background: rgb(104,129,134);
}
.ral8004 {
    background: rgb(189,90,0);
}
.ral8017 {
    background: rgb(82,60,37);
}
.ral8019 {
    background: rgb(58,57,55);
}
.ral9003 {
    background: rgb(228,232,233);
}
.ral9006 {
    background: rgb(211,221,222);
}

я предполагаю что WP просто удаляет мои теги потому что они без контента или может быть css просто их не видит, но все равно не знаю как решить эту проблему. Подскажите, пожалуйста.

для наглядности два слайда, как должно быть (1) и как отображается (2)