Codex

Interested in functions, hooks, classes, or methods? Check out the new WordPress Code Reference!

Difference between revisions of "Appearance Header Screen"

m (link to Ja Codex, add cat, changelog)
(Add Description of V4.1 Theme Customizer)
 
(15 intermediate revisions by 9 users not shown)
Line 1: Line 1:
 
{{Languages|
 
{{Languages|
{{en|Appearance Header SubPanel}}
+
{{en|Appearance Header Screen}}
{{ja|Appearance Header SubPanel}}
+
{{fr|Appearance Header Screen}}
  +
{{hr|Zaslon Izgled Zaglavlje}}
  +
{{ja|Appearance Header Screen}}
  +
{{pt-br|Sub-Painel Cabeçalho}}
  +
{{zh-cn|外观 顶部页面}}
 
}}
 
}}
   
  +
==WordPress Version 4.1 or later==
==Appearance → Header==
 
   
  +
WordPress [[Version 4.1]] removed this custom header screen and the link of '''Appearance > Header''' menu was directed to the Header Image section in the Theme Customizer.
In the [[Appearance Header SubPanel]], if allowed by your current theme, you can customize the header of your theme by uploading and configuring an image.
 
   
  +
Refer the [[Appearance Customize Screen|Customize Screen]] for more detail information about Customizer.
[[Image:appearance-header.png|640px|Appearance Header SubPanel]]
 
   
 
==Appearance → Header==
  +
 
Prior to WordPress [[Version 4.1]], in the [[Appearance Header Screen]], if allowed by your current theme, you can customize the header of your theme by uploading and configuring an image.
   
Back to [[Administration Panels]].
+
Back to [[Administration Screens]].
   
 
===Header Image===
 
===Header Image===
  +
 
[[Image:custom-header.jpg|640px|Appearance Header Screen]]
  +
 
;Preview: In this box, the uploaded image, or the selected color is available for previewing.
 
;Preview: In this box, the uploaded image, or the selected color is available for previewing.
   
  +
;Select Image: Upload an image for your header. Images of exactly 960 × 250 pixels will be used as-is.
;Upload Image : You can upload a custom header image to be shown at the top of your site instead of the default one. On the next screen you will be able to crop the image. Images of exactly 940 × 198 pixels will be used as-is.Choose an image from your computer. Click the browse button to find the image on your local computer, then once the image is selected, click the Upload button to upload the image and display it in the Crop Header Image SubPanel. See the displays and you can crop and publish the image for use as the header image.
 
   
  +
* Choose an image from your computer.
;Default Images : If you don‘t want to upload your own image, you can use one of these cool headers. Check the Radio button next the desired image--Berries, Cherry Blossoms, Concave, Fern, Forest Floor, Inkwell, Path, or Sunset. These images are delivered with the {{DefaultTheme}}.
 
  +
* Choose an image that is already in your [[Media_Library_Screen|Media Library]].
   
  +
