Overview

ShahiTranslate Pro provides multiple shortcodes and WordPress widgets to place language switchers anywhere on your site. Use shortcodes in posts, pages, or custom templates, and widgets in sidebars or footer areas.

Shortcodes

Language Switcher Shortcode

Basic Usage:
`
[shahitranslate]
`

or shorter version:
`
[stp]
`

What It Does:
Displays the configured language switcher widget inline within your content.

Example:

Add to any post or page:
`
Welcome to our site!

[shahitranslate]

Choose your language above to view content in your preferred language.
`

Result:
Language switcher appears between the text, using your configured widget style.

Shortcode Parameters

Override Widget Style:
`
[shahitranslate widgetlook=”dropdownwith_flags”]
`

Available Styles:

1. dropdownwithflags – Nice dropdown with flag icons
2. dropdown – Simple text dropdown
3. flags – Flags only (inline)
4. flags_dropdown – Flags with dropdown list
5. popup – Popup modal
6. globe – Globe icon
7. float – Floating button

Example with Style:
`
[stp widget_look=”flags”]
`

Displays flags inline without dropdown.

Position Parameter


Inline vs Floating:
`
[shahitranslate position=”inline”]
`

Options:

8. inline (default) – Appears where shortcode is placed
9. floating – Fixed position (not recommended in shortcode)

Recommended: Always use inline for shortcodes

Single Language Link Shortcode


Display Individual Language:
`
[stp-lang lang=”es”]
`

Displays a single link to Spanish version.

Parameters:

| Parameter | Description | Example |
|———–|————-|———|
| lang | Language code (required) | lang="es" |
| label | Custom text label | label="Español" |
| widgetlook | Display style | widgetlook="flags_name" |

Display Styles:

10. lang_names – “Spanish” (language name)
11. lang_codes – “ES” (code uppercase)
12. flags – Flag image only
13. flags_name – Flag + “Spanish”
14. flags_code – Flag + “ES”

Examples:

Text Only:
`
[stp-lang lang=”es” widgetlook=”langnames”]
`
Output: Spanish

Flag Only:
`
[stp-lang lang=”es” widget_look=”flags”]
`
Output: 🇪🇸

Flag + Name:
`
[stp-lang lang=”es” widgetlook=”flagsname”]
`
Output: 🇪🇸 Spanish

Flag + Code:
`
[stp-lang lang=”fr” widgetlook=”flagscode”]
`
Output: 🇫🇷 FR

Custom Label:
`
[stp-lang lang=”es” label=”En Español”]
`
Output: En Español

Multiple Language Links


Create Custom Language Menu:

`

[stp-lang lang=”en” widgetlook=”flagsname”]
[stp-lang lang=”es” widgetlook=”flagsname”]
[stp-lang lang=”fr” widgetlook=”flagsname”]
[stp-lang lang=”de” widgetlook=”flagsname”]

`

Output:
`
🇬🇧 English
🇪🇸 Spanish
🇫🇷 French
🇩🇪 German
`

Style with CSS:
`css
.custom-lang-menu {
display: flex;
gap: 15px;
justify-content: center;
padding: 20px;
background: #f5f5f5;
}

.custom-lang-menu a {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 15px;
border: 1px solid #ddd;
border-radius: 5px;
text-decoration: none;
color: #333;
}

.custom-lang-menu a:hover {
background: #fff;
border-color: #0073aa;
}

.custom-lang-menu .stp-current-lang {
background: #0073aa;
color: #fff;
border-color: #0073aa;
}
`

Using Shortcodes in Templates


PHP Template


In Theme File (header.php, footer.php, etc.):

`php

`

With Parameters:
`php
shortcode( ‘[shahitranslate widgetlook=”flags”]’ ); ?>
`

Example in Header:
`php


shortcode( ‘[stp widgetlook=”dropdownwithflags”]’ ); ?>

`

Page Builder Shortcodes


Elementor:

15. Add “Shortcode” widget
16. Paste: [shahitranslate]
17. Style the container

Beaver Builder:

