Sliders and website design

Also referred to as image carousels and slideshows, sliders are a common design aspect on many websites. Seen as a way to visually present images, or other content including text and videos, the concept of a slider is based on the idea of using a slide show to present to your audience.

There was a time when image sliders were very popular, like anything new and shiny. However many online marketing experts would now argue that sliders are ineffective and even “suck” – that they contribute to confusion (visitors miss your messages) and hinder conversion (difficult to use) on websites.

Others say that a slider can improve the initial interest in a website – kind of cover page for your website, or a way to introduce your business.

Whichever way you look at it, sliders and any other design ideas that are used on websites, must be considered on a case by case basis, not just whether they are popular or not, or whether they worked for one type of website, but not another.

My opinion is that image and content sliders can be a valuable visual asset on a page, especially on the home page, but to be effective one must do more than just adding images, setting a transition speed and choosing an transition effect.

How to decide if a slider is right for me?

Going back to what a slider is, a simplified web version of a slideshow, making a decision should be based on whether the slider can offer something that is useful to the design and functionality of your web page.

Questions you should ask yourself include:

• how will a slider benefit the person viewing?
• should I use images only, or images and text?
• will each slide link to a key page on my website?
• will a slider cause confusion?
• how does the slider help user pathways?
• does a slider fit in with the rest of the design?
• what impact does a slider have on the position of other page content?

Also it is important to consider your audience and what they might expect to see on your website. What first impressions are you looking to give? What kind of business are you in? If people landing on your website are expecting to see plenty of visual media and photos, then a slider can also be a great tool to display this.

Forgotten considerations when using a slider

If you decide that a slider is a good fit for your home page, then there are some other very important things to consider that are often overlooked.

Will you display your slider on mobiles and tablets, or just at full size on desktops and laptops?
– If you are considering using a slider then make sure you are using a responsive slider
– Test it on smartphones and tablets to be sure that it works effectively
– If you are using text overlay, then reduce the amount of text on smaller devices, or better still replace the slider with a static image banner on mobile phones

How long does your home page take to load?
– Test the loading speed of your website’s home page before and after implementing a slider
– Optimise images before uploading (see point below)
– Use less slides rather than more
– A slow loading page increases “bounce rate”

What did you do with your images before uploading to the slider?
– Never just purchase an image without optimising first
– Resize to the maximum dimensions of the slider
– Compress to the minimum resolution that doesn’t impact image appearance
– Rename all image files with search engine friendly filenames, not something like image1834509345053480803.jpg, but rather business-team-member-support.jpg

How to choose a slider?

Many great themes already have a jQuery slider built in. By choosing a theme where the slider is included, you don’t have to then try to integrate one manually. You can see how it will look on the page, and also this saves on issues that can arise with 3rd party slider plugins that may conflict with theme scripts.

If you are concerned about a slider making your home page too slow to load, then grab the URL of the theme’s demo page and plug it into something like GTMetrix to test how long the page takes to load.

Some themes include a copy of a premium 3rd party plugin slider, that you can implement. Or you might have to find one yourself. Either way it is important that the slider is the best WordPress slider for the job.

You can find out some stats on slider loading times by viewing a recent article and tests by Chris Lema titled “How do you find the best WordPress slider” – He tested 20 and found some interesting results.

If you do choose a slider plugin, then make sure that the developer is maintaining the plugin, and also check what support is included. With so many updates and upgrades in WordPress each year, compatibility is really important.

What is your experience with sliders?

I’d love your feedback by answering one question in my survey – What are your thoughts on image sliders to show off content on a website?

If I get enough responses, I’ll publish the results back here in the near future.

Life is becoming too complex. There is too much going on, too much information overloading our lives. Our minds are wandering aimlessly in the digital clouds, following every aspect of the lives of others and keeping up with what’s trending daily.

And if we continue this way our heads will explode. Well probably not literally, but certainly we cannot possibly filter the constant and never-ending stream of information, and somehow hope to maintain productivity in our own lives.

You may disagree, but I observe that people are doing more and more, yet seemingly achieving less and less. I hear people constantly saying how busy they are, that they don’t have time to exercise, don’t have time to spend with their families, don’t have time to sleep, don’t have time to do the things they’d really love to do.

Why are we so busy? Technology was meant to make life easier, not more complicated.

I myself am guilty of this! So what can be done to make sure that we achieve the things in life that are important to us?

Well I have a challenge for you. Try to follow these 4 rules for the next few months. Don’t forget to use the hashtag when sharing your ideas, photos and experiences on social media. If you have a great tip to share with others then make sure to include the hashtag. If you mention @mrdavidtiong in your tweets then I can retweet as well.

Rule 1: Be Now – use the hashtag #BeNow

Life is getting more complex. Apparently we must do this, and we must do that. With no time to stop, breathe and reflect, how do we know where we have been, where we are now, or where we are going?

“Be Now” is about stopping right now and looking at where you are. It’s about being aware of what is happening around you. Aware of what is happening in your own life. Aware of your momentum.

Are you moving forwards, are you moving backwards, or do you think you are moving but really you are staying in the same spot, like running on a treadmill?

Decide where you want to be this time next year, and think backwards from that goal to see the path that joins where you are now, with that place you want to be. Do you really want to be in the same spot you are now, or perhaps you would like to be closer to reaching your dreams and aspirations?

Life is short, so don’t just show up. Be present, be where you want to be. Don’t waste your time or the precious time of others. Do you really need to read each article, do you really need to understand every concept, do you really need to learn that latest trick?

If you think you do then you will never have enough time in the day or night to get to where you want to be.

#BeNow is all about continuously being aware of exactly where you are at each moment in time. Being aware of how you feel. Being aware of the people around you and your relationships with them. Being aware of what is filling your day. This is the only way to keep on track with your purpose and your why.

Rule 2: Be Short – use the hashtag #BeShort

This is not an excuse to be rude to others by being short with them, nor the permission to take shortcuts when you shouldn’t.

No, this is all about not over-complicating things. Think simplicity and minimalism. What 3 steps do you need to reach that dream or goal?

Keep procedures simple!

Obviously some projects and activities require many little tasks, however keep on track by trying to break each task into 3 steps. If you think in 3 steps then it’s easier to keep from running on the spot or chasing your tail in circles. Layout the 3 steps. Write them down. Tick them off when you are done.

Start today with your first step. Whenever you are faced with a new task, stop and decide if it’s really important. Is it really necessary? Is it really going to get you where you want to be?

Note that I’m not saying to be selfish and neglect others if they don’t fit into your goals. What I am saying is that we often decide to take on tasks that we think are important to our businesses and to our lives, however if we consider how they actually fit into the bigger picture, then we might see that often they are not actually important at all.

#BeShort is all about seeing the bigger picture and thinking what can I eliminate to simplify. Eg. If you type an email, before you hit the send button, stop and think about the purpose of that email. Will this purpose be clear and obvious to the receiver? Can this email be read and responded to in 3 minutes? Remember that people have limited time and limited concentration so #BeShort

#BeShort is about seeing the shortest path between 2 places – where you are and where you want to be, the start of a project and the end of a project, the pain of a problem and the joy of a solution.

