How to internationalise your website - B2B marketing agency for technology sector | London | Now

How To Internationalise Your Website

The top 5 features your Wordpress website needs

Written by

NOW|Jack

Planning for world domination?

It's time to supercharge your CMS

Great job. The 18 hour workdays have paid off and it’s time to think global.  Now you get to worry about how to pronounce your USP in another language and how many millilitres are in a yard. There’s a whole world out there just waiting to learn about your business, so you’re going to need a website that can handle word perfect, regionally relevant content.

Transiting a website built for one region into an international site that caters for multiple regions is a complex tech task. But if it’s done right, the new multi-regional ecosystem needn’t be a management headache.

We’ve done all the head scratching and code creation you need to turn your start-up WordPress CMS into a global rockstar. And since we’re incredibly generous people, we’re opening the playbook.  Here’s the 5 point plan you need to internationalise your WordPress CMS.

time to enter the multiverse

1. Upgrade to a multisite

We are the fifth element of Marketing

multisites can be a pain in the PHP

but being able to segregate your content is vital

Multisites are generally seen as a bit of a throwback to blog and university networks. They were designed to help site admins create a centralised management system for themes and plugins for a bunch of independent mini sites. Plugin support for them is limited, so if you rely heavily on third-party plugins to expand your site functionality, it’s probably best stop reading here.

Out of the box their functionality is limited. It’s disheartening to find this isn’t exactly what you need for creating an interconnected, intelligent and indexable international site. However, with a few cheeky custom additions, we can make a super easy to develop, scale and manage website. All we really need from the base multisite is a simple partitioning system where we can create the localised folders: /fr /de /en-gb etc and a separate dashboard to manage pages and restrict website access to regional admins.

Be warned, turning a single site into a multisite is a bit of a faff to undo. So if you’re updating an existing site, you might as well start from scratch on a fresh install.

If you want to do it yourself, this guide is useful:

https://multilingualpress.org/docs/how-to-install-wordpress-multisite/

Create a proper page builder

2. Use ACF flexible Content

Can your dev do this?

Stop making page templates

Start making flexible layouts

I’m not a fan of page builders, because they come with a bunch of bloaty Javascript or React nonsense. They also tend to break and take forever to do simple tasks because they try to solve every problem.

ACF flexible content blocks are essentially mini template parts that you have full control over to determine what you think users need to make content easily and fast.

Setting this up couldn’t be simpler:

<?php if( have_rows('layout') ):
while( have_rows('layout') ): the_row();$layout_name = get_row_layout();
get_template_part( "layouts/$layout_name" );endwhile;
endif; />

Putting this code snippet in your page and single templates will allow you to call in your soon to be template parts.

The next step is to create a folder called “layouts” and your first part which we’ll name layout_hero.php. Go back to ACF and populate your flexible content with the controls you’d like the user to see. These could be as simple as just being able to update a title and a background image, but you can give them some other functions if you are feeling generous.

Then for your very first template do something like this:

<?php
$hero = get_sub_field('background_image');
$image = wp_get_attachment_image_src($hero, $size);
$size = 'large';
 ?>
<section class="layout-hero " style="background:url(<?php echo $image[0]; ?>); background-size:cover;background-attachment:fixed;">
<div class="<?php the_sub_field('overlay'); ?>">
  <div class="container">
    <div class="row d-flex align-items-center flex-wrap post-hero inner">
      <div class="col-lg-8 inner">
        <h1><?php echo get_sub_field( 'title' ); ?></h1>
        <h2><?php echo get_sub_field( 'content' ); ?></h2>
      </div>
    </div>  
  </div>
</div>
</section>

This will be the start of your very own website builder. I’ve been developing this on every website I work with and it gets better with every iteration because I am building exactly for the purpose needed. Throw away WP Bakery or Divi and give your client something easier to manage.

The VERY important thing we are doing here is calling in the media via the ID. We don’t want to call media by their URL, because we want to be able to export and import content around the site easily AND make a global media library for the entire site.

One library to rule them all

3. Save server space with one media library

Understand what you put on your site

Find a plugin that works

or contribute to open source

Multisites are notoriously difficult to find supported plugins for, for the simple fact that not many people use them and they are a difficult thing to get right. The annoying issue for multisites is that they lack a single media library. You can do dumb stuff like duplicating media for each subsite, but that is more hassle than worth thinking about.

