We were in Lesson 1 of the series on designing WordPress themes from scratch. We talked about the basic files that make up a WordPress theme. In this lesson, we will learn more about creating header pages in WordPress
Creating the header of the pages we mean Header, and this is the basis of WordPress templates, without the header.php file nothing can be done, and in this file we will give commands to show the main menu, the logo, the search icon or a button to log in or something else according to what you want You as a WordPress developer or website owner.
The first step in creating the header is to give a command by passing a code in the Functions.php file to create a basic menu called Nav Menu, and this menu will appear in the menus section of the WordPress control panel so that we can later add the elements we want to display, whether links, pages, or ratings.
Create a header for a wordpress site
Go to the functions.php file and write the following code to create a header for WordPress
register_nav_menus( array( 'top-menu'=> 'Top Menu', ));
Top Menu i, is the name of the menu
Now go to the WordPress menus section, you will find a new menu name Top Menu
Now as shown in the picture, create a new list, and save it
Using and showing the header on the WordPress site in the Header.php . file
Now go to the header.php file and write the following code that is responsible for showing the main menu on the pages in the WordPress site, knowing that this process is dynamic, meaning that this code will show the menu items on all pages, articles, archives, etc. on the WordPress site
This code is placed directly below the body tag, see here how we wrote the first code in the header file.
<nav class="navbar ">
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<?php
wp_nav_menu(
array(
'theme_location'=> 'top-menu',
'menu_class'=>'top-bar',
));?>
</div>
<span onclick="openNav()">☰</span>
</nav>
Better formatting of header in WordPress
What you need to know is that the main menu appeared yes, but you need to work with html and css codes in order to be able to show it better..
Lists in WordPress consist of several layers, the first layer is the basic elements, the second layer is the one that comes after the first layer, the third layer comes after the second layer, and so on..
Therefore, the issue of coordinating the layers must be understood separately in order to obtain the optimal result, and this is exactly what we will do in this series now.
See the two pictures before you start to know more about what I was talking about
Use header format in style.css . file
We will go to the style.css file and we will paste the css code there,
CSS Code – First Layer
.navbar {
display: flex;
justify-content: space-evenly;
align-items: center;
border-top: 4px solid #289dcc;
z-index: 1200;
padding: 0 50px 0 50px;
color: #0000;
margin: 0;
clear: both;
background-color: transparent;
}
.sidenav a {
color: #000;
display: block;
text-decoration: none;
float: none;
font-size: 14px;
-webkit-transition: all 0.3s;
text-transform: uppercase;
font-weight: 500;
line-height: 1em;
letter-spacing: .7px;
border-radius: 0;
padding: 18px 20px 18px 20px;
}
.navbar span,
.navbar .closebtn{
font-size: 30px;
color:#000;
}
.sidenav a:hover {
background-color: #1B252F;
color: #green;
}
.sidenav ul li:hover>a:after {
opacity: 1;
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
.sidenav ul li a:after {
position: absolute;
left: 0;
bottom: 1px;
width: 100%;
height: 2px;
background: #f4952f;
content: "";
opacity: 0;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
}
.top-bar{
display: flex;
justify-content: center;
align-items: center;
list-style: none;
margin:0px;
}
.top-bar ul{
display: flex;
}
.sidenav li{
position: relative;
padding-left: 0px;
list-style: none;
padding-right: 0px;
margin:0;
padding:0;
}
CSS Code – Second Layer
.top-bar li .sub-menu{
display: none;
position: absolute;
z-index: 9666;
width: 200px;
}
.sidenav li .sub-menu a{
display: block;
color:white;
text-decoration: none;
font-size: 14px;
background: #040a15;
border-left: 4px solid orange;
}
.sidenav li .sub-menu a:hover{
text-decoration: none;
cursor: pointer;
}
.sidenav .sub-menu li .sub-menu {
right: 100%;
padding: 0px;
top: 0;
}
.top-bar > .menu-item-has-children:hover > .sub-menu{
display: block;
padding-right: 0;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children:hover .sub-menu {
display: block;
padding-right: 0;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu {
display: none;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu :hover.menu-item-has-children .sub-menu {
display: block;
z-index: 999;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu {
display: none;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu :hover.menu-item-has-children .sub-menu {
display: block;
top: 100%;
right: 0;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu {
display: none;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu :hover.menu-item-has-children .sub-menu{
display: block;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu {
display: none;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu :hover.menu-item-has-children .sub-menu {
display: block;
top: 100%;
right: 0%;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu{
display: none;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu :hover.menu-item-has-children .sub-menu {
display: block;
top: 100%;
right: 0%;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu{
display: none;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu :hover.menu-item-has-children .sub-menu {
display: block;
top: 100%;
right: 0%;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu{
display: none;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu :hover.menu-item-has-children .sub-menu {
display: block;
top: 100%;
right: 0;
}
Now, if you notice the change that occurred after all the codes that we put, the header is now ready to be used on your site, but only on large screens, and not only on mobile or tablets, and for this we will need to give a new format that supports the Navigation Menu format on small screens, and as we will By writing js code (i.e. javascript for that)
Header of a mobile wordpress website
Now we will format and give the other shape of the header on screens smaller than 929 pixels, and for this we will create the following code:
@media screen and (max-width: 992px) {
.navbar{
justify-content: space-around;
padding: 0px 0px 0px 0px ;
}
.top-bar ul{
justify-content: space-between;
display: block;
background-color: black;
background-image: linear-gradient(90deg,#fff 0%,#fff 80%);
clear: both;
padding:0px 0px 0px 0px;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1200;
top: 0;
left: 0;
background-color: transparent;
background-image: linear-gradient(220deg,#4c41b9 0%,#00ff83 100%);
overflow-x: hidden;
transition: .5s;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 #ccc;
padding-top: 60px;
border-top: 5px solid #fcb900;
}
.sidenav a{
padding: 22px;
}
.sidenav a:hover {
text-decoration: none;
color: white;
}
.top-bar{
display: block;
justify-content: unset;
align-items: unset;
list-style: none;
margin:0px;
padding: 0px;
}
.sidenav li{
position: relative;
padding-left: 0px;
list-style: none;
padding-right: 0px;
margin: 0;
}
.top-bar li .sub-menu{
display: none;
position: absolute;
z-index: 9666;
}
.sidenav li .sub-menu a{
display: block;
font-size: 14px;
border-left: 1px solid orange;
}
.sidenav li .sub-menu a:hover{
text-decoration: none;
cursor: pointer;
}
.sidenav .sub-menu li .sub-menu {
right: 0%;
top: 0;
}
.top-bar > .menu-item-has-children:hover > .sub-menu{
display: block;
padding: 0px;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children:hover .sub-menu {
display: block;
padding: 0px;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu {
display: none;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu :hover.menu-item-has-children .sub-menu {
display: block;
z-index: 999;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu {
display: none;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu :hover.menu-item-has-children .sub-menu {
display: block;
top: 100%;
right: 0;
padding: 0px;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu {
display: none;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu :hover.menu-item-has-children .sub-menu{
display: block;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu {
display: none;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu :hover.menu-item-has-children .sub-menu {
display: block;
right: 100%;
left: 0%;
padding: 0px;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu{
display: none;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu :hover.menu-item-has-children .sub-menu {
display: block;
top: 100%;
right: 0%;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu{
display: none;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu :hover.menu-item-has-children .sub-menu {
display: block;
top: 100%;
right: 0%;
padding: 0px;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu{
display: none;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu :hover.menu-item-has-children .sub-menu {
display: block;
top: 100%;
right: 0;
padding: 0px;
}
}
If you notice that there are still some actions that must be done, in order to hide the menu item and the close icon on screens larger than 992 and show them on screens smaller than that size..
The css code to hide elements for large screens is:
@media screen and (min-width: 992px) {
.navbar span,
.navbar .closebtn{
display: none;
}
}
Now, in order to activate the menu item on mobile screens smaller than 992px we must write a simple JavaScript code , which is as follows:
function openNav() {
document.getElementById("mySidenav").style.width = "290px", document.getElementById("main").style.marginLeft = "250px", document.body.style.backgroundColor = "rgba(0,0,0,0.4)"
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0", document.getElementById("main").style.marginLeft = "0", document.body.style.backgroundColor = "white"
}
Now if you notice the changes, everything is fine.. We have a header, and inside it there is the main menu fully coordinated on wide screens and lower screens (mobile). You can control the coordination of colors and fonts as you want, what concerns me in this series is to give the full essence of creating the header of the pages in the WordPress site.
In order to show a button, we must write the html code, in the header.php file. This code will show us this button, which we will name, for example: Login.
Go to header.php file and paste the following code just before closing the nav tag<a href=”https://wpmrj3.com/” class=”btn “>Login</a>
Now between the “” signs, you can put the link you want. As for the formatting of the button shape, you can also use the btn class that we defined the button with, in the css file with the following code:
ng the nav tag<a href="https://wpmrj3.com/" class="btn ">Login</a>
.btn {
border-radius: 3px;
text-align: center;
padding: 8px 22px;
font-size: 15px;
margin: 5px;
color: white;
transition: background .3s,border .3s,border-radius .3s,box-shadow .3s,-webkit-border-radius .3s,-webkit-box-shadow .3s;
background-color: #191e23;
}
Show the logo in the header of the wordpress site
In order to display the logo, we must first define the logo creation feature that WordPress provides us as a website building platform, so we will write a code in the functions.php file
add_theme_support( 'custom-logo', array( 'height' => 150, 'width' => 140, 'flex-height' => true, 'flex-width' => true, 'header-text' => array( 'site-title', 'site-description' ), ) );
As you note. We previously gave the logo dimensions of 150 length / 140 width.. You can modify these dimensions as you want from the previous code, and modify them using css as below.
Now to display the logo in the header we need to put the following line of code in the header.php file after the code with which we showed the previous button and just before closing the </nav> tag
<?php the_custom_logo(); ?>
Now you can format the logo image as you want… It can be done in the following way, for example:
.navbar img{
height: 180px;
width: 32%;
}
The final form should be as follows:
So far, the lesson on creating a WordPress template from scratch – creating the header of 2 pages, leave us a comment if you have any questions or advice.