-
How to add banners in Wordpress site header
about 9 years ago
Whether you are newbie web Developer or Tech Geek, WordPress is great CMS (Content Management System) platform experimenting to make a website with thousands of tweaking plugins for customization. For changing header or footer you need to install plugin/ widget Header and Footer available at this link for free https://wordpress.org/plugins/header-footer/ But here we will discuss about the manual coding method for better understanding.
Following are the steps for customization of header/ Footer:
- Login to wordpress CMS Dashboard
- Click on Appearance (Right Hand Side)
- Go to Editor
- Choose header.php file appearing in the list
All you need some Beginner HTML and Css skills to customize theme because the header.php content may change according to theme you choose.
You may found a starting of body tag like this
<body <?php body_class(); ?>>>
Just after the above code add the below given code:
<div class="headerbanner"><a href="BANNERURL" target="_blank"><img src="IMAGEURL" width="200" height="50" /></a></div>
We need to change the BANNERURL to point the link of Banner and IMAGEURL to image we want to as our banner, like banner of company. You can anytime change the image dimension as requirement of theme and how smooth you theme look like.
For example:
<div class="headerbanner"><a href="http://findnerd.com" target="_blank"><img src="http://findnerd.s3.amazonaws.com/imagedata/3085/3085.jpg" width="400" height="250" /></a></div>
We have to do banner customization with the help of Div. So we have to style this Div for proper look. For this
Just go to your style.css and the below code to it.
.headerbanner { display:block; margin: 10px auto; width: 480px}Source: SiteGround
Above code will just make banner in center and have margin of 10px . you can vary this dimensions according to your judgement.
Similar method is used for footer customization, only difference is you do changes to footer.php instead of header.php file.
If you have any query regarding wordpress or Php language do post at FindNerds: Php Developer Forum .
0 Comment(s)