When a visitor comes to a site, the first part of the site that catches his attention is the header. This makes it important, requiring you to customize and adjust its shape and colors, as well as the internal elements that are present on it, in an interactive way that attracts the visitor.
In this article, we will review in a simplified and clear context the easiest and most effective ways to customize the header on your WordPress site. Do not worry if you do not have the slightest experience in programming matters, as the explanation that we will provide to you will enable you to customize the header of your site professionally and in simple steps.
In the picture above is the header for the WordPress website . As you can notice, despite its simple design, it contains most of the navigation options to the site’s subsections and various section articles. It also contains links to social media platforms, in other words, everything a visitor might search for between With his hands, he can browse your site easily.
The options for customizing and modifying the header shape on the site vary according to the type of template used with WordPress, but through this article we will try to talk about the most common and common parts that can be relied upon to clarify ways to modify the important things in the header. We will apply the explanation to the Twenty Seventeen theme , which comes by default when you install a WordPress website.
We will review several different ways to modify the header, including modification through customizing the template, which is done through the WordPress control panel , some through plugins, and some through modification of the template code.
Edit the header by customizing the template
The Customize option within WordPress is a useful tool that allows you to make some modifications to the design and shape of the template and its various elements visually and see the modifications directly without the need to modify the source code.
When you enter the WordPress control panel and then go to Appearance << Customize , it will open for you the window for customizing the entire internal parts of the template, including options to customize the appearance of the template. We will discuss these options and how to exploit them to modify and customize the template exactly as desired, where you can make the following modifications:
- Adding the logo to the header
Through this customization tab, you can add the site logo by clicking on the “ site identity ” option, as in the following image:
Then a window will open for you that allows you to choose the image you want to be the logo image for your site:
We will click on the “Select Logo” option , after which a window will appear that enables us to upload the logo image. You can choose the logo image from the storage disk on your computer or from the media library of your site in WordPress, which you have previously uploaded before. After uploading the image to this part, you will notice that it appears. Automatically within the site’s header without any additional steps.
In this box you can also add the site name and tagline, which can appear instead of the logo image. There is also a check box for “Display title and description line.” If you select this, both the title and description will be displayed below the site logo.
In this window, you can also select the site icon that appears in the browser tab bar while opening your site from the desktop computer:
You can click on “ Select site icon ,” which will open a box for you to upload an image for the icon or choose it from the images previously uploaded in the media library within your site. It is best to adhere to the recommended dimensions for that image on the customization page, as you will notice that the template recommends that the logo image be square and its dimensions be at least 512 x 512 pixels. These dimensions help in displaying the image and appearing in the best possible way.
After uploading the logo image and icon image, you will see an option that allows you to edit or delete these images later. Even after setting logo images, etc., you can return again at any time to that window and make the required modifications:
- Add a background image to the header.
From the template customization menu, click on the Header Customization tab, which opens the window for modifying the header. Here you can add an image to be a background to the header:
To set the header background image, click on the “Add a new image” option to open the window for choosing the header background image. It is preferable, as when choosing logo images, to adhere to the dimensions recommended by the template itself, so that the image is clear and consistent with the appearance of the site.
There are also more header formatting options in the Header Customization window:
These options are for changing colors. The first option is for changing the background color of the header, the second option is for changing the color of the text inside the header, and the third option enables us to change or set the color of the links inside the header.
- Adding a video to the header instead of the background image.
You may need to display the content of your site in an attractive way for the visitor through the header, and images may not be sufficient for the purpose. You can then add a video to the header instead of the image. You can easily accomplish this by entering the site customization interface, and then entering the “header media ”:
Where you can click on the “Select Video” icon and upload the video that you want to show in the header in mp4 format. (It is preferable to adhere to the dimensions suggested by the template 1200 * 1200).
You can also insert a video from other external media, such as YouTube, by inserting its link. This option may be better than the option of downloading the video directly, especially if the video space is large.
Edit header through plugins
As we noted in the previous paragraphs, we can make some simple modifications to the header through the site customization window. Therefore, if you want to apply more changes and formats to further customize and give your personal character to the header of your site, you can use one of the plugins that help you do that.
- Adding Pearl to modify the header and design a new header
The Pearl plugin is the most popular plugin that provides many and varied options for modifying the header design of your entire site. It relies on a simple interactive method, which is “drag and drop,” to insert elements into the header and format them without the need to write any programming code.
To use the plugin to set and design a new header on your site, you can download and install the plugin, then go to the WordPress control panel, then you will find the Header Builder tab , which will open the settings page for the plugin, which contains the embed code:
As you can see, the code highlighted in the red box must be copied and then pasted into the header.php page, which contains the header code. Before doing this procedure, it is preferable to take a backup copy of the header.php file before making this modification and ensure that it works as required. .
The code is pasted and replaced with the code starting with <header> and ending with </header> as shown:
After pasting the code for the add-on, we will enter the add-on settings page to begin the process of designing the header shape, which you can customize in the way you want:
Now when you enter the add-on settings page, you will find many options for modifying the header, such as adding the logo inside it, controlling colors, backgrounds, etc.
If you want to design a completely new header yourself, you can enter the “ Header builder ” option indicated by the arrow in the previous image, to open before you the page for building and designing a complete header for the site again using a drag-and-drop method:
As you can see, you can click on the + sign to open the items box from which you can choose as you wish.
For example, we chose the Cart element for the shopping cart, the search element for displaying the search box on the site, and the menu element for inserting a list of items.
After that, you click on Submit to save the design you created, and the shape of the header that we designed will appear as follows:
As the animation above shows, you can add more elements inside the header easily via the drag-and-drop method as shown.
Note: Remember to include the code as we explained before, because designing the header using the plugin without including its code in the header.php file will not display the design on your site.
- Add insert header and footer to insert codes into the header
This addition is used when there is a need to insert activation codes into the header.php file or footer.php file .
You need to include these codes when you need to activate the link between your site and a third-party service provider, or when you want to confirm that your site is linked to the Google Analytics service, as well as the Google search console webmaster tools.
Using the plugin is very easy. All you have to do is log into the WordPress control panel and then go to: Settings << insert header and footer.
After that, the Add Codes page opens, where you can add the code to the header in the box below the word Script in header
There is also another box called script in body, which is used to insert codes into the <body> tag, as well as a third box called Script in footer, to insert codes into the footer.php file. In general, you should be careful when inserting or modifying any code on your site, and be careful when adding code.
Modify Header by modifying the source code
This procedure is only for those who have some experience in dealing with programming languages such as CSS, HTML, and PHP, and should not be done unless it is necessary to modify the header through the source code.
As we know, WordPress is a dynamic system, and therefore all elements on the site are set automatically through programming functions. However, static code written using the CSS language can be modified .
You can access these formatting codes through the WordPress control panel, then go to: Appearance << Theme Editor << style.css file
It will open a layout file that contains most of the layouts for the site’s internal elements, including the Header layouts.
To modify the header through the CSS format file, you must first search within the file for the formats for the header element, which are called header, or in some templates it is called Site-header, and others call it Inline-header.
Whatever your title, you will find directly under the name a lot of codes that have been written to completely customize the shape of the header:
#masthead .wrap {
position: relative;
}.site-header {
background-color: #fafafa;
position: relative;
}/* Site branding */.site-branding {
padding: 1em 0;
position: relative;
-webkit-transition: margin-bottom 0.2s;
transition: margin-bottom 0.2s;
z-index: 3;
}
From here you can modify the header formatting codes, only if you have sufficient knowledge of the CSS formatting language codes. You must be fully aware of the functions of these codes and how to modify them. Here, for example, is the Background-color code, which is used to change the background color of the header, as well as the Font-size code, which is used to change the font size used for texts and others.
Conclusion
Whatever header shape you set or customize within your site, you must ensure that the shape and design is fully compatible with mobile devices, as the mobile phone user experience has come to determine the success of the browsing experience within your site, and all indicators point to the rapid increase in the number of phone users. Mobile phone to access websites
