Thrive Digital https://www.thriveuk.com/ Web Design & Digital Marketing Fri, 07 Jun 2024 12:47:43 +0000 en-GB hourly 1 https://wordpress.org/?v=6.5.8 Moving to HTTPS with SSL https://www.thriveuk.com/moving-to-ssl-and-https/ Fri, 07 Sep 2018 07:45:06 +0000 https://www.thriveuk.com/?p=36955 Every day we share our personal information with different websites whether it’s making a purchase, completing a form or simply logging in. In order to protect the data which is transferred, a secure connection needs to be created. Once the preserve of e-commerce stores, now everyone needs to move to HTTPS so here's why.

The post Moving to HTTPS with SSL appeared first on Thrive Digital.

]]> Introduction to HTTPS

Every day we share our personal information with different websites whether it’s making a purchase or simply logging in. In order to protect the data which is transferred, a secure connection needs to be created. Sites like BBC, Amazon, Ebay, Facebook and John Lewis all use a secure connection to protect your data. Generally you probably won’t notice it.

However, this is achieved using SSL (Secure Socket Layer) and HTTPS (or Secure HTTP). HTTPS is an encryption method that secures the connection between a user’s browser and your web server. This makes it harder for hackers to eavesdrop on the connection and steal personal information.

For example can you see the HTTPS element in the following web addresses:

https://www.facebook.com/

https://www.johnlewis.com/

Also you can see this and the green padlock icon which indicates that HTTPS is active in the attached image from the BBC.

 

Example of SSL and HTTPS

 

Typically, if you’re not running an e-commerce store where you’re collecting payment info directly on a page, you won’t have come across HTTPS in the context of your own website since most small business websites are generally informative and don’t require the users to enter particularly sensitive information, so most website owners have not bothered about HTTPS in the past.

About 2 years ago Google announced they would favour HTTPS secured sites over standard HTTP versions in search results. At the time it was considered to be relatively little value in terms of additional favourable weighting, with many people suggesting the HTTPS bonus in search results was as little as 1% versus regular HTTP only sites, so consequently only larger more affluent businesses adopted the standard.

Moreover, as installing HTTPS is extra work – and therefore a hard cost to you with little tangible benefits in the past, we’ve had no cause to recommended it to date.

However due to impending changes in web-based security standards driven by companies like Google we need to alter that advice now.

 

Why do we need SSL and HTTPS now?

As of version 70 of Chrome users (which includes all Android phones) will receive a ‘NOT SECURE’ message when visiting any page that contains enquiry forms on your website, whether it’s for completing a business enquiry or simple site searches. Eventually over time, this message will appear on every page.

We also understand other browsers like Firefox (who already tag insecure login forms with a warning) will follow suit in the very near future. Google have stated now that this is the first step in their long-term plan to mark all pages served through HTTP as ‘NOT SECURE’.

gif showing new treatment of non-HTTPS pages with input from user

 

The result of this means that eventually every page on a standard website will be marked as ‘NOT SECURE’ if we do not implement HTTPS. This warning it seems will ultimately appear in search results on Google (as per the warnings about ‘non mobile-friendly’ sites) and therefore visitors will be given a warning about your site before they visit it.

As you can imagine, those warnings will be extremely off-putting for potential customers and the majority will naturally select to visit only websites and pages that do not display security warnings. As a consequence we see no alternative but to build all new websites from October onwards with HTTPS as standard, and to offer a service to retro-fit HTTPS into existing sites like yours.

You can read more about Google’s advice on securing your site with HTTPS here: https://support.google.com/webmasters/answer/6073543

Additionally the perceived rank position bonus in organic Google search results is considered to now become more significant from late 2017 into 2018, with various industry commentators saying it could be as much as 5% or even 10% uplift. Google have stated that this benefit will grow inline with adoption increases.

Currently it’s estimated that less than 15% of small business are running on HTTPS. The good news I suppose amongst this then is that this is an opportunity to get ahead of your competition who will be slow to react to this industry pressure due to lack of awareness, cost and hassle.

 

So what’s involved and what’s the cost of moving to HTTPS?

Firstly you’d need to acquire an SSL certificate for each domain or website. Premium certificates can be bought on your behalf from certified issuing authorities and they authenticate your site as owned by you and therefore mark it as ’trustworthy’. Alternatively there are free certificates available now from projects like https://letsencrypt.org/ which are more than adequate for informational and marketing sites.

