How to change a link href with jQuery

WordPress navigation: How to change a link href with jQuery

WordPress Navigation - screenshot T.Bortels/

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/

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/

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/

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/

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!

Task Management with Things – How to do To Do’s the right way

I have been using the handy little helper app Things for quite a while now, both on my Mac OS computer and on my iPhone to manage all the little things I need to do. First I was simply looking for an efficient way to organize tasks. Of course I also wanted to synchronize the tasks with my iPhone from the very beginning – so it had to be an app that had both: a desktop client and an iOS app. I was checking on different reviews of task management apps – Things caught my eye. So I invested a few Euro and a few moments later I downloaded and installed the program on MacBook and iPhone.

For a couple of years I used Things on a daily basis – and it was indeed quite useful indeed. I added To Do’s as I liked – and I got some things done. Things was helpful. But somehow I was always just a bit too lazy to go the extra mile and read the handbook – or at least some introduction. I found the program useful the way I used it – and the interface appeared to be very intuitive. So instead of using the software the way it was meant to be used, I used it the way I thought it was useful. And that was not actually not very effective.

How did I actually use it? Well – I basically only used it as a simple task list. For every new task / To Do I added a separate entry to the list – no matter if the thing I added was a simple task like “call the janitor” or a complex project like “Relaunch Website XY”.

To become a bit more effective in getting things done I actually added everything to the “Today” list. Good plan, I first hought. So I found myself with a looong list of things I had to get done – sometimes that list would consist of hundreds of different tasks. The task manager was close to being un-managable. Not very effective. Just writing down the words describing how I used to use the program actually kind of hurts today: Always! All the Tasks! In one list! No wonder that I never really felt satisfied with my results – I never really had the feeling that I got anything done. The list would just sit there and either be slightly longer, or slightly shorter. Finally I realized I had to change the way I used the program – change the way I managed my tasks.

 When purchasing the program I already knew it was designed around the ideas of “Getting Things Done” – an action and time management method based and a book by David Allen. So I should actually get all the tasks out of my mind – out of my way. But instead I was facing a list that felt like a wall. I realized for too long time I was too lazy to work on a way of making things easier for me.

Finally I took the time to have a closer look at the various features built into Things. And finally I came to the conclusion: I had missed a sea of options that could have saved me a lot of time and stress in the past. So what did I change – did do I use Things today? Well – it’s not that complicated. I just use it as it is probably meant to be used.

Good for Productivy AND Motivation: How to use Things the right way

A project is a project – and not just a task

Every project can consist of many different that need to get done before a project is completed. In other words: in Things a project can have as many tasks as you like. Rule of thumb: every task that needs more than 20 minutes to complete could be / should be split into two tasks. Whether you follow this rule of thumb or not is up to you – but don’t try to stuff everything into one task. This way you will also build some kind of documentation of all the little things you actually needed to do to get the project completed. Very handy.

When all tasks are completed, the project can be closed – or marked as “done”. The project will then disappear from the project list – but it will still be available from the archives / logbook for later reference.

Work on continuing and/or recurring tasks inisde the “Area of Responsibility” list

For continuing and/or recurring tasks that may feel like projects, but actually are not projects, there is another section in Things: Area of Responsibility. An Area of Responsibility can be something like “Office” or Home” or “Car” or something the like. An Area of Responsibility can by nature not be “done” like a project. But you can add again as many tasks / to do’s as you like.

I have to admit it took me some time to understand the difference between a Project and an Area of Responsibility. Once you’re over that things (and Things) may become much easier to handle.

When to get things done? Today, Next, Scheduled, Someday…?

It is recommended to only add as many tasks to “today” that you actually can get done on that very day. But of course I still tend to add too many tasks to basically every single day, leaving behind a virsual trail of tasks that are constantly moved from one day to another.

However I also do manage to add tasks to either specific days / dates – or to the more blurry sections Next and Someday. All of those sections do make sense – and there is no need to fear you would lose your tasks somewhere in time and space. You’ll just have to click on the Project or the Area of Responsibility – and – voilà –  all the tasks are listed.

I hope this short “review” may be helpful for somebody some day. I can just again recommend to actually use Things (or any other time / task management software) and start getting organized. It may help you in the long run. A lot.

How to fix Masonry Offset caused by Webfonts loading slow

No doubt: the jquery plugin Masonry can be a nice website feature – if it works as intended. It can be a pain in the neck if it doesn’t. The most common problem with Masonry is probably slow loading images. This problem can be caused by either large, heavy images that need some time to load – or a slow internet connection on the client side. This problem is well known, well documented – and there is a fix for this: you just need to implement one additional script imagesLoaded that checks if the images are already loaded, or not.

