get_header() │ WP 1.5.0
Подключает файл шаблона header.php (шапку). Если передан параметр $name , то будет подключен файл header-
Работает на основе: locate_template()
Хуки из функции
Возвращает
null|false . null при удачном подключении файла, false если файла шаблона не существует.
Использование
$name(строка) Индекс названия файла, который нужно подключить: header-.php
По умолчанию: null $args(массив) (с WP 5.5) Дополнительные параметры для подключаемого файла. Используйте переменную $args в подключаемом файле.
По умолчанию: array()
How to Edit the WordPress Header
The first step in enhancing the default design, which is typically applied to your site following the installation of WordPress, will be changing the content and appearance of your website. Of course, you should start by altering the header’s appearance, and that is exactly what this guide is intended to do—show you how to do it efficiently and swiftly. We’ll be utilizing WordPress 6.0 and the Twenty Twenty-Two theme for this tutorial.
Table of Contents:
- How to Access the Header Configuration
- How to Edit the Appearance of the Header
- How to Add Custom Header Images to WordPress
- Verify if Your Theme Supports Custom Header Images
- Upload a Header Image Using the Site Editor
- Upload a Header Image Using the Customizer
- Choose the Right Image
- Add a Local Video in .mp4 format
- Add a Video from YouTube
- Editor: Utilizing the Cover block in the Site Editor, you can upload a header image.
- Customize: You can select Customize and look for the Header Image option on these themes by clicking on that button.
- You might be able to upload a featured image to your homepage in its place if your theme doesn’t offer this Header Image option.
Upload a Header Image Using the Site Editor
With the Twenty Twenty-Two theme, the most versatility in terms of where and how you can show a header image is found in themes that come with the Editor. Take these actions:
- Click Upload to upload the image from your computer, or click on Select Media to choose an existing image on your site. Video headers are also supported.
Upload a Header Image Using the Customizer
If your theme uses the Customizer, you can follow these steps:
- Go to Appearance → Customize.
- There, look for a Header Image option (if it’s not there, this means that your current theme does not support the use of a header image.)
- Click Add new image:
- Under Media Library, you can choose from existing images on your site.
- Under Upload files, you can upload an image from your computer.
Choose the Right Image
It’s best that you choose a .jpeg, .gif, or .png file.
There is no specific image size that we can suggest here because every site and theme is different. You can experiment with various image sizes and see the results on your website. Typical situations that you might run into include:
- Upload an image with bigger and better resolution parameters if the image appears hazy.
- Upload a wider image file if the image does not fill the entire width of your website.
- Upload an image with a lesser file size if it takes a while for the image to load on your website.
- Use a colorful, abstract, or photographic image without text if the image contains text that will be obscured on mobile screens. The text can then be added over the image in the Cover block.
Typically, a header image takes up most or all of the site’s width. When you upload an image with a 16:9 aspect ratio (for example, 1920 x 1080 pixels or 1280 x 720 pixels), you may experience success.
The ideal image dimensions to utilize may be suggested by your topic. Go to Appearance → Themes and select Info to verify this. In the Quick Specs section, scroll down and search for any suggested header image sizes.
How to Delete Header Images
If you want to remove the current image header from your website, click on the Hide image button.
To delete a header image, you can go to Appearance → Header and remove the header image you uploaded.
Note:
Keep in mind that more Header modification is often done in the files of the specific theme you are using. As a result, if you wish to change the sizes, borders, or colors of the placeholder space for the header, you need to consult the instructions for your theme.Use the Save Changes button at the bottom of the page to finish editing the top position element of your website once all the changes have been made and you are happy with the outcome.
How to Add Videos to a WordPress Header
For example, real estate agents, vacation firms, and charitable organizations can all greatly benefit from adding a video as a header. Visitors are more drawn to video content than photographs are. Compared to photos, which are simpler to alter, videos also gain viewers’ belief in the legitimacy of the content displayed more quickly.
There are two ways to add videos to the top of your website in WordPress:
How to Add a Local Video in .mp4 Format
The first is by uploading a video directly to your Media Library:
Warning:
Note that even just an 8MB video in your header can increase your bandwidth generation significantly, as it will be auto-played on every page visit. To avoid excessive bandwidth usage, check the next step in this section of our WordPress tutorial, in which we cover how to embed a video from YouTube.Note:
Even though your header already contains a video, adding an image is a terrific idea. If there isn’t a fallback picture provided, the user will see an empty space if the visitor’s browser, for some reason, can’t or takes a long time to load the video.Add a Video from YouTube
For higher resolution clips that will not affect your bandwidth limitations, you should utilize outsourcing video content websites, such as YouTube. It’s best and most comfortable to use the Customize → Header Media for that purpose:
You now understand how to change your WordPress website’s header. With this, you can capture website visitors’ interest right away. Check out our tutorial navigation menu on the left for more information on the remaining platform pieces and how to modify them.
Где header в wordpress
Modify the theme code to edit the WordPress header
By modifying the theme code, you retain full control over the content of your WordPress header. Any changes made become part of the theme codebase and are therefore subject to version control. This is the preferred option for experienced users and admins. You have several options to modify the theme code:
- Add code to the template file header.php
- Add additional functions in the functions.php file
- Create a child theme and add changes
Method Advantages Disadvantages Add code to header.php conceptually simple to grasp; precise control of the order of code injections; also works for visible changes hardcoded changes; with repeated changes there is a greater risk of them becoming confusing Create functions in functions.php clear separation between presentation and functionality; the order in which the code is injected can be specified greater complexity; can be confusing for beginners Create child theme changes are update-safe and can be easily undone if necessary slightly higher effort; requires a one-off modification to the theme Add code in the header.php file
The most straightforward way to add code to the WordPress header is to edit the “header.php” file. This WordPress file is a universal template that is used across nearly every theme. Let’s exemplify this by looking at the official “TwentyTwenty” theme to see how a typical header.php file is structured:
The code above shows the WordPress header. The HTML head sits between the opening
and closing tag. In addition to a few meta tags, the HTML head contains a call to the WordPress function wp_head – a so-called WordPress hook. Programmatically, this is linked so that other elements can be placed in the HTML head. These elements are added before the closing tag. The wp_head hook is therefore only suitable for adding non-visible elements.To add more elements to the HTML head, simply place your code before or after the wp_head () call. Please note that the order of the elements is important, especially when it comes to stylesheets and scripts. With meta tags the order usually doesn’t matter. Stylesheet and script tags should not be manually placed in the WordPress header. You can find out more about this in the following section.
The HTML head is followed by the HTML body whereby the opening tag is followed by a header element
. This page header contains the visible elements such as the header image, logo, and menu. Any HTML or PHP code that we insert at this point will be displayed in the browser.
In principle, we can add more visible elements to the page header. However, be cautious. If you insert bad code, your site may no longer load or display errors. Since the header.php file is a global template, every single page is affected by changes made to it.
Create functions in functions.php
Much like the header.php file, the functions.php is found in most WordPress themes. However, it’s not a PHP template that is translated directly into HTML. Rather, the code in functions.php is used to configure the theme and the site. It is possible to define functions and link them to the WordPress hooks. As a simple example, let’s add a robots meta tag in the HTML head:
function robots_meta() < echo ''; > add_action( 'wp_head', 'robots_meta' );First, we define a new function in functions.php, which outputs the HTML code of the meta tag. We call this robots_meta (). You can choose any name, but it’s best to select one that reflects what the function does. The WordPress function add_action () is named after the function definition. We name this WordPress hook “wp_head”, which we’ll use to link to our function called “robots_meta”. A call to wp_head () then leads to a call to robots_meta (); the HTML code contained in robots_meta () is output in the HTML head.
Let’s modify our example. We want to enable the inclusion of the “is_front_page ()” into the Google cache by omitting “noarchive” on the WordPress homepage. And we want to exclude pages where WordPress comments are activated (“is_single () && comments_open ()”) from being indexed by adding “noindex”:
function robots_meta() < if ( is_front_page() ) < echo ''; > else if ( is_single() && comments_open() ) < echo ''; > else < echo ''; > > add_action( 'wp_head', 'robots_meta' );Adding additional scripts and stylesheets in WordPress — here’s how to do it
Sometimes you need to add external software such as a tracking script or a cookie consent solution to a WordPress site. Often, it’s recommended to paste a code snippet directly into the WordPress header to load additional scripts or stylesheets. In practice, this requires a certain amount of caution, because the order in which scripts or stylesheets are added is critical!
Newly defined style properties complement or overwrite previously defined properties. If the order of the style definitions is reversed, it can lead to serious display errors. The same goes for scripts. If a script accesses variables or functions that have been defined in another script, there is a dependency. The dependent script must be loaded last.
WordPress has special functions and hooks to integrate additional scripts and stylesheets. The scripts and stylesheets are queued up («enqueue») and that’s reflected in their names e.g., “wp_enqueue”. The following code is an example of how stylesheets and scripts are loaded within functions.php:
function add_theme_scripts() < wp_enqueue_style( 'main-style', get_stylesheet_uri() ); wp_enqueue_script( 'main-script', get_template_directory_uri() . '/js/main.js', array( 'jquery' )); >add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );Create a child theme
When you’re adapting code of a WordPress theme, it’s advisable to create a child theme. The child theme “inherits” the code of the “parent theme”, selectively adding and overwriting components. Using a child theme ensures that changes are separated from the original theme code. It also means that updates can be made without overwriting the original parent theme. The two methods previously discussed can be used to create a child theme.
Register a domain name
Build your brand on a great domain, including SSL and a personal consultant!
How to Customize Your WordPress Header (Beginner’s Guide)
Do you want to show a custom header for your WordPress website?
Many WordPress themes come with a built-in header that sits at the top of each page. You may need to customize it to add important links, social icons, site search, or other elements to make a good first impression.
In this article, we’ll show you how to customize your WordPress header and even create a fully custom header for your entire site or specific pages.
What Is the Header in WordPress?
Your website header is the top section of every page on your WordPress website, and probably the first thing your visitors will see.
It often displays your website logo and title, navigation menus, and other important elements that you want users to see first.
For example, here’s our header area on WPBeginner that millions of readers see every month.
By customizing your site’s header, you can give it a unique design and make it more useful for your visitors. You can link to your most popular pages, display social icons or your business phone number, and show call to action buttons for more conversions.
With that being said, let’s take a look at how to easily customize your WordPress header. You can use the following links to jump to the section you want to read.
- Customize Header by Using the WordPress Theme Customizer
- Customize Header by Using the WordPress Full Site Editor
- Create Custom Header and Page Layouts with SeedProd
- Adding a Custom Header for Each Category
- Add a Widget Area to Your WordPress Header
- Add Random Header Images to Your WordPress Blog
- Add Custom Code to Your Website’s Header (Advanced)
Customize Header by Using the WordPress Theme Customizer
Many popular WordPress themes let you use the WordPress theme customizer to make changes to the header area of your WordPress layout. This feature is sometimes called a custom header, but not all themes support it.
You should start by navigating to Appearance » Customize in your WordPress admin area.
Note: If you don’t see Appearance » Customize in your WordPress admin menu, but only see Appearance » Editor (Beta), then that means your theme has enabled full-site editing. In that case, you should skip to the next section.
Your theme may add a ‘Header’ section to the customizer, or add header options under the ‘Color’ section, but this varies from theme to theme. Here are a few examples.
Some themes, like Twenty Twenty-One, do not offer header customization options at all. In this case, we recommend you use a drag & drop theme builder plugin like SeedProd which we cover below.
The Twenty Sixteen theme allows you to add a background image to the header, and even add random header images.
Some free and premium WordPress themes offer even more theme customization options. For example, you may be able to change your header’s font style, layout, colors, and much more. But you are limited to what the theme developer allows you to do.
For example, you can create a custom header using the theme customizer with the Astra theme.
Astra has a dedicated ‘Header Builder’ option in the panel on your left. Here you’ll find different settings to edit the appearance and style of the header. You can build a custom header by adding blocks, just like when editing a blog post or page in the WordPress content editor.
To start, simply hover over an empty area in the header and click the ‘+’ icon to add a header block.
Next, you can select any block you’d like to add to your custom header. For example, you can add widget block, account block, search block, and more.
Plus, the header builder also lets you drag and drop the blocks and place them above or below the header.
You can further customize each block that you add to the header.
For instance, selecting the Site Title & Logo block will give you options to upload a site title and logo, change the logo’s width, display a site tagline, and more.
Besides that, you can also change the background color of the header or add a background image to appear in the header.
When you’re done editing the custom header, simply click the ‘Publish’ button.
For more details, see our ultimate guide on how to use the WordPress theme customizer.
Customize Header by Using the WordPress Full Site Editor
WordPress added full-site editing to WordPress in version 5.9. If your theme supports the new feature, then it replaces the theme customizer. However, at this time there are only a few themes that work with the full site editor.
When you use a compatible theme, you can customize your header by navigating to Appearance » Editor. This will launch the full site editor, which is just like the block editor you use to write WordPress posts and pages.
When you click the header, you will notice the name of the template at the top of the page changes to ‘Page Header’.
Now when you click the ‘Settings’ icon on the toolbar, you will see options to customize the header’s layout, color, border, and dimensions.
As an example, we’ll change the header’s background color. First, you need to click on the ‘Color’ section to expand it. After that, you should click on the ‘Background’ option.
A popup will appear that allows you to select a solid color or gradient. There will also be a number of colors that you can select. When you click on a color, the background of your header will be changed immediately.
You can find more customization options by clicking the ‘Styles’ icon at the top right of the page. This will let you change the header’s font, colors, and layout.
To learn more about how the full site editor works, see our beginner’s guide on how to customize your WordPress theme.
Create Custom Header and Page Layouts with SeedProd
If you want to have total control over your headers, footers, and sidebars to give your website a unique design, then we recommend using SeedProd.
SeedProd is the best WordPress theme builder plugin that allows you to easily create a custom WordPress theme without writing any code. This includes creating headers, footers, and everything else needed for an attractive WordPress theme.
You can even create multiple custom header styles for different pages and sections of your website.
Note: You can use the free version of SeedProd to create custom landing pages including custom headers, but you will need the Pro version to create fully custom themes which include sitewide header layouts.
First, we recommend following our guide on how to easily create a custom WordPress theme without any code. Once you’ve done this, SeedProd makes it simple to customize your header.
All you need to do is click the ‘Edit Design’ link found under the header.
This will open the header in SeedProd’s drag and drop editor.
From here, you can easily customize your header by adding new blocks.
There are blocks for template tags like a site logo, any of your WordPress widgets, and advanced blocks such as a countdown timer, navigation menu, or social sharing buttons.
The best part is that you can further customize each block using the theme builder. For instance, you can change the size and alignment of your logo or choose which pages to show in the navigational menu. It even allows you to add an image in the header.
With SeedProd, you can also add a complete section to your theme’s header template.
Sections are a group of blocks, and you can use them for different areas on your website. This includes headers, footers, features, testimonials, calls to action, and more.
To use a header section, first switch to the ‘Sections’ tab in the Design panel.
After that, choose a header section you’d like to use for your website. SeedProd offers multiple section templates that you can use.
Next, go ahead and customize the header section.
Once you’re happy with your custom header, make sure you click the ‘Save’ button to store your changes.
Now, you’re ready to publish your custom header.
Simply go to SeedProd » Theme Builder page from your WordPress dashboard and click the toggle next to the ‘Enable SeedProd Theme’ option to Yes.
Once you enable the option, SeedProd will replace your default WordPress theme with a new custom theme and header.
You can now visit your website to see the new custom header in action.
Create Different Custom Headers for Each Page
Did you know that using SeedProd, you can create custom headers for different pages?
The theme builder lets you add custom headers for each page on your WordPress website. This way, you can show a customized header for different categories, tags, post types, page types, and more.
To start, you’ll need to go to SeedProd » Theme Builder from your WordPress dashboard and click the ‘Add New Theme Template’ button.
A new popup window will appear where you’ll need to enter the theme template details.
Go ahead and enter a name for your theme template. After that, choose ‘Header’ as the template type from the dropdown menu. You can leave the ‘Priority’ field blank.
Next, you’ll need to enter the display conditions for your custom header. For example, we used the conditions where it will show on all posts and pages that are in the tutorials category.
Don’t forget to click the ‘Save’ button when you’re done.
After that, you can go ahead and edit the custom header using the SeedProd drag and drop theme builder.
When you’ve finished editing the custom header, simply click the ‘Save’ button at the top.
You can see more ideas on how to customize your header using SeedProd in our beginner’s guide on how to easily create a custom WordPress theme using the SeedProd theme builder.
Adding a Custom Header for Each Category
Most websites display the same header on all posts, pages, categories, and archive pages. However, you can display a different header for each WordPress category.
This can be done by adding code to your theme files, but you will have more control by using a theme builder.
We showed you earlier how to customize your header using the SeedProd theme builder plugin. SeedProd also allows you to create multiple custom headers and display them for different categories using conditional logic.
To create a new header, you need to navigate to SeedProd » Theme Builder and click the orange ‘Add New Theme Template’ button. Alternatively, you can duplicate your current header and use it as a starting point.
A popup will be displayed where you can give the theme template a name and select ‘Header’ from the Type drop down menu.
You also need to enter a priority. This is used if more than one header meets the conditions for a certain page, and the header with the largest priority will be displayed. The default header has a priority of 0, so make sure you enter 1 or higher.
After that, you’ll need to set up one or more conditions. This lets SeedProd know when to display a certain header. You simply select the conditions from drop down menus.
On the first two menus, you need to select ‘Include’ and then ‘Has Category’. In the last field, you should type the name of the category where you want the header to be displayed.
You can easily display the same header for multiple categories by clicking the ‘Add Condition’ button and including another category. When you’re finished, make sure you click the ‘Save’ button to save the new header.
Now you can customize the design of each new header using SeedProd’s drag and drop editor as we showed you earlier.
To learn more, including how to do this using code, see our guide on how to add a custom header, footer, or sidebar for each category.
Add a Widget Area to Your WordPress Header
If you’re building a custom theme from scratch using code, then you might be looking to add a WordPress widget to your header to capture the attention of your visitors. Widgets allow you to add content blocks to specific sections of your theme easily, but not every theme includes a header widget area.
We mentioned earlier how simple it is to add widgets to your header using the SeedProd theme builder. But what if you wish to add a widget to a normal WordPress theme’s header?
Some themes, like the Astra theme, let you do this using the WordPress theme customizer. For example, Astra adds an option called ‘Header Builder’ that lets you completely customize the header, including adding widgets.
If your WordPress theme doesn’t currently have a WordPress widget area in the header, then you’ll need to add it manually by adding the following code to your functions.php file, in a site-specific plugin, or by using a code snippets plugin.
This is a more advanced option since you’ll need to know where to place the code and how to style it using CSS.
function wpb_widgets_init() < register_sidebar( array( 'name' =>'Custom Header Widget Area', 'id' => 'custom-header-widget', 'before_widget' => '
'', 'before_title' => ''', ) ); > add_action( 'widgets_init', 'wpb_widgets_init' );
Hosted with ❤️ by WPCode
This code registers a new sidebar or a widget ready area for your theme.
If you go to Appearance » Widgets, then you will see a new widget area labeled ‘Custom Header Widget Area’. Now, you can add your widgets to this new area.
Finally, you need to add some code to your theme’s header template located in the header.php file of your theme. This will add the widget area you created earlier to your header so that the widgets will be displayed on your website.
You need to copy this code snippet and paste it where you want the widget to display.
Hosted with ❤️ by WPCode
Depending on your theme, you may also need to add CSS to WordPress to control how the widget area is displayed.
Add Random Header Images to Your WordPress Blog
Another way you can make your WordPress headers more attractive is by adding random images to the header section.
Showing images that randomly change helps capture your visitors’ attention and make your content more engaging.
To add random header images to your WordPress blog, you can use the theme customizer and upload images to the header section. This option may vary depending on the WordPress theme you’re using.
Next, go ahead and select the ‘Randomize uploaded headers’ option.
If you want more control and flexibility in showing random images in the header section, then you can also use a WordPress plugin.
Add Code to Your Website’s Header (Advanced)
Finally, if you’re wanting to add custom code to your website’s header section, you can do that easily from your WordPress dashboard. This method is recommended for advanced users and not suitable for beginners because it includes editing code and requires technical knowledge.
You can find your theme’s header files by going to Appearance » Theme File Editor from the WordPress admin panel. In the ‘style.css’ theme files, you can scroll down to the site header section and add or remove code.
Note: We don’t recommend that you directly edit the theme files because the slightest mistake can break your website and mess up the design.
An easier way of adding custom code to edit your site’s header is by using WPCode.
First, install and activate the free WPCode plugin. For more details, please see our guide on how to install a WordPress plugin.
Upon activation, you can go to Code Snippets » Header & Footer from your WordPress dashboard. Next, enter the custom code in the ‘Header’ section.
After entering the code, click the ‘Save Changes’ button.
For more details, you can see our guide on how to add header and footer code in WordPress.
We hope this tutorial helped you learn how to customize your WordPress header. You may also want to learn how to choose the best web design software, or check out our list of must have plugins to grow your site.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
How to Access the Header Configuration
Before starting to work with the Twenty Twenty-Two theme, which includes Full Site Editing, let’s cover some basic options that don’t come with FSE. Assuming that you are already logged into the admin area of your WordPress installation, you should navigate to Appearance → Customize:
Select Site Identity or Header → Site Identity. You will see options to edit the logo, site title, tagline, and site icon.
How to Edit the Appearance of the Header
Once you go to the Site Identity section, on the right, you can see your Current Header.
How to Add Custom Header Images to WordPress
Now we will step away from just a specific theme and explain things in the needed detail.
Verify if Your Theme Supports Custom Header Images
How you can add a header image will depend on the theme you pick for your website. From your dashboard, select Appearance, then look for one of the following choices: