WordPress › Support » Need help changing header image. PLEASE!

cellarridge
Member
Posted 4 months ago #

My site, http://vivelacasaverde.com/ is running an old header. I need to change the image. I have the new one ready to swap out but I simply cannot find where to do this at. Plus, I am not sure that my computer is one that started the site, which I am not sure if that is my issue. I believe the theme I am running is WSC6 1.0.5 by Go Imai.
Any help will, in fact, help.
peredur
Member
Posted 4 months ago #

Depending on how your theme works, you may be able to change the header image in your Dashboard. Something like Dashboard --> Appearance --> Header.

If not, and assuming your theme follows normal conventions you may have to modify the header.php file.

Try the Dashboard options first and let us know

Cheers

PAE
cellarridge
Member
Posted 4 months ago #

I have searched far and wide in my available options in dashboard and the appearance options. How do I go about modifying the header.php file?

Thank you for the reply!

Cheers
peredur
Member
Posted 4 months ago #
You can edit the header.php file in Dashboard --> Appearance --> Editor.

When you're in the editor, click on the 'Header' link on the right hand side and the code for header.php will be displayed.

This is the code that currently displays the header:
```
<?php
if ( is_front_page() ) { ?>
	<div id="top-image">
		<div id="top-image-wrap">
			<?php if(function_exists('wp_cycle')) { wp_cycle();} else { ?>
			<img src="<?php echo get_template_directory_uri(); ?>/img/top-image-1.jpg" />
			<?php } ?>
		</div>
	</div>
<?php } else { ?>
	<div id="second-image">
		<div id="breadcrumb">
		<?php if(function_exists('bcn_display')) { bcn_display(); } ?>
		</div>
	</div>
<?php } ?>
```
What this code does is to display an image (possibly a random one) on the front (home) page. It does not display an image on other pages.

What do you want to do with this code? Do you want to display a single image and display it on all pages? Or do you want something else?

Cheers

PAE
cellarridge
Member
Posted 4 months ago #

Thank you. The website is such that there is only one page that is on display. So You could say that the header will display on all pages. Currently, on the site, there is one page. I want an image that is the exact same to replace the one that currently exists.
http://www.vivelacasaverde.com
peredur
Member
Posted 4 months ago #
Firstly, I would recommend that you make your changes in a Child Theme. It's the only recommended way of modifying a WordPress theme and takes about five minutes to do.

Once you have a minimal child theme activated, you can copy your parent theme's header.php file into your child theme's directory and WordPress will automatically use it in preference to the version in the parent theme's directory.

Regardless of whether you have a child theme or not, you need to access the header.php code from the Dashboard (Appearance --> Editor).

Once in the code editor, you need to delete all the code above except for the following lines:
```
<div id="top-image">
  <div id="top-image-wrap">
    <img src="<?php echo get_template_directory_uri(); ?>/img/top-image-1.jpg" />
  </div>
</div>
```
You may not actually need both those divs, but hey, let's not tempt fate, eh?

:)

This also demonstrates one of the advantages of using a child theme. You are only altering the child theme's version of the file. The parent theme's version remains unaltered. So you can always get back to square one, either by copying the parent theme's version back over the child theme version, or by reactivating the parent theme.

Then you need to edit the src attribute to point to the image you want to use. Let's suppose you've created a child theme. The easiest thing to do would be to create a new directory in your child theme's folder (let's call it 'images') and copy your header image into it. Let's assume you've called the image "logo.jpeg".

Now you can reference the image as follows:

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo.jpeg" />

When you have your image showing on your page, we may need to do some tidying up of its size and position, but let's get it showing first!

Good luck.

Cheers

PAE
cellarridge
Member
Posted 4 months ago #

