RTL in WordPress Themes: How 10 Popular Themes Handle Arabic Layouts

Most Arabic WordPress sites inherit their RTL quality from the theme. On 2 October 2026 we read the shipped CSS of 10 popular themes: 1,168 of 1,254 direction-sensitive declarations (93%) in their main stylesheets were physical left and right rules, and 6 of the 8 classic themes used no logical properties at all.

Key takeaways

• 9 of 10 themes carry the rtl-language-support tag; 8 of 10 ship an RTL stylesheet for their main CSS.
• Three themes swap in a full mirrored copy (Astra, Neve, Storefront). Four add a small override file on top (GeneratePress, Kadence, Blocksy, OceanWP).
• Only Blocksy (71% logical) and Hello Elementor (60%) write most direction-sensitive rules as logical properties.
• The two default block themes ship no RTL file. Core mirrors block styles, but inline padding in block markup is never flipped.
• Your own CSS (child theme, Additional CSS, builder custom CSS) is never flipped. Write it with logical properties.

What we found in 10 popular WordPress themes

Every theme we checked supports Arabic in some form, and they get there in four different ways. Nine carry the rtl-language-support tag, eight ship an RTL stylesheet for their main CSS, and only two write most direction-sensitive rules as logical properties. The rest depend on a second file to mirror them.

A physical rule is not a bug: the RTL file flips it, and left:0; right:0 renders the same both ways. The count shows how much of the Arabic layout depends on that second file.

The tag is self-declared. The WordPress.org theme tag rules define rtl-language-support as a theme showing no visual issues in RTL mode, tested with the RTL Tester plugin, which was last updated in August 2020. Blocksy has no tag, yet loads an RTL file.

How we checked

VOCTOS, 2 October 2026. Versions and tags come from the WordPress.org Theme API, code from each theme’s official zip. We counted the front-end stylesheet(s) each theme’s PHP enqueues, plus the file it loads when is_rtl() is true. A Python script split every rule block into declarations and counted properties, never selectors. Physical: margin, padding and border left/right, left, right, and float, clear or text-align set to left or right. Logical: the -inline equivalents and start/end values.

Limits: free versions only. CSS generated in PHP (Astra, Kadence and Neve all print inline CSS) and shorthand such as margin: 0 8px 0 0 are not counted. These are code counts, not rendered pages: they measure maintenance load, not visible defects.

How does WordPress load an RTL stylesheet?

WordPress loads RTL CSS three ways. A file named rtl.css in the theme root loads automatically when the site language is right-to-left. Any enqueued stylesheet can declare an -rtl twin with wp_style_add_data(), either replacing the original or loading after it. PHP can also branch on is_rtl() for markup and inline CSS.

The first route is documented in the Theme Handbook’s template files list: rtl.css loads on its own whenever the site language is right-to-left. OceanWP uses it. The second route is wp_style_add_data() with the rtl key. Pass 'replace' and WordPress swaps the file; pass true and it loads the -rtl file after the original.

The suffix key decides the filename: core’s WP_Styles class inserts -rtl before it. Without a suffix, main.min.css becomes main.min-rtl.css (Astra’s naming). With 'suffix', '.min' it becomes main-rtl.min.css (Neve’s naming). A wrong guess means a 404 and an unstyled Arabic site.

add_action( 'wp_enqueue_scripts', function () {
    $ver = wp_get_theme()->get( 'Version' );

    wp_enqueue_style(
        'mytheme-main',
        get_theme_file_uri( 'assets/css/main.min.css' ),
        array(),
        $ver
    );

    // On RTL locales, load assets/css/main-rtl.min.css instead.
    wp_style_add_data( 'mytheme-main', 'rtl', 'replace' );
    wp_style_add_data( 'mytheme-main', 'suffix', '.min' );
} );

// Direction-aware markup: swap arrow characters, as Hello Elementor does.
$prev_arrow = is_rtl() ? '→' : '←';
$next_arrow = is_rtl() ? '←' : '→';

is_rtl() checks whether the current locale is right-to-left, and body_class() adds an .rtl class. Neve uses is_rtl() to move its scroll-to-top button between left:20px and right:20px; OceanWP swaps its arrow icons.

Do block themes need an rtl.css?

Mostly no. WordPress core registers an -rtl version of block styles and swaps it in on RTL sites, so Twenty Twenty-Five and Twenty Twenty-Four ship no RTL file at all. The gap is inline styles: padding and margins saved in block markup are physical, and no RTL stylesheet ever touches them.

We checked WordPress 7.1.2, the current release. In blocks.php, register_block_style_handle() calls wp_style_add_data( $style_handle_name, 'rtl', 'replace' ) whenever the site is RTL and an -rtl file exists. In script-loader.php, wp_default_styles() does the same for wp-block-library. All 87 core blocks that have a style.css also ship style-rtl.css.

Patterns are the weak spot. Across 114 template, part and pattern files, Twenty Twenty-Five has 139 physical declarations in inline styles and zero logical ones; 7 set different left and right padding, such as a spacing preset on the left and padding-right:0. Twenty Twenty-Four has 91 and 3. In Arabic, those offsets stay where they were drawn.