Once the SSL certificate is installed and configured correctly your site, it will display a small green padlock in the top address bar confirming this is the case as per the picture above. You can visit facebook.com to see this – or indeed on this site where I’ve already installed HTTPS.

Your site will then need to be configured to run using the new HTTPS standard. Every page will need to be checked manually – and where necessary – particular elements including every link, all images and source code will need to be changed to utilise the HTTPS format.

Then, once the technical changes are complete, we will need to treat the change from HTTP to HTTPS as a whole ‘site move’ for SEO purposes, which can affect your search engine ranking adversely if done badly. This includes writing redirects for every page, post and image – so that inbound links and search engine ranks are not lost.

This is because every url will now be different, for example: http://www.google.co.uk > becomes > https://www.google.co.uk

You can read about what’s involved in a ‘site move’ here: https://support.google.com/webmasters/answer/6033049

As every website is different, the technical challenges and time to complete the process are hard to quantify up front, and for larger sites this can be particularly complicated. The process can take anywhere from a few hours to a couple of days to complete and test depending on the site structure, content, page count and other factors like the specific software running on it.

This configuration and installation service is generally a one-off cost.

 

Benefits of moving to HTTPS

At this stage there are now 4 advantages in moving to HTTPS:

1. Avoid the new security warnings appearing for visitors on your website pages from October.
2. Avoid search engine results warnings.
3. To get a rank boost from Google in natural search results (35% of all page 1 results are now HTTPS, and the search bonus could rise to ~10%)
4. Gain an immediate advantage over majority of competitors who will respond slowly

 

How to move to HTTPS

The process is transparent and requires no action on your part.

In view of the benefits versus the inevitable pitfalls, we recommend you consider this an important priority when budgeting for the year ahead, and absolutely essential for the medium to long term.

Once again, if you have any questions or would like links to further reading on the subject, please get in touch.

The post Moving to HTTPS with SSL appeared first on Thrive Digital.

]]> Quick Tips: How to use jQuery to search on a page for text and highlight it https://www.thriveuk.com/quick-tips-how-to-search-on-a-page-for-text-and-highlight-it/ https://www.thriveuk.com/quick-tips-how-to-search-on-a-page-for-text-and-highlight-it/#respond Sat, 03 Feb 2018 12:12:53 +0000 https://www.thriveuk.com/?p=36628 I was asked recently if there was a way to include a search on a WordPress page (which was essentially a very, very long list of links) so that it was easier for a user to find suitable content quickly. See how I managed this using native jQuery to search and highlight relevant results clearly on the page as the user types.

The post Quick Tips: How to use jQuery to search on a page for text and highlight it appeared first on Thrive Digital.

]]>

Method using a simple jQuery solution

Not posted one of these for a while, but I was asked recently if there was a way to include a search on a WordPress page which was essentially a very long list of links to 3rd party data.

The functionality needed to allow the following:

  1. only searches for text matches on the page it’s embedded
  2. case insensitive
  3. inexpensive i.e. fast to implement / low dev’ time

Now the native WordPress search is good, but relatively basic, and by default it will return results from all pages / posts so this was no good here.

So, like most people, I had a quick look for an out-of-the-box solution, but nothing stood out. Most solutions were extensions of the WordPress search or alternatives. Generally they were far too complicated and code heavy for what was a very simple requirement. Instead I thought it’s got to be quicker and easier to code using jQuery which is already a WordPress component.

Here’s how I did it:

Example: Enter a Search Term below

Sample Search Links & Results

BBC sports page links
link to the ITV homepage
read about Channel 4 films
Google is the number one search engine
Yahoo – who?
Bing – rhymes with ding

The JavaScript

<script type='text/javascript'>
jQuery(document).ready(function($) {
$(".on-page-search").on("keyup", function () {
var v = $(this).val();
$(".results").removeClass("results");
$("a.demo-links").each(function () {
if (v != "" && $(this).text().search(new RegExp(v,'gi')) != -1) {
$(this).addClass("results");
}
});
});
}); </script>

The HTML

<input class="on-page-search"></input>

The CSS

/* Style the input */
.on-page-search {
width: 100%;
font-size: 14px;
line-height: 26px;
color: #787d85;
background-color: #fcfcfc;
border: 1px solid #e0e1e1;
padding: 5px 15px;
}

/* Style the list */
.demo-links {
border-bottom: none;
padding: 5px 5px;
line-height: 36px;
}

/* Style the results */
.results {
background: #de1919;
color: white;
}
.results:hover {
background: #333;
color: white;
}

