A customer came in to the takeaway we run and mentioned that he got to our website (Fired Wok Chinese Takeaway) only after he added the word ‘takeaway’ to his search term.

Confusing because, I was quite pleased with how the SERPS are for Firedwok and ‘chinese takeaway lancaster‘ which results (at time of writing) to this..

Straight on the map and number 1 on results (with added tags)

It turns out that he was searching for ‘oriental food delivery lancaster’ which made the site past page 5 on the results!

Bring on the featured links!

A few days or weeks ago, ComLuv got put up to PR6 on the homepage from Google. How nice! I mentioned this in the email newsletter and within a few hours, two links were sold on the sidebar for 30 days each. One with a subscription! woot!, might this be the first month Comluv pays for itself? lol

I thought I’d take advantage of this PR increase and put a text link for ‘oriental food delivery lancaster’ on with the paid ones and left it a while. In the meantime, I put some more posts on the blog portion of the takeaway website and put in some ‘oriental food’ references on the homepage.

Got me some SERPs

And now, a search for ‘oriental food delivery lancaster’ results in a number 1 position (and number 2)

1 portion of SERPS please

Very happy with my text link purchase, and because I own the site it means it was free! haha

I guess I can take it down now, it’s done it’s job and it can make some space for another paid ad.

It’s not just me

A paid customer bought a link for UK payday loans back when that search term had them after page 10 (I tested it when they first bought the link) and now that term results in them being on page 1 of google.

They even asked why I had no subscription option for the ads! I switched it on and straight away, I had 50$ per month subscriptions coming in. Very nice!

Get YOU some links

If I can sell a few more links on subscription, I’ll have enough to upgrade the server to more memory and a faster processor. It’s typical that the first time the site has made enough money to pay for it’s own server and bandwidth, it reaches capacity again and needs upgrading! lol. what a fun ride!

You can buy featured homepage links and network wide footer links on the ComLuv page here

Some of you may know that I run a Chinese takeaway and delivery shop in Lancaster, UK with my partner and her brother. My role is strictly ‘front-of-house’, customer service, chief geekster and go-and-get-stuff-from-Preston’er (among other things like doing the weekly books and tracking the cost of goods sold etc)

I can’t for the life of me go in the kitchen where it’s all fire and wok but, I can do all the other great things like come up with great marketing ideas, develop online solutions for advertising, answer the phone and understand the myriad of different accents you get when you run a delivery orientated business in a two University town.

Pretty Vs Useful

One of the things that was inevitable for me to do was, The Website.

Now, I class myself as a developer not a designer. The difference? to me, a designer designs. They take an idea and take it from nothing more than a think in the head to a pretty thing you can see in front of you. They make things that are pretty.

A developer (to me at least) is someone who develops things. They take something that is partly tangible and make it better/bigger/more. In essence, they get something and develop it. They make pretty things useful

Obviously, there’s more to it than that but you get my drift.

From little acorns..

This is the site the shop used to have..

You can see it’s very basic, it had to be because it was made a looong time ago on something like MS frontpage or other ancient artifact invented by Margaret Thatcher. There’s nothing wrong with simple, simple works because, well, it’s simple! You don’t need a degree to navigate it and the menu display used a fancy bit of javascript that kept the categories stuck to the left wherever you scrolled on the screen… (that was high class DHTML at the time)

It did the job, people used it and found what they wanted to eat without having to search behind the fridge or sort out the over stuffed kitchen drawer for a dog eared menu.

..bigger acorns grow

It was obvious, inevitable, ordained that I, master geek, should take this website and make it mine!

The first thing I had to play with was the logo. I couldn’t change it because the shop signs and menus et al were emblazoned with it already and any designer/developer worth his salt will be able to tell you lots and lots about brand recognition and the pitfalls associated with making any dramatic change to the shape or flow of an existing brand.

Look at the history of the Coca Cola® logo at Andrew Keirs’ blog. Barely any change at all.

So, this logo needed updating but it also needed to stay recognizable..

What could I do? My options were,

1. outsource
2. fudge it in photoshop
3. ask the internets

Outsourcing was out of the question, I’ve tried that route before and always regretted it. Probably because for the price I was willing to pay I had to settle for second best or go through 3 or 4 fifteen year old middle men who couldn’t speak enough English to fully understand what I wanted so, that was option 1 gone.

Fudge it!

I’m no stranger to Photoshop, more realistically, I’m no stranger to Layers and Blending options. You can pretty much do anything with the filters, layers and blending options on Photoshop. (real designers and ‘shop experts are experiencing skin crawling sensations right now)

