Improved Responsive Menu Twenty Twelve for i Phone, Android, Mobile and Tablet Devices

The Improved Responsive Menu Twenty Twelve

Improved Responsive Menu Twenty Twelve

Click To Enlarge

Improved Responsive Menu TFor Twenty Twelve

Click To Enlarge

This menu is used on Klick Design test it out first on your device.

I have assumed that you have created a child theme for Twenty Twelve if you have not then read this first.

Right lets start to change the menu, first you need to create a new custom menu.

Klick responsive menu settings.

Click to Enlarge

Navigate in your dashboard to Appearance>Menus and create a new menu.

Name the menu ‘Klick’, add the pages you want to the menu save the menu and select it as your primary menu.

For the next bits you can download the zip at the bottom of this page.

First open the add-to-styles.css file copy the code into the bottom of your child styles.css’

Next create a folder called js in your child theme and upload the klick-nav.min.js to that folder. I have minified the js for you to load nice and fast.

If you ever need to minfy a .js file then I use this tool it is free an just does it in a browser window.

Add the code from the add-to-functions.php into your child functions.php or simply rename the add-to-functions.php to functions.php and upload this to the child theme.

What’s left well it should be working for you now, You have your improved responsive menu twenty twelve so next to style it to match your theme colors.

In the above css you can change the width, background color and color of the text, I am sure some of you will get fancy.

Klick Design Responsive menu



SEO Basics Part 3


Site maps for SEO

SEO Site maps are useful to humans but rarely used if you have a site map for your site for visitors it should be in html format and well laid out.

SEO XML sitemapWhere site maps for SEO come into there own, they should be in xml format (see right).

An xml site map will tell search engine  the structure of your site and the pages that are there and where they are, it will also tell the search engine the priority you give that page.

There are many good site map generator tools on the market to suit most systems.

Google have a very good tool but it is a bit complex this is great if you run multiple sites of one server.

If your site is a single site and less than 500 pages then this tool is free, I have a paid for copy and use it for many years on sites that are very large and complex.

Site map for images, you can also create a specific site map for your images if you so desire, I create a lot of images and graphics but I do not want to waste my server resources letting the search engine spider my site so I do not bother.

If you were a photographer or selling products then definitely have an xml site map for your images.

Some things to avoid.

  • Don’t let your site map to become out of date
  • Don’t have any broken links in your site map
  • Don’t create a html site map that simply lists pages, have a structure (subject or category)

You can create a site map folder in your root folder to place your site maps in and the search engines will find it, or in Google webmaster tools you can tell Google where it is.

SEO Content Part 4

SEO Basics Part 2

SEO Part 1 THIS WAYSEO Basics Part 2

URL Structure

SEO and URL structure can be a huge plus point, start with the obvious, if a searcher is looking for red hats and you own the domain you are very likely to be found.

You cannot buy a domain for every topic you do, but will help your SEO to sell yellow hats, red hats, and green hats.

So a great URL structure will be ‘’ or if you sell  clothing in general it could be

Creating descriptive categories and pages on your website can not only help you keep your site better organized, but it could also lead to better crawling of your documents by search engines.

Don’t forget your URL’s are displayed in the search engine results not just SEO.

SEO Basics Title Description and Keywords

SEO Basics the URL

Also, it can create easier, “friendlier” URLs for those that want to link to your content.

Visitors may be intimidated by extremely long and cryptic URLs that contain few recognizable words.

Things to avoid with URL’s

  • using directory names that have no relation to the content in them
  • having deep nesting of sub directories like “…/dir1/dir2/dir3/dir4/dir5/dir6/red-hats.html”
  • using excessive keywords like”red-hats/hats/lovely-hats/my-hats.html”
  • using lengthy URLs with unnecessary sub category’s
  • do not use session IDs

If you can try to provide one way of reaching a page URL that you want to be in the search engine results, there are simple ways to deal with this.

I pref ere using input rel=”canonical” link or redirect. I will be writing a separate document on these topics as they are subjects in there own right.

For the mean time here is some reference material for canonical link by Google Here.

SEO Part Three

SEO Basics

SEO Basics

Following the SEO (search engine optimisation) best practices outlined below will make it easier for search engines to crawl, index and understand your content.

Our Target for SEO

SEO Basics GoogleNatural or ‘Organic’ search engine results are displayed in certain areas on a search engine results page, by using good SEO techniques you can get to the top of the search engines, but not the very top as this space is reserved exclusively for the search engine themselves this is how they make money.

When you click on any of the greyed out areas in the image to the right you are costing someone money and lining the pockets of the search engine, in this case google.

