Changing photos

Hi there!

Not a noob question at all! Pretty good one, actually ??

Misty Lake isn’t actually set up to use Featured Images as post headers, so to make this work, you’ll need to customize it a bit.

The first step will be to set up a child theme. That way your customizations won’t get overwritten next time the theme is updated.

Once that’s set up, you’ll want to make a copy of the parent theme’s header.php file in your child theme folder. This is the file we’re going to modify.

In your copy, you’ll see this block of code near the bottom, starting on line 44:

		<?php $header_image = get_header_image();
		if ( ! empty( $header_image ) ) { ?>
			<div class="header-image">
				<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
					<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
				</a>
			</div>
		<?php } // if ( ! empty( $header_image ) ) ?>

That’s the code that controls the header image. Roughly translated it says “Check to see if the site has a header image, if it does, set up a section to display it, and show the image there.

We want to add a layer to that logic so the theme also looks to see if this is a post with a featured image.

Replace the above code, with the following:

		<?php $header_image = get_header_image();
		//If we  have a header image OR we're on a single page with a thumbnail, set up the header
		if ( ! empty( $header_image ) || ( is_single() && has_post_thumbnail() ) ) { ?>
		<div class="header-image">
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">

				<?php //If this is a single post with a thumbnail, use the thumbnail
				if ( is_single() && has_post_thumbnail() ) {
					the_post_thumbnail('full-size');
					// Otherwise, use the header image
				} else { ?>
					<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
				<?php } ?>
			</a>
		</div>
		<?php }// end of header image block

THAT translates to a slightly more complex version. It goes a bit like this: If there’s a header image, OR if this is a post with a featured image, set up the header area. Next, if it’s a post with a featured image, use that. Otherwise, use the site header image.

Give that a try and let me know what you think ??

Hey Chad thanks for the detailed response and code. I am about to reveal the extent of my noobishness. I started by trying to create a child theme. However, the site that I’ve set up so far has been entirely through wordpress’s web admin. I did download the wordpress folder thinking it would be software but I haven’t done any uploading via ftp or anything. So, basically my site as far as I know is not connected to any folders on my local computer.

So, the first thing you’re supposed to do in making a child theme is to make a child theme directory in your file structure… however, I don’t believe this will do anything because the site isn’t connected to it. So I started looking into maybe connecting the site to the folders via ftp, but I came across something on wordpress that wordpress.com sites don’t allow. My site right now is on wordpress.com. The plan was to get that going and then transfer it to its final home.

So, anyway, I’m not sure what I need to do to create the child theme. Any further thoughts would be appreciated. Thanks.

Ah, I see. ??

WordPress.com sites are a bit different, and you won’t use a child theme there. You’ll be able to set up a child theme and apply the above code down the road when you have the ability to upload a custom theme.

When you get to the point of being able to use a child theme you’ll build the child theme locally on your computer. Then you’ll install the child theme (either through FTP, or by compressing the folder into a .zip file and using Appearance > Themes > Add New).

So the site isn’t really connected to or using the files on your computer – you create the theme and then put the files on your server ??

Again though, for now, you won’t do these things as your site doesn’t currently support them.

While you’re on .com, I’d recommend using these forums instead:
https://en.forums.wordpress.com/forum/themes

Those are .com-specific, so you’ll get info that more directly relates to your current setup.

hey, thanks for your advice. So I am in the process of setting the website up on our own domain (not on wordpress.com) through BlueHost. I’m connected via ftp, getting a feel for how things are set up, etc. So, I followed the instructions on setting up the child theme. I uploaded it to the server in the wp-content/themes folder. But now when I hit the appearance tab I get this message :
Parse error: syntax error, unexpected end of file in —–functions.php on line 139. (I edited out the file structure there)

• This reply was modified 7 years, 10 months ago by treesforgoshen.

It sounds like there’s an error in your child theme’s PHP syntax.

If you’d like, you can copy the contents of the file into a pastebin and I’ll take a look ??

awesome. thanks.

so, i’m new to pastebin too and i don’tknow how to embed it here. here’s the link: https://pastebin.com/UQ2YfBXQ

The link is perfect, thanks ??

It looks like you’ve copied the full contents of the parent theme’s funcitons.php file into your child theme, which is likely the source of the error you’re seeing.

Your functions.php file should contain the opening block from the codex page, and then any functions you’re adding or replacing. You don’t want to include the items from the original file that you’re leaving as is ??

Try using this, and only this, in your functions.php file:

<?php
function my_theme_enqueue_styles() {

	$parent_style = 'mistylake-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

	wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
	wp_enqueue_style( 'child-style',
		get_stylesheet_directory_uri() . '/style.css',
		array( $parent_style ),
		wp_get_theme()->get('Version')
	);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Great. That seems to work. Thank you, like i said this is still all Greek to me.

Odd thing is, when I tried just uploading the functions.php I still got the error. But when I deleted the whole folder from the server and re-uploaded it it seemed to work.

Now, on to tackle the original issue – the pictures!!

Glad the error has passed ?? Enjoy your new images!

hey so thanks for the code. For some reason when I use it the default image seems to disappear. however, the images i put in the featured image don’t appear in the header, there’s just no image.

which may work ok. we can just add a photo at the top of the post rather than having one in the header. but I’m just curious, did I do something wrong?

Also, in an unrelated question I’m having another issue. For some reason, when I try to publish a blog post. I get this error:

Fatal error: Uncaught Error: Call to undefined function mistylake_get_template_part() in /home3/treesfo2/public_html/wp-content/themes/misty-lake-child/single.php:16 Stack trace: #0 /home3/treesfo2/public_html/wp-includes/template-loader.php(74): include() #1 /home3/treesfo2/public_html/wp-blog-header.php(19): require_once(‘/home3/treesfo2…’) #2 /home3/treesfo2/public_html/index.php(17): require(‘/home3/treesfo2…’) #3 {main} thrown in /home3/treesfo2/public_html/wp-content/themes/misty-lake-child/single.php on line 16

Have tried several different blog posts, same result every time. Any ideas what’s going on?

Hm. Sounds like something has gone awry either in your child theme or in the parent theme.

If you activate the parent theme, do you get the same error? If so, try setting up a new child theme to see if that solves the problem.

You can also try disabling any plugins you’re running to see if any of them are causing a conflict