WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm using wp_list_pages for my sidebar and it works fine to me, i just wanna add new feature which seems is not listed on codex or i don't know how to use it.

$args = array(
  'child_of'     => 284,
  'post_type'    => 'page',
  'sort_order'  => 'ASC',
  'sort_column' => 'post_date',
  'title_li'     => '', 
<div id="#sidebar">
<?php wp_list_pages( $args ); ?>

and here is my CSS, as you see i get the '

  • ' a background color with some padding.

    #sidebar li {
    font-size: .75em;
    padding: 10px;
    margin: 0 0 5px 0;
    background: #f18c21;
    color: white;

    So the think is, the only text on the li got the link, but what i would like to do is get the whole li section linked to the pages. Is there any way to do that?

  • share|improve this question
    wp_list_pages() should already come in <li><a>...</a></li> format. Is this not what is happening or am I misunderstanding the question? If you want to have some more customization options you can use get_pages() Function and loop through the items yourself to tag and style them. – Howdy_McGee Apr 22 '14 at 18:23
    Exactly! 'wp_list_pages()' comes with '<li><a>..</a></li>' but what i want is <a><li>..</li></a> – user3067592 Apr 22 '14 at 18:29
    Might I ask why you would like it as that? Not only is it not allowed in the HTML specifications but anything you need can surely be done in CSS. – Howdy_McGee Apr 22 '14 at 18:30
    This is my html output : s18.postimg.org/dotm2owop/… I want to link whole the orange section not just the inside text, How can i do that with CSS? – user3067592 Apr 22 '14 at 18:38
    Try #sidebar li a {display: block;} Then you can remove the styling off the list item and put them onto the anchor tag which should work. – Howdy_McGee Apr 22 '14 at 18:41
    up vote 1 down vote accepted

    As already said it's a question of the css-styles. Try something like

    #sidebar li a {
        display: block;
        margin: 0;
        padding: 5px 15px 5px 5px;
        text-align: left;

    The a tag gets the padding, not the li-tag

    share|improve this answer

    Your Answer


    By posting your answer, you agree to the privacy policy and terms of service.

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