I'm working on my first wordpress theme and I'm running into some trouble. I'd like to add an extra div (which I'll style in css) within each
<li>, but before the actual
<a ... > element
In my theme, I'm using
wp_list_pages('&sort_column=menu_order&link_before=<div></div>&title_li=');, which results in almost what I want, but not quite. The out put I get from the method call above results in this:
<li class="page_item page-item-2"><a href="http://localhost/htdocs/wordpress/?page_id=2"><div></div>Page Name A</a></li> <li class="page_item page-item-4 current_page_item"><a href="http://localhost/htdocs/wordpress/?page_id=4"><div></div>Page Name B</a></li>
as you can see, this places the
<div> within the
<a> and not before it.
I've tried using the CSS :before selector to do what I want, but it won't work in this instance because I am adding some styles to the
<a> elements (some light skews) that I don't want to actually affect the new area that this makeshift div will use. (I've already tried reversing the skews and it didn't work for the :before selector)
I've also tried using a hacky regex to get this done:
echo preg_replace("/>\s*<a/i", "><div></div><a", (string)wp_list_pages('&sort_column=menu_order&title_li=')); but that still didn't work (which really puzzled me).
I know this is kind'of odd, so any help is greatly appreciated!