If you build block patterns for Arabic sites, keep left and right spacing equal or check each one on an Arabic staging copy.

Why write logical properties if the theme already ships rtl.css?

Because the theme’s RTL file covers only the theme’s own CSS. Your child theme, Additional CSS, plugin overrides and page builder custom CSS reach the browser exactly as written, so every margin-left in them stays on the left in Arabic. A logical property makes one rule correct in both directions.

The W3C internationalization guidance on structural markup and right-to-left text says to “use logical (‘end’ and ‘start’) on properties or values related to margins, padding, alignment”. Browser support is settled. MDN lists margin-inline-start as Baseline widely available since January 2020 and inset-inline-start since April 2021. float: inline-start is newer (Chrome 118), so prefer flexbox there.

Maintenance matters too. Astra’s main stylesheet is 44,905 bytes and its RTL copy 44,936, two files that must stay in step every release. Elementor’s developers named that cost when they began replacing physical properties with logical ones in version 3.15, aiming to drop the duplicate *-rtl.css files.

/* Before: physical rules, plus a second rule set in rtl.css */
.card        { padding-left: 24px; border-left: 4px solid var(--accent); text-align: left; }
.card__badge { position: absolute; top: 12px; right: 12px; }
.card__icon  { float: left; margin-right: 12px; }

.rtl .card        { padding-left: 0; padding-right: 24px; border-left: 0;
                    border-right: 4px solid var(--accent); text-align: right; }
.rtl .card__badge { right: auto; left: 12px; }
.rtl .card__icon  { float: right; margin-right: 0; margin-left: 12px; }

/* After: one rule set, correct in both directions */
.card        { padding-inline-start: 24px; border-inline-start: 4px solid var(--accent); text-align: start; }
.card__badge { position: absolute; top: 12px; inset-inline-end: 12px; }
.card__head  { display: flex; gap: 12px; } /* icon + title row; replaces the float */

/* Only genuinely directional icons get mirrored */
:dir(rtl) .icon--directional { transform: scaleX(-1); }

Which icons should flip in RTL, and which should not?

Flip icons that point along the reading direction: back and forward arrows, breadcrumb chevrons, next and previous controls. Do not flip media playback controls, clocks and refresh arrows, search magnifiers, or icons that carry no direction, such as a checkmark. Google’s Material Design bidirectionality guidance draws the same line.

The Material bidirectionality page keeps playback buttons and progress bars left-to-right because they follow the media, not time. Clocks still turn clockwise, a search handle reflects right-handed use, and icons that do not communicate direction are not changed. The Material Icons guide adds that in RTL, forward points left.

In CSS, mirror with transform: scaleX(-1) on a class you add only to directional icons. The :dir() pseudo-class has been available across browsers since December 2023 and matches the direction the browser computes, even when inherited or set by dir="auto". MDN notes that [dir=rtl] attribute selectors never match the auto value. Transforms never flip on their own.

If you want a developer to put your Arabic WordPress build through these checks, I want VOCTOS to review my site’s RTL layout.

How do flexbox and grid behave under dir=rtl?

They follow the text direction without extra code. A flex row starts at the inline-start edge, so in Arabic the first item sits on the right, and grid column line 1 moves to the right-hand side. Problems start when CSS fights this with row-reverse, order hacks or physical offsets.

MDN defines flex-direction: row as a main axis that matches the text direction. For grid, MDN’s guide to logical values and writing modes shows line 1 placed on the right and line -1 on the left once direction is rtl. justify-content: flex-start and gap mirror for free.

Three things do not. translateX() is physical, so a menu hidden with translateX(-100%) needs the opposite sign in RTL. background-position: left stays left. And a row-reverse added to fake RTL reverses again once dir="rtl" is set.

Numbers, Latin text and Arabic fonts inside RTL pages

Direction is not only layout. Prices, phone numbers, SKUs and English brand names inside Arabic sentences need bidi isolation, or digits and punctuation drift to the wrong end. Wrap inserted values in <bdi>, give user-generated fields dir="auto", and keep email and URL inputs left-to-right.

Check that the header calls language_attributes(), which prints lang and dir="rtl" on the html element. In our audit of lang, dir and bdi on 29 Arab brand homepages, 3 of 27 Arabic pages had no dir on html: a Saudi bank, an Egyptian retailer and an Egyptian hospital.

Fonts are the other half of an Arabic layout. Set an Arabic font family explicitly rather than trusting the theme default, then check its weights and line height on long Arabic headings. Our measurements of Arabic web font payloads and loading show how to subset and preload without hurting LCP.

Elementor and other page builders on Arabic sites

Treat the builder as a second theme. Elementor ships its own LTR and RTL CSS and has moved toward logical properties since version 3.15, but values you type into widget controls, absolute offsets and custom CSS still need an RTL check on a real Arabic page before launch.

