How do I replace the page navigation arrows with an image?

[Carla the Moose]

My website isn't live yet, but I'm using the Eleven40 theme.

I was able to paste some code into my functions file and change the text for previous and next links. I removed the words and added arrows instead.

But how do I use an image that I made of a hand-drawn arrow?

I tried adding a background image for the .pagination-next and .pagination-previous classes. I also removed the arrow text (brackets) in my functions file. While the removed arrows works, the images are not displaying.

I thought I should maybe use "li .pagination-next" instead, but still nothing. I also tried adding "a" for the link. Do you have any suggestions on how to do this?

Thanks!

[Carla the Moose]

This worked great. I didn't know I could use HTML inside of the code like this. I hope it works in all browsers.

/** Customize the next page link */
add_filter ( 'genesis_next_link_text' , 'custom_next_link_text' );
function custom_next_link_text ( $text ) {
    return g_ent( '<img src=" ... type in the file name ... " />' ) . __( '', CHILD_DOMAIN );
}

/** Customize the previous page link */
add_filter ( 'genesis_prev_link_text' , 'custom_prev_link_text' );
function custom_prev_link_text ( $text ) {
    return g_ent( '<img src=" ... type in the file name ... " />' ) . __( '', CHILD_DOMAIN );
}

But as dumb as it sounds, I can't figure out how to adjust padding. Nothing is responding. Ugh.

[Carla the Moose]

Big duh! moment . . .

I just style the padding directly within the image source.

[Author]

Posts