Skip to main content

Add a multi-language slideshow to your WordPress Home Page using Meta Slider plugin

One of the most frequent questions featured by the wordpress.org official support forum is about adding a slideshow-type image gallery to a WordPress-powered home page, possibly also localizing its contents for multiple languages. This brief tutorial shows how to do that using the well-known Meta Slider plugin, one of the most used slideshow generators, yet you can achieve the exact same results with any slideshow plugin supporting shortcodes (never heard about them? read here).

Configuring the Slideshow

You can get the Meta Slider plugin by clicking here or by searching for “meta slider” using the Wordpress Admin Panel (Plugins -> Add new). Don’t worry, it’s completely free.

Once installed you’ll have to build your slideshow(s) using the plugin’s control panel: go to Meta Slider -> Meta Slider, add a new slideshow by clicking on New slider and insert images and texta at will. Eventually you’ll have something like that:

meta.slider.interface

Take a look to the Settings pane on your right and play with the various options until you’ll learn them all. Be sure to set your image dimensions: you’re building a Home Page slideshow, so you’ll probably want to use fixed-sized images so you’ll have a smooth scrolling which won’t mess with your page height. You should also set a width of  1920px or more, so your slideshow images won’t look ugly even on a Full HD monitor.

 

Adding the Slideshow to the Header file

Once you’re done with the setup, you’ll have to put your slideshow into work. In order to do that you’ll need to add a small piece of PHP code to your theme’s header.php file: do a backup first, just to be sure you won’t accidentally shut down your website. Open up the code editor from your Admin Panel (Appearance -> Editor) and select the header.php file from the listing on your right.

Scroll down its html/php hybrid contents until you find the end of the   <header> block: you probably want to put the slideshow just below that.

wordpress.editor.header

If you can find any   <header>  element, it could mean that your theme isn’t (oddly) using one. Look for the main container element, the one which contains all the web page contents: you’ll put your code right before that, so your slideshow will be shown between the main site logo/menu and the actual page/article/listing contents. If you want to place it somewhere else, you’ll just have to find the right spot.

If you aren’t confortable with the html/php hybrid code of the Header file you can also perform your search browsing your Home Page with the Google Chrome’s Inspect element… feature (or equivalent) until you find your desired placement.

When you are ready, add the following php code to your chosen spot inside the header.php file:

These lines will make sure that your slideshow will be shown only in your Home Page.

Working with Localizations

If you want to show a different slideshow for specific languages/localizations, you can do that by adding a few more line of code. The following example features four different slideshows for italian, german, french and english languages: each one of them will be shown only to the user having that localization enabled, meaning that the website will have a multi-language slideshow solution featuring localized contents. The latter one (english language) will be also used as the default fallback, meaning that it will be used for all other localizations.

That’s basically it.

Happy coding!

RELATED POSTS

Ryan

IT Project Manager, Web Interface Architect and Lead Developer for many high-traffic web sites & services hosted in Italy and Europe. Since 2010 it's also a lead designer for many App and games for Android, iOS and Windows Phone mobile devices for a number of italian companies.

Close
Read previous post:
Objective-C: Programmatically set UIView alignment without using Storyboard

I recently wrote an article about removing Storyboards constraints programmatically. When you do that, you'll often also want to replace the removed...

Close