Usage notes

This is pretty straightforward really. What we’re doing is:

  1. Adding an html input and styling it
  2. Creating a set of searchable results, in this case I gave the links the class .demo-links
  3. Creating a jQuery script to check each time after a key is released if there is a match using the "keyup" function
  4. Using the query to add a class, in this case .results to the matched term using the "addClass" function
  5. Styling the results to stand out clearly
  6. Restricting the search to target only those links required (instead of the whole page) by targeting a.demo-links

Extending this

Things you could do differently or to extend this:

I’m targeting links, but you could highlight say whole paragraphs, just the matching text or any other element, by changing this line:

$("a.demo-links").each(function () {

You could add animations / transformations to really make the results pop – the sky’s the limit really.

Also you could also consider hiding non-matched results by extending the jQuery. I’ve added another example of this here: https://jsfiddle.net/u85gf30q/

Please note you’ll need to wrap that in script tags and add the jQuery(document) ready.function as per the following code to get it to work in WordPress.

<script type='text/javascript'>
jQuery(document).ready(function($) {
$(".on-page-search").on("keyup", function () {
var v = $(this).val();
$(".results").removeClass("results");
$(".noresults").removeClass("noresults");
$("a.demo-links").each(function ()
{ if (v != "" && $(this).text().search(new RegExp(v,'gi')) != -1) {
$(this).addClass("results"); } else if (v != "" && $(this).text().search(v) != 1) {
$(this).addClass("noresults");
}
});
});
}); </script>

Also add this to your CSS:

.noresults {
color:#f3f4f5;
}

Conclusion

Overall this took me about 30-40 minutes (this write-up took far longer) and ticked the functionality boxes as required. I think it could be pretty useful for FAQ sections or other list or data applications where it’s hard for the user to find something.

If you found this in any way useful, please take a moment to read and click on one of the sponsored messages 🙂

Comments, improvements or questions are welcome.

The post Quick Tips: How to use jQuery to search on a page for text and highlight it appeared first on Thrive Digital.

]]> https://www.thriveuk.com/quick-tips-how-to-search-on-a-page-for-text-and-highlight-it/feed/ 0 Quick Tips: How to quickly change the Contact Form 7 Ajax loading gif – Updated for CF7 v5 https://www.thriveuk.com/quick-tips-change-default-contact-form-7-ajax-spinner/ https://www.thriveuk.com/quick-tips-change-default-contact-form-7-ajax-spinner/#comments Thu, 13 Apr 2017 09:06:09 +0000 http://www.thriveuk.com/?p=36171 Contact Form 7 is a wonderful WordPress plugin that’s incredibly flexible, but I’ve never been a big fan of the default arrow-headed ajax loading gif that appears whilst the form’s processing after submission. As of version 4.6 of Contact Form 7 you can now change the loading gif super easily using just CSS. See an example form and the CSS necessary to make this work.

The post Quick Tips: How to quickly change the Contact Form 7 Ajax loading gif – Updated for CF7 v5 appeared first on Thrive Digital.

]]>

Method for CF7 v5.x

As of version 5.x of Contact Form 7 the first CSS method I posted below no longer works. However, you can still change the loading gif super easily using just CSS. You can either replace the CSS generated visual with your own code, or use a gif.

You may also want to change the other css elements like height and width depending on the size of your new animation. Try submitting the forms below and you’ll see that the new loading images have replaced the old default gif.

PS. You don’t need to enter your name to see this working, just hit the ‘send message’ button. It saves me cleaning up my inbox too!

If you found this in any way useful, please take a moment to read and click on one of the sponsored messages 😉

Before

After with GIF

After with CSS

The CSS option here uses a CSS animation from https://cssloaders.github.io/.

Note: As I have more than one form on the page I gave the form below a class called “.new-spinner” which is referred to in the CSS.

To do this, see: https://contactform7.com/faq/can-i-add-id-and-class-attributes-to-a-form-element

You can just strip the 2 references to the ‘.new-spinner’ class out of the code below to save you doing this.

Example CF7 form with new loading gif

This uses the original gif as a background image. It’s looking a bit tired now I think.

[contact-form-7]

The CSS

/* First we hide the default CF7 loader */
.wpcf7-spinner::before {
display:none;
}

/* Add custom CF7 loader */
.wpcf7-spinner {
background-image: url('images/ajax-loader.gif');
width: 24px;
height: 24px;
margin-left: 10px;
background-color: inherit;
}

