DeepL Translator Widget — WordPress Plugin

Instant DeepL-powered language switcher for WordPress. Translates page content in real-time via DOM manipulation — no page reload. Inline shortcode, flag + language code dropdown, full style editor in WP Admin. Polylang-compatible.

---

Features

• Real-time translation — page text is translated instantly without a page reload
• DeepL API — uses the official DeepL REST API (Free and Pro keys supported)
• Inline shortcode — place the widget anywhere: header, footer, sidebar, nav bar
• Flag + language code dropdown — clean, compact UI with animated chevron
• Full style editor — configure button and dropdown colors, borders, and border-radius directly in WP Admin, with a live preview
• Custom strings — override UI text ("Translating…", "Error") and language names ("English" → "Angol") per installation
• Transient cache — translations are cached in WordPress to minimize API calls
• Theme isolation — !important CSS resets prevent theme styles from bleeding into the widget (tested with Blocksy)
• Polylang-compatible — works alongside Polylang without conflicts
• Accessible — proper aria-* attributes, role="listbox", live region for status messages

---

Requirements

• WordPress 5.8+
• PHP 8.0+
• A DeepL API key (Free or Pro)

---

Installation

Via WordPress Admin (recommended)

1. Download the latest deepl-translator.zip from Releases
2. Go to Plugins → Add New → Upload Plugin
3. Upload the zip file and click Install Now
4. Click Activate Plugin
5. Go to Settings → DeepL Translator and enter your API key

Manual (FTP / file manager)

1. Unzip deepl-translator.zip
2. Upload the deepl-translator/ folder to wp-content/plugins/
3. Activate via Plugins in WP Admin
4. Configure at Settings → DeepL Translator

---

Configuration

Settings → API & Languages

Field	Description
DeepL API key	Your DeepL key. Free keys end in :fx — the plugin detects this automatically and uses the correct endpoint.
Source language	The original language of your site (e.g. HU)
Target languages	Which languages visitors can switch to
Cache (hours)	How long translations are stored in WordPress transients. 0 = no cache.

Settings → Widget Style

Customize every visual aspect of the widget without touching CSS:

Button

• Background color, text color, border color, border width, border radius
• Hover background

Dropdown menu

• Background color, border color, border radius
• Text color, muted text color (language name)
• Row hover background
• Active row background + active text color
• Divider line color

Changes are reflected instantly in the live preview panel. You can also set the preview background color to match your actual header for accurate testing.

Settings → Strings & Language Names

Override any UI string or language display name without editing code:

Field	Default	Example override
Translating label	⏳ Translating…	⏳ Fordítás...
Error message	❌ Translation error	❌ Hiba
Aria label	Language switcher	Nyelvválasztó
EN	English	Angol
FR	Français	Francia
…	…	…

Leave any field empty to keep the default.

---

Usage

Shortcode (Gutenberg / Classic Editor)

[deepl_translator]

PHP template

<?php echo do_shortcode('[deepl_translator]'); ?>

In a theme builder HTML widget (Blocksy, Elementor, Bricks…)

Paste the shortcode directly into an HTML widget field:

[deepl_translator]

Shortcode parameters

Parameter	Description	Default
langs	Comma-separated target language codes — overrides the admin setting	Admin setting
selector	CSS selector for the content area to translate	.entry-content, .page-content, main, article, #content

Examples

[deepl_translator]
[deepl_translator langs="EN,FR,DE"]
[deepl_translator langs="EN,FR" selector=".my-content"]
[deepl_translator selector="#main-content, .hero-text"]

---

How it works

Visitor clicks a language
        ↓
JS sends POST → /wp-json/deepl-translator/v1/translate
        ↓
PHP checks WordPress transient cache
        ↓ cache miss
DeepL API called → translations returned & cached
        ↓
JS replaces DOM text nodes in-place (no reload)
        ↓
Switching back to original restores text from memory snapshot

• Text nodes are collected via TreeWalker — `