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

Chloé Watts is the Founder of chloédigital and a Fashion Technologist.

(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 TheFashionTechnologist.com 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!


chloe-signature

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.


Stay Updated

If you enjoyed this post, subscribe to the Fashion Technologist for updates

What are you interested in?

Discover more:
email course
(blog)Random Banner Ad Featured Image
Screen Shot 2014-06-10 at 17.43.10
two ways to make your site more secure
(feat) theFEED Profiles- RooftopAntics.com
How to change the default media linking option in wordpress
Why I do not like blog posts being By Admin
how to create a wordpress plugin

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">