When we took on our first internationalisation project, I was quietly confident that there would at least be some third-party plugin that would work if I couldn’t manage to figure out how to do it myself.

Whilst there are certainly options on Envato that claim to do what you want at a price, I started to get a little worried when realising they are very few and far between. So, I prayed to the open-source gods of Git to provide me with an answer. And they did, sort of…

There is a Git repository by some guys called Human Made, and their plugin is called Network Media Library:

https://github.com/humanmade/network-media-library

It is a few years old (2019) and there appear to be subsequent projects they’ve worked on. However, I could not get those to work for love or money so I’m assuming they aren’t compatible with the latest version of WordPress or I’m doing something dumb.

But what I could get to work (sort of) was this 1.5 version of the plugin, although it’s ACF functionality didn’t work the way I needed it to. So you need to either: comment it out or adapt to whatever works for you. As long as you get the media ID to show, you’re golden. What is very reassuring is that the plugin itself is one file, it’s tiny! You’ll need to add some minor tweaks like pointing out which site library you want to use etc, but you will eventually get it to do everything you need.

The unexpected benefit I discovered is that because we’re using the media ID for the reference, rather than the URL, when the image is called into the page, it is localised to that sub-site folder eg website.com/en-gb/media.jpg etc. So whatever language site we export it to the onpage media URLs will all correspond to the correct sub-site.

edit all the things

4. Make Post Type slugs international

Assume all users are idiots

It's the small things that make the difference

Now, this little hack will give you bonus points with your SEO colleagues. We want to keep post types consistent throughout the network. Because I’m incredibly lazy (see this blog for details), I only want to use one functions.php file. When you create a Post Type function, it is quite difficult to attribute more than one slug (especially anticipating all the potential language variants).

To make the slug editable in the CMS, we can thank helpful Stack Overflow user, ChrisGuitarGuy for essentially spelling it out for us:

https://wordpress.stackexchange.com/questions/30021/theme-localization-of-slugs-custom-post-types-taxonomies

All you need to do is:

copy and paste the CPT language options function that makes the editable box appear in the permalink settings of your site

create the field callback so it hooks into your CPT

register your rewrite inside of your CPT function!

I would recommend doing this on any site as it saves you having the effort of manually editing the functions file if they suddenly want to change the permalink structure for whatever reason.

don't get a head of yourself

5. Multisites deserve Mega Menus

Choices, choices, choices

Help your users decide

and make it easier to customise too

This is a super simple Boostrap 5 mega menu that works out of the box:

https://bootstrap-menu.com/detail-megamenu.html

The thing with regular drop down menus, is they make it quite difficult for users to make a decision. Users like to browse. and since you’re internationalising, chances are you’re going to have to serve different content to different regions. So why not take a bit more time to make a fancy visual menu that can support blog posts, sub items and event carousels!

I would recommened building your own navigation Options page. Simply because it can get a little annoying getting content to lay out exactly as you want. ACF pro makes this easy so there is no excuse to get started.

Unfortunately, that's not all

But wait, there's more!

It's turtles all the way down

The list goes on, and on and on

Sadly for you, I’m lazy so I’m not going to list out all the steps required to make a fully functional multilingual global website. We haven’t got into custom meta titles, Hreflangs or even importing and exporting pages around your site!

Luckily for my Boss, that means we can offer it as a full service. Why bother struggling to make it yourself, when we’ve already nailed and scaled it?

I guarantee it will take you up to a year to even sort your content and SEO into a handful of languages, so don’t make it more difficult than it already needs to be. We’ve created some packages to suit your budget and need.

Services made for you

Take a look at what else we do

Agile web Design

Web design strategy for marketing managers who think websites should change as fast as their business.

Agile Web Design

SEO Makeover

Great for: businesses that want to get more eyeballs on the great content they’ve created

SEO Makeover

Brand and messaging

Refocus your brand’s messages, benefits and advantages to ensure they address the new problems faced by today’s potential customers, right at their moment of need.

Brand and messaging

Social selling accelerator

Great for: Marketing people who want to deliver new leads to sales fast

Social selling accelerator

I think these guys do a great job and so does my wife.

Richard Fox, Toucan