;Default Images: The [[Glossary#WordPress_Twenty_Eleven_theme|Twenty Eleven Theme]] comes with six default images you can choose from.
; Remove Image : Click the Remove Header Image button to remove the header image. You will not be able to restore any customizations.
 
   
  +
Once you add an image you will get some more options:
; Reset Image : Click the Restore Original Header Image button to restore the original header image. You will not be able to restore any customizations.
 
   
  +
; Uploaded Images: Select from images that you have already uploaded to the header screen.
  +
 
; Remove Image: Click the Remove Header Image button to remove the header image. You will not be able to restore any customizations.
  +
  +
====Header Text====
  +
  +
You can also make changes to your header text:
  +
* remove the header text
  +
* change the header text colour.
   
 
====Crop Header Image====
 
====Crop Header Image====
:The Crop Header Image feature allows you to select an area of an image and then delete all but that selected area. When initially displayed, WordPress shows that maximum sized crop area in a lighter shade as represented by the northern third of the US States map in this example. When using a theme such as the {{DefaultTheme}} the header image is expected to be 940 × 198 pixels so that is the size of the selected area shown. You can click, hold, and drag the lighter crop selection area and down (or up) the image to the desired point. Also, you can click one of the eight crop resizer boxes (little square box on each corner and each side) to move the crop selection area.
+
:The Crop Header Image feature allows you to select an area of an image and then delete all but that selected area. When initially displayed, WordPress shows that maximum sized crop area in a lighter shade as represented by the northern third of the US States map in this example. When using a theme such as the {{DefaultTheme}} the header image is expected to be 960 × 250 pixels so that is the size of the selected area shown. You can click, hold, and drag the lighter crop selection area and down (or up) the image to the desired point. Also, you can click one of the eight crop resizer boxes (little square box on each corner and each side) to move the crop selection area.
   
[[Image:appearance-header-crop-image.png|640px|Appearance Crop Header Image SubPanel]]
+
[[Image:appearance-header-crop-image.png|640px|right|Appearance Crop Header Image Screen]]
   
 
;Crop and Publish : Click this button and the cropped area of the image is saved as the header image. At this point the image is displayed and the preview section a message saying '''Header updated. Visit your site to see how it looks.''' displays with a link to view your site.
 
;Crop and Publish : Click this button and the cropped area of the image is saved as the header image. At this point the image is displayed and the preview section a message saying '''Header updated. Visit your site to see how it looks.''' displays with a link to view your site.
Line 35: Line 55:
 
:Click the '''Save Changes''' button to ensure any changes you have made are saved. Once you click the button, a confirmation text box will appear at the top of the page telling you your Header has been saved.
 
:Click the '''Save Changes''' button to ensure any changes you have made are saved. Once you click the button, a confirmation text box will appear at the top of the page telling you your Header has been saved.
   
  +
== Related ==
 
  +
* For system administrators, theme developers: [[Custom Headers]]
Back to [[Administration Panels]].
 
   
 
== Changelog ==
 
== Changelog ==
   
* [[Version 3.0|3.0]] :
+
* [[Version 3.0|3.0]] : New Screen
  +
* [[Version 4.1|4.1]] : Custom header was removed. Appearance - Header menu item link directly to the Customizer.
  +
  +
  +
{{Administration Screens Footer}}
   
[[Category:Administration Panels]]
+
[[Category:Administration Screens]]
 
[[Category:Getting Started]]
 
[[Category:Getting Started]]
 
[[Category:Design and Layout]]
 
[[Category:Design and Layout]]
  +
[[Category:UI Link]]

Latest revision as of 17:30, 24 July 2015

WordPress Version 4.1 or later

WordPress Version 4.1 removed this custom header screen and the link of Appearance > Header menu was directed to the Header Image section in the Theme Customizer.

Refer the Customize Screen for more detail information about Customizer.

Appearance → Header

Prior to WordPress Version 4.1, in the Appearance Header Screen, if allowed by your current theme, you can customize the header of your theme by uploading and configuring an image.

Back to Administration Screens.

Header Image

Appearance Header Screen

Preview
In this box, the uploaded image, or the selected color is available for previewing.
Select Image
Upload an image for your header. Images of exactly 960 × 250 pixels will be used as-is.
  • Choose an image from your computer.
  • Choose an image that is already in your Media Library.
Default Images
The Twenty Eleven Theme comes with six default images you can choose from.

Once you add an image you will get some more options:

Uploaded Images
Select from images that you have already uploaded to the header screen.
Remove Image
Click the Remove Header Image button to remove the header image. You will not be able to restore any customizations.

Header Text

You can also make changes to your header text:

  • remove the header text
  • change the header text colour.

Crop Header Image

The Crop Header Image feature allows you to select an area of an image and then delete all but that selected area. When initially displayed, WordPress shows that maximum sized crop area in a lighter shade as represented by the northern third of the US States map in this example. When using a theme such as the WordPress Twenty Seventeen theme the header image is expected to be 960 × 250 pixels so that is the size of the selected area shown. You can click, hold, and drag the lighter crop selection area and down (or up) the image to the desired point. Also, you can click one of the eight crop resizer boxes (little square box on each corner and each side) to move the crop selection area.
Appearance Crop Header Image Screen
Crop and Publish 
Click this button and the cropped area of the image is saved as the header image. At this point the image is displayed and the preview section a message saying Header updated. Visit your site to see how it looks. displays with a link to view your site.

Save Changes

Click the Save Changes button to ensure any changes you have made are saved. Once you click the button, a confirmation text box will appear at the top of the page telling you your Header has been saved.

Related

Changelog

  • 3.0 : New Screen
  • 4.1 : Custom header was removed. Appearance - Header menu item link directly to the Customizer.


See also Administration Screens and Network Admin.