The other not so common, not so well documented problem can arise from the use of Webfonts. The problem is not as obvious – but anyways annoying. Sometimes a single Masonry item is off the grid – depending on your layout you may not even see you have a problem in the first place. The offset may also only occur occasionally which makes it even more difficult to track.

What is causing the Masonry item offset?

All that Masonry does is basically measure the size of each item (or element or box) in the grid and then calculate its position according to the settings and preferences you defined. In most cases this works pretty smooth. But in case there are slow loading Webfonts used inside the grid items, Masonry may first calculate the positions wrongly. Or actually it is first calculating the positions correctly, but once the Webfonts are loaded, some text like a headline might be using less space. This may lead to line breaks disappearing after Masonry finished calculated all the positions – hence the offset.

So as I said before – the problem can be difficult to track. You may actually never see the problem, if all the wefonts used are already present in your browser’s cache. And even then it can happen that your texts are behaving nicely because there are no line breaks disappearing. But then someday you change one of the text or add a new one and all of a sudden the grid looks wonky.

The ‘bug’ is probably most obvious when you’re working with a couple of same height testboxes – and only one has a text that adds a single disappearing line break. A single textbox may then be positioned a few pixels lower than the others. Sometimes also the order of the items can get mixed. Elements that should align to the left are suddenly floating to the right side of the grid  – an invisible element seems to be in the way. Sheer chaos breaks loose.

Anyways. Just like with slow loading images there is a fix / a script for slow loading Webfonts: webfontloader. The script was released by Google in cooperation with typekit and you are free to use it. You basically just have to load the script either through Google’s distribution platform, or install it locally on your webserver. Once the script is in position you will have to wrap some lines of Javascript around your Masonry code. This makes sure that Masonry is only fired when all the webfonts defined are present.

First make sure webfontloader / webfont.js is loaded:

<script type='text/javascript' src=''></script>

Then wrap your masonry code with the webfont load check:

// check if all webfonts have loaded
    custom: {
      families: ['RobotoCondensedRegular','RobotoCondensedItalic', 'RobotoCondensedBold' ]
active: function() {

// check if all images have loaded
var $grid = $('.grid').imagesLoaded( function() {
// init Masonry
    // use outer width of grid-sizer for columnWidth
    columnWidth: '.grid-sizer',
    // do not use .grid-sizer in layout
    itemSelector: '.grid-item',
    originLeft: true,
    percentPosition: true



Check the project page over at github for further details:

El Capitan: Illustrator CS5 crash on quit / eyedropper tool [fix]

You probably found this article because you recently finally switched to El Capitan (Mac OS 10.11) just like I did – and now you find Illustrator CS5 crashing whenever you want to use the eyedropper tool or when you want to quit Illustrator. I know – this can be can be very annoying – I’ve been there. Done that. Fixed it. Yay!

The problem with Illustrator crashing on quit brings along another problem, which can be even more annoying than the actual crash on quit: the preferences are not saved. So each time you open up Illustrator, you’ll have to dig your way through the preferences panels. Not very practical – not very useful.

Both – the “crash on quit” problem and the “using the eyedropper tool” problem are actually rather easy to fix. You basically just have to rename two files – and that’s it. This includes some digging in the hidden Library folder – but in the end it’s not that difficult.

How to solve the crash on quit issue

First you need to quit Illustrator. Then you have to find the hidden Library folder and open it in Finder. There is actually two Library folders – one for the “Computer” and one for you. We’ll start with the one inside your user directory.

In the top menu bar (the one with the apple in the corner) go to “Go”. Push and hold the [alt] key and you should be able to see and choose the go-destination “Library”. Go there – and a folder should show up, featuring a lot of folders that you usually should not mess around with. Inside the Library folder go to “Application Support” > “Adobe” and open it. Inside that folder you should see a folder called “CS5ServiceManager”. This needs to be renamed to “CS5ServiceManager.bak”.

For the second file you need to go the the hard drive – or the folder called “Macintosh HD”. Inside that directory you should see  a folder named “Library”. Inside the Library folder go again to “Application Support” > “Adobe” and open it. Inside that folder you should again see a folder called “CS5ServiceManager”. This also needs to be renamed to “CS5ServiceManager.bak”.

Once both files are renamed you should be ready to go. Open up Illustrator and check for yourself: is it still crashing when you either quit or use the eyedropper tool? I hope not.

PS: I just re-discovered the original post that helped me solve this issue:

How to add a Caption to the Featured Image in WordPress

WordPress: Featured Image Caption

Featured Image Caption in WordPress - Pgoto/Screenshot: T.Bortels/

With most themes WordPress makes it really easy to add a featured image to an article / a post or a page. But although the image caption is often added correctly to inline images, it is often missing from featured images. So how can you add a Caption to the Featured Image in WordPress easily? And why do you need a caption after all?

Missing captions don’t have to be a problem for most use cases. But if you are using you WordPress installation as a CMS for some type of a magazine style website, you might want to – or even have to add captions to all images shown on your website – for example to give credit to the source of the image, the agency, the photographer – and to mention the license of the image. Some licenses require that you mention the license and the name of the photographer together with a link to the origin of the image. Then you’ll even have to add a bit of HTML to the caption. And as so often with WordPress the good news is that this is very well achievable with only a few lines of code added to your template files.

How to add a Caption to the Featured Image

When you add an image to your article / post or page either by first uploading an image to the media library, or by selecting one from the media library,  you can add a title, an alt text and a caption to that image. If you are like me you probably add those three little texts right when you upload an image.

First of all, remember to make the following adjustment inside your child theme. If you don’t use a child theme yet, now is the time. If you don’t know how to add a child theme to your WordPress installation you may first want to read this previous article: How to create a Child Theme for WordPress in Minutes.

In your template file (content.php or single.php or content-single.php or page.php etc) you would then need to find the section where the featured image is actually called. The respective code should be look similar to the following code:

<div class="entry-thumbnail">
    <?php the_post_thumbnail(''); ?> <!-- the featured image -->

Depending on the theme and/or template you might also find something like this:

<?php if ( ! post_password_required() && ! is_attachment() ) :
endif; ?>

Below the above code you would simply have to add the following:

<?php if ( $caption = get_post( get_post_thumbnail_id() )->post_excerpt ) : ?>
 <p class="caption"><?php echo $caption; ?></p>
 <?php endif; ?>

What the above code does is first check if you have a post thumbnail a.k.a. featured image at all – then also check if the image has a caption (“post_excerpt”). If both are TRUE a paragraph with the class “caption” is printed to the layout, echoing the actual caption.

You can then add appropriate styling to the caption to make it fit your theme design.

How to copy Apple Numbers Table to WordPress Editor

Today I have a rather specific tutorial for you: how to copy a table from Apple Numbers to the text editor of your CMS – for example WordPress?

Basically you can add tables to any text editor – whatever CMS you are working with. Some have a table function already built in, some need an add-on or a plugin to handle tables – but as long as you can access the source code of the text editor (of the text inside the text editor) you can add tables.

Working with tables inside the text editor of your CMS is quite useful – but it does not necessarily let you copy a table from another application, such as Apple Numbers. Actually there is no straight forward way to copy a table from Apple Numbers – but still this would be quite useful from time to time.

You can actually copy numbers and cells from Apple Numbers to the WordPress text editor – but you will lose the table structure on the way anyways. And what does a table look like without the table structure? It’s just a pile of numbers. Not very pretty – and not very useful. So you will need a ‘bridge’ to actually also copy the table structure correctly.

Using Text Edit as a HTML-Bridge between Apple Numbers and WordPress

Virtually every Macintosh Computer comes with a copy of the handy little application Text Edit. It might look not that useful at first, but every now and then it can come quite handy. Using Text Edit you are only two steps away from copying your pretty tables into the text editor of WordPress – or whatever CMS you might be using.

First you will have to mark all the table cells that you want to copy. In most cases this will probably be the entire table. Then you simply copy the table cells / the table into a new Text Edit document – formatted text has to be active. Once the table looks ok you can go on to the next step – saving the new document in html format.

Saving the document will give you the option to save the document as a website “.html” – you should see a pulldown similar to the following:

Copy Apple Numbers Table HTML to WordPress CMS

This HTML document will then contain the HTML source code you need to display your table on a website. So in the next step yo will have to copy the table section to your text editor.

Copying the table source code without an HTML editor

The easiest way to do this would be to open the HTML document in an HTML editor.  But it is also possible to copy the HTML code without an HTML editor at hand. You just need to open the file in a browser window either by dragging and dropping it into a new window, or opening it – keyboard shortcut cmd+o. Then you can look at the source code by using the keyboard shortcut cmd+u (Firefox) or cmd+alt+u (Safari).

Inside the source code you can use the mouse to mark everything from the first  “<table…” tag through to the last closing  “</table>” tag. Then copy cmd+c and paste cmd+v into the text view / source view of the text editor of your CMS.

Easy as 1-2-3, or is it? Well – at least it’s possible.
Any questions or suggestions? Please feel free to leave a comment below…