Example CF7 form with new CSS loading animation

This looks great right?

[contact-form-7]

The CSS

/* First we hide the default CF7 loader */
.wpcf7-spinner::before {
display:none;
}

/* Add a new custom CF7 loader */
.new-spinner .wpcf7-spinner {
width: 24px;
height: 24px;
border-radius: 50%;
display: inline-block;
border-top: 2px solid #262b2e;
border-right: 2px solid transparent;
box-sizing: border-box;
animation: rotation 1s linear infinite;
background-color: inherit;
}
/* Style the new loader element */
.new-spinner .wpcf7-spinner::after {
content: '';
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
width: 24px;
height: 24px;
border-radius: 50%;
border-bottom: 2px solid #FF3D00;
border-left: 2px solid transparent;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

Method for CF7 version 4.6 on

This is now deprecated. See above.

I’ve been meaning to post this for a while but have just been incredibly busy.

As of version 4.6 of Contact Form 7 the functions.php method I posted originally (see below) no longer works, as a few of you have pointed out in the comments. Thanks for the feedback guys!

The good news is that you can now change the loading gif super easily using just CSS.

You’ll still need to go find or make a new loading gif, as per the usage notes in the deprecated code instructions below, but just add this following CSS (or adaption of it after correcting the filepath to fit your theme) to your theme’s style.css file. You may also want to change the other css elements like height and width depending on the size of your new gif.

Anyhow, here’s how I’ve done it here, and on other projects. Have fun:

Before

After

/* Custom CF7 Loader */
div.wpcf7 .ajax-loader {
background-image: url('images/ajax-loader.gif');
width: 24px;
height: 24px;
margin-left: 10px;
}

Example CF7 form with new ajax loader gif

Try submitting the form below and you’ll see that the new loading image has replaced the old default gif.

PS. You don’t need to enter your name to see this working, just hit the ‘send message’ button. It saves me cleaning up my inbox too!

If you found this in any way useful, please take a moment to read and click on one of the sponsored messages 😉

[contact-form-7]

Method for CF7 version 4.5 and earlier

This method is now deprecated so please use the instructions above for the latest version of Contact Form 7.

Contact Form 7 is a wonderful WordPress plugin that’s incredibly flexible, but I’ve never been a big fan of the default arrow-headed ajax loading gif that appears whilst the form’s processing after submission.

Editing 3rd party plugin files directly is a terrible idea for a number of reasons, not least because the next time the plugin’s updated you’ll lose your changes.

However the good news is that it’s really easy to find an alternative image, and to change it by adding a few simple lines of code in your theme’s functions.php file.

What we’re doing from a technical point of view is adding a filter function to replace the code created by the CF7 plugin, so that it uses our new image instead of the default one supplied.

The code’s below, but please read the notes below first.

Before

After

// Custom CF7 loading image
add_filter('wpcf7_ajax_loader', 'my_wpcf7_ajax_loader');
function my_wpcf7_ajax_loader () {
return  get_bloginfo('stylesheet_directory') . '/images/ajax-loader.gif';
}

Usage notes

The first thing you’ll need to do is find a suitable or more appealing alternative to the default gif. You can make one yourself of course, but for a quicker option head over to www.ajaxload.info and select one from a pretty decent range and download it. I’d recommend using a transparent background.

Once you’ve done that, you’ll need to upload the file you downloaded to your theme and then simply add the code above to your functions.php file to reference the correct location of the new gif file.

If you look at the code above you’ll see in the 4th line that I’ve stored the new gif image in a directory within my theme called images.

return  get_bloginfo('stylesheet_directory') . '/images/ajax-loader.gif';

Also, as I’m using a child theme, and I can’t think of a decent reason why you wouldn’t, in that line I’ve used the get_bloginfo function to target the ‘stylesheet_directory’.

However, if you’re editing the theme or parent’s functions.php file directly and not using a child then you’d need to target the ‘template_directory’ and use the following code in your 4th line instead:

return  get_bloginfo('template_directory') . '/images/ajax-loader.gif';

Conclusion

All-in-all that was pretty simple really and it neatly demonstrates the ease with which you can hook into the WordPress API using filters or actions.

Comments or questions are welcome.

The post Quick Tips: How to quickly change the Contact Form 7 Ajax loading gif – Updated for CF7 v5 appeared first on Thrive Digital.

]]> https://www.thriveuk.com/quick-tips-change-default-contact-form-7-ajax-spinner/feed/ 15