Yearly Archives: 2017

How to change a link href with jQuery

WordPress navigation: How to change a link href with jQuery

WordPress Navigation - screenshot T.Bortels/cpu20.com

Recently I had to dig a bit deeper into ways and options on how to change a link href dynamically with jQuery. It’s not really the most beautiful thing one can do, but it can help sometimes to solve problems you never expected to be problems in the first place. The situation was like this: a client of mine had bought and installed a premium WordPress theme already quite some time ago. But it turned out there were some SEO issues to be solved. What was wrong? The theme basically utilizes one navigation in admin, but two navigations in front end – or actually two slightly different iterations of that one navigation: one for wide screens / desktop screens and one for mobile use. The only difference seemed to be the div classes used. So far so good. So why would I now need to change a link with jQuery?

By default the theme handled the main navigation / top navigation items – the ones that are visible on default as anchors. The actual linked navigation items are solely found in the subnavigation. Why? Obviously the theme author tried to make the theme mobile friendly, but didn’t bother to go the extra mile. In detail: on hover the main navigation items reveal their respective subnavigation items. For this to work on touch devices (that have no hover in that respect) the main navigation items must be clicked. Now if the main navigation items were fully functioning links, the mobile website visitor would never have a chance to actually click any of the subnavigation items, because the top navigation would fire the link before the subnavigation was even visible.

For me this basically implied two different problems: the top navigation items were reduced to anchor links making them useless for search engines – and since the top navigation items often consist of powerful keywords, this can be considered as a wasted SEO opportunity. On the other hand dead links (or anchor links, that don’t do anything else than reveal subnavigation items) can be considered bad UX – at least on desktop. The user sees the supposedly important top navigation items – but clicking them doesn’t really have any impact other than revealing the second level navigation.

Changing a link dynamically – jQuery to the rescue

So what we did is add links to the main navigation and then change them to anchors for the mobile iteration. And with a few lines of jQuery this was rather easy to accomplish.

Working on the solution, another oddity appeared. Usually you would look for the link either by an id or a class and then point the jQuery script at that exact link. In this case the surrounding divs had no distinct id. Actually neither the links nor the surrounding div containers were equipped with any kind of distinct id or class. So we used the link (href) itself instead to identify the link that needed to be changed. Here’s the script that worked for us:

jQuery(".sf-mobile-menu a[href='/about-us/']").attr('href', '#');

For every link we need one line.

If we had distinct identifiers on the surrounding div containers, instead we could have also looked for the first link inside the parent element as described on this forum post at stackexchange:

jQuery('.sf-mobile-menu #content_1 li:first a').attr('href', '#');

if you have more than one link you want to change you could also automate this in a jQuery loop:

$('.content').each( function() {   
    $(this).find('li:first a').attr('href', '#'); 
});

or like this:

$('.content').each( function() {   
    $(this).find('li a').first().attr('href'); 
});

Alternatively we could also use a wordpress function to loop through the navigation and then apply the jQuery to each element – but I guess the jQuery loop will do the job just fine.

Responsiveness: make jQuery change links for specific screen width

In case there is actually only one navigation you could also add something I would call a jQuery listener – a snippet that listens to css classes – as pointed out in this article “Firing Responsive jQuery Functions based on CSS Media Queries Rather than Window Width” over at Fourfront’s Blog. This is basically the perfect use case for this method since we want to change the links for the mobile navigation – so we know already what element we want to listen to. We only need to fire the jQuery when the mobile navigation is visible.

function checkSize(){
    if (jQuery("#az-header.h-classic .az-menu-trigger").css("visibility") == "visible" ){
        /* your code */ 
    }
}

Hope this helps.

What is Dedicated Virtual Server Hosting?

Dedicated Virtual Server Hosting

What is Dedicated Virtual Server Hosting? – Photo 'New servers' CC BY-SA 2.0 by Dominic Hargreaves

Renting a web server can appear to be difficult – at least making the decision, what server to rent. First you will probably have to decide, what ‘size’ the server should be – and what kind. Do you want to rent a Virtual Server or a Dedicated Server? And what does this even mean? I was recently asked, what Dedicated Virtual Server Hosting is. My first reaction: Wow! Dedicated Virtual Server Hosting? Sounds great – but – wait a minute…