Rule 3: Be Bold – use the hashtag #BeBold

A boy and his dad were walking along a path one afternoon. Ahead they could see that there was water across the path. The boy turned to his dad and asked “What chance do you think I have of jumping all the way across that big puddle?”

The dad smiled, “No I wasn’t wrong son. As long as you thought that you couldn’t make it, you had no chance whatsoever. But when you changed your mind and decided that you could do it, then you took a chance and made it happen.”

This is what #BeBold is all about. Taking risks, making mistakes, realising that sitting safely on the sidelines watching the game go by doesn’t get you anywhere.

So be bold, be brave. Remember that if you are failing, then you are actually getting somewhere. “It is better to fail at doing something, than succeed at doing nothing”.

The following comment, from possibly the greatest basketball player of all time, sums up #BeBold

“I’ve missed more than 9000 shots in my career. I’ve lost almost 300 games. Twenty-six times I’ve been trusted to take the game winning shot and missed. I’ve failed over and over and over again in my life. And that is why I succeed.” ~ Michael Jordan

Rule 4: Be True – use the hashtag #BeTrue

What does it mean to Be True? In simple terms it means to be a real and genuine person- authentic, not a faker, not a hypocrite.

Often in our quest to reach our destination, we start to lose our originality and our individuality. So remember who you are. Don’t strive to be someone else, someone you’re not.

I stay true to myself and my style, and I am always pushing myself to be aware of that and be original ~ Aaliyah

Remember who you are and why you have chosen your path, make time to reflect, to breathe and to share with others. Being true is about being you and being thankful for what you have – both your talents and your imperfections.

People will tell you what you should or shouldn’t do. It’s easy to get caught up in what is trivial or superficial. Be sure to stay true to your core values. Follow your instincts and let your values determine your choices in life and business. Don’t be afraid to be honest.

Being true is also essential in your relationships. True friends can be relied on whether you’re happy or sad, whether times are good or times are tough. Be a true friend.

Be True is also about doing what is right – Give more than you take. Be Generous. You can apply this philosophy in so may areas of life, in relationships and in work.

Getting Started

Start today. #BeNow #BeShort #BeBold #BeTrue. Try the challenge and take back control of where you are and where you are going. Share the images above by hovering over them and share to your Social streams.

A popular jQuery plugin for displaying images, galleries and videos in a lightbox is the Nivo Lightbox. It’s simple to use and responsive which is great for making sure that your photos look great on any device including phones and tablets.

There are some easy to follow instructions on the Dev7Studios website for how to setup, otherwise they also offer a WordPress plugin for purchase.

But if you feel like adding Nivo Lightbox to your WordPress website without using a plugin, you can create a shortcode function and include the required jQuery files following the procedure below. Before you start though, make sure that your theme doesn’t already have a lightbox feature that you can use.

How to add lightbox to your WordPress website

Step 1: Download the files

Download zip file from https://github.com/gilbitron/Nivo-Lightbox

Step 2: Extract files and add to your website

Create a folder called “js” inside of your childtheme folder (if you have followed along in some of my other tutorials you might have already setup this folder). Inside this “js” folder create a new folder called “nivolight”, where you will be adding the required Nivo Lightbox files.

Extract the downloaded zip file. Find the following:

• “themes” folder
• “nivo-lightbox.css”
• “nivo-lightbox.min.js”

and FTP upload them to your “nivolight” folder.

Step 3: Setup options

Create a javascript file to setup the lightbox options and choose the selector for Nivo Lightbox. Inside the file put the following code, and amend as you feel like based on the options available.

/* Nivo Lightbox Scripts */
var nivoeffect = nivolightboxing2.effect;
jQuery(document).ready(function ($) {
    $('a.nivolight').nivoLightbox({
        effect : nivoeffect
    });
});

Save the file as “nivolightboxjs.js” and then FTP upload that file into the “nivolight” folder also.

Notes: the selector ‘a.nivolight’ is to target the <a> links with a class of “nivolight”, and the variable “nivoeffect” is being set to contain a parameter passed from shortcode using wp_localize_script.

Step 4: Create shortcode function

You will need to setup 2 functions, one is for registering the scripts and styles. The second one is for creating the shortcode. Add these functions to your childtheme’s “functions.php” file, or otherwise an mu-plugin file.

function nivolightbox_scripts() {
    wp_register_style('nivolightboxcss',get_stylesheet_directory_uri().'/js/nivolight/nivo-lightbox.css');
    wp_register_style('nivolightboxdefaultcss',get_stylesheet_directory_uri().'/js/nivolight/themes/default/default.css');
    wp_register_script('nivolightbox',get_stylesheet_directory_uri().'/js/nivolight/nivo-lightbox.min.js',array('jquery'),'',true);
    wp_register_script('nivolightboxjs',get_stylesheet_directory_uri().'/js/nivolight/nivolightboxjs.js',array('nivolightbox'),'',true);
}
add_action('wp_enqueue_scripts','nivolightbox_scripts');

function nivolightbox_sc($atts, $content = null){
    $nivolightboxing = shortcode_atts(array(
    'effect' => 'fade',
    'url' => '',
    'thumb' => '',
    'alt' => '',
    'title' => '',
    'type' => '',
    'gallery' => '',
    'text' => ''
    ),$atts);
    wp_enqueue_style('nivolightboxcss');
    wp_enqueue_style('nivolightboxdefaultcss');
    wp_enqueue_script('nivolightbox');
    wp_enqueue_script('nivolightboxjs');
    wp_localize_script('nivolightboxjs','nivolightboxing2',$nivolightboxing);
    $n_effect = esc_attr($nivolightboxing['effect']);
    $n_url = esc_url($nivolightboxing['url']);
    $n_alt = esc_url($nivolightboxing['alt']);
    $n_thumb = esc_url($nivolightboxing['thumb']);
    $n_title = esc_attr($nivolightboxing['title']);
    $n_type = esc_attr($nivolightboxing['type']);
    $n_gallery = esc_attr($nivolightboxing['gallery']);
    $n_text = esc_attr($nivolightboxing['text']);
    if ($n_type === '' && $n_gallery === '') {
        $lightboxoutput = '<a class="nivolight" href="'.$n_url.'" title="'.$n_title.'" ><img src="'.$n_thumb.'" alt="'.$n_alt.'" /></a>';
    } 
    elseif ($n_type === '' && $n_gallery !== '') {
        $lightboxoutput = '<a class="nivolight" href="'.$n_url.'" title="'.$n_title.'" data-lightbox-gallery="'.$n_gallery.'" ><img src="'.$n_thumb.'" alt="'.$n_alt.'" /></a>';
    }
    elseif ($n_type == 'iframe' || $n_type == 'inline') {
        $lightboxoutput = '<a class="nivolight" href="'.$n_url.'" title="'.$n_title.'" data-lightbox-type="'.$n_type.'" >'.$n_text.'</a>';
    }
    else {
        $lightboxoutput = '';   
    }
return $lightboxoutput;
}
add_shortcode('nivobox','nivolightbox_sc');

