WP Manifestindependent plugin directory
manifest / i18n / wordpress-deepl-instant-translation

DeepL Translator Widget

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 (colors, borders, radius). Polylang-compatible. REST API with transient cache.

by nstudio.hu · github.com/nagytamasgit/wordpress-deepl-instant-translation · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/nagytamasgit/wordpress-deepl-instant-translation/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/nagytamasgit/wordpress-deepl-instant-translation ↗

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

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 — `