To me the term Dedicated Virtual Server Hosting really sounds great – sounds promising – but as far as I’m concerned it is a mixture of Dedicated Server Hosting and Virtual Server Hosting. You can not really have both at the same time. Or can you?

Virtual Private Server – What is Virtual Server Hosting?

Some hosting providers offer hosting on Virtual Private Servers. Some providers may call this tpe of hosting Cloud Server, others call it Virtual Dedicated Server Hosting. How does this work?

Basically a software manages a web server across a network of different machines – a server cluster – or a server could. Renting a Virtual Private Server you can basically expect guaranteed memory (RAM) and disk space (web space). That RAM memory and disk storage is then handled by the server cloud. However, it is often not clear how the actual processor requests are handled, since you are not renting an actual physical machine. And for some this may be an argument against renting a virtual server.

What is Dedicated Server Hosting?

Also here the term dedicated tells a lot about what to expect. I would like to sum it up like this:  the server is dedicated – to you and your web projects. You are renting a web server – and in this case this means you are renting an actual machine.

Renting a Dedicated Server comes with a price – but it has quite many advantages over renting a Virtual Server. First of all: performance. A dedicated server will always perform better, than a a shared server. Period.

And then there are a couple of features and options and possibilities, that may vary, depending on the service provider you chose. Some may offer shell access, other my provide you with protocols that would let you use your server as a cloud hard drive. With a dedicated server there are are virtually endless options.

Dedicated vs. Virtual Server Hosting

Basically these are the two most common, most popular types of hosting: you can either rent a Dedicated Server or a Virtual Server. So what are the differences? What are the advantages? And what are the disadvantages?

A Virtual Server Account is basically more powerful and often faster than most Shared Server Accounts, yet cheaper than a Dedicated Server. In most cases a Dedicated Server will however be faster than a Virtual Server, since the processor is all yours. Also chances are that you have more options to configure if you are on your own server, if it’s a physical machine. However, that additional speed and flexibility comes with a price.

I hope I could spread some light on this not so important, yet interesting little detail. Please feel free to add your thoughts and questions in the comments below. Thank you!

See also: Dedicated Hosting: good reasons to rent a Server

WordPress: How to change string translations without a plugin

WordPress: How to change string translations without a plugin

WordPress: How to change string translations without a plugin - Photo / screenshot: T.Bortels/cpu20.com

Often a WordPress installation comes with a variety of different languages you can select from. And with every language you get a language file, that is basically containing the various translated strings. Most of those string translations are rather ok – but you may still want to change some of those string translations. You could of course install a plugin for that – basically WMPL or Loco Translate would let you alter those translated strings – but that may often be just a bit too much, if you just want to adjust a single string. So – here is a quite guide on how to change string translation without a plugin.

In my case I wanted to change the translation of some strings in a WooCommerce powered website: we needed to have “objects” instead of “products” because that shop is basically not selling products – but objects. So instead of related products we needed to have the string say related objects.

change strings without a plugin

To accomplish this, you basically just need to add the following lines of code to the file functions.php of your theme or child theme:

function gb_change_cart_string($translated_text, $text, $domain) {
    $translated_text = str_replace(“related products”, “related objects”, $translated_text);
    return $translated_text; 
} 

add_filter(‘gettext’, ‘gb_change_cart_string’, 100, 3);

In the above code the function gb_change_cart_string will hook into the function gettext and return the altered string. So instead of related products the website will show the string related objects. And actually the website does not have to be translated – this solution will also work even if you don’t use any translation – if you are working with the standard English installation. A simple solution that just works. In most cases.

How to: Google Image Search on iPhone

How to: Google Image Search on iPhone

How to: Google Image Search on iPhone - Photo / montage T.Bortels/cpu20.com

Google Image Search is great for finding images of all kinds – it just works well. And of course Google Image Search works also pretty well on an iPhone. But people seem to miss that they can use Google Image Search on an iPhone almost just as they use it in a regular desktopn browser. That’s why I compiled this short How to: Google Image Search on iPhone.

First you obviously need to open your browser – in my case that’s Safari – the default browser on the iPhone. Then you simply enter what you are looking for in the URL bar – this will forward your search request by default to google.

Just above the top search results you will find a couple links: ALL, MAPS, NEWS and IMAGES. Click on IMAGES and you will be forwarded to the the Google Image Search results page.