Our main target is google as they have the lions share of the Internets searches performed in the western world, The practises that I suggest will work well for all search engines.

SEO Basics Title Description and Keywords

SEO Basics Title Description and Keywords

Page Titles

Page titles are very important to get correct, they should be accurate to the content and your target audience.

  • Create unique Titles for each page of your website.
  • Keep Titles to within 70 characters.
  • People searching for a ‘red hat’ if your title is Clothing | Red Hats for you Red Hat will be bold and stand out to the person searching.
  • Keep it simple and as descriptive as you can, if you add Hats | Cheap Red Hats | Bargin Best Hat Shop then you have mentioned hats too many times (keyword stuffing) and if you do not have the words cheap, red, bargain, best, then you are wasting words.
  • If you run out of things to add then add your location or business name.

SEO is pretty straightforward for Title tags, spend time to get them right as they hold a lot of weight with the search engines.

Description Meta Tag for SEO

A page’s description meta tag gives search engines a summary of what the page is about. A page’s description meta tag might be a sentence or two or a short paragraph.

A search engine will not always use this description that you add it might use a snippet of the wording from your page itself, but if relevant then it is more likely to be used, what it does if give a search engine the description of what the subject matter is about.

In other search engines other than Google and directory’s this will be used and when people like your page from social media then it will nearly always use the description.


* Importand recommended description length 155 characters.

Magento What is it?

Magento?What is Magento What is it?

I am often asked what is Magento? Well it is one of the most popular e Commerce systems used today for creating an online retail shop.

The Magento platform is built on technology that provides online merchants with flexibility and control over the look, content and the functionality of their e Commerce store.

Magento is free, there is a paid version that is based on an annual subscription.

Magento’s online admin interface features powerful marketing, search engine optimization, product and catalog management tools.

Magento can integrate with most payment systems from Pay Pal to your current merchant bank.

With Magento you can run effective marketing campaigns, and create landing pages for single products or groups of products. You can even create an unlimited amount of specific brand pages, or pick out attributes you select to market online.

As a solution to creating an online shop without paying for the software and the tools that is normally required you cannot really beat it.

You can create products and category’s very easily from within its admin window or upload them via a spreadsheet.

Additional functions can be added with ease as there are thousands of extensions you can use to extend the functionality, lots of them free.

If you want a simple small store then it is still a great choice as you will not only get all your products online and increase your online presence.

If your ambitions a greater and you want to build an empire then Magento will grow with you.

Magento is fully upgradable, when the next version is released then you will be able to upgrade through a simple control panel called Magento connect.

If configured correctly Magento can be very SEO (search engine optimisation) friendly, which takes a lot of the workload out of getting your shop onto the search engines.

Shopping made easy with Magento, it has the ability to let shoppers browse by many different attributes such as colour or size.

Or in fact any attribute you want to input that you feel will be helpful for your customers.

What are the down sides?

Magento is hungry, it requires specific server setups that enable it to run smoothly, It loves RAM!

Does not matter what you read it needs to be hosted on a decent hosting package, for a small setup it can be on a lower cost VPS (Virtual Private Server) but if you have aspirations for your store then do not starve it, get yourself a Dedicated Server.

Hosting professionally for Magento is between £40 – £80 per month for a small store and £250 – £350 per month for a Large setup. Still cheap compare to shop rents.

What is Magento, Would I use it?My experience with Magento

When I was first introduced to Magento it was new to the market, I had a small corner shop selling bathroom products, It turned over about £250,000 a year. I launched an online store and the first year we turned over about £850,000 quite a shock to the business I can tell you. Within 3 years we were turning over nearly Three Million pounds.

Now I help design and integrate Magento for many different types of businesses from start ups to large multinationals.

If I was ever going to go back into retail or b2b I would use Magento.

If you want to discuss your requirement for launching your online store then please free free to contact me.

A demo is available at

I am going to write more on Magento Shortly….

Facebook like button WordPress without a plugin

Facebook like button WordPress without a plugin.

Facebook Like WordPress

Why a Facebook like button WordPress without a plugin, Well  too many plugins can slow down your site and it is so easy to create anyway.

How do I add a Facebook like to my sidebar, first you go to the Facebook developers page Here. If you are not logged in it will ask you to login.

facebook like button wordpressOnce you are logged in you will see the like button configuration box it is really simple to fill out. I like the button simple but you can go made and have faces of the people that are on your facebook page send buttons etc, here is the settings that I use.

Once you have filled this out you can press the get code button at the bottom of the configuration box, note you can always go back and change this at any time.

