WordPress

How to Resize and Optimise Images for use on Your Website

If you’re building your own site or have started adding content to a WordPress (or other site) that you had built for you, one of the pitfalls is uploading large or (worse) original images to your site. While it is very convenient to upload directly from your phone or use an original image the downside is a slow-loading page and using more of your server space for the files used by your website. The issue of slow-loading pages will impact your SEO and potentially lose your visitors in the event of a “stuck” or very slow-loading page. It’s so easy to upload images and most tools allow you to do this from your phone, but this comes into the category of “just because you can it doesn’t mean you should!” because as a rule of thumb you should always resize and optimise images that you use on your website.

To help you out I’ve put together a short video showing you how to use a free tool from BeFunky which enables you to scale an image and reduce the file size before you upload it to your site. This is a critical step because slow-loading photos can really slow down the time it takes for the page to load, which not only harms your SEO but also puts off the people who do arrive at your page.

There are other ways to do this using software such as using Photoshop or Irfanview but BeFunky is convenient because it’s online and you don’t need to install or buy any software.

Alternatives to this DIY method are to use a plugin that does this whenever you upload an image to your site. If you’d rather go down that route you could take a look (for WordPress) at Imagify or ShortPixel*. They’re the two I use but there are others. Ask if you need more info!

*Disclaimer: This article contains an affiliate link to a product that I use and am happy to recommend. There is a free version of the product, which works as well as the paid version, but if you do end up using the paid version I’ll get a small commission, so thank you.

WordPress

How to Create Widgets for your Multilanguage WordPress Site

In this post I describe how to create widgets that will work on a multilingual site. The main plugin I use for this is Polylang. The template used for this demo is OceanWP but the functionality should be the same in most templates.

When we’re finished you’ll end up with a French (left) and English (right) versions of the content as shown below, which automatically switches when the you switch between languages.

1. Open the Widgets Editor

First, open the Widgets editor and select the widget you want to customise. In this example I’m editing the General Sidebar, which is a custom sidebar I created using the OceanWP Theme Panel.

2. Add and Update a Custom HTML block for the English Version

For the English version, set up a Custom HTML block, set the language to English, leave the Title blank, and put in the code.

/* Heading and Action Buttons - ENGLISH */

<h3 class="sidebarcustomhead">
	Explore the Chateau
</h3>
<p class="button">
	<a href="interior-gallery">Interior Gallery</a>
</p>
<p class="button">
	<a href="grounds-garden-gallery">Grounds & Garden Gallery</a></p>
	<p class="button">
	<a href="amenities">Amenities</a></p>
		<p class="button">
	<a href="our-rooms">Bedrooms</a>
</p>
<br>
<br>

/* List of Amenities using Font Awesome Icons - ENGLISH */

<h3 class="sidebarcustomhead">
	Our Facilities
</h3>
<ul class="address-info list-unstyled"><li>
	<i class="fas fa-wifi"></i>Internet access<br>
	<i class="fas fa-bed"></i>Superking beds<br>
	<i class="fas fa-users"></i>Fresh towels<br>
	<i class="fas fa-bath"></i>Luxury ensuite bathrooms<br>
	<i class="fas fa-swimming-pool"></i>12 x 6 M inground swimming pool<br>
		<i class="fas fa-trophy"></i>International pétanque court<br>
		Pattered garden<br>
		</li>
</ul>
<br>

/* Heading and Action Buttons - ENGLISH */

<h3 class="sidebarcustomhead">
	Contact Us
</h3>
<p class="button">
	<a href="contact">Ask a question</a>
</p>
<p class="button">
	<a href="booking-availability">Make a reservation</a>
</p>
Custom HTML Block for the English Version

With the content pasted into your Custom HTML block, click Save.

3. Add and Update a Custom HTML block for the French Version

Next, add a new Custom HTML block to the same widget, to use for the French version.

For the French version, set the new Custom HTML block to Français, leave the Title blank, and then paste your code into the Content area. My code looks like this:

/* Heading and Action Buttons - FRENCH */

<h3 class="sidebarcustomhead">
	Découvrir le château
</h3>
<p class="button">
	<a href="interieur-galerie">Galerie d'intérieur</a>
</p>
<p class="button">
	<a href="terrains-jardins">Terrains & Jardins Gallery</a></p>
	<p class="button">
	<a href="installations">Installations</a></p>
		<p class="button">
	<a href="nos-chambres/">Chambres</a>
