Customizing the Header and Footer

The Pine uses the WordPress Customizer to allow you to add logos to the header and footer, as well as controlling whether or not to display the site title and tagline in each area. You’re also able to set up a max width for your logo if you’d like to use a larger retina-ready image.

  1. Navigate to Appearance > Customize.
  2. Select “Site Title, Tagline, and Logo.
  3. Site Title allows you to set the title for your site.
  4. Tagline allows you to set a tagline for your site.
  5. Logo allows you to set a logo to use in the header.
    1. Select Select Image and select your logo from the WordPress media uploader or upload a new image.
  6. Unchecking Display site title in header will remove the text Site Title from your site. (It still shows as an H1 on the home page for Google’s indexing though.)
  7. Unchecking Display site tagline in header will remove the Tagline from the header.
  8. Set the max width for the logo allows you to set a max width for your logo image. If you’d like your logo to be 250px wide, but would like to ensure the logo is high quality on retina screens you would upload a 500px wide version of your logo and set the max width to half the image width, 250px.
  9. Site Icon (WP 4.3+) allows you to upload a custom image to be used for the favicon of your site. This will also be used for things like the icon if someone were to bookmark the page to the home screen in iOS. WordPress suggests a square image at least 512px wide and tall.
  1. Navigate to Appearance > Customize.
  2. Select “Footer Title, Tagline, and Logo.
  3. Footer Logo allows you to set a logo to use in the header.
    1. Select Select Image and select your logo from the WordPress media uploader or upload a new image.
  4. Unchecking Display site title in footer will remove the text Site Title from your site.
  5. Unchecking Display site tagline in footer will remove the Tagline from the header.
  6. Set the max width for the logo allows you to set a max width for your logo image. If you’d like your logo to be 250px wide, but would like to ensure the logo is high quality on retina screens you would upload a 500px wide version of your logo and set the max width to half the image width, 250px.