On the code section you have different selections of code to implement the facebook like button, The simplest is using the iframe version, facebook like button wordpresslike below. Copy the code…


The next step is to paste the code into a text widget for your sidebar, I do not title the widget but you can if you want, save it and your done….

Tip you can do very simlar with Twitter and most other social networks.

WordPress Latest Posts Page with Excerpts

WordPress Latest Posts Page or Latest News Page

Creating a WordPress latest posts page or news page with excerpts (Starting Snippets of your posts) in WordPress.

We will be creating the latest posts page by using a child theme based on the default Twenty Twelve theme, if you have not yet created a child theme then read this first.

If you are not using Twenty Twelve theme then the important part is to open another page template file and copy the top of the file up to and including the the first php closing tag for the header which on this file is the get_header(); ?>, it is important that you change the *  Template Name: in the top of your file to *  Template Name: Latest Posts

The first task is create a latest news page template, use the below code and copy it into a plain text editor like note pad or notepad++ which you can download from here.

You can now save this and name it, I have named mine latest.php,

You now upload this to your child theme in /wp-content/themes/ ‘your-child-theme-name’ /page-templates, once you have done this you need to go to create the page itself.

Latest News Page or Latest Post PageGo to Pages>Add New in your WordPress admin area, create a new page called Latest News or Latest Posts write a small piece about the page in the content area, now on the right hand side you will see under Page Attributes>Template use the drop down and select your new template Latest Posts.

That is it you can change the number of posts shown by altering the below number from 3 to what ever you like.

Reference material for get_posts also WP_Query.


If you want to add a read more link then click here.

Hide Page Name Titles WordPress

Hide Page Name Titles WordPress

Why would you want to hide page name titles in WordPress, well the simple answer is that it does not mean you do not want to use them it means you want a nice neat menu, can you imagine if my menu say’s “Hide Page Name Titles WordPress” on a page it would be hide page name titles wordpressan ugly menu.

You can simply add a page title using the heading 1 tag from the drop-down text styles. (See Image on right).

By doing this your H1 tag is still there if you want it, and you can organise your pages easier when you scroll through them in the pages menu in admin.


So lets now hide page name titles wordpress, I have as most of my tutorials based this on the WordPress Twenty Twelve theme but pretty much will apply to all themes. Now standard warning Use your child theme if you have not created one start reading here first.

Open the original content-page.php from your theme. This should look like below.

Now if you just want to remove the page name from the home page of your site replace is_page with is_front_page , I know a lot of people want to use a static front page so this is a handy one for removing the page name in WordPress just on the home page.

Hiding Page Titles SEO Effect

Are page titles important for SEO, they are less important nowaday’s but still are worth implementing, if you want to understand more about H1 Page titles then this is a great article by Chris Butterworth.

Child Theme functions.php WordPress

Child theme functions.php file for WordPress

Before you create your child theme functions.php I find it best to start with the styles.css for the child theme if you have not yet created this then I suggest that you start by reading this first.

If you are working with designing in WordPress you should always use a child theme, a child theme is basically a theme of your own that overrides the base theme you are using, for Klick Designs I using the Latest WordPress version which has the theme of Twenty Twelve.

The functions.php file is different for a child theme than the style.css, the functions.php of a child theme does not override its parent functions.php file. It is in addition to the file you are using in your theme, so the only code to be added is what you want to override.

This makes it easier to deal with, a child theme can replace a PHP function of the parent by simply declaring it beforehand, as the child theme’s functions.php is loaded first.

So here we go lets create a functions.php file.

All you need is a opening and closing php tag and that is it.

If you now save your file as functions.php and upload it to your root- folder/wp-content/themes/’your-new-theme’ you can now override any of your themes functions.

Lets now use our new child theme functions.php to Create a Favicon like below, Click here.

child theme functions.php flavicon.ico

Favicon for WordPress

Favicon for WordPress

Adding a Favicon for WordPress is easy, start by creating your favicon.ico

Favicon for WordPress functions.php flavicon.ico




Create your image.

Favicon for WordPress IconFirst you need to create your Favicon Icon image the maximum file size to convert into a Favicon is 150kilobytes. if you have not yet created one then feel free to use mine until you decide what you want to use.

Just right click and copy or save as.

You then need you use a FavIcon Generator I use this one but there are many more available Click here.

Once you have created your favicon.ico image simply save it to your root folder

Now you need to open your functions.php file from your Child theme if you have not created one then you need to do so here are the instructions for the functions.php Click Here.

That is it favicon for WordPress has been created and up loaded, slight downside you do not always see it straight away, don’t worry it will appear :)