Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

  • Print
  • + Share This
From the author of Using Flexible Custom Headers

Using Flexible Custom Headers

Ready to check out flexible custom headers in action? Follow these steps:

  1. Log into your WordPress Dashboard and navigate to Appearance > Header (see Figure 3). The Custom Header page loads.
  2. The Preview section displays a preview of your current header image, or your site's title and tagline if you don't have a header image (see Figure 4). Scroll down to the Select Image section. Click the Browse button, find your new header image on your computer, select the image, and click Upload.
  3. Figure 3 When custom header images are supported, the Appearance menu displays a Header link.

    Figure 4 If you don't currently have a header image, the Preview box shows your site's title and tagline. The Select Image section displays a suggested height and width for your header image.

  4. The Crop Header Image screen displays your new image, with an overlay matching the suggested height and width for your header (see Figure 5). Resize this overlay by dragging any corner, or move the entire overlay by dragging the non-dimmed section to a new position.
  5. Figure 5 When the Crop Header Image screen loads, the non-dimmed section matches the suggested height and width for your header image—but you can change it as you want.

  6. When you're happy with your new header image, click Crop and Publish.
  7. The new header image appears on the Custom Header screen (see Figure 6). Click the Visit Your Site link to view it in action! (Figure 7 shows my example.)
  8. Figure 6 Your new custom header image appears in the Preview section, along with a banner letting you know that the header image is now live on your site.

    Figure 7 Click Visit Your Site to see your new header image.

  • + Share This
  • 🔖 Save To Your Account