How to use images to list pages for navigation? (5 posts)

  1. zacklive
    Posted 6 years ago #

    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?

  2. Wex
    Posted 6 years ago #

    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 */
  3. zacklive
    Posted 6 years ago #

    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?

  4. zacklive
    Posted 6 years ago #

    Can a text be replace by a image?

  5. Wex
    Posted 6 years ago #

    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; }

Topic Closed

This topic has been closed to new replies.

About this Topic