Multilingual Magic Part 1

I'm currently building a site using Wordpress and Bootstrap that will have the option for users to see featured content in English, Spanish, and Russian. I needed to make this happen dynamically, and so it would be displayed seamlessly to the user. I also needed it to be easy for the client to update on the backend in Wordpress.

I am already using Bootstrap in the project, so it is easy to implement Bootstrap tabs using the class .nav-tabs on top of the base .nav component. I could have used tabs or pills because they just have different styling. Since I am going to change the styling anyway, I went with tabs for fun.

<ul class="nav nav-tabs" id="alertTab" role="tablist">
     <li class="nav-item">
         <a class="nav-link active" id="english-tab" data-toggle="tab" href="#english" role="tab" aria-controls="english" aria-selected="true">EN</a>
     </li>
     <li class="divider text-red">|</li>
     <li class="nav-item">
         <a class="nav-link" id="russian-tab" data-toggle="tab" href="#russian" role="tab" aria-controls="russian" aria-selected="false">RU</a>
     </li>
     <li class="divider text-red">|</li>
     <li class="nav-item">
         <a class="nav-link" id="spanish-tab" data-toggle="tab" href="#spanish" role="tab" aria-controls="spanish" aria-selected="false">SP</a>
     </li>
</ul>

An important note on accessibility from Bootstrap:

Dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices, require role="tablist", role="tab", role="tabpanel", and additional aria- attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).

There is a tab for English, Spanish, and Russian, and I'm using simple vertical line dividers to separate the three tabs. To make the tabs toggleable, we need to add the attribute data-toggle="tab" to each tab link. Now we need to add in the JavaScript behavior to make the tabs dynamic.

Make a new div with a class of .tab-content and add three divs inside, each with a .tab-pane class and a unique ID for every tab that will correspond to the href element in each of the tabs above.

<div class="tab-content" id="alertTabContent">
        <div class="tab-pane fade show active" id="english" role="tabpanel" aria-labelledby="english-tab">
            <a href="<?php echo esc_url( get_permalink($id) ); ?>">
                <h5 class="text-dark-red alert-content"><?php  the_content(); ?></h5>
            </a>
        </div>
        <div class="tab-pane fade" id="russian" role="tabpanel" aria-labelledby="russian-tab">
            <a href="<?php echo esc_url( get_permalink($id) ); ?>">
                <h5 class="text-dark-red alert-content"><?php the_field('russian'); ?></h5>
            </a>
        </div>
        <div class="tab-pane fade" id="spanish" role="tabpanel" aria-labelledby="spanish-tab">
            <a href="<?php echo esc_url( get_permalink($id) ); ?>">
                <h5 class="text-dark-red alert-content"><?php the_field('spanish'); ?></h5>
            </a>
        </div>
</div>

Next time we will connect it to the Wordpress backend in order to pull in content dynamically. Stay tuned!

Resources:
Bootstrap Tabs