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!

1 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

  • That works perfectly and I apologize if I was a bit confusing. I should have put what I wanted as sample output to be more clear (my regex probably didn't help, especially because I just noticed it was wrong anyway). Thank you for letting me know of this method's existence and it's usage.
    – Niko
    Jan 19, 2014 at 0:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.