Welcome to Sydney Business Web Technical Solutions Problem 4 - Dual Language Menus
Every day, we solve problems for eCommerce website owners. We had a think about how we might use this activity to help others, and came up with this idea: Every week or three, we'll take the trickiest problem and publish our solution.
Important! - Some of these solututions involve adding code to your website (WordPress and Woocommerce mostly), so please ALWAYS be careful. We are not in any way responsible, directly or indirectly for any impact or consequences our code or advice has on your website, nor are we liable for any damage arising from such use.
Always back up your website before changing or adding code and/or editing the database, This is critically important!!!
PROBLEM 3: We need english and khmer language menus
Fixing Dropdown Menu Issues in WordPress: A Step-by-Step Guide
In this post, we’ll walk through how we fixed a WordPress dropdown menu displaying English translations beside Khmer text. While the problem seemed simple, we encountered multiple challenges due to conflicting HTML structure and CSS styling issues. Here's how we solved it.
Initial Problem: Titles Only Displayed for the Last Dropdown Item
We needed to add English titles next to Khmer text in a WordPress dropdown. However, when we first applied the PHP snippet, only the last item in the dropdown displayed the English title, while the rest of the items did not.
At first, we suspected that CSS was hiding the title attributes for the other items, but after inspecting the HTML, we realized that the <span>
element for the English title wasn’t consistently being applied to all items.
Understanding the Root Cause
When inspecting the HTML structure, we found that the first item in the dropdown was wrapped in a <span>
with the class tve-disabled-text-inner
. This conflict came from a plugin (Thrive), which interfered with the PHP logic responsible for adding the English title. The last item displayed correctly because it wasn’t affected by this conflicting class.
Step 1: Fixing the PHP Code
We rewrote the PHP logic to make sure the title attribute was injected consistently for all items, regardless of conflicts with other plugins. We used str_replace()
to force the English title next to the Khmer text for each item.
function add_menu_title_for_all_items_with_fix( $item_output, $item, $depth, $args ) {
if ( ! empty( $item->attr_title ) ) {
if ( $depth == 0 ) {
$item_output .= '<p class="menu-title-description">' . esc_html( $item->attr_title ) . '</p>';
} else {
$item_output = str_replace('</a>', '<span class="menu-title-description-dropdown">' . esc_html( $item->attr_title ) . '</span></a>', $item_output);
}
}
return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'add_menu_title_for_all_items_with_fix', 10, 4 );
This ensured that the English translation was applied next to the Khmer text for all dropdown items, not just the last one.
Step 2: Fixing CSS for Wrapping and Alignment
After applying the PHP fix, the titles appeared consistently for all items. However, the English text was wrapping awkwardly. To fix this, we adjusted the CSS to set a minimum width for the dropdown and prevent text wrapping.
ul.sub-menu {
min-width: 250px; /* Ensures enough space for both Khmer and English text */
white-space: normal;
}
.menu-title-description-dropdown {
font-size: 14px;
color: #ffffff;
display: inline-block;
margin-left: 10px;
white-space: nowrap; /* Prevents the English text from wrapping */
}
.menu-title-description {
font-size: 16px;
color: #ffffff;
display: block;
margin-top: 5px;
}
Step 3: Testing and Refining
With the updated PHP code and CSS applied, the English titles now appeared consistently beside the Khmer text, and the awkward wrapping was fixed. The layout was tested across different screen sizes to ensure responsiveness.
Final Result
In the end, we solved the problem by refining both the PHP logic and CSS. The main challenges came from plugin conflicts and ensuring the WordPress menu walker added the title attributes consistently. With patience and careful testing, we were able to display a clean and functional menu with English titles beside Khmer text.
Key Takeaways
- Simple tasks can become complicated when multiple plugins interact with WordPress HTML structure.
- Inspecting the generated HTML and CSS is crucial for identifying underlying conflicts.
- PHP and CSS can be combined to overcome plugin conflicts and control the output more precisely.
Results
Our problem was that a client webskite needed joint menus in Khmer and English. WordPress just won't do this properl;y outof the box and some php and css is needed to provide a readable, compact menu that works on dektop and mobile. Our code provided just that!
Need help? -