On the Google Image Search results page you can either start browsing the images, or refine your search for alternative results. Also Google Image Search suggests various filters to refine your search results. You can focus on the latest results by clicking “latest” or reduce the results to only show clip art or gifs. And then there are often also a few popular search terms listed that could help you to narrow down the amount of images. Once you have refined your search query you can start scrolling down– and down… and most likely even further down.

How to save Images from Google Image Search on iPhone

Once you find the image you were looking for you can either load the high resolution version of the picture (if there is any) or even save the image to your iPhone for later use. You may for example look for a portrait of one of your contacts to add it to your address book – of send an image via imessage or email to one of your contacts.

To save images from Google Image Search all you have to do is first open the image by clicking in the search results, then click on the three dots you find on the right side just below the image. Next you choose “View original image” and last but not least click the image, hold your click for a moment and choose “Save image”.

How to save Images from Google Image Search on iPhone

Save Images from Google Image Search on iPhone – Screenshots / montage T.Bortels/cpu20.com

The image will then appear in the photos collection on your iPhone for later use. Instead you could also click on “Copy” and then paste it in whatever app you want to paste it in.

Reverse Google Image Search on iPhone

Instead of searching for images, you may want to search by image. The so called reverse image search lets you search by image via Google. As far as I know this is a feature or actually an extension on Android phones – but on iPhone / iOS this is not yet supported. Instead you will have to install a small app that will do the trick. The iOS App Search by Image Extension is supposed to do exactly this. I haven’ tried it myself so at the moment I can neither confirm nor recommend this. But it might be worth a try.

Related posts:

Let’s define Content Marketing and what it means to you and your business

define content marketing

Define Content Marketing - screeshot/montage T.Bortels/cpu20.com

Is this going to be yet another definition of what Content Marketing actually is? Not quite so. There are indeed enough websites out there that try to define Content Marketing. But do these definitions really help to understand, what Content Marketing is? And what it means to you and your business? It very well depends a lot on the actual situation, on the audience – on you and your business, what Content Marketing can mean – and what it can do for you. That is at least what I recently found out when discussing with a client, how her website ranking could be improved.

Her situation was like this: she had a pretty good looking, compact website, describing her business. She’s in the coaching business, so competition is high. But she had enough returning clients – so her company is actually doing fairly well even without new clients. However – new clients are always good for business.

There were two ways how she gained new clients: either through recommendation by happy clients, or through her website. Since competition in the coaching sector is quite high and her business’ website is rather compact, she found herself spending a three digit number for online advertisement on a monthly basis. So far so good.

One day we were talking about how she found new clients, and how difficult finding new clients sometimes can be. She mentioned that she basically didn’t like the idea of paying for advertisement. She would herself never click any ads online – and she found that the clicks she paid for didn’t actually convert into new clients. So she began wondering if there were different online marketing approaches available, than going down the rather expensive road of online advertisement.

I know my client – and I know me – and I know that throwing buzzwords around doesn’t really help, unless you know what they actually mean. Sometimes you have to define things first, before you can actually talk about them. You need some common ground. So we basically went down the long road and started analyzing, what could be done, what should be achieved, and what each of us could do to actually get there, to ‘improve’ the website – or actually to improve the website’s performance.

We first had to write down some goals to figure out, what we were actually hoping for and what “improvement’ meant to us. This was quite straight forward: she wanted to gain more clients. In other terms: more visitors that would turn into customers – the ‘findability’ and the conversion rate had to be improved.

When thinking about ways how to get more visitors to a website, the first thing that may pop up may be  Search Engine Optimization or short SEO. We had talked about Search Engine Optimization before – but looking at her website I knew I had do dig a bit deeper than simply pointing out “SEO will do the trick!“. Remember: only things that are there can actually be found. So we also had to talk about content and content creation. In the good old days we used to say “Content is King!” – and so I did. She knew exactly, what I was talking about – and agreed. Yes, of course – only Content can do the trick! But what did I actually mean? Was this already basically the underlying concept of Content Marketing? Was it that easy? What if everybody already knew, what Content Marketing was, but was confused by the buzzword itself? So maybe it would be a good idea, if everybody would first try to define Content Marketing for herself, and then see, if this DIY definition was not too far off of the more established definitions? This route looked promising – so we gave it a try…