Since Elementor 3.7, the editor language is independent of the site, so a team can work in an English editor while the site renders RTL. Use it: set the Site Language to Arabic on staging before building, so widgets are placed in their real direction.

Hello Elementor, the theme published by the Elementor team, takes the logical route itself: 21 of its 35 direction-sensitive declarations are logical, and its three stylesheets carry 8 selectors that target .rtl or [dir=rtl] directly. Version 3.5.1 also ships flipped -rtl copies that no theme PHP enqueues. On a builder site, the risk sits in your widget settings.

Our read

The rtl-language-support tag tells you almost nothing. Nine of ten themes carry it, and the one without it has the most logical CSS in our set. Choose a theme by how it loads RTL and how much of its CSS is physical, then judge the rest on an Arabic staging site.

Mirrored copies (Astra, Neve, Storefront) are the most predictable for the theme’s own CSS, because the RTL file is a complete flipped copy of every rule. Override files are far smaller, 2.2 to 3.9 KB for Blocksy, GeneratePress and Kadence, but they must restate each asymmetric rule by hand, so gaps appear as one-off misalignments. Neither protects your own code.

Our position: do not rewrite a theme’s CSS. Put Arabic fixes in a child theme or plugin, written in logical properties, and keep an RTL override only for transforms, background positions and directional icons.

A 15-point RTL QA checklist before launch

Run these checks on a staging copy with the Site Language set to Arabic, at desktop width and at 360 pixels. They target the faults our theme review points to: physical CSS outside the theme’s RTL file, unmirrored inline styles, wrongly flipped icons and mixed-direction strings.

1. View source: html carries lang="ar" (or your regional code) and dir="rtl".
2. body carries the .rtl class, so theme and plugin RTL selectors can match.
3. Network panel: the theme’s -rtl or rtl.css file returns 200, and with replace the LTR file is not also loaded.
4. Header: logo on the right, menu flowing right to left, nested submenus opening to the left.
5. Mobile menu: the off-canvas panel slides in from the correct side.
6. Breadcrumb separators, pagination and previous/next links point the reading way.
7. Directional icons are mirrored; play buttons, clocks, search and checkmarks are not.
8. Sliders and carousels: “next” moves forward in Arabic reading order, and swipe matches.
9. Forms: labels and errors align right; email, URL and phone inputs use dir="ltr".
10. Prices, SKUs, phone numbers and Latin brand names inside Arabic text are isolated with <bdi> or dir="auto".
11. WooCommerce cart and checkout: column order, quantity buttons and totals read correctly.
12. Additional CSS, child theme CSS and builder custom CSS contain no physical left or right rules.
13. Block patterns and templates: no asymmetric inline padding or margins left from an LTR design.
14. The Arabic font loads in every weight the design uses.
15. At 360 pixels wide, the page has no horizontal scroll in RTL.

What to do next

The useful question is not whether a theme “supports RTL”. All ten here do, in some form. Ask instead how much of your CSS gets mirrored for you, and how much you wrote yourself. That second share grows with every customisation.

If you are choosing a theme for a new Arabic or bilingual site in Saudi Arabia, the UAE, Egypt or elsewhere, test two shortlisted themes on Arabic staging with the checklist first. If the site is already live, start with point 12: search your custom CSS for left and right, convert it to logical properties, then run the full list. For hands-on help, get my Arabic WordPress site checked by a VOCTOS developer, or book a technical SEO review of my Arabic pages.

FAQ

Which popular WordPress themes support Arabic RTL layouts?

All ten we checked on 2 October 2026 support RTL. Astra, Neve and Storefront swap in a full mirrored stylesheet. GeneratePress, Kadence, Blocksy and OceanWP add an override file. Hello Elementor puts RTL rules inside its main files, and Twenty Twenty-Five and Twenty Twenty-Four rely on core block styles.

Do I need an rtl.css file in my child theme?

Only for rules that logical properties cannot express. Write child theme CSS with margin-inline, padding-inline, inset-inline and text-align start or end, and it works in both directions. Keep a small rtl.css for transforms, background positions and mirrored icons. WordPress loads rtl.css from the active theme’s root automatically on RTL sites.

Does the rtl-language-support tag guarantee a good Arabic layout?

No. The tag is self-declared by the theme author and means no visual issues were found in RTL mode during testing. In our check, 9 of 10 themes carried it, while Blocksy, which has no tag, wrote 71% of its direction-sensitive rules as logical properties. Test on Arabic staging instead.

My site looks fine in English but the Arabic version is misaligned. Why?

Usually because custom CSS was written with physical properties. The theme’s RTL file mirrors only the theme’s own stylesheet, so margin-left in Additional CSS, a child theme, block markup or builder custom CSS stays on the left. Search those sources for left and right and convert them to logical properties.

Should every icon be flipped with transform: scaleX(-1) in RTL?

No. Flip only icons that point along the reading direction, such as back and forward arrows, breadcrumb chevrons and next or previous controls. Material Design guidance keeps media playback controls, clocks, refresh arrows, search icons and non-directional icons as drawn. Add a dedicated class to directional icons and mirror only that class.