Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Photograph logo as a heading WordPress

  • SOLVED

Dear Wordpress experts,

I have recently joined the wordpress community and I am using a theme 'autofocus' to display my work.

I would like to include my logo as a part of the header, however, I have found in the 'general' section where I type the header, there is no option to attach a photograph or logo.

I am not sure if I need to re-write the header's html code (which I would have absolutely no idea how to do!) to change this or if there is some other method?

I would really appreciate any help you could offer.

Best wishes,

hiddendoco

Answers (6)

2010-05-13

Nicole Dominguez answers:

In your header.php file, find this line:


<h1 id="blog-title"><a href="<?php echo get_option('home') ?>/" title="<?php bloginfo('name') ?>" rel="home"><?php bloginfo('name'); ?></a></h1>

and add this right after the h1 tag:

<img src="pathtoimg.jpg" width="XXX" height="XXX" alt="Logo" id="logo" />

So you should have this:
<h1 id="blog-title"><img src="pathtoimg.jpg" width="XXX" height="XXX" alt="Logo" id="logo" /><a href="<?php echo get_option('home') ?>/" title="<?php bloginfo('name') ?>" rel="home"><?php bloginfo('name'); ?></a></h1>

Just change the pathtoimg.jpg to the actutal URL of the image you want to use, and the sizes as well. I added an id of 'logo', so that you could style it in your CSS for whatever reason.

Sound good?



hidden doco comments:

Nicole, your answer seems very logical and simple, I just don't know how to find what the url of my image is? It is in my themes folder and I can't locate what the url would be.

Thanks again,

hidden doco


Nicole Dominguez comments:

To find the url-

Let's pretend that you have wordpress installed in its own folder, not at the root. (blog)

http://yourwebsite.com/blog/wp-content/themes/autofocus/images/pathtoimg.jpg

just replace the yourwebsite. if wordpress is installed at the root-


http://yourwebsite.com/wp-content/themes/autofocus/images/pathtoimg.jpg


If you still can't get it, you could always upload via the media section in your wp admin, and then use the URL it gives you.


hidden doco comments:

Fantastic Nicole, it works now. Thank you so much!

2010-05-13

Brian Richards answers:

It's actually simpler than you would think:

1) upload your image to your webserver (i suggest you put it in the theme folder itself)
2) place this image tag where you want the image to appear: <img src="/path/to/image.jpg" />

if you put the logo in the images folder in the autofocus folder, the path might be: /wp-content/themes/autofocus/images/

Make sense?

2010-05-13

Andrzej answers:

What you need to do is to make CSS change:

- first, go to FTP wp-content/themes/autofocus (or where your theme is located) and copy your image there (you might put it into 'images' subfolder or wherever you want)
- then, open style.css file (located in your theme directory), and add:
#header {
background-image:url(your-image-name.jpg);
background-repeat:none;
background-position:0px 0px;
}

- If your image is in subfolder, simply include this subfolder image name, i.e.: background-image:url(images/your-image-name.jpg);
- If you want to manipulate the position where you image resides, play with background-position:0px 0px;. First property is X axis sencond one Y.
- If you want move header text a bit right, add:
#header h1 {margin-left:40px;}
You can change 40px to value that fits your needs.
If you want to remove the text completely, add:
#header h1 {text-indent:-99em;overflow:hidden;}


hidden doco comments:

Hi, thank you so much for explaining this. I am just wondering what the url is for the image now that it is in my themes folder? Do I need to include something where the 'url' is and then remove the brackets around (your-image-name.jpg)?

background-image:url(your-image-name.jpg)

I apologise if this question is very simple, I am just completely new to wordpress.

Cheers,

hiddendoco


Andrzej comments:

Hey,
No - just replace the url as it so, so:

if your file name is:

myLogo.jpg ---> background-image: url(myLogo.jpg);
images/myLogo.jpg ---> background-image: url(images/myLogo.jpg);
my-logo-file.jpg ---> background-image: url(my-logo-file.jpg);

remeber to keep upper and lower case same as you have them in your FTP

2010-05-14

Oleg Butuzov answers:

Take look to Nicole answer. this is almost corrent .

but simple markup error in code

<h1 id="blog-title"><a href="<?php echo get_option('home') ?>/" title="<?php bloginfo('name') ?>" rel="home"><img src="pathtoimg.jpg" width="XXX" height="XXX" alt="<?php bloginfo('name'); ?>" id="logo" /></a></h1>

she is winner in this post.

2010-05-14

Ehthisham tk answers:

image source
<img src="<?php bloginfo('template_url'); ?>/images/logo.png" border="0"/>

put logo in autofocus/images/

2010-05-15

Kerry Webster answers:

After looking at the 'autofocus theme' and assuming you want a 595x200 px header (you can use whatever size you want but the theme allows 600px. With the spacing used by the theme, 595px will line up with the first post image.), use the following procedure to accomplish your task. You can see an example of this theme with the changes added at http://beta.kerrywebster.com.

1) Add the following css to the style.css file in the 'autofocus theme' folder. Add it after the /* =header */ section and before /* =nav */ section (approximately line 71-for semantics):

/* =header overrides */
#header { background-image:url(img/hdr01.jpg); background-repeat: no-repeat; background-position: 0 0; margin-top:0px; margin-bottom:5px; height:200px; }
#header h1, div#blog-description { text-indent:-5000%; }

2) Copy your header image to the themes 'img' folder>> 'wp-content/themes/autofocus/img/'. If your image is not named 'hdr01.jpg' make the appropriate change to the 'background-image:url' setting in the css from step 1.

That is essenitially all there is to it. I can supply the base theme's style.css file - with the changes above added - if selected. I can also make any suggested changes to the css based on the specifications of your header image. Again, I was assuming a 595x200 px image. If you have a different size image, need spacing at the top or bottom of the header image, need a repeating image or any minor specification change let me know.

Example: http://beta.kerrywebster.com