The first thing I did was grab the low-res image as a screen grab (alt + prt scr) and paste it into a new layer, add a text box and click the ‘blending options’ menu item. A couple of copy/pastes later, I had this..

Hurray!

The hurray didn’t last long though, it looked better to my eyes (of course it would, I made it) but, it didn’t print well. It looked ok as a tiny teeny logo on the corner of a menu but it looked bloody awful on a 300dpi glossy proof.

Have no fear, The Internet is here

I turned to the internets to see what I could find.

I discovered I could get the logo turned into a vector image by a design shop = £200 please, um, no thanks.

There’s software you can buy to do tracing that turns an existing image into a vector = £lots. No way dude.

And then, Vector Magic. A website that offers a free, online, 2.0, do-it-yourself service that takes a bitmap (or other format) image and gives you real time tools to turn it into a vector based no-jaggy image.

Gawd bless them for their free-ness, this is what I got from the low-res jpeg grab and a bit of jiggery pokery in ‘shop..

Loooaaads better! It was vector so I could blow it up to any size I wanted and it would still retain the curves and straight diagonal lines it had when it was little. Awesome, 300dpi no problem. Menu printing – no problem.

Procrastination, the best way to pretend to do work

After pissin about with the logo and menu redesign for what seemed like a few seconds but turned out to be about 3 months I started working on the website.

When I’m confronted with a do-it-from-scratch project. especially if it’s a you-better-not-spend-more-than-a-hundred-quid type of thing then I try to start with something that exists already and see if I can turn it into a working site.

I first searched for wordpress themes with the word “restaurant” or “takeaway” or “Chinese” associated with them. Zip, nada, zilch.
The best I could find was the oriental theme for WordPress which after a quick browse just wouldn’t do. It’s a nice theme for a blog but it didn’t have many options for turning it into a proper takeaway website.

WordPress is awesome for it’s ability to create non-blog sites, I pretty much use it exclusively for making any kind of online publication. It just wasn’t awesome enough to turn this simple theme into what I wanted.

Back to the drawing board?

oh dear, would I have to actually PAY SOMEONE to do it for me? bwahh, that’s not gonna happen for less than a monkey (Brit speak for 500 quid). This did seem to be the only option though.

This website was designed when I used an Indian oursourcer company once before to help for a website I got commissioned with for a pretty fancy pants place in Milton Keynes. The budget was a lot larger and even though the site looked beautiful and the client was impressed, I didn’t have the backing to do it this way for us. Besides, what if we sold the business? What options would the new owner have to edit and update their prices and menu? None, that’s what (unless they were a geek like me, unlikely though).

WordPressMu and Premium Theme awesomeness

And then, I perchanced (real word, honest!) on a CMS theme called WPMu-Dixi from the guys at wpmudev.org . I had it installed on my WPMu site at The ComLuv Network as a premium theme available to supporters (a plugin from premium.wpmudev.org that opens up a paid monthly subscription to users).

WPMU-Dixi.
An awesome CMS type theme that can be edited through the admin page.

It’s been there a while and it was only by chance (yup, procrastinating) that I looked at it again but this time, with the eyes of someone wanting a way to completely customize a site without editing template files AND keep the usability and power of a WordPress theme. Mainly, tags, categories, RSS feeds, easy editing, instant results and googleability (another real word).

It’s benefit was the home page feature, it was completely widgetizable which meant that I could remove all the standard blog type things and replace them with takeaway type things. You can also change almost everything about the theme using the admin settings page, fonts, colors, backgrounds and header images. Yey! rock on, make it so Mr. Data…

All on one page please

One of the things that I didn’t like about the old website was the fact you had to go clicky clicky all over the place just to find the telephone number or location and something I felt was needed for a new one was a single place to find all the information you need.

As a savvy web user, I have no trouble using my common sense to look at an ‘about’ page for location, clicking on a ‘menu’ link to see the menu seems like a no brainer but, to a ‘quick, I want it now’ internet surfer that seems too much to ask.

You have to think why a user is at your website. As a Chinese food takeaway and delivery business, the main reason someone is at my website is because they just searched for a Chinese takeaway in Lancaster (woot! number 1) and the last thing I want them to do is to spend more than a few seconds figuring out if 1. we actually deliver to their area and 2. we are open. So, you see, in my opinion you should be able to see the phone number, the location, the type of food served and opening hours all on the first page you come to when visiting a website (a site for a takeaway that is). If you can’t have it all, the very least is the location and telephone number right there in your face.