18. Add “Shortcode” module
19. Enter: [stp widget_look="flags"]
20. Adjust spacing

WPBakery:

21. Add “Shortcode” element
22. Input: [shahitranslate]
23. Configure column

Divi:

24. Add “Code” module
25. Content: [stp]
26. Style module

Gutenberg Block


Classic Block:

27. Add “Shortcode” block
28. Type: [shahitranslate]
29. Preview

Paragraph Block:

30. Add “Paragraph” block
31. Type: [stp widgetlook="flagsdropdown"]
32. Converts automatically

HTML Block:
`html

[shahitranslate widget_look=”popup”]

`

WordPress Widgets


Language Switcher Widget


Location: Appearance → Widgets

Available Widget:

33. ShahiTranslate Pro – Language Switcher

Adding Widget:

34. Go to Appearance → Widgets
35. Find “ShahiTranslate Pro – Language Switcher”
36. Drag to sidebar (e.g., “Primary Sidebar”)
37. Configure settings
38. Click “Save”

Widget Settings:

| Setting | Description | Options |
|———|————-|———|
| Title | Widget title | “Choose Language” |
| Widget Look | Display style | Dropdown, Flags, etc. |
| Show Title | Display title | Checkbox |

Example Configuration:
`
Title: Select Language
Widget Look: Nice Dropdown with Flags
☑ Show Title
[Save]
`

Widget Areas


Common Widget Areas:

39. Primary Sidebar
40. Footer Widget Area 1
41. Footer Widget Area 2
42. Header Widget Area (if theme supports)

Choosing Best Location:

Sidebar:

43. Good for blogs
44. Visible on all pages
45. Doesn’t interrupt content

Footer:

46. Universal placement
47. Doesn’t clutter header
48. Easy to find

Header:

49. Most prominent
50. Quick access
51. May need custom CSS

Multiple Widget Instances


Use Different Styles in Different Areas:

Header Widget (flags only):
`
Title: (empty)
Widget Look: Flags
☐ Show Title
`

Sidebar Widget (dropdown):
`
Title: Languages
Widget Look: Nice Dropdown with Flags
☑ Show Title
`

Footer Widget (text links):
`
Title: Choose Your Language
Widget Look: Simple Dropdown
☑ Show Title
`

Custom Placement Methods


Direct Function Call


In Template Files:

`php
exists( ‘stplanguage_switcher’ ) ) {
stplanguageswitcher( array(
‘widgetlook’ => ‘dropdownwith_flags’,
‘position’ => ‘inline’
) );
}
?>
`

Parameters:

52. widget_look – Style of switcher
53. position – Display position

Example in Footer:
`php

`

Hook Integration


Add Switcher to Menu:

Automatic (via settings):
`
Settings → Switcher → Show in Menu
Select menu location: Primary Menu
Save
`

Manual (via code):
`php
function myaddlangtomenu( $items, $args ) {
if ( $args->theme_location == ‘primary’ ) {
$switcher = doshortcode( ‘[stp widgetlook=”flags”]’ );
$items .= ‘

54. ‘ . $switcher . ‘

‘;
}
return $items;
}
addfilter( ‘wpnavmenuitems’, ‘myaddlangtomenu’, 10, 2 );
`

Add Switcher After Header:
`php
function myaddlangafterheader() {
echo ‘

‘;
echo do_shortcode( ‘[shahitranslate]’ );
echo ‘

‘;
}
addaction( ‘wpbodyopen’, ‘myaddlangafter_header’ );
`

Elementor Custom Widget


Create Custom Elementor Widget:

`php
// functions.php
class MyLanguageSwitcherWidget extends \Elementor\WidgetBase {
public function get_name() {
return ‘stplanguageswitcher’;
}

public function get_title() {
return ‘Language Switcher’;
}

public function get_icon() {
return ‘eicon-globe’;
}

public function get_categories() {
return [ ‘general’ ];
}

protected function render() {
echo do_shortcode( ‘[shahitranslate]’ );
}
}

function registerstpelementorwidget( $widgetsmanager ) {
$widgetsmanager->register( new MyLanguageSwitcherWidget() );
}
addaction( ‘elementor/widgets/register’, ‘registerstpelementorwidget’ );
`

