Текст подчеркнутый волнистой линией в ВП

Так же, как и в НЕ ВП 🙂
Сделать gif с волнистой линией и подложить его как background.

Все просто 🙂 Допустим у тебя есть текст в блоке, типа:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum volutpat eros eu tortor. Donec sagittis tortor commodo felis. Sed at eros non justo tincidunt consequat. Ut porta blandit felis. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam eu tellus pharetra turpis ornare porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin nulla. Maecenas rutrum venenatis ligula. Integer egestas suscipit nibh. </p>

Делаешь чтобы было примерно так:

<p><span class = "underline-1"><span class = "underline-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum volutpat eros eu tortor. Donec sagittis tortor commodo felis. Sed at eros non justo tincidunt consequat. Ut porta blandit felis. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam eu tellus pharetra turpis ornare porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin nulla. Maecenas rutrum venenatis ligula. Integer egestas suscipit nibh.</span></span></p>

И CSS:

.underline-1 { text-decoration:underline; }
.underline-2 { background:trasparent url(/img-path/underline.gif) repeat-x left bottom; }

И надо будет поиграться с line-height, чтобы линии не накладывались друг на друга.

—

Ну или сразу чтобы на фоне была и прямая и волнистая линия 🙂