This Foodie Pro theme tutorial is a step-by-step guide on how to move your header logo to the left and insert a leaderboard ad inline with your logo. If you want to know how to style another part of the theme, check out my other Foodie Pro tutorials.
Another part of the Foodie Pro child theme structure that I really wanted to alter was re-adding the header right widget that is usually found in the Genesis theme framework. In Foodie Pro, Shay Bocks has edited the structure of the header and implemented her own ‘Top Ad’ widget which stretches across the whole width of the top of the header.
But I fancied a different widget structure at the top of my blog. Instead of a fairly tall, full width header, I wanted a much shorter header with a logo to the left and a leaderboard ad to the right, inline with the logo. I thought that this structure would make the leaderboard ad blend in with the rest of the site better, rather than be this glaring, probably flashing, centred block – the very first thing your would see – sitting on top of my logo. Note that you might not be able to see my leaderboard ad on the site at the moment, as the ad only shows to US readers, but the picture above shows you what it ends up looking like.
So this meant reinstating the Genesis header right widget in the Functions.php file and making some edits to the Style.css to get the logo and widget to play nicely with each other.
The code below is also specifically for adding a leaderboard ad which is sized 720px wide. This requires a logo that is 300px wide for the code below to work. The height can be different, but the width must be 300px. My logo is 163px high, so if yours is different, replace all the instances of 163px with the height of your logo.
The first thing you need to do is add your new custom header/logo size to your functions file.
I use the program TextWrangler to edit my theme files. It enables you to open, edit and save the files remotely using your FTP login credentials (I found mine in my 1&1 hosting dashboard). If I make a mistake, I can just ‘undo’ the action and save again to return things to their previous state. I will point out that if you want to save yourself potential trouble, you should create a backup of the entire file you are working on so you can restore it if merely undoing the action goes wrong, but I haven’t personally had to resort to that yet.
Add this code to the bottom of your Functions.php file with the height changed if necessary:
Remove this code from your Functions.php file:
Find this code in your Style.css file:
And replace it with this in your Style.css file:
Find this code in your Style.css file:
And replace it with this in your Style.css file:
Find this code in your Style.css file:
And replace it with this in your Style.css file:
Find this code in your Style.css file:
And replace it with this in your Style.css file:
This last code edit is to move the leaderboard ad a little to the left or right so it fits best with your design. I had a background image to consider, so went for the px amounts below, but you may have slightly different requirements, so experiment a little!
Find this code in your Style.css file:
And replace it with this in your Style.css file:
When you have finished, go to your WordPress dashboard. Click ‘Appearance’, then ‘Widgets’ and paste your ad code into a Text widget. Hopefully, your lovely logo and money-making above-the-fold ad are now in the right place!
Leave a comment below if you need assistance and I’ll try and help, but remember I am a DIY blogger, not a professional developer, so go easy on me! Remember I have other Foodie Pro tutorials if you want to check them out!