I’m new to making wordpress templates and stumbled upon a problem, where you’ll most likely have to edit something within the wordpress defaults.
I use the command wp_list_pages to show all pages. This works fine, but the output looks like this:
<li class="page_item page-item-20"><a href="#">Page Name</a></li>
I’d like to have the a tag to wrap the <li> tag, so that the whole styled <li> area is clickable and not only the text. Do you have an idea how to make this happen?
Also, other solutions to make the whole <li> area clickable would be welcome as well.
Thanks!
I would say: don’t.
Wrapping a
<li>tag is invalid HTML (try passing it into http://validator.w3.org/check).Instead, I would recommend styling the
<li>tag itself such that it becomes clickable via thepage_itemcss class. You shouldn’t need to wrap the tag itself just for that.Basic example: jsFiddle
*Correction regarding semantic comment props to @Sparky
This would generate invalid HTML (rather than being a semantic issue)
What you might want to do is set the CSS for the a to
display: block;How do I make the whole area of a list item in my navigation bar, clickable as a link?
https://stackoverflow.com/a/14803036/2821387