</p>
<br>
<br>
<h3 class="sidebarcustomhead">
	Nos Installations
</h3>

/* List of Amenities using Font Awesome Icons - FRENCH */

<ul class="address-info list-unstyled"><li>
	<i class="fas fa-wifi"></i>Wi-Fi<br>
	<i class="fas fa-bed"></i>Lits superposés<br>
	<i class="fas fa-users"></i>Serviettes de toilette<br>
	<i class="fas fa-door-open"></i>Salle d'habillage attenante<br>
	<i class="fas fa-bath"></i>Salle de bain de luxe
	</li>
</ul>
<br>

/* Heading and Action Buttons */

<h3 class="sidebarcustomhead">
	Nous contacter
</h3>
<p class="button">
	<a href="contact">Poser une question</a>
</p>
<p class="button">
	<a href="booking-availability">Faire une réservation</a>
</p>
Custom HTML Block for the French Version

With the code added, click Save.

Now your widget should look something like this:

Now it’s almost ready to use – but first we have some styling to do.

4. Set Up the Custom CSS

If you’re familiar with CSS you will have noticed a couple of custom CSS classes are referenced. These are:

<h3 class="sidebarcustomhead">

and

<p class="button">

For these two classes to work, you must add these to the Custom CSS block in the Customiser. These two classes – sidebarcustomhead and button – define the layout of the header (e.g., in the English version, “Explore the Chateau”) and the button (e.g., in the English version, “Interior Gallery”).

Don’t worry about the Font Awesome icons list. That isn’t covered in this post but will be documented soon.

To create the same look and feel as the buttons used in this example, copy the code below.

/* Button Styling */

.button {
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
	font-family: Montserrat;
	margin:0px 10px 10px 0px;
	  box-shadow: 0 5px 5px 0 rgba(0,0,0,0.2), 0 5px 5px 0;
	width: 100%;
}

/* Header Text Styling */

.sidebarcustomhead {
  font-weight: 200;
  text-align: center;
  padding-top:10px;
}

The sidebar inherits the majority of it’s styling from the h3 CSS definition (colour, font-family, etc.) and since, in this example, I don’t want this to change, I have only redefined three of the styling parameters:

  • font-weight
  • text-align
  • padding

While the sidebarcustomhead class is used only in the sidebar, the button class is used more widely across the site. This is because I prefer the level of control you have when using CSS than relying on the (often limited) button styling options that are available via the Customiser.

All done!

With those components in place you’ll have custom multilingual sidebars with custom heads and button styling.


If you need help with this or any other aspect of your home or business IT, contact me to arrange a free consultation.

Websites, Services

Do you need help to build a website for your business?

If you need to build a website but have never made one before, it can be a daunting task and easy to put off. Often you’ll get quotes back from web developers for high prices and still not really understand what is is you’re buying. Nowadays though, with new site builder tools like WordPress, unless you are looking for something totally bespoke, there’s really no need to be paying expensive developer fees. There are so many templates, free or for a small fee, and many add-ons, if you want to give the DIY route a go, you can do pretty much everything you need using standard designs and layouts.

Many of my clients have great design skills and a clear idea of what they want. However, they struggle with the technical side of building and managing their website or blog. That is where I come in.

If you want go DIY with your website but don’t know where to start, you need a one-to-one web builder session.

A starter package to get you off the ground

For 160 euros, you’ll get:

  • One year of website hosting (normal price 120 euros).
  • A full WordPress installation.
  • Four hours of one-to-one training and support. This can be can be onsite or remote – or a combination of both, however works best for you.

A typical web builder support session would cover:

  • Logging in.
  • Introduction to the WordPress interface.
  • Choosing an installing a template.
  • Customising your template with your business name, logo, and images.
  • Setting up menus
  • Adding a page
  • Creating a blog post
  • Understanding tags and categories
  • Managing your media files
  • Using plugins
  • Backing up your site

The only other cost to you is the domain registration, which is usually between 5 and 20 euros, depending on the type of domain you want (for example, a .coms is usually more expensive than .co.uk.)

At the end of all this you’ll have your business site online, with your first page or pages of content, a contact form, and a business email account (which is included in your hosting package) – ready to go.

You’ll know how to choose and customise a template, create new pages and blog posts, add and resize images, find and install new plugins, and keep your site backed up.

So, what are you waiting for? Get in touch and let’s start building!