Styling Shortcodes


CSS Customization


Target Shortcode Output:

`css
/ Container /
.shahitranslate-wrapper {
margin: 20px 0;
text-align: center;
}

/ Dropdown style /
.shahitranslate-wrapper select {
padding: 10px 15px;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 16px;
background: #fff;
cursor: pointer;
}

/ Flags inline /
.shahitranslate-wrapper a {
margin: 0 5px;
transition: transform 0.2s;
}

.shahitranslate-wrapper a:hover {
transform: scale(1.1);
}

/ Current language highlight /
.stp-current-lang {
border: 2px solid #0073aa;
border-radius: 3px;
padding: 2px;
}
`

Responsive Design


Mobile-Friendly Shortcodes:

`css
/ Desktop /
.shahitranslate-wrapper {
display: flex;
justify-content: center;
gap: 15px;
}

/ Mobile /
@media (max-width: 768px) {
.shahitranslate-wrapper {
flex-direction: column;
align-items: center;
}

.shahitranslate-wrapper a {
display: block;
width: 100%;
padding: 10px;
text-align: center;
border: 1px solid #ddd;
margin: 5px 0;
}
}
`

Custom Widget Styling


Via Settings:
`
Settings → Design & Colors

55. Switcher Text Color: #333
56. Switcher Background: #fff
57. Switcher Border: #ccc
58. Dropdown Text: #000
59. Dropdown Background: #eee

Custom CSS:
.shahitranslate-wrapper {
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
border-radius: 8px;
padding: 10px;
}
`

Via Theme CSS:

`css
/ In your theme’s style.css /
.widget_shahitranslate {
background: #f9f9f9;
padding: 20px;
border-left: 4px solid #0073aa;
}

.widget_shahitranslate .widget-title {
color: #0073aa;
font-size: 18px;
margin-bottom: 15px;
}
`

Use Cases


1. Blog Post Language Notice


Scenario: Notify readers they can switch language

Implementation:
`html

This article is available in multiple languages:

[stp-lang lang=”en” widgetlook=”flagsname”]
[stp-lang lang=”es” widgetlook=”flagsname”]
[stp-lang lang=”fr” widgetlook=”flagsname”]

`

2. Landing Page Hero Section


Scenario: Prominent language choice on homepage

Implementation:
`html

Welcome to Our Platform

Choose your language to get started:

[shahitranslate widget_look=”popup”]

`

3. Footer Global Language Bar


Scenario: Site-wide language options

Implementation:
`php


`

4. E-commerce Product Page


Scenario: Product descriptions in multiple languages

Implementation:
`html

View this product in:
[stp-lang lang=”en” widgetlook=”langcodes”]
[stp-lang lang=”de” widgetlook=”langcodes”]
[stp-lang lang=”fr” widgetlook=”langcodes”]


`

5. Navigation Menu Integration


Scenario: Language switcher in main menu

Automatic Method:
`
Settings → Switcher → Show in Menu
Menu Location: Primary Menu
Save Changes
`

Manual Method (better control):
`php
function addlanguageto_nav( $items, $args ) {
if ( $args->theme_location == ‘primary’ ) {
$lang_switcher = ‘

60. ‘
    . doshortcode( ‘[stp widgetlook=”globe”]’ )
    . ‘

‘;
$items .= $lang_switcher;
}
return $items;
}
addfilter( ‘wpnavmenuitems’, ‘addlanguageto_nav’, 10, 2 );
`

6. Sidebar Contextual Widget


Scenario: Language widget in blog sidebar

Widget Configuration:
`
Appearance → Widgets
Sidebar: Primary Sidebar

Add Widget: ShahiTranslate Pro – Language Switcher
Title: Read in Your Language
Widget Look: Nice Dropdown with Flags
☑ Show Title
Save
`

Advanced Shortcode Usage


Conditional Display


Show Shortcode Only on Certain Pages:

