0

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">
<ul>
<?php wp_list_pages( $args ); ?>
</ul>
</div>

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?

  • 5
    • 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
      Commented Apr 22, 2014 at 18:23
    • Exactly! 'wp_list_pages()' comes with '<li><a>..</a></li>' but what i want is <a><li>..</li></a> Commented Apr 22, 2014 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
      Commented Apr 22, 2014 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? Commented Apr 22, 2014 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
      Commented Apr 22, 2014 at 18:41

    1 Answer 1

    1

    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

    0

    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.