Yeah, so I really think I am lost now. I don't understand how to get this child theme, where to upload the images...
One cursory question that might help is can I do this stuff on any computer? Do I need to be working on a particular 'host' computer? Inserting files, creating sub-directory...lost.
I have a blog that I didn't start but now need to edit and change the header image. I can edit the text and some of the elementary things but I need to replace the giant header at the top with one that has fresh dates. I have the image ready, I just need to replace it. There is only one page to the blog. http://www.vivelacasaverde.com
I understand HTML a little so I get the editor function but what I don't get is where is it pulling the current header image from? It isn't in the blog's media library visible online. So it makes me wonder where it is coming from. Solving that, I think I could replace that one with the new one and be gold.
Please.
Cheers
esmi
Theme Diva & Forum Moderator
Posted 4 months ago #

can I do this stuff on any computer?

Certainly. See installing WordPress locally.
cellarridge
Member
Posted 4 months ago #

So I HAVE to do that to replace this image?
esmi
Theme Diva & Forum Moderator
Posted 4 months ago #

See peredur's last post.
peredur
Member
Posted 4 months ago #

cellaridge, you don't absolutely have to create a child theme, but you'll be taking a risk if you don't. For people who are not old hands at this sort of thing, I think it's the safest thing to do. Just read the Codex article I linked to and follow the instructions. It takes about five minutes.

The only thing you need to know is how to create a directory (folder) for your child theme and how to upload a valid style.css file to it. You would create a folder for your images in much the same way. Or you could just upload your image to your child theme folder if you don't want to use a sub-directory (but if you do you'll need to alter the path I gave you). You use an FTP client like FileZilla to do these things. So you'll need to know your FTP account details from your web host.

Having said that, you can go right ahead and alter your existing theme's header.php file: but if you do you'll be taking a risk.

As for HAVING to do something to replace the image, yes, it appears that your chosen theme does not allow you to do this from the Dashboard. It's a pity, but it is the case. It is something that most themes do allow via configuration rather than having to mess with the HTML/PHP/CSS code.

HTH

PAE
cellarridge
Member
Posted 4 months ago #

If I chose to take the risk and alter the existing .php file, how do I do that. Advanced apologies if it is stated above.
peredur
Member
Posted 4 months ago #

Dashboard --> Appearance --> Editor

Then select the 'Header (header.php)' link on the right hand side (by default the contents of style.css are displayed for editing.

Once you have selected the link, the PHP code will appear in the editor.

Note that whether you use a child theme or not, you still have to upload your image. So you'll probably have to use an FTP client anyway.

Cheers

PAE
cellarridge
Member
Posted 4 months ago #

I downloaded the FTP filezilla but now don't know how to upload.

cellarridge
Member
Posted 4 months ago #

This is the text at the end of my header code:

END ORIG CODE-->
<div id="top-image">
		<div id="top-image-wrap">
			<?php if(function_exists('wp_cycle')) { wp_cycle();} else { ?>
			<img src="<?php echo get_template_directory_uri(); ?>/img/top-image-1.jpg" />
			<?php } ?>
		</div>
	</div>
<?php } ?>  

<div id="wrap">

Is there a way to change the image source or directory?

peredur
Member
Posted 4 months ago #
For using Filezilla, please google "filezilla help".

I know that's the code in your header.php file because I posted it here a few posts back along with instructions as to how it should be modified. See my earlier post.

You put the image wherever you want, but you have to insert the correct code into the <img> tag's src attribute. So you have to:
- Upload it to some location on your site
- Note down the absolute URL for that location
- Modify the header.php code as described earlier
- Modify the HTML/PHP for the image location in the src attribute
If you do the first two things and then post the location, we can tell you how to construct the src attribute value.

One thing it might be useful for me to clarify. In one of my earlier posts when I said to, "Delete all the code above", I was referring to all the code listed in my previous post and not all the code above that which I was talking about, in the file. Just thought I'd make that clear since it's a bit ambiguous as it stands.

HTH

PAE
cellarridge
Member
Posted 4 months ago #

I uploaded it to the media library on my blog's dashboard sidebar. The absolute URL, I believe, is:
http://vivelacasaverde.com/wp-content/uploads/2012/01/12_LCV_website_header.jpg

peredur
Member
Posted 4 months ago #

