Add Default Header Image To Twenty Fourteen Child Theme

This code simply pulls an image named header.jpg from your child themes images folder.

default header twenty twelve theme

Copy the PHP code from the view raw link in the GIst and paste it at the end of your child themes functions.php file.

You can still add a custom header image under Appearance > Header if you want to change the default.

Change Header Image Size

You’ll find all the CSS code for styling and changing the size of your header image once uploaded, under the Header section of the parent themes style.css file.

Here’s some sample CSS i have tested which you can add in your child themes style.css file:

#site-header {
	position: relative;
	z-index: 3;
	max-width: 630px;
	min-height: 175px;
}

And here’s the result:

change header image size twenty fourteen theme

The max width is 1260px and the height is flexible.

Note: If you change the header image size, you may also need to change the CSS for the Media Queries which you can find near the end of your style sheet.


Comments

2 responses to “Add Default Header Image To Twenty Fourteen Child Theme”

  1. Tom 'Frisby' Fraser Avatar
    Tom ‘Frisby’ Fraser

    I’m learning WordPress. I would like to use a different header image for each page on my site, that reflects the content of the page. I am using WordPress default 2014 theme.

    1. Brad Dalton Avatar
      Brad Dalton

      Hello Tom

      You can do this using a plugin or code.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.