Do It Like Refinery29: How to Create a Header Banner Ad Space in like 15 minutes

(blog)R29 Featured Image (1)

I was trolling through my favourite online fashion publishers this morning, as ya do and noticed a few of them had header banner ads. Okay, this wasn’t the first time I’d ever noticed this before but I thought it would be a cool idea to show you how to recreate this on your own blog.

r29 Blog Post

Your banner ad could be a graphic you’ve made yourself to promote one of your social networks, like what Refinery29 have done here. Or it could be a rewardStyle ad, a LikeToKnow.It ad, a google ad etc. You get my drift!

To create your header banner ad you’ll need to delve into the code of your WordPress (not on WordPress?) blog theme, and you can do this by going to Appearances > Editor.

Screen Shot 2014-06-12 at 11.59.08

The new page that opens up should be the code for the stylesheet for your current theme. DON’T FREAK IT OUT. Look to the right side for a file called Header (header.php). Every WordPress theme will have this file as it’s mandatory to get your theme to work. Click this file name.

Screen Shot 2014-06-12 at 12.22.08

In the new page you should have Header (header.php) at the top. Mine says “toolbox” before it because it is the name of my theme, your’s will say whatever your lovely theme is called.

Screen Shot 2014-06-12 at 12.06.35

We need to find the opening of the body tag, to do this use CMD + F (CTRL + F on non-mac users) to open your browser’s find box. Type the word “body” to be taken to the “body tag”.

Screen Shot 2014-06-12 at 12.12.17

Screen Shot 2014-06-12 at 12.12.58

Just below the body tag we will paste our code for the Banner Ad box (includes inline styling). You will need to replace the words PASTE AD HERE, with the code for your actual ad.

Et Volía! You are all set up to make that extra paper! It’s literally the easiest thing.

I have put a working example on desktop site if you want to take a peak-a-boo. I have placed in a Missguided rewardStyle banner ad in mine.

This is what mine code ends up looking like (includes inline styling):

Let me know how you get on!


ps. Need your ad banner to change on refresh? Check out this tutorial

Disclaimer: This post is not affiliated with Refinery29 in any way, I’m just a fan.