Introduction to Content Marketing

First things first: What is content? You probably have a website – so you probably have at least some kind of content online. Be it a blog, a catalog, the story of your business or simply an ‘about us’ page – it’s content. And the reason you have that content online is probably that you want to present your services, your products, your company, your story to the world. Maybe you just want to find new clients online, maybe you’re offering some online service, or maybe you are presenting some precious information about a technical device that nobody in the world can manufacture as precise as you can. Maybe you’re not even sure what the actual goal of your online presentation is – no matter what: if you have a website online, you have content online.

Define Content Marketing for yourself

Marketing on the other hand is basically the art of making people aware that you, your company, your service and/or your product actually exist. You may think you are not actually into marking, since you are not actively trying to find new clients. Maybe your clients actually do come to you and you don’t have to spend anything on advertisement – but chances are, you are still doing marketing. You’re handing out business cards? That’s marketing. And Online Marketing is doing marketing on the internet.

There are different marketing channels. Advertisement is one. Content Marketing is basicaly marketing with or through content – making people aware that you, your company and/or your product exist through content. And content can be what ever content is for you – be it messages, stories, images, video clips or whatever you’d like to put in the ‘content’ box. So let me allow this wild guess: you are presenting content online and by doing this you are already doing Content Marketing. Welcome to the jungle.

How do people find your website?

Just like in the offline world, on the internet things can only be found if they are there. Websites can only be found, if they have at least some content – content can only be found, if it are actually exists. Many people seem to think that having a website would be enough – like putting up a fast food booth booth next to a busy motorway. But online basically every booth is right next to the busy motorway. Actually the motorway only exists because there are so many booths. So maybe this image is misleading.

There are basically only two ways how your precious content can be found: either you pay for advertisement, or your website is found for its content. Both options require at least some investment. You either need to spend some money for paying ads, or spend some time for producing content. In most cases you will need to invest both time and money.

Conclusion: So what is Content Marketing really all about?

In the past months or even years Content Marketing has become a buzzword – and a promise. Can this promise be kept? I don’t know. You decide. At least there are many promising definitions out there – some of them written by marketing experts, some by SEO experts, others by advertisement agencies. Reading some of those definitions I sometime get the feeling, Content Marketing is one of those trains nobody wants to miss. But what is Content Marketing really all about? Is it a magic trick that will drive drive hords of customers to your website? It sure has the potential.

I suppose everybody has to find out for themselves, has to define content marketing for their very own use case. You are publishing an “about us” page? That can be content marketing. You are handing out business cards? That is advertisement. You upload a video on YouTube or Vimeo? That is probably Content Marketing.

Just uploading a video or publishing a few lines of text will however not bring masses of visitors and/or potential clients to your website – it takes a bit more – for example some basic SEO activities. In my honest opinion Search Engine Optimization (SEO) is the art of doing things right.

Let your content work for you – Content Marketing done right

If your content IS your product, then things may be different – then you could define Content Marketing as marketing for your content. But in most other cases Content Marketing is doing marketing with content.

People are searching the internet – and they do it a lot – all the time. People are looking for answers, for information, for products, for services – and for entertainment. Offering an answer to one of those questions can be the missing link between you and your potential customer. Should your content be informative or entertaining? In this article I can’t really go that far, so that’s something you will have to find out yourself. And if you find yourself lost or stuck, you can of course hire somebody to take a closer look at your situation. You may not need to hire a Content Marketing Expert or a Content Marketing Agency – sometimes somebody with a fresh pair of eyes like your web designer, your webmaster or somebody else with at least basic SEO knowledge and a feel for your content can help seeing the obvious.

Just one last argument for Web Content Marketing, Search Engine Optimization and Search Engine Marketing: the experience of finding something you are actually looking for is in most cases perceived way more positive than the experience of being talked or tricked into something. Which brings me to another buzzword I won’t discuss in this article: User Experience (UX). So if content is king, let your website be the kingdom that people are eager to visit.

PS: Yes, Content Marketing can be considered Inbound Marketing, while Growth Hacking is probably more technical. But let’s define Growth Hacking and Inbound Marketing another time…


So what do you think? How would you define Content Marketing? Got a different approach? Please feel free to leave a comment below… Thank you!