Edit, paste, tweak, finangle it and gawd bless Firebug

I use firebug all the time, it’s wonderful to be able to inspect any element on a page with a simple F12/click and change its’ css in real time to see what it will look like in a different size or remove it entirely.

After just a couple of days of spare time (the bits between rushing to Preston to buy mushrooms and spending whole afternoons trying to get the ancient Win98 order system to work on a Linux box) I was able to experiment with Firebug and completely transform the Dixi theme into this..

You can see it’s got a BIG telephone number displayed which is the number one reason people are searching for the site (from research). The location (number two reason) and a downloadable menu (third reason).

But, that’s not all! I spent literally days and days entering in all the menu items as posts using categories, tags and descriptions. With over 200 individual items, that was quite a challenge (to my boredom threshold). And, while I was there I thought I might as well add custom fields to each post – the price of the item and the item number for future use.

It works quite nicely and because I took the time to tag every item and categorize it, a user can click on one of the tags and see every item that contains chicken or is classed as spicy. Clicking on the title of any one of the items in the list takes them to the single post page where they can see a picture (if available) and a description of the item and because it’s on a wordpress site, they can leave a comment or review of the dish being displayed. Bloody good wot!?

Extending it even further

I could have left it like that, it was enough but, being a geek and serial tinkerer, I wanted to make it do more and show off what can be done with a few extra bits like a custom plugin and some jquery’ness as well as provide a showcase of what can be done with a supporter account on The ComLuv Network (ever the promoter that I am) (and worried that the server the site runs on might use up all my spare sweet money before I get enough paid customers).

The click to see a list of items that have, for example, chicken or cashew nuts was ok but it showed the excerpt of each post in a format that meant the page went on and on and on. A solution that came to mind was a custom child template but I couldn’t figure out a way for it to take over from the existing tag display code without editing the template to put an if/else catch.

Not good, I didn’t really want to go that way because 1. it was time expensive and 2. I wanted others to be able to use the template for things other than as a takeaway site and, I wanted to be able to upgrade the theme if necessary without having to redo all the custom code.

jQuery, and WordPress filters/actions – I love you

I dug up some code for how to use the custom fields in a post and researched the_title() wordpress filter and added some jQuery-after-the-fact-code to change the css for the template. Loving it! with just about 30 lines of code stuck into a plugin wrapper, I was triumphant at being able to take the tags and archive and search results page from this..

which makes the page a very very long one, to this…

which shows the item number, price and shrinks everything down to a ‘consumable by impatient surfers’ level. I did some other magic with jQuery to change the “leave a comment” to “leave a review” and changed the title of the tags to “see X dishes containing Y”. Other simple search/replaces on terms that are used primarily for blogging were done too. Easy peasy with jQuery!

I am super pleased with how it turned out, just about the only thing I could have done more is “add some frickin lasers”

What’s next?

• Online ordering.
  Simply done so anyone can do it just by activating a plugin. That’s what’s next, I already have some bits of code that should be able to turn any post that has a custom field of “price” in it and insert an “add to cart” button on it. Combine that with an AJAX shopping cart and paypal gateway and there’s no reason it can’t be a fully functional online ordering system within a week or so.
• A do you deliver to me plugin.
  A customer should be able to enter their postcode and find out if we deliver to them. (kind of already done using my delivery worksheet/google maps api stuff)
• More pictures of dishes
• A package to allow any ComLuv supporter to add these things to their site at a click of a button
• An email course explaining in more detail each step I took to make the site number 1 on Google for our chosen search term
• A video series showing how to turn Dixi template into your own business site
• I’d better stop here or I’ll think of so many things that I wont have time to do anything else!

Take a look at The Fired Wok Chinese Takeaway website and let me know what you think, remember, it’s a wordpress template using only 1 custom plugin and no template file editing. I’m feeling pretty pleased with myself but I know there are things that only someone who isn’t me will see so feel free to leave a comment (here) with feedback.

Holy crap, this was only supposed to be a little quick post. 2500+ words and a few hours later, ahem.

+=£££?

I tried out some affiliate links and reviews on this blog before and even just a couple of reviews had click thru’s that ended in purchases. My review of my Three Skype Phone has generated 30 quid in commission so far (60 USD) and my Tefal Quick Cup Review had 7 purchases. Google adsense isn’t very prevalent, I put a block on some of the popular posts and a small banner below the related links on a single post. That’s not brought in very much at all so I think I’ll chuck that out eventually.

