Adding elements to wp_list_pages (within <li>, but before <a>)

Question

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 <li>and <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!

Answer 1

If I Understood your question right, instead of wp_list_pages, you can use a custom query using get_pages e.g.

$args = array(
'sort_order' => 'ASC',
'sort_column' => 'menu_order',
'hierarchical' => 1,
'exclude' => '',
'child_of' => 0,
'parent' => -1,
'exclude_tree' => '',
'number' => '',
'offset' => 0,
'post_type' => 'page',
'post_status' => 'publish'
);
$pages = get_pages($args); 
foreach($pages as $page){
 echo '<li><div><a href="'.get_page_link( $page->ID ).'">'.$page->post_title.'</a></div></li>';
}

Some of the code in the $args could probably be removed though