WordPress.org

Support

Support » Themes and Templates » How to use images to list pages for navigation?

How to use images to list pages for navigation?

  • Hi there,

    Usually we use wp_list_pages() to list pages for navigation, and now I need to use images instead of text link for navigation, can I do this? Or I need to setup each image separately, which means html hard code?

Viewing 4 replies - 1 through 4 (of 4 total)
  • This may be helpful for you: http://codex.wordpress.org/wp_list_pages#Markup_and_styling_of_page_items

    “They can be styled with CSS selectors:”

    .pagenav { … } /* the outermost list item; contains whole list */
    .page-item-2 { … } /* item for Page ID 2 */
    .page_item { … } /* any Page item */
    .current_page_item { … } /* the current Page */
    .current_page_parent { … } /* parent of the current Page */
    .current_page_ancestor { … } /* any ancestor of the current Page */

    Thanks Wex,

    I tried to use .page-item-x, to change the background to image, but the image is not clickable, and text link is still there, am I misunderstanding what you mean?

    Can a text be replace by a image?

    Sure. I don’t know the exact markup, but you’ll just need to do something in your CSS like:

    .page-item-x a {
      background: url(path_to_image/image.png) 0 0 no-repeat;
      width: 100px; /* Width of the image */
      height: 30px; /* Height of the image, should probably be the same as the others */
      text-indent: -10000px; /* Will make the text go away */
      display: block; }
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to use images to list pages for navigation?’ is closed to new replies.