Instead of affiliate links, I’ve decided to start selling some items on this blog, it’s getting a fair bit of UK traffic and I have a good source of stock from an auction and a ‘job-lot’ selection of electronic things. Some were a bit useless but there are some good portable speakers and headphones in there that should sell. My missus wants to try selling some items too, she does some wonderful Chinese characters for good luck sayings and traditional charms which look wicked good in a wooden frame.

I’m going to use the WordPress shopping cart plugin from Instinct because it allows you to start small. You don’t have to go to great lengths to setup an entire themed site like you would with ZenCart or oScommerce scripts. I can set up the plugin and add just one product within a couple of hours. Probably even quicker but I’m such a tweaker that I can’t help try every combination of option!

I think it’s worth a go, I’ve got a company that I could use the stock for but I think seeing as I bought this myself and not through my company, I can have an experiment to see if any of it can move through here, I’d be interested to hear about any of your experiences if you have sold items direct from your own blog or site. (a chance to plug your site in the comments if you do!)

My blog name kind of works nicely into this idea it’s a nice memorable name just on it’s own but to add a memory hook to it I am pretty sure I’ll be doing UK postage at FiddyP (50p) for any item regardless of size, this makes it much easier for a buyer to know how much they’ll pay at the checkout as well as being the theme of the site. oh how convenient!
Of course, all the regular stuff will be going on as well like the AJAX tutorials, other hand step throughs and whatever else happens in my head which I think is worth sharing..

I’m working all weekend so I’ll get on with it and see if I can’t have my first product on sale by Tuesday.. yey!

Here’s a great way to add a shopping cart to your WordPress blog so you can sell products directly from your site without the user having to go to an external site. If you offer products for sale on your blog, it’s much nicer for your customers to stay on the same site that they see the products on.

This plugin is simple and powerful, it uses AJAX for some parts of it and it seems to work just dandily on the blog I have installed it on. Here’s how you do it…

[expert instructions]
Download plugin, upload to plugins directory, activate it.
Visit the ecommerce tab and set options for country and currency, edit categories, edit checkout options, edit gateway options, add products.
sell!
[/ expert instructions]

[Hand hold instructions]
First, get yourself a copy of the WP Shopping Cart plugin and upload it to your plugins directory, go to you plugins page and activate it :

You should see a new tab at the top of the dashboard labeled ‘ecommerce’ . Click that and we can set up the options for our country and tax rate. Just select your country from the pull down box and it should set the tax rate for you.

You can also require someone to be registered before they can purchase products. This is up to you, for now, you can leave it as ‘no’. The only problem with requiring a user to register first is the non-immediate way in which WordPress allocates a password to a user by emailing it to them. Also, once someone logs in to your site, they get presented with the dashboard and not the site but there’s a great plugin to use to beat that here.

Leave the URL settins for now, they’ll work just find and dandy as they are (they may look different on your setup if you have a different permalink structure)

Choose your language and keep the theme as default:

Next, you need to choose your cart location. I use the setting as a widget because this blog is widget enabled. You can choose to add it manually yourself by inserting the code to anywhere on your sidebar if widgets aren’t your thing.

Choose which options you want and be sure to choose the correct currency setting for your country:

The next section asks you if you want to charge shipping, if you are selling physical products then you need to choose ‘yes’ and set the base shipping charges. (base charges are standard and only added once regardless of how many products are added to the cart, you can add additional delivery charges on the product settings) :

Click ‘submit’ and that’s one page done!

The next option is stock control, if you are selling physical products then you can tick the box for ‘limited items’ and it will give you a field for putting how many items of this you have, once you run out the software wont show this product any more until you get more stock and edit the amount here.

Variation control is a way to add options to a product, like size for a t-shirt or a colour choice which will be selectable on the product description page before a customer adds the product to the shopping cart.

Additional shipping costs can be added so that each item that is added to the cart will also add that amount to the shipping (good for heavy items)

Product images are self explanatory and always a good idea to use a decent picture for your product, the plugin does a good job of creating a thumbnail and uses AJAX to display the full size image when a customer clicks it. (choose your thumbnail size or upload a seperate thumbnail if you want)

Product download is for digital items.

Click ‘add product’ to save your product settings:

If you don’t want tax added to each item or it is already included in the price then select the option to ‘do not include tax’.

wp_list_pages('exclude=4,5,6' ); 

Once ‘checkout’ is pressed, the customer is presented with the screen to add their address details:

Once that is filled in, they click ‘make purchase’ and will be sent to the paypal login page where they can use their paypal account or pay by credit card if they don’t have an account already:

You will be able to see a record of what purchases have been made on the first tab of the ‘ecommerce’ section: