Updated: How To Create a Random Banner Ad

I have got a fun tutorial for you to try this weekend on your blog! A while ago I did a tutorial on creating a header ad banner and judging from my Google Analytics it was very popular so I thought I’d turn it up a notch and making an updated version which changes on refresh! On the desktop version of this blog, TheFashionTechnologist you will see ad banner at the top of the page, if you refresh the page you will see another ad. I have three in a rotation, a Missguided, Topshop and Net-a-porter one.


If you would like your banner ad to change on refresh like this, add the following code to your theme (WordPress Only) functions file or if you are cool, to your custom functions plugin.



Then replace all the PASTE AD HERE with ad’s. If you use an affiliate network like rewardStyle then paste in the banner code in this space.


This random ad banner function has three ad’s in it, to add another simply paste in another:



When happy, open up the file where you would like your ad banner to show, for example to place it at the top of your blog then open header.php and just below the tag paste in the following (if you are struggling with where to paste it, see this tutorial!):


(uses inline styling)



That’s it! Pretty straight forward once you know how huh?

chloe-signature

How to create a post signature without a plugin

A lot of bloggers have a cool little post signature at the bottom of their blog posts, I do too! I usually paste it in every time which is so long and laborious. It’s quite naughty coming from me because I could have coded something along time ago but haven’t!


I put together this code snippet that I am using now which you can copy and use on your blog. What I have done is made a shortcode, a shortcode is an easy way to paste code into a blog post without pasting the actual code and it getting messy. Also it’s easier to remember and saves time.


I could have created a tutorial which creates the signature automatically at the bottom of a blog post, but if you are like me and have been pasting it in for ages, it will be duplicate signatures on old posts and in all honesty I can’t be asked going through all the old blog posts and deleting. However if you aren’t like me and a signature is new for you I shall make this tutorial for you soonish.


Okay so to the code!

Paste the following into your functions.php file which is in your theme. You can find this via FTP or if this is alien to you go to your theme editor from within WordPress backend and find it that way.


Replace INSERTURLOFSIGNATURE with the image url of your signature.


Cool, done? Awesome. Now you a ready to use your new shortcode. When you make your next blog post you can paste in the following, where you want your post signature to show:

When you preview your blog post this shortcode will be replaced your actual post signature.



BOOM!


chloe-signature

Creating a Favicon

Whilst on the phone recently with the lovely Brenna Mader of Wanderlustandglitterdust.com helping her set up theFEED, she mentioned that she now knew what a favicon was because in theFEED settings it asks you to upload a favicon!


I was like say whatttt! Then thought about it for a second and realised I’ve seen a lot of bloggers sites without favicons so she was actually in good/bad company =]


If you are reading this and thinking what the hell is she going on about (this post is for you), a favicon is a cute little icon which displays next to your site name in your browser.


e.g.
favicon


Above is a screenshot of my Google Chrome right now, you can see I have three tabs open, one is this blog, the second is Brenna’s and the third is my Gmail. Next to each website name is a little icon – that is a favicon!


A favicon is usually 16px by 16px and traditionally a .ico file. To upload a favicon to your blog do one of the following:

Way One

Open your theme editor and check (use CMD + F on mac to use your browsers find tool) you don’t have any code that starts with

If you do, your site is already set up to have a favicon, in this case change the image url in the “src” attribute.


If you don’t then, before the close of the tag insert the following code, insert the below code, swapping our ENTERIMAGEURLHERE for the destination of your favicon image.


Way Two

Get the plugin “All In One Favicon” and follow the instructions.


chloe-signature



Coding theFEED, the late night edition

coding theFEED
 
It’s 23:17 and I am up coding the next version of theFEED. I am super excited about this next version I can hardly breathe (too dramatic?). This next edit is all about the rewardStyle shop, making it more customisable than it is now and really allowing the publisher to curate a shop feed of products for their followers.
 
When I am excited about coding something I just want it to be here already and sometimes don’t want to actually go through the process of coding it! It appears simple when it’s finished but coding the “effortless” things are actually the things that take the most time!
 
I don’t mind being up late coding, I often have to force myself to go to sleep as I can see day breaking outside my window. Now I know that puts me in the ultimate geek category but I love it. I had a chat with my friend early today and he was making fun of his web developer who stays up late to code his site and I was like MATE, those are my peoples!
 
