Advertisement
A web page header helps users orient themselves on the page. It is the same on all pages and often contains the menu, a search function and the logo, for example. Also, there is often a nice picture there to make the page appealing. In this article you will learn how to edit the header of your website in the content management system WordPress.
Note: The available functions vary depending on the WordPress theme used.
Change header design
Edit header content
Edit header code
Change header design
theme
Colours
CSS
ThemesThe appearance of your website is influenced by the WordPress theme used. This also affects the header. You can change the theme by clicking on "Design" in the menu bar on the left and then on "Themes". There you can see which theme you are currently using and which themes are available in your WordPress version. You can use the three dots next to the individual themes to view a preview ("live demo") and information about the respective theme ("info "). You can also switch to the appropriate forum via "Support" to get tips on the theme. To select a theme for your website, click on the three dots and then on "Activate". Then confirm the process.
Colors Depending on which theme you choose, your website gets a color concept. If you want to change this, you can go to "Design" in the bar on the left and then to "Customize". Here you select "Colors and Backgrounds" to customize the color palette of your page.
CSSIf you are using a premium WordPress plan, you can also customize the CSS. This gives you more freedom and options to design your page and also the header. To do this, click on "Design" in the left menu and then on "Additional CSS".
Edit header content
menu
Logo Title Icon
widgets
MenuTo edit your website's header menu, go to "Design" in the left panel and then to "Menus". There you can edit the preset menus or create new ones. You can also choose where you want the menu to appear.
Advertisement
Logo, Title, IconIn the menu bar on the left, click on "Design" and then on "Customize". Here select "Website identity". Now you can upload a logo and insert a "Website Title". Both then appear in the header. You can also upload a "website icon". It's the icon that appears small in the browser tab.
WidgetsWidgets are small windows or containers that provide specific information or functionality. For example, there is often a weather widget on smartphones or tablets. In WordPress you can often use this function in the footer, i.e. in the lower part of the page. Depending on the theme, you can also add widgets to the header. You can find the setting in the left bar under "Theme" and then under "Widgets".
Edit header code
In addition to the visible header, there is also the element
in the HTML code of your page. It contains, for example, metadata and links to files such as scripts or style sheets. If you have good programming skills, you can change the code of the WordPress theme while also editing the header.php file that creates the page header.Warning: if you make mistakes in the code, you can damage your website. Users can then no longer call them up. Therefore, do your research before you change the code. If you don't dare to program, you can also use a corresponding plugin. With it, you can make some changes to the code more easily, more safely and without much programming experience.
Install WordPress
WordPress plugins: 6 useful extensions
What is a plugin?
send feedback
reason for contact
Report an error
Tip outdated
Miscellaneous
Your message in one sentence
Please enter a summary.
your detailed message
Please enter your message.
How may we contact you with questions?
Your first and last name
Invalid.
Your e-mail address
Please enter your e-mail address.
Invalid address.
Thanks very much. Your message has been captured.
send feedback
reason for contact
Report an error
Tip outdated
Miscellaneous
Your message in one sentence
Please enter a summary.
your detailed message
Please enter your message.
How may we contact you with questions?
Your first and last name
Invalid.
Your e-mail address
Please enter your e-mail address.
Invalid address.
Thanks very much. Your message has been captured.