OK.

You need to replace all this code:

<?php
if ( is_front_page() ) { ?>
	<div id="top-image">
		<div id="top-image-wrap">
			<?php if(function_exists('wp_cycle')) { wp_cycle();} else { ?>
			<img src="<?php echo get_template_directory_uri(); ?>/img/top-image-1.jpg" />
			<?php } ?>
		</div>
	</div>
<?php } else { ?>
	<div id="second-image">
		<div id="breadcrumb">
		<?php if(function_exists('bcn_display')) { bcn_display(); } ?>
		</div>
	</div>
<?php } ?>

With this code:

<div id="top-image">
  <div id="top-image-wrap">
    <img src="<?php echo (wp_upload_dir())['baseurl']; ?>/2012/01/12_LCV_website_header.jpg" />
  </div>
</div>

Try that and let's see what it gives us.

Cheers

PAE

cellarridge
Member
Posted 4 months ago #

So i did it (i think). But now nothing loads when I go to http://www.vivelacasaverde.com
What now?
peredur
Member
Posted 4 months ago #
Then you can't have done it right. Following exactly what I gave you shouldn't have caused an error like that, even if it was slightly wrong.

You could try this:
```
<div id="top-image">
  <div id="top-image-wrap">
    <img src="http://vivelacasaverde.com/wp-content/uploads/2012/01/12_LCV_website_header.jpg" />
  </div>
</div>
```
If that works, it was my code that was wrong. If it doesn't you've made alterations other than those I gave you. In which case, please post the code in header.php, using pastebin in line with the forum rules.

Cheers

PAE
cellarridge
Member
Posted 3 months ago #
So, I am starting with a whole header code of this:
[Code moderated as per the Forum Rules. Please use the pastebin]

and replacing only this part:
[Code moderated.]

With this part:
```
<div id="top-image">
  <div id="top-image-wrap">
    <img src="<?php echo (wp_upload_dir())['baseurl']; ?>/2012/01/12_LCV_website_header.jpg" />
  </div>
</div>
```
or this one:
```
<div id="top-image">
  <div id="top-image-wrap">
    <img src="http://vivelacasaverde.com/wp-content/uploads/2012/01/12_LCV_website_header.jpg" />
  </div>
</div>
```
So my finished, entire code for the Header section of my editor HTML will look like:

[Code moderated.]

Is that right? To have all that code still in there?
cellarridge
Member
Posted 3 months ago #

Full, pre-edited HTML:
http://pastebin.com/hvk43Ad2#

Part to edit:
http://pastebin.com/DuHMSuQe

Finished HTML:
http://pastebin.com/sadQMKRq
peredur
Member
Posted 3 months ago #

Put back the original code and let's start again. There's a few things in there I'm not happy with.

Cheers

PAE
cellarridge
Member
Posted 3 months ago #

Okay: I got aggressive and just started pasting code in with little to no regard for the long term and ended up with exactly what I wanted!
http://www.vivelacasaverde.com
now has a new header! Thank you both for all of your help!
It is much appreciated!
Saved me!
cellarridge
Member
Posted 3 months ago #

For those following along at home, here is what the final header code ended up looking like:
http://pastebin.com/rMWenizn
peredur
Member
Posted 3 months ago #

Glad it's worked out for you.

:0)

PAE
cellarridge
Member
Posted 3 months ago #

Okay, well, how do I edit the images in the side bar on the right?
peredur
Member
Posted 3 months ago #

You need to start another thread for this. Your new question is not related to the first one.

However, you should know that the images were uploaded to your site last May, so it's something being done locally. That would suggest that somebody your end knows how to do it.

Cheers

PAE
cellarridge
Member
Posted 3 months ago #

Thank you for all the help. On to the next forum.
peredur
Member
Posted 3 months ago #

:-)

PAE

Reply

You must log in to post.

WordPress.org

Forums

Need help changing header image. PLEASE! (30 posts)

Reply

About this Topic

Tags

Code is Poetry