0

On my main blog page, there are category images on the left-hand side. When I click "next page" at the bottom of the excerpt list, and the second page of excerpts loads, the images are no longer showing up. The images are coded directly in a widget. Any idea what I'm missing?

The main blog page:

http://bit.ly/1QCIV8A

The code (note: I changed the theme name in the url to "themename" to preserve anonymity after problem is fixed):

<div class="homecat" style="margin-top: 19px; height: 200px; line-height: 200px; margin-bottom: 20px; background: url(../wp-content/themes/themename/images/cat-craftideas.jpg); border: none;"><a href="../category/craft-ideas">craft ideas</a></div>
<div class="homecat" style="margin-top: 19px; height: 200px; line-height: 200px; margin-bottom: 20px; background: url(../wp-content/themes/themename/images/cat-party.jpg); border: none;"><a href="../category/party">party</a></div>
<div class="homecat" style="margin-top: 19px; height: 200px; line-height: 200px; margin-bottom: 20px; background: url(../wp-content/themes/themename/images/cat-printables.jpg); border: none;"><a href="../category/printables">printables</a></div>
  • What is the widget code? The PHP, not the generated HTML? – s_ha_dum May 11 '15 at 20:23
  • 1
    are you familiar with the difference between relative and absolute URLs? – Milo May 11 '15 at 20:24
  • <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('My new sidebar') ) : ?> <?php endif; ?> – jodybethw May 11 '15 at 20:35
  • Milo, the domain is going to change today, hopefully, so that's why it isn't absolute. – jodybethw May 11 '15 at 20:36
1

If you look at your browser's error console, you'll see the 404 errors for your background images, which will point to where the issue is.

This URL:

../wp-content/themes/themename/images/cat-party.jpg

basically says, "go up one directory from the current directory, then from there look in wp-content, then themes, then images, etc..".

That works fine on the front page, but when you navigate to /page/2/, the wp-content directory can't be found by navigating up one directory. It's looking for your images in:

/page/wp-content/themes/themename/images/cat-party.jpg

which doesn't exist.

That's why you need to use absolute or root-relative URLs for assets in WordPress, because you can't know the context from where your content will be served, so relative links will often fail.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.