With WordPress themes, where do I store the images and files relatively?

3 Views

In pure HTML, I’m used to storing the files relative to where the particular HTML file is, such as css/style.css.

However, with the theme I’m using with WordPress, “Responsive” I don’t know where the images are to be stored.

Read More

Can you even use relative linking with wordpress?

Post Views: 3

Related posts

Leave a Reply

4 comments

  1. Let me answer your question with a question: Are these images part of your template or for general purpose?

    The WordPress theme “Responsive” has images files all over its theme folder. The theme should be at yoursite.com/wp-content/themes/responsive. In that theme folder there are a few folders with images: The obvious “images”, also “icons” and “includes/images”.

    Now, let’s address some of your points.

    YES, you can use relative urls for your images, but only in your CSS files. These images must be relative to the theme folder. There are some rare cases people add static HTML files in their themes, which relative paths may work.

    NO, you can’t use relative paths in your php files, and even if you could, they could break at the slightest alteration. Use WordPress dynamic functions before your relative paths to ensure they don’t break. If you’re adding your image from the dashboard editor, you must always use absolute urls. This would be no problem, since every image you store in your media library gives you the absolute url when you click “edit” on them.

    Now there’s a folder where all your non-template images are stored, yoursite.com/wp-content/uploads. You can change this folder in your Dashboard settings > media. The option appears as “store uploads in this folder”. You can choose a folder like yoursite.com/images (but you must create that folder first).

    enter image description here

  2. Where do you want to use this URL?

    It’s a bit unclear what you want to do, and where you want to use your URL.

    In a theme’s code

    You can use get_template_directory_uri() in your theme code to get the URL of your theme. To get the URI of wp-content/themes/<your_theme>/image/image.jpg:

    <img src="<?php echo get_template_directory_uri() ?>/images/image.jpg">

    You should not rely on absolute URLs in the case, since linking to /wp-content/themes/... relies on WordPress being installed in a particular folder.

    To get the URLs of files in you wp-content/uploads, you can use wp_upload_dir in a similar fashion. But if you’re doing that, you’re probably doing something wrong.

    In a post

    Don’t use relative URLs. Use the absolute URL of the asset (for uploads you can get it from the Media Library, for other things, you’ll have to figure it out). The content of a post can potentially be viewed on “any” URL (e.g. in an RSS feed) in which case relative URLs make little sense.

    What goes where?

    If the image is part of your theme (for example a background image), it should go in your theme’s folder (possibly a subfolder named images). Same goes for CSS files, Javascript and so on. The built-in twentyeleven theme is a great resource: Check out its folder layout and header.php

    If the image is an upload, it will go into WordPress’s uploads folder. You should only use uploaded files in your posts/pages — they are part of the website’s content, not code.