`php
function conditionallanguageswitcher( $content ) {
// Only show on single posts
if ( is_single() ) {
$switcher = ‘

‘;
$switcher .= doshortcode( ‘[shahitranslate widgetlook=”flags”]’ );
$switcher .= ‘

‘;
return $content . $switcher;
}
return $content;
}
addfilter( ‘thecontent’, ‘conditionallanguageswitcher’ );
`

Dynamic Parameters


Change Style Based on Device:

`php
function responsivelanguageswitcher() {
if ( wpismobile() ) {
return doshortcode( ‘[stp widgetlook=”globe”]’ );
} else {
return doshortcode( ‘[stp widgetlook=”dropdownwithflags”]’ );
}
}

// Use in template
echo responsivelanguageswitcher();
`

Custom Shortcode Wrapper


Create Your Own Shortcode:

`php
function mycustomlang_shortcode( $atts ) {
$atts = shortcode_atts( array(
‘style’ => ‘modern’,
), $atts );

$output = ‘

‘;
$output .= ‘🌍 Language:‘;
$output .= doshortcode( ‘[stp widgetlook=”dropdownwithflags”]’ );
$output .= ‘

‘;

return $output;
}
addshortcode( ‘mylang’, ‘mycustomlang_shortcode’ );

// Usage:
// [my_lang style=”modern”]
`

Troubleshooting


Shortcode Not Rendering


Symptom: [shahitranslate] shows as text

Causes:

61. Plugin not activated
62. Shortcode typed incorrectly
63. Conflict with page builder

Solutions:
`

64. Verify plugin is active:

Plugins → Installed Plugins → ShahiTranslate Pro (Active)

65. Check spelling:

[shahitranslate] or [stp] (not [shahi-translate])

66. Use HTML block in Gutenberg instead of Paragraph
67. Try do_shortcode() in PHP:


`

Widget Not Appearing


Symptom: Widget added but not visible on site

Causes:

68. Widget area not displayed in theme
69. No languages enabled
70. CSS hiding widget

Solutions:
`

71. Check widget area:

Visit frontend → View Page Source
Search for widget area ID

72. Enable languages:

Settings → Languages → Select at least 2 languages

73. Check CSS:

Inspect element
Look for display:none or visibility:hidden

74. Test different widget area

`

Styling Issues


Symptom: Shortcode looks broken or unstyled

Causes:

75. CSS not loading
76. Theme conflict
77. Missing styles

Solutions:
`

78. Clear cache:

Browser cache, plugin cache, server cache

79. Check CSS loaded:

View Page Source → Look for:
/wp-content/plugins/shahitranslate-pro/assets/css/frontend.css

80. Add custom CSS:

Settings → Design → Custom CSS

81. Increase specificity:

.shahitranslate-wrapper.shahitranslate-wrapper { / styles / }
`

Multiple Switchers Conflict


Symptom: Two switchers on page, both change together

Expected: They should work independently

Explanation: This is normal behavior. All language switchers on the same page switch the site language globally. Clicking any switcher affects all content.

Why: Language preference is site-wide, not per-widget.

Best Practices


1. Choose Appropriate Style for Context


Header/Menu: Globe or compact flags
Sidebar: Dropdown with flags
Footer: Simple dropdown or text links
Content: Popup or flags inline

2. Don’t Overuse


Avoid:

82. Multiple switchers in content
83. Switcher on every page section
84. Repetitive placement

Recommended:

85. One visible switcher per page
86. Consistent placement across site

3. Make It Accessible


Screen Readers:
`php

Choose your preferred language
`

Keyboard Navigation:
Ensure dropdown is keyboard accessible (built-in).

4. Test on Mobile


Always verify:

87. Switcher visible on mobile
88. Touch-friendly (min 44px tap targets)
89. Doesn’t break layout

5. Consistent Branding


Match language switcher design to your theme:
`
Settings → Design & Colors
Use your brand colors
`

Next Steps


90. Language Switcher Options
91. Design Customization
92. Translation Methods
93. Advanced Hooks