DEV Community

Aellon
Aellon

Posted on

2 1

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Resources:
Bootstrap Tabs

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more