• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar

WP SITES

2468

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Subscribe
  • Register
  • Videos
  • Log in

Need Help? - Get Coding Support Now

Add Responsive Header Image In Genesis Sample Theme – Beginners Guide

This beginners guide shows you how to add a full width header image to the new Genesis Sample child theme by StudioPress.

Your image will reduce in size ( scale down ) when the screen size reduces so it’s not cutoff.

In this example, we’ll add a image which is 1140px width by 350px height however this method can be used for any image dimensions.

There’s 2 steps :

Step 1 : Modify the PHP code on lines 154 and 155 in the Genesis Sample themes functions.php

// Adds custom logo in Customizer > Site Identity.
add_theme_support(
	'custom-logo', array(
		'height'      => 350,
		'width'       => 1140,
		'flex-height' => true,
		'flex-width'  => true,
	)
);

Step 2 : Add your image to Customize > Site Identity > Logo and set the width using the Logo Width setting :

In this case, the width has been set to 1140px.

No need to modify any CSS.

Demo Video

Shows the image being added to the Customize > Site Identity > Logo field and scaled down on smaller screens.

Subscribe for new Genesis Tutorials

Header Image

Primary Sidebar

Recently Coded

  • Infinity Pro – Change Team Page From 4 To 3 Columns
  • Infinity Pro Vertical Menu
  • Genesis Sample Theme – Custom Archive Page Template With Different Hero Images
  • Foodie Pro – Reposition Search Box Before Nav Menu
  • Showcase Pro – Use Custom Image As Single Post Entry Header Background

Brad Dalton Specializes In Genesis child theme customization & code modification.

Advertise · WPEngine · Genesis · Log in

  • Membership
  • by Theme
  • Contact
  • RSS
  • Newsletter ( Twice Weekly )