WordPress Media Manager

WordPress uses a templates directory structure.

. = http://websitename.com thus ./home is http://websitename.com/home

To begin with, all graphic media and so on is loaded directly into wordpress.

Login to the website

Next, load media such as .jpg into the Media Manager (you can drag and drop all at once or select file)

All Graphics will be referenced usually as


for instance if i design the home page to reference logo.jpg. I would upload logo.jpg with the media manager and copy its full url on the right side panel when editing the image ( you will see ‘Edit’ link after image has loaded ) or just hard code it into the home page such as

live url source: http://easysummit.com/wp-content/uploads/2012/12/copy-cropped-easysummitlogo11.png

Bear in mind the format when referencing an image in your layouts.

If by chance the folder ‘wp-content’ has been renamed, then you will need to find out the new name of the wp-content directory and use that new name instead. Which would be
* = the new name of the ‘wp-content’ folder

The url source code created can be used in multiple ways. One such is to use it for an image tag <img src=””> on the wordpress page or post. Paste your http source code between the “”, so when editing a page or post in Edit View the code in the body of that post would look similar to
<img src="http://easysummit.com/wp-content/uploads/2012/12/copy-cropped-easysummitlogo11.png">

Finally, if a link from the image is wanted then you would use <a href=””><img src=””></a>


Use the same source for both the ‘a href’ and the ‘img src’ to create a clickable picture

The sample is set to open in a new window <a href=”” target=”_blank”>
If, you copy the image sample below and paste into a page, open the page, go to edit view and replace all the ” symbols. WordPress sometimes displays a similar symbol to the “.

Sample Image Code
<a href=”http://easysummit.com/wp-content/uploads/2012/12/copy-cropped-easysummitlogo11.png”>
<img src=”http://easysummit.com/wp-content/uploads/2012/12/copy-cropped-easysummitlogo11.png”>

Posted in Editor Host Tutorials Tagged with: ,

Leave a Reply