When you love what you do in any industry you never want to stop doing it, because it’s not work for you – it’s fun, and who wants to stop having fun? That’s not to say that sometimes it’s not difficult. I often come up with bug’s coding theFEED that I don’t on face value know how to fix, but I revel in the challenge of finding the solution – as I have faith that I can and will do – regardless of how long it takes!
 
I’ve tried to fix bugs in the past that have taken DAYS, days staring at the same page, countless refreshes to see if the small piece of code I changed fixed the problem – can you imagine! But there is no, I mean NO great feeling then working on something for such a long time then finally figuring out what the problem was, it feels so good! The best part about it is once you’ve solved it once, you now know the solution for life!
 
Therefore I count all bugs as a win! Gotta stay positive out here =]
 
Okay happy rant over, I am going back to my code.

 

chloe-signature

 
 

Ask me your tech questions!

submit your questions

Can I safely say I’m in the blogging swing of things now?

 

It’s weird because I spend my day speaking to bloggers and yet I was not consistent on my own blog. I was starting to feel like a hypocrite and well no-one likes those. The beauty of blogging for me is I’ve been working with bloggers since I was a wee 19 year old and still do 6 years later (yes I’m 25 =]) and as a web developer/coder if there is any tech shiz I need to get done, I can do it myself, no sweat (occasional sweat). I’m sure that’s not the case for everyone as I’ve had many a frustrated call/email/tweet etc. that something’s being getting on your nerves for a while and you just can’t figure out how to fix it.

 

Well on this blog I’m all about giving tips/advice/tutorials to empower you to make changes on your own blog because at the end of the day, it’s your baby just like TheFashionTechnologist is mine.

 

So I prompt you to let me know if you have any tech question you want answered? Let me know and I’ll do my best to make a tutorial for you here on TheFashionTechnologist. Big or small, go wild!

 

You can leave a comment, email me at info@chloedigital.com or tweet me @chloedigital – I’m all ears.

 

 

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 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.


“What a week it’s been” (Alan Carr Voice)

happymonday

This week has been a mighty one! Very fast paced and fun and equally exhausting. I am writing this post on a train back to London from Manchester but before I get into why let me back track to the beginning of the week.

 

It all started with a lot of madness, we were booked to do a workshop for bloggers on Thursday and had done no prep for it, so Amy and I had to be “all systems go” to pull something out of the bag. The workshop was to be one on one sessions with each blogger, 80 confirmed, to advise them on technical changes they could make to improve their blog.

 

 

Continue reading

Until Now…

 

 

happymonday

 

 

It’s Chloé here, I am so excited to be posting this blog post today. Amy has been coding for #30daysofcoding ALL November to set this blog up and I believe she has done an amazing job of it! They say do something for 30 days straight and it becomes a habit so I thought it cool to have Amy code to increase her skills and she has grown so much as a coder. Well done Amy!

 

Every Monday I am going to be writing a post about chloédigital, what we have been up to in the past week and what we excited about for the week to come. The first year of chloédigital has been an absolute whirlwind adventure, one that I could not have imagined going in. I have learn’t that putting yourself out there in the world with an idea or a certain view point really creates miracles. In the last year I have been fortunate to meet lots of people interested in coding and fashion technology so we thought it best to set up a lifestyle blog to share with you the ins and outs of this niche and exciting industry especially from the London view point. I noticed I was always telling people to own their own blog in order to document their life journey as a memoir to look on in the future. Imagine what the internet is going to be like in 10 years from now, I think everyone should have a piece of it, so here we are with our view.

 

Continue reading

Intro and #1 The Set-Up

30 days of coding

 

Technology is exploding, everywhere we look things are getting faster, more accessible and impressive. Considering we are in the “Digital Revolution” this hardly comes as much of a surprise. It would be fair to say the fashion industry was a little hesitant to get involved straight away, with many actually ridiculing Natalie Massenet’s (Founder of Net-A-Porter) idea of buying clothes online (who’s laughing now?!).

 

Times have changed and year on year technology is embraced more, we now have apps that can let us buy products by simply taking a picture of an item with our phone, virtual fitting rooms helping us ensure we get the right size when shopping online, and of course you will never miss a moment of fashion week nowadays thanks to social media and live streaming.

 

However, all these companies that are creating and developing these amazing pieces of software have a strong team of coding genius’ behind them to help along the way. What if you wanted to get involved and experience what coding is all about? Wouldn’t it be amazing if you could join the ranks of these said genius’ and be a part of creating the technology that is embracing the fashion industry?

 

Continue reading