Including a Banner after the Header in WordPress


Including text between the Header and Title of a WordPress post or page can be done with the proper placement of a little code, a counter file and some text.

There are many plugins available for WordPress that can insert text above or in the Header, in the Footer or just above the content. However, I have not found one that puts it just below the Header and above the Title. This location is a good place to put a Banner that can be changed as a user selects other posts or pages on the website.

The following is the method I used for this website to show the Banner displayed above. If you click on any item in the menu or any link, the text will change.

Method

The method consists of the following:

  • – Make sure you are working with a Child of your theme.
  • – Access your website using cPanel and navigate to where your Child’s files are located using the File Manager.
  • – Make sure you have a copy of the following which will be changed: header.php, style.css.
  • – Create a new file in the Child directory for the counter to be used. I call mine banner-counter. (Note there is no need for a suffix.)
  • – Put this file in Edit mode and enter 1. Save and then Close it.
  • – Create a new file in the Child directory for the text. I call mine banner.php.
  • – Put this file in Edit mode and enter HTML and PHP commands and text desired using the template given below.
  • – Login using Admin to your WordPress website so you can do any purging needed.

Make Sure You Do Not Break Your Website

Remember that your website is live and anything you do could affect how it operates. It is best to access your website and try it often as you make the changes described here. If it fails, just delete the changes made and save the file again.

If you are using any plugin that minifies what is sent to the user to decrease the loading time, you need to purge it after each change. For example, I use Fast Velocity Minify and it places a FVM Purge button at the top of my Admin window. This will force a new minify to occur.

You also need to put the Developer’s menu onto your browser’s menu. (For Safari this is called Develop.) After each change, use the Empty Cache command to force the new minified files to be used.

Include the Banner in the Header file

Open the header.php file in the Child directory in Edit mode. Scroll to the bottom and include the Banner file by entering this PHP code. (I use the twenty-fourteen theme and the last line of code is <div id=”main” class=”site-main”> so this goes after it.)

<?php
include(‘banner.php’);
?>

(Replace banner.php with your own name.)

Save the header.php file. Purge the cache on the website and empty the cache on the browser and make sure nothing changed. It should not because the file has no content yet.

Add Code to the Banner File

Open the banner.php in edit mode and add the following code. Change the text that is bold. to get the path, cpanel shows it in the upper-left in the Editing box. Copy all that is there and paste it inside the quotes. You can use any text, links and even images in the Add your text here area. I just found some appropriate text with links from some of my product posts and used it.

<?php
$file = “path to the counter file“;
$counter = file_get_contents($file);
switch ($counter){
case “1”; ?>
<div id=”banner1″>
Add your text here
</div>
<?php $counter = 2; file_put_contents($file,$counter); break; ?>
<?php case “2”; ?>
<div id=”banner2″>
Add your text here
</div>
<?php $counter = 3; file_put_contents($file,$counter); break; ?>
<?php case “3”; ?>
<div id=”banner3″>
Add your text here
</div>
<?php $counter = 1; file_put_contents($file,$counter); break; ?>
<?php default; ?>
<?php $counter = 1; file_put_contents($file,$counter); ?>
<?php } ?>

You can keep adding case statements or reduce the 3 that are there now. Make sure that the $counter = X is set to the next one and the last one is to be 1. Notice that when retrieved using file_get_contents the counter is a text value.

Save the banner.php file. Purge the cache on the website and empty the cache on the browser and make sure that the banner appears. Because the CSS code for the <div id=”bannerX”> does not exist, the banner will not be formatted.

Note that the counter is used by all users. As a user moves to another post, the banner may be the same if other users have done 2 moves.

Add Formatting to the CSS File

Formatting of the text is determined by ID what is called in the <div> HTML code. Open the style.css file in Edit mode and add the following:

#banner1 {
background-color:  blue
margin: auto;
width: 80%;
padding-left: 5px;}

 

Copy the above and change banner1 to banner2 and banner3, etc. for as many as you have in the banner.php file. Change the background-color to, for example, yellow, or lime.

Color names can be found at this w3schools page. Choose light colors and test each to make sure the text can be read.

You can apply any other formatting you want to the above css code, but continue to test: purge the cache on the website and empty the cache on the browser and make sure it works.

Making the CSS Code Responsive

For mobile devices, the Banner may take up too much of the screen. You can make it disappear for small screen widths by using @media commands around the above CSS code. Also, as is the case for my banner, the text is for products that only work on desktop computers and so is not appropriate for cellphones.

To make it appear above a given size, in this case 782px, add the @media as indicated below (do not forget the closing } ).

@media screen and (min-width: 782px) {
#banner1 {
background-color: blue
margin: auto;
width: 80%;
padding-left: 5px;}
}
This must be followed by code to make the banner invisible and hidden as indicated below. Otherwise, the banner will be unformatted.
@media screen and (max-width: 782px) {
#banner1 {
display: none;
visibility: hidden;}
}
Change the size to whatever you want, but keep the max-width test after the min-width.

Comments

If you have any comments or feedback on this or other posts, use the email form on the Contact page. I have not enabled comments on any of the posts because it attacks too much spam.