Notes: the first function registers the scripts and styles, which are only enqueued when the shortcode is included on a page.

Step 5: Using the shortcode

If you simply want to add an image onto your page that will open in the lightbox, then use:

[nivobox url="IMAGE URL" title="TITLE" alt="ALT TEXT" thumb="THUMBNAIL URL"]

Clicking on the thumbnail below shows an example.
[nivobox url=”https://www.davidtiong.com/wp-content/uploads/2015/07/bridge-pic1.jpeg” title=”Scenery with bridge – Single Picture” alt=”bridge scenery” thumb=”https://www.davidtiong.com/wp-content/uploads/2015/07/bridge-pic1-288×192.jpeg”]

If you want to create a gallery of images, then include a classname for eg, “gallery1”:

[nivobox url="IMAGE URL" title="TITLE" alt="ALT TEXT" thumb="THUMBNAIL URL" gallery="gallery1"][nivobox url="IMAGE URL" title="TITLE" alt="ALT TEXT" thumb="THUMBNAIL URL" gallery="gallery1"][nivobox url="IMAGE URL" title="TITLE" alt="ALT TEXT" thumb="THUMBNAIL URL" gallery="gallery1"]

Clicking on a thumbnail below shows this example.
[nivobox url=”https://www.davidtiong.com/wp-content/uploads/2015/07/food-pic1.jpg” title=”A food bowl – 1 of 3″ alt=”Lightbox food bowl” thumb=”https://www.davidtiong.com/wp-content/uploads/2015/07/food-pic1-188×188.jpg” gallery=”gallery1″][nivobox url=”https://www.davidtiong.com/wp-content/uploads/2015/07/tea-brewing.jpg” title=”Tea brewing – 2 of 3″ alt=”Lightbox tea brewing” thumb=”https://www.davidtiong.com/wp-content/uploads/2015/07/tea-brewing-188×188.jpg” gallery=”gallery1″][nivobox url=”https://www.davidtiong.com/wp-content/uploads/2015/07/flowers-pic2.jpg” title=”Flowers – 3 of 3″ alt=”Lightbox flowers” thumb=”https://www.davidtiong.com/wp-content/uploads/2015/07/flowers-pic2-188×188.jpg” gallery=”gallery1″]

If you want to include video(s) in the gallery such as a YouTube or Vimeo URL, then use:

[nivobox url="IMAGE URL" title="TITLE" alt="ALT TEXT" thumb="THUMBNAIL URL" gallery="gallery2"][nivobox url="VIDEO URL" title="TITLE" alt="ALT TEXT" thumb="THUMBNAIL URL" gallery="gallery2"][nivobox url="VIDEO URL" title="TITLE" alt="ALT TEXT" thumb="THUMBNAIL URL" gallery="gallery2"]

Clicking on a thumbnail below shows this example, the first one is an image, the second two are videos.
[nivobox url=”https://www.davidtiong.com/wp-content/uploads/2015/07/food-pic1.jpg” title=”A food bowl – 1 of 3″ alt=”Lightbox food bowl” thumb=”https://www.davidtiong.com/wp-content/uploads/2015/07/food-pic1-188×188.jpg” gallery=”gallery2″][nivobox url=”https://www.youtube.com/watch?v=Sz_xVeHV8LI” title=”GoldCoast Video – 2 of 3″ alt=”GoldCoast video” thumb=”https://www.davidtiong.com/wp-content/uploads/2015/07/screenshot11-188×188.jpg” gallery=”gallery2″][nivobox url=”https://www.youtube.com/watch?v=P_q3BdrFsLI” title=”Singapore Video – 3 of 3″ alt=”Singapore video” thumb=”https://www.davidtiong.com/wp-content/uploads/2015/07/screenshot12-188×188.jpg” gallery=”gallery2″]

If you want to include an iframe to another page, then use:

[nivobox url="WEB PAGE URL" title="TITLE" text="LINK ANCHOR TEXT" type="iframe"]

Clicking on the link below loads a page in the iframe lightbox.

[nivobox url=”http://www.example.com” title=”Iframe on a webpage” text=”This link opens up in an iframe lightbox” type=”iframe”]

If you want to include some inline content, such as content in a hidden div, then use:

[nivobox url="DIV ID" title="TITLE" text="LINK ANCHOR TEXT" type="inline"]

Clicking on the link below loads the hidden div content in the lightbox.

[nivobox url=”#inline-div-lightbox” title=”Shows inline hidden content” text=”This link opens up a hidden div” type=”inline”]

A lightbox can be a great tool when used on a website, especially when it comes to displaying photo galleries. Do you use a lightbox on your website?

Running a local small business can be a stressful exercise. You have so many jobs that you are doing, from selling your products and services, to promoting through advertising, to managing staff and systems, to merchandising and window displays and so forth. Especially when just starting out.

Your business not only needs to have the right mix of products displayed effectively, but you need to attract customers and clients through your doors. If you have plenty of passing traffic such as in a CBD main street or perhaps a popular shopping centre, then you need to focus on ways to get them to stop at your shop or store.

But if you are in a quiet strip, or a location where passing traffic isn’t enough, then you MUST focus on other types of marketing including internet marketing.

So how do you do local business internet marketing?

Start with a website, if you don’t have one yet then David Tiong Web Consultancy can help. Promoting your local business online only through a Facebook page, or through a local business online directory, should be part of your local online marketing strategy, but not replace the essential starting point of setting up your own business website.

If your website is live and well, then next up is to help people find it. Read this article to find out what you should be doing to promote your website by doing some of your own local SEO.

A recent article published on Business2Community titled “6 Internet Marketing Ideas for Your Local Small Business” give some great tips to get you started with internet marketing.

Here are some other quick and easy local SEO tips to add to your marketing to do list.
Write a blog on your website, include descriptive text in your web page image ALT tags, ensure consistent NAP (name, address, phone number) on all online listings of your business, create a Facebook page for your business, create “community focused” content on your website, try getting online reviews, donate to local charities and participate in local communities and forums, create an XML sitemap and submit it to Google Webmaster Tools, and make sure your website is mobile friendly.

That should get you started with your local online marketing ideas, if you need more support or don’t have time to manage your own internet marketing, then checkout our helpful services here.

Not everyone will agree with the subheading of this article, but hear me out. How often does a child say “Are we there yet?” when on a driving holiday. How often do we type into Google “How long does it take to fly from point A to point B?”

Or how often do we stand in a queue wondering how much time will pass before it’s our turn. How often do we ask “how long will it take”?

You get the point! No one wants to wait, we live in a society where time is our most limited resource.

So when I see websites like Medium.com that include the estimated time to read an article, I understand why they think that it’s important.

Reason 1: Time Management

We are constantly fighting the hands of the clock. This is why time management ideas are so popular. Possibly the most limiting resource we have is time. We are often on the lookout for ways to save time.

If I only have half hour lunch break, I’m not going to sit down to a banquet. If my bedtime is in an hour, I’m not going to start watching an epic 3 hour movie.

However, if I have 5 minutes to spare before my next appointment, I might decide to read a quick blog post. But how do I know how long it’s going to take me to read?

Well my first instinct would be to scroll to the bottom of the page to see how much content is in the article.

So if I land on a blog post and the estimated reading time is shown to me, then this might be what either makes me decide to keep on reading, or save it for later or immediately bounce off the page.

Reason 2: How deep is the article

This one is definitely subjective, and each person will interpret quantity vs quality differently, but this can be indicative of how informative the post might be. Of course it is up to you to make sure that your posts are good quality, as this is more important than how big a post is.

A technical tutorial might be seen as more extensive if the reading time is higher, so this could appeal to someone looking for more indepth articles. Whereas a quick and easy guide would attract those who want something short and simple to follow.

How to add estimated reading time to your website articles

Well option 1 would be to go down the path of adding a WordPress plugin, a quick search will reveal some options here.

Option 2 could be to count up how many words on your page, estimate how many words you can read in a minute, and then divide by this. Or you could also time yourself reading the article. Then just add it manually to the start of your blog article.

However I prefer something a little more automated (saves time) so here is my preference – option 3. I chose with my website to try out a jQuery script called “Reading Time” by Michael Lynch, which is a lightweight script for estimating reading time and adding it to your website.

It’s a relatively simple procedure to include the script using the WordPress enqueue scripts function, customising the script settings and adding to the pages you want to display “time to read”, and then including a little code in your template where you’d like it to appear.

Step 1: Download the jQuery file readingTime.js from github.com/michael-lynch/reading-time, then FTP upload to your theme folder. To keep your jQuery scripts organised I always recommend adding them into a “js” folder inside your childtheme folder. I added the file into a folder called “readingtime” and then added that into “js” folder.

Step 2: enqueue the script by adding the following PHP function to your childtheme’s functions.php file.

function enqueue_readingtime() {
    wp_enqueue_script(
        'readingtimejs',
         get_stylesheet_directory_uri().'/js/readingTime/readingTime.js',
         array('jquery'),
         '',
         true);
}
add_action('wp_enqueue_scripts','enqueue_readingtime');

Make sure to amend the path to your readingTime.js file, if you uploaded into a different folder location. We include a dependency of “jquery” so the script loads after jQuery, and set to true so that it loads in the footer.

Step 3: setup the script settings.
Here you can customise to suit your preferences. You can choose things like whether you want to include word count, the text displayed before the time shown, the word count, the ids or classes that you will target for displaying the output, and other cool stuff. Read up more about it on the author’s page.

For this blog I decided to only display the reading time only on my posts, and to count the number of words in the main div which has a class of “post-content”. For reading speed “wordsPerMinute” I decided that since my blog is more technical than say a food blog or a travel blog, therefore people will read slower to comprehend so I went with a reading speed of 180 wpm, rather than the default of 270 wpm.

Here is my code below, again you need to add this to your functions.php file. Be sure to modify for your website.

function readingtime_posts() {
    if (is_single() && wp_script_is('readingtimejs','done')) {
        ?><script type="text/javascript">jQuery(document).ready(function($) {
$('.post-content').readingTime({
    readingTimeTarget: '.reading-eta',
    wordCountTarget: '.word-count',
    wordsPerMinute: 180,
    round: true,
    prependTimeString: 'Time to Read: '
});
});</script><?php
}}
add_action('wp_footer','readingtime_posts',100);

Step 4: add some code where you’d like to show your reading time display.
This is the final step in the process and we’ll add some selectors based on our script code above.

<?php if (is_single()) {
    echo '<div style="clear:both;"><span class="reading-eta"></span> (<span class="word-count"></span> Words)</div>';
} ?>

The first span class of “reading-eta” is for the time display, and needs to match “readingTimeTarget” value in the previous code. The second span class of “word-count”, needs to match the value for “wordCountTarget” and is obviously the number of words in your content. Your content will be the div class that you chose for your selector, so in my code above I used “.post-content” but you should choose the div class that your post content is contained in. It could be “.entry-content” or “article” or maybe something else.

So that’s how you do it. Be sure to adjust your reading speed based on your type of content that you write about on your blog.

What do you think? Is this something you’d like to implement on your own website. Do you find it useful on websites like Medium that use reading time estimates?

Online security should be a high priority for both individuals and businesses. Rather than being unconcerned, we should be proactive in reducing our risk. In 2015, cyber security threats are very real and could come in the way of ransomware, cyber espionage, cyber theft and password cracking.

In 2014, “advanced attackers targeted 5 out of 6 large companies”, and “60% of all targeted attacks struck small – medium sized organizations”. “Ransomware attacks grew 113 percent in 2014, driven by a more than 4,000 percent increase in crypto-ransomware attacks … The victim will be offered a key to decrypt their files, but only after paying a ransom that can range from US$300-$500 with no guarantee that their files will be freed”. (Source: Symantec Blog)

National Consumer Fraud Week 2015 was held recently here in Australia, and the Australian Competition and Consumer Commission and the Institute of Public Accountants hosted a free forum on small business scams and cybercrime. You can watch the replay below, it goes for a while so make yourself a cuppa before you sit down. It is interesting, and scary to learn about the risks we are dealing with each day.

Although it may be difficult to stop an attacker who decides to target you, there are some simple steps you can take to substantially reduce your risks of falling prey to scams:

[cposhort_list icon=”exclamation” style=”round”]
Update your software and systems, stay on top of updates[/cposhort_list][cposhort_list icon=”exclamation” style=”round”]
Don’t click links in unsolicited email or messages[/cposhort_list][cposhort_list icon=”exclamation” style=”round”]
Use very strong and unique passwords for each login. Use unique login names and try two-factor authentication when available[/cposhort_list][cposhort_list icon=”exclamation” style=”round”]
Don’t tell people your passwords, don’t leave them written down in public display[/cposhort_list][cposhort_list icon=”exclamation” style=”round”]
Call the person to verify an unusual or unexpected email, or a change in banking details or invoicing methods, don’t respond to unexpected email requests[/cposhort_list][cposhort_list icon=”exclamation” style=”round”]
Be prepared for the worst – so make sure you can restore your systems. Apply the 3-2-1 backup system – 3 backups, on 2 different media and 1 offsite[/cposhort_list]

]]> https://www.davidtiong.com/protecting-against-scams-video/feed/ 1 https://www.davidtiong.com/hidden-danger-of-using-free-digital-photo-websites/ Mon, 25 May 2015 10:02:02 +0000 http://www.davidtiong.com/?p=3236

Before you use another “free” digital image, you must read this

Do you use free digital photos on your blog or your website? Well you might be sitting on a ticking time bomb!

DISCLAIMER: The information contained in this article is based on my interpretation of my findings. I am not an expert in legal matters, so recommend that you do your own research in this area and consult legal advice if needed. The purpose of this article to raise awareness and provide a warning to those using free digital imagery.

With all the free services popping up across the internet to solve the issue of finding stock photography for each blog post we churn out, it seems like it has become so much easier to find that ideal image. And yes it makes life easier for us designers, internet marketers and bloggers. But what happens when Getty Images lets Dun & Bradstreet loose on you?

Think this won’t happen? Well how do you prove where you downloaded a free image from 5 years ago, that now only seems to be available on GettyImages, when free images don’t actually come accompanied with a licence?

If you buy an image, you should receive a copy of the licence that you can download with the image. Also you generally need an account with that image provider, so there is usually a record then of the images you have purchased. But when you download a free image, you get nothing. You are told that the image is “Public Domain” or “Creative Commons CC0”, but you don’t get a copy of this attached to the image to prove that. You also don’t have a record of downloading that image from the website either.

But it says it is free to use, even for commercial purposes

This is true. But what if I told you that the free image websites waive responsibility for checking that an uploaded image isn’t actually someone else’s work? What if I told you that an image can be removed by the author for whatever reason – how would you then prove that the image existed on that website in the first place? That’s if you can remember which website you downloaded it from in 5 years time (especially if you use a few image sources)!

What if I told you that a free photos website can remove an image if they find out it has breached copyright? How would they notify people who have already downloaded that image and are using it on their own websites – that they are now infringing on copyright? THEY DON’T TELL YOU THIS – THEY CANNOT TELL YOU THIS.

It is happening at this moment and you could be next!

A website client of mine recently received a bill for over $600 for use of a small “unlicenced” image on their website. It was an old image downloaded several years ago from a free photo source, and so no licence could be shown to prove this. Searching on the internet it was discovered that this image was being used on many different websites, but that the only “official” place to obtain the image now was through GettyImages. As a result they had no option but to pay the fee for “copyright infringement”.

Following the incident, I took a moment to view the terms of use for some well known free image websites, to see what they were doing to protect their users. I guess I expected to find what I did, but I was still a little disappointed.

It might seem reasonable that if a website, especially a small business, were to find themselves in a situation where an image appeared on their website and they had unknowingly and unintentionally used an image they believed to have been free, that a request and warning to remove it from their website would be fair. But it seems that the first notification is by way of compensation ordered to pay by debt collectors.

So what next?

Well my recommendation is that if you use free images on your website or blog, try to credit the source of the image in your blog post (so that you have a record of where the image came from), or record the URL of the image you download, or otherwise purchase an image that is accompanied by an actual downloadable copy of the licence to use that image.

I’d welcome any comments from anyone who has encountered any issues with using free images, or any representatives of the free image sources that would like to reassure users of their free stock photos, or any other useful advice. Feel free to share below.

]]>

SEO, Content Marketing and the Google Algorithm

The role that SEO, or search engine optimisation, plays in today’s online search world where Google is king, has changed completely in recent years. Google has a secret formula called the Google Algorithm that they use to determine what to display when someone types a query into the Google search bar.

If you mention SEO, many people immediately think of keywords, especially ranking number 1 for popular keywords to do with their business. But what most people don’t realise is that search results now vary continuously and different results show from one search to another. Search results are not static, they are changing all the time.

The Google Algorithm is actually smart enough to know about you and how you search. Factors such as your geographic location, personal search history, social connections, and computer/mobile device you are using, all contribute to why you will see different search results to another person doing the exact same search query at the exact same time.

As search engines grow larger and larger, the amount of information they consume is increasing. To remain relevant, current and trusted your website content must also increase. This is where Content Marketing comes into the picture, and is essentially deciding on what content your customers, clients, followers and fans need and want, creating this content, and then publishing it onto your website, your social channels and your brand outlets.

The SEO landscape has changed completely.

Search engines update continuously and the Google Algorithm undergoes tweaking and updates more frequently than most people realise, but the major updates are given names like Panda and Penguin. Online marketers and SEO companies are constantly having to adapt their strategies according to these changes to remain effective in driving traffic to websites. What worked in the past to make your website rank higher, could actually now have the opposite affect and negatively impact your search engine rankings.

You might be wondering how to go about achieving a first page ranking, and how to rank as high as possible for as many relevant search queries. But what is often overlooked is the fact that there is no point ranking in the top spot if this doesn’t lead to conversions, especially if you’re paying big dollars to be there.

A conversion is someone who actually becomes a customer and often follows a lengthy process of multiple “touch points” or interactions. Finding your business online through a search, reading a review or testimonial about you, visiting your website, a referral, seeing one of your online ads, looking at your Facebook page, reading a blog post on your website, or a blog post about your business on another website, and any social or brand interactions are all touch points that work together to turn prospects into leads and ultimately into clients and customers.

To convert you need to be relevant and have content on your webpage that fulfills the search query. So how do you make your website rank higher on Google search for a search query? Well keyword stuffing, listing your website on hundreds of global directories for back-links, and other “black hat” tactics are no longer effective, and can lead to a Google penalty that will see all of your search traffic drop. Yet many SEO companies still make wild claims like “We’ll get you to number 1 on Google” – You’ve probably had many phone calls and emails telling you that you are missing out on hundreds of visitors or that you don’t even rank on the first page of Google.

What factors contribute to SEO that are relevant today?

There is an extensive list of actions you can take to improve your rankings. But the best approach is simply to concentrate on putting yourself into the shoes of the person doing the search. Remember afterall, that this is what Google is trying to do – provide the most contextually relevant results – to serve up on the plate what the end user actually wants to eat.

The way that a user interacts with your webpage is analysed by search engines. This is called engagement metrics and includes statistics such as how long they visited your webpage after clicking through from the search page and whether they visited other pages. If they left your website immediately then this suggests that your page did not have what they wanted, what they typed into the search query. In other words – you were not a good match for that keyword phrase. This is an important aspect of being competitive in the search results and if users find your content useful then a search engine has done its job and will be more likely to show your result next time, and maybe higher up the ranking. But the opposite is also true.

So what actions should you take?

Forget about a single minded focus on rankings and concentrate instead on engagement and targeting your ideal audience. Provide value to your audience both on your website and at all of your brand’s touch points by integrating content marketing into your weekly business activities. Think about the overall online branding experience and don’t just focus on one area.

Keywords for content marketing

We are starting to realise that ranking for long tail keywords (search phrases with 4 or more words) is more profitable even though there is less search traffic. Why is this?

If someone walks into a department store and asks “Where is menswear?” then they may just be looking in general. However if they ask “Where are mens business shirts?” then you know they are actually looking for something specific that they possibly want to buy today.

Here is an example of how to create keyword phrases for generating effective content for users and search engines:

The idea is to think backwards. Instead of working out a bunch of keywords to rank for and then deciding where to add them onto your website, keep your website fresh and optimise your current pages with content that is going to be useful, valuable and engaging for someone who is on your web page. Make sure that your page content contains a good mix of words about your topic, to ensure that Google fully understands semantically what your page is all about. Google will then index what your webpage is all about and include it in a search results when it “believes” it will be useful to the search query.

Headlines and Click Through Rate (CTR)

When a user types a search query into Google, the results page displays a list of snippets, each one made up of a headline, a web page URL link and a short description. To make your snippet appealing, you should think about how it looks to the person doing the search, and how it looks in amongst other snippets.

If your website appears in the search results, then this is recorded by Google as an “impression”. If a person then clicks on your link and visits your website, this is recorded by Google as a “click”.

The higher the CTR, the more often people are choosing your website in the search results, and the more traffic you have going to your website, so when you appear in a search result you really want to make your listing snippet as appealing as possible. How do you do this?

A good article should always have a great headline. The headline draws the attention of the reader, and a person’s reaction to the headline determines whether they read the article or move onto the next one. Interestingly when it comes to web pages, the headline is actually something different to the main heading on your page, but both are very important.

Your page headline is also referred to as your page title. This title is not displayed on the actual web page, but instead in the top of the browser tab.

It is also sometimes displayed on external websites that link to your page, such as in social media. To set your page title it must be specified in the meta <title> tag in the header of your web page, and should be descriptive, concise, and unique. Consider keeping the length of your titles to less than 60 characters, placing important keywords towards the start, and including your branding when possible and practical.

Your headline needs to encourage someone to read the rest of your snippet and hopefully to then visit your website, so you must write informative and interesting titles for your web pages. As an example, lets say someone types a query into Google such as “how to learn guitar by myself“. You could make your page title / headline interesting by writing something like “Learn Guitar in 20 minutes a Day“, or “Teach Yourself to play Guitar – Learn Online”. Of course it must be relevant to your page content, but make it sound good and try to appeal to reader’s emotions.

Another aspect of your listing that is worth considering is your description, that appears under your headline and URL link. Google will often display your meta description here, otherwise some text it extracts from your website page. Include a meta description that evokes curiosity in the reader to visit your web page to read more. Make sure that the meta description is an accurate description of your page, unique, no more than 160 characters and include your important keywords.

Note that your keywords will appear in bold if they match the search query. Also Google will sometimes display the starting lines from your page’s body content rather than your meta description, so always consider what you include in your first few lines of body text on a page.

Backlinks, Links and Broken Links

What is a link? Quite simply it is a relationship between two things. If you have a link on a page then it is a reference to another location, whether that is another webpage, a file or a document. A backlink, or an inbound link, is a link from another website to your website or webpage. Broken links, as the name suggests, are links that reference a destination that no longer exists, or perhaps never did exist.

When it comes to search engines, links help create paths for discovering new content on the web as well as helping to determine a page’s popularity, so a link to your website is a vote for you. The more high quality backlinks that you have, the more popular your site is seen to Google, and so the more likely you are to appear for your keywords. Conversely if you have very few links to your website, then this suggests that your website is unpopular, or not recommended by others, so it is harder to rank for your keywords.

Google does not see every link as equal however, so some links are worth more than others and some links can even hurt your website rankings. Here is a brief outline of some link facts to be aware of (note these may change as Google changes its algorithm):

Now what ?!??!

This hopefully gives you some insights into how you might go about improving your own rankings on Google. It’s a brief overview, but looks at the bigger picture to help you realise that marketing your website starts with you, not with paying an SEO company to “get you on Google”.

Ranking on search engines is actually really easy to do, if you forget about the “number 1” mindset and simply start creating something of value for your audience. That might be a resource information page, an instructional video on how to use one of your products, an inspiring story, an interview with an expert in your field, a collection or list that your readers would refer to often, a downloadable worksheet, or even just something really interesting and relevant.

Start brainstorming today with your team, your marketer, your friends, your family and start publishing more awesome content.

Your content must be communicating effectively, so consider what is relevant for your audience – Answer real questions, provide product and services information, talk about the latest news, be interesting and entertaining.

Adding fresh new content to your website with the aim to target your audience and increase “eyes” on your website is known as “Content Marketing”. It is as important as SEO – they go hand in hand. Since Google indexes content continuously, to enable it to provide the best response to a search query, if you want your website to appear in the search results you need to not only add fresh new content regularly, but you need to use a plan.

Here are some questions to consider when formulating your content marketing strategy.
 

Question 1: Does your headline create curiosity?

Hints:
When creating an effective headline, ask yourself whether or not it is “clickable”. If someone did a Google search and your headline appeared on the search results page, would it evoke enough curiosity for them to take the action of clicking on your link?

Is the headline short and clear? Try triggering emotional responses. Also include your keyword phrase if possible, as the words in your headline or title are used by Google.
 

Question 2: Where is your introduction?

Hints:
Just like any piece of great writing, blog posts should contain an introduction. If you enticed your reader with your headline, then the next hurtle is to actually get them interested enough to read your article. So hook your readers in by making a bold statement, or by asking a question in your introductory paragraph.

Keep your intro short, no more than 2-3 paragraphs, and give them a taste of what to expect. Add in a picture to make it visually appealing also.
 

Question 3: How is your body looking?

Hints:
When writing an article or body of your webpage, keep in mind the following:

• use subheadings – many readers will not actually read your article from start to finish, they might only skim over the article, so provide informative subheadings for scanning
• avoid big blocks of continuous text – use short paragraphs and no more than 3-4 paragraphs in a block of text
• use questions, tell stories and write as though it were a conversation with an actual person in front of you
• use different forms of content such as images, charts, videos and other interesting types
• keep your content as concise as possible – not wordy
• use emotions to appeal to the reader
• make sure you check your spelling and formatting before publishing
• refer to other experts and sources, and if using facts provide the evidence

Question 4: Have you effectively ended your article?

Hints:
Don’t just end your blog post without wrapping up the aim of the article. You wouldn’t start a conversation, say what you have to say, and then walk off on the other person. So why do this in your blog post.

Write a short conclusion (less than a paragraph or two) that sums up the most important points, lead the reader into the next step that you want them to make, ask a question to keep the conversation going in the comments, provide links to related content, offer them a bonus, whatever it is don’t just walk out on them and hope they know what to do next.
 

Question 5: What about after you hit publish?

Hints:
Ok so you went to all the effort to publish your masterpiece, so what now? Don’t sit back and admire your work, it isn’t finished.

Now is the time for promoting. This may include sharing your new page on social media, sending an email or tweeting to a person that you mentioned in your article, or perhaps someone who you know would enjoy or benefit from reading your article.

Some more ideas might include:

• create short snippets from the article for sharing – you could use your subheadings or quotes – and auto schedule more social mentions of the article over the next month or so – using a service like Hootsuite or Buffer
• design a graphic for Instagram or Facebook, include an interesting quote from your article, and share your graphic with a link back to the blog page.
• make a video that relates to your article, for example if you wrote about a new product, you could produce a short video demonstrating a key feature, then post it to your YouTube channel and link back to your article
• create a PDF of your page content and print it out as a leaflet
• send out an update to your email subscribers and provide a snippet from the article with a link to read more

Wrapping it up

There are some hints to get you started to more effective content marketing. It’s important to realise that getting the perfect mix in online marketing requires more than just following a series of steps to creating some web content. You need to continue to invest time and effort into your website and web presence.

Sometimes the difficulty lies in finding content to talk about on your website. Start with your audience, either think about your business from their perspective, or ask them, to decide what they want to read more about.

If you found something useful in this article, then why not share it with your community by clicking on your favourite social place below.

This is the question I was asking myself a couple of days ago. I have a WordPress responsive website, and I know that it works well on mobile devices. So why would Google’s mobile friendly tester show my website as NOT friendly?

Firstly let’s explore why you need a mobile friendly website.

Google’s upcoming algorithm change

Well according to the Google Webmaster blog in a post titled “Finding more mobile friendly search results“, Google will very soon be making a change to the search results displayed on a mobile device.

From the article:
“Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results. Consequently, users will find it easier to get relevant, high quality search results that are optimized for their devices”

The key words here are “… will affect mobile searches … worldwide … will have a significant impact in our search results …”

I think you get the picture that if you want to appear when someone is doing a Google search on a mobile device after 21st April 2015, then you need to be mobile friendly.

How to be mobile friendly

Well the preferred way to be mobile, according to Google is to have just one version of your website that is a Responsive Website Design.

What reasons does Google give for this (source: why responsive design):

So if you are running a WordPress website, then simply choose a responsive theme. You can also use a mobile plugin that creates a mobile version of your website, however given the reasons listed above you would be better off using a responsive theme. There are plenty to choose from and sometimes the theme you are using may actually have a setting to turn on responsive design, so if you are not sure then check the documentation that comes with your theme, or alternatively contact your theme provider.

How to test if your website is now mobile friendly?

This step is nice and easy, since Google have provided us with a really easy tool to use. Simply visit test here and enter your home page url for Google to test.

Another way to test is by setting up your website with Google Webmaster Tools, and view the “mobile usability” section for any errors that Google has found.

What if I have a responsive website and Google is showing it as “not friendly”?

Well this is what I found out the other day. Even though my website is mobile friendly through testing on a range of mobiles and tablets, Google seems to be of the opinion that it is not.

Why is it so?

So I checked using the Chrome developer tools, and switched on the device mobile emulator to verify that the website was still appearing correctly on mobile devices. Yes that checked out ok.

Then I considered why the mobile testing tool might be showing a different result to Google. Reading on the page I realised that Google is trying to view the website exactly as a typical mobile user might see the page. So that means it needs access to all the stylesheets and javascript, images and other resources that might effect how a page looks.

Then it made sense. Based on the way that used to be recommended for WordPress websites, we use the robots.txt file to help prevent crawling and indexing of content that isn’t relevant for search results. In other words, we simply wanted Google and other search engines to crawl the text content of our websites, not all the other files. So the Googlebot was being blocked from crawling all the stylesheets and javascript, so it cannot therefore see the website exactly how it actually appears on a mobile device.

So even though the website is fully responsive, the reason why Google believes it is not is because the robots.txt file blocks the files that Google now wants to be able to view.

So what to do? Do I simply remove the robots.txt file and allow all crawling of the website? Do I amend the file and stop blocking all the files?

A new robots.txt file for Googlebot

I decided that the reason for blocking certain resources on the website is still relevant at this stage, though in the future this may change again. So the best way to fix the issue with Googlebot is to allow it to crawl the javascript, css, images and other important files. However I still may have some files loaded in my website that I don’t want crawled.

Thankfully we can target Googlebot in our robots.txt using “User-agent: Googlebot”. Also although the directive “Allow” is not recognised across all crawlers (so it shows as an error in robots txt testing tools), Google does actually recognise it, provided that it is “the URL path in of a subdirectory, within a blocked parent directory, that you want to unblock” (source: Webmaster tools help).

This is my revised robots.txt tool with an explanation below:

User-agent: Googlebot
Disallow: /cgi-bin/
Disallow: /wp-admin/
Disallow: /wp-content/plugins/
Allow: /wp-content/plugins/*.css
Allow: /wp-content/plugins/*.js
Disallow: /wp-content/mu-plugins/
Disallow: /wp-content/cache/
Disallow: /wp-content/themes/
Allow: /wp-content/themes/*.css
Allow: /wp-content/themes/*.js
Allow: /wp-content/themes/*.gif
Allow: /wp-content/themes/*.png
Allow: /wp-content/themes/*.jpg
Disallow: /*.php$
Disallow: /*.inc$
Disallow: /*? 

User-agent: *
Disallow: /cgi-bin/
Disallow: /wp-admin/
Disallow: /wp-includes/
Disallow: /wp-content/plugins/
Disallow: /wp-content/mu-plugins/
Disallow: /wp-content/cache/
Disallow: /wp-content/themes/
Disallow: /*.php$
Disallow: /*.js$
Disallow: /*.inc$
Disallow: /*.css$
Disallow: /*?

Sitemap: https://www.davidtiong.com/sitemap.xml

Explanation:

• Lines 1-17 are for Googlebot
• Lines 19-31 are for all other bots
• Line 33 is to inform search engines where my sitemap is located
• Line 4 blocks the directory “plugins”, but lines 5-6 allow Googlebot to access css and js files in there
• Line 9 blocks the directory “themes”, but lines 10-14 allow Googlebot to access css, js and image files in there

You can add other allow or disallow rules in there as needed using the same pattern, however remember that your robots.txt file is publicly available so be careful what you put in there, eg: don’t put important pathways in there to hidden files.

Submitting the new robots.txt file to Google and testing

Once you have uploaded your new robots.txt file to your website, you want to do the following:

How did you go? If you need to print out this page to refer to, then click the button below.
[print-me-button buttontext=”Print a copy”]

Are you ready now for April 21?

Whenever you include your email address online you are asking for spam

An email address is a valuable piece of information. In the right hands it becomes valuable for your business, whether you are networking with other businesses or communicating with customers and clients.

In the wrong hands, your email is soon clogged up with useless spam and rot.

So how do you protect your email address on a WordPress website or blog?

Email spamming is all about grabbing email addresses. Programs known as email harvesters scan the internet for email addresses so they can be added to lists and then targeted with garbage (ie unsolicited email). So if you simply paste your email address on a web page, then you you are just signing up for spam.

So instead you want to make it easy for genuine people to contact you, without any obstacles.

Method 1: Don’t show the email address at all

This one really depends on personal preference. I prefer not to display an email address usually, instead providing a simple and easy contact form on a website. The advantage of this is that you can set required information such as a contact phone number, an email address, perhaps how they found out about you or your business, or other specific information. To prevent spam bots filling in the contact form you can use spam plugins such as Anti-spam or use the honeypot technique (hidden field that only spambots fill in and then the email is rejected).

Another advantage of this is that you can redirect the user to a thank you page, or send a customised auto reply, offer a special, perhaps add them to your email newsletter list (with their permission of course).

The main disadvantage is that they might mis-type their email address, they don’t get to use their preferred email client, they don’t get your email address until/unless you reply email, and also the person might not want to fill in the form.

Method 2: Visual Interpretation

This one works quite well and you are simply showing your email address, but not making it readable to spiderbot harvesters.

Either you show a picture image of your email address, or you add it as text in the form myemail(AT)mywebsite(DOT)com.

This works quite well, though the main problem is that a user has to open up their email client then type the email address in, and this can sometimes be too much effort, or otherwise they could mistype and send the email to the wrong place. Then the client might wonder why you never responded.

Method 3: Encode or obfuscate your email address

If you definitely would prefer to display your email address on your website, so that a client can either copy and paste it into their email client, or even a clickable link that opens up the mail client with the email address ready to go, then you can use the WordPress antispambot() function.

It is really easy to use, and to make it even easier I have created a simple shortcode function below that will either extract the email address from the user profile or allow you to type in the email address to use, encode the email address, then display it as a clickable link for you to use.

//antispam email addresses
function hide_email_addresses_sc($atts, $content = null) {
    $emailaddress_fields = shortcode_atts(array(
        'id' => '',
        'email' => ''
    ),$atts);
    $userid = $emailaddress_fields['id'];
    $e_mail = $emailaddress_fields['email'];
    if ($userid !=='' && $e_mail =='') {
        $emailaddress = get_the_author_meta('user_email',$userid);
        return '<a href="mailto:'.antispambot($emailaddress).'">'.antispambot($emailaddress).'</a>';
    }
    if ($userid =='' && $e_mail !=='') {
        return '<a href="mailto:'.antispambot($e_mail).'">'.antispambot($e_mail).'</a>';
    }
    else {
        return '';
    }
}
add_shortcode('hide_email','hide_email_addresses_sc');

Simply add the above shortcode function to your childtheme’s functions.php file and then you can use the shortcode in either of the following ways:

[hide_email id="1"] // this will allow you to display the clickable encoded email address for a registered user on your site (uses the email address in the user profile with the id= 1)

[hide_email email="email@example.com"] // this will allow you to display a clickable encoded email address for the email address you enter

Other options
For alternatives on preventing spam collection of your email address you can review the WordPress Codex.

How do you prevent harvesters grabbing your email address?

If you host an event on your website, perhaps run a competition or maybe set a product launch date, then you will need a countdown timer.

One great little countdown timer is jQuery TimeCircles. It lets you set a future date and time, or otherwise you can set the timer based on number of seconds. If you set a date and time, then the countdown will finish at the set date and time. If you set a timer based on seconds, then it will start when the page loads.

What I like about TimeCircles is that it looks great, functions well and is responsive for different size devices (if you are using a responsive WordPress theme). I use this counting timer for my webcast replays, so that members know how long they’ve got to watch after the live webcast.

Here is an example of what it looks like, with the timer set for 120 seconds or 2 minutes, and at the end of the countdown it plays a sound and pops up with a message.

How to add jQuery TimeCircles to WordPress?

It is really easy to add this to your WordPress website. If you have been following along with previous tutorials then you probably already have an idea what procedure we are going to use.

First you will need to download the necessary script files to upload to your website. Then create a script file for the options, then add a couple of functions to your childtheme’s functions.php file, one to register the necessary scripts and styles ready to enqueue in our shortcode function, and the other to add the shortcode function with some basic attributes.

Step 1: Get the materials
Download zip file from the TimeCircles website and extract the files. Next create a new folder inside your WordPress childtheme’s folder called “js”. You may already have this folder created.

Now create a folder inside this “js” folder and call it “TimeCircles”. This is where we will upload our scripts and styles for TimeCircles. Go ahead and upload TimeCircles.css and TimeCircles.js into this folder.

Step 2: Prepare our settings
Ok now we need to create our script file for our TimeCircle options. Create a file called timecirclescript.js and insert the following javascript into it:

/* script for countdown shortcode */
var timecircleanimation = timecircledata2.time_animation;
var timestop = timecircledata2.timestop;
var timemessage = timecircledata2.message;
jQuery(document).ready(function($) {
    $(".timecircle").TimeCircles({
        animation: timecircleanimation,
        count_past_zero: parseInt(timestop,10)
    }).addListener(function(unit, value, total) {
        if(total === 0) {
            document.getElementById('timerend').play();
            alert(timemessage);
        }
    });
});

Now upload this file also into the TimeCircles folder.
Note: you may notice that I’ve set some variables in the script with values such as “timecircledata2.time_animation”. This data is passed across from the wp_localize_script function that we will use in our shortcode. If you are familiar with passing parameter from a shortcode to javascript, then you will understand this. If not then have a read of the article that talks about this.

Step 3: Create the functions
Now edit your childtheme’s functions.php file and add the following 2 functions:

function scripts_for_countdownclock() {
    wp_register_style('timecirclecss',get_stylesheet_directory_uri().'/js/TimeCircles/TimeCircles.css');
    wp_register_script('timecirclejquery',get_stylesheet_directory_uri().'/js/TimeCircles/TimeCircles.js',array('jquery'),'',true);
    wp_register_script('timecirclescript',get_stylesheet_directory_uri().'/js/TimeCircles/timecirclescript.js',array('timecirclejquery'),'',true);
}
add_action('wp_enqueue_scripts','scripts_for_countdownclock');

function countdown_shortcode($atts, $content = null){
    $timecircledata = shortcode_atts(array(
        'data_date' => '0',
        'data_timer' => '0',
        'time_animation' => 'ticks',
        'timestop' => '0',
        'message' => 'time has ended'
    ),$atts);
    wp_enqueue_style('timecirclecss');
    wp_enqueue_script('timecirclejquery');
    wp_enqueue_script('timecirclescript');
    wp_localize_script('timecirclescript','timecircledata2',$timecircledata);
    $d_date = $timecircledata['data_date'];
    $d_timer = $timecircledata['data_timer'];
    if ($d_timer !=='0') { 
        $countdownoutput = '<div class="timecircle" data-timer="'.$d_timer.'"></div>';
    }
    elseif ($d_date !=='0') {
        $countdownoutput = '<div class="timecircle" data-date="'.$d_date.'"></div>'; 
    }
    else {
        $countdownoutput = '<div class="timecircle" data-timer="3600"></div>';
    }
    return $countdownoutput . '<audio id="timerend" src="LINK TO YOUR AUDIO FILE" preload="auto"></audio>';
}
add_shortcode('time-circle','countdown_shortcode');

The first function above takes care of registering our 2 script files and our css file. Make sure that the path to the files matches where you have uploaded the files.

The second function is our shortcode function that sets the attributes, enqueues the files when the shortcode is on a page, and also includes a handy use of wp_localize_script so that we can access some parameters in our script file.

Make sure to upload an audio sound file for playing at the end of countdown, and add that to the function where it says “LINK TO YOUR AUDIO FILE”.

Step 4: Using the shortcode
Simply add [time-circle data_timer="ADD NUMBER OF SECONDS HERE"]

Optional settings:
data_date="" //must be in the format yyyy-mm-dd hh:mm:ss
data_timer="" //default is 3600 seconds (1 hour)
time_animation="" //default is “ticks”; alternative option is “smooth”
timestop="" //default “0” to stop timer when reaches 0; set to “1” for timer to continue counting upwards from 0
message="" //add a custom message that pops up when timer reaches 0

Important note: do not use both “data_timer” and “data_date” in the same shortcode, only choose one. Only use the shortcode once on a page, otherwise there will be unexpected results for localized data, as the variable name will be the same with different values.

Feel free to customise your TimeCircles even further, by editing the settings script in step 2 above, or by adding extra attributes to the shortcode function.