{"id":1763,"date":"2020-03-04T10:00:26","date_gmt":"2020-03-04T09:00:26","guid":{"rendered":"https:\/\/www.languedoc121tech.fr\/?p=1763"},"modified":"2020-03-04T10:00:26","modified_gmt":"2020-03-04T09:00:26","slug":"creating-widgets-multilingual-wordpress-site","status":"publish","type":"post","link":"https:\/\/dev.languedoc121tech.fr\/?p=1763","title":{"rendered":"How to Create Widgets for your Multilanguage WordPress Site"},"content":{"rendered":"\n<p>In this post I describe how to create widgets that will work on a multilingual site. The main plugin I use for this is Polylang. The template used for this demo is OceanWP but the functionality should be the same in most templates.<\/p>\n\n\n\n<p>When we&#8217;re finished you&#8217;ll end up with a French (left) and English (right) versions of the content as shown below, which automatically switches when the you switch between languages.<\/p>\n\n\n\n<ul class=\"wp-block-gallery aligncenter columns-2 is-cropped screenshot\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" width=\"397\" height=\"841\" src=\"https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/image-2.png\" alt=\"\" data-id=\"1750\" class=\"wp-image-1750\" srcset=\"https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/image-2.png 397w, https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/image-2-142x300.png 142w\" sizes=\"(max-width: 397px) 100vw, 397px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" width=\"400\" height=\"897\" src=\"https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/image-3.png\" alt=\"\" data-id=\"1751\" class=\"wp-image-1751\" srcset=\"https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/image-3.png 400w, https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/image-3-134x300.png 134w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/figure><\/li><\/ul>\n\n\n\n<h2>1. Open the Widgets Editor<\/h2>\n\n\n\n<p>First, open the <strong>Widgets <\/strong>editor and select the widget you want to customise. In this example I&#8217;m editing the <strong>General Sidebar<\/strong>, which is a custom sidebar I created using the OceanWP Theme Panel. <\/p>\n\n\n\n<h2>2. Add and Update a Custom HTML block for the English Version<\/h2>\n\n\n\n<p>For the English version, set up a Custom HTML block, set the language to English, leave the Title blank, and put in the code.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Heading and Action Buttons - ENGLISH *\/\n\n&lt;h3 class=\"sidebarcustomhead\">\n\tExplore the Chateau\n&lt;\/h3>\n&lt;p class=\"button\">\n\t&lt;a href=\"interior-gallery\">Interior Gallery&lt;\/a>\n&lt;\/p>\n&lt;p class=\"button\">\n\t&lt;a href=\"grounds-garden-gallery\">Grounds &amp; Garden Gallery&lt;\/a>&lt;\/p>\n\t&lt;p class=\"button\">\n\t&lt;a href=\"amenities\">Amenities&lt;\/a>&lt;\/p>\n\t\t&lt;p class=\"button\">\n\t&lt;a href=\"our-rooms\">Bedrooms&lt;\/a>\n&lt;\/p>\n&lt;br>\n&lt;br>\n\n\/* List of Amenities using Font Awesome Icons - ENGLISH *\/\n\n&lt;h3 class=\"sidebarcustomhead\">\n\tOur Facilities\n&lt;\/h3>\n&lt;ul class=\"address-info list-unstyled\">&lt;li>\n\t&lt;i class=\"fas fa-wifi\">&lt;\/i>Internet access&lt;br>\n\t&lt;i class=\"fas fa-bed\">&lt;\/i>Superking beds&lt;br>\n\t&lt;i class=\"fas fa-users\">&lt;\/i>Fresh towels&lt;br>\n\t&lt;i class=\"fas fa-bath\">&lt;\/i>Luxury ensuite bathrooms&lt;br>\n\t&lt;i class=\"fas fa-swimming-pool\">&lt;\/i>12 x 6 M inground swimming pool&lt;br>\n\t\t&lt;i class=\"fas fa-trophy\">&lt;\/i>International p\u00e9tanque court&lt;br>\n\t\tPattered garden&lt;br>\n\t\t&lt;\/li>\n&lt;\/ul>\n&lt;br>\n\n\/* Heading and Action Buttons - ENGLISH *\/\n\n&lt;h3 class=\"sidebarcustomhead\">\n\tContact Us\n&lt;\/h3>\n&lt;p class=\"button\">\n\t&lt;a href=\"contact\">Ask a question&lt;\/a>\n&lt;\/p>\n&lt;p class=\"button\">\n\t&lt;a href=\"booking-availability\">Make a reservation&lt;\/a>\n&lt;\/p><\/code><\/pre>\n\n\n\n<div class=\"wp-block-image screenshot\"><figure class=\"aligncenter is-resized\"><img loading=\"lazy\" src=\"https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/image-5.png\" alt=\"\" class=\"wp-image-1753\" width=\"283\" height=\"359\" srcset=\"https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/image-5.png 582w, https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/image-5-236x300.png 236w, https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/image-5-500x635.png 500w\" sizes=\"(max-width: 283px) 100vw, 283px\" \/><figcaption>Custom HTML Block for the English Version<\/figcaption><\/figure><\/div>\n\n\n\n<p>With the content pasted into your Custom HTML block, click <strong>Save<\/strong>.<\/p>\n\n\n\n<h2>3. Add and Update a Custom HTML block for the French Version<\/h2>\n\n\n\n<p>Next, add a new Custom HTML block to the same widget, to use for the French version.<\/p>\n\n\n\n<p>For the French version, set the new Custom HTML block to <strong>Fran\u00e7ais<\/strong>, leave the Title blank, and then paste your code into the Content area. My code looks like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Heading and Action Buttons - FRENCH *\/\n\n&lt;h3 class=\"sidebarcustomhead\">\n\tD\u00e9couvrir le ch\u00e2teau\n&lt;\/h3>\n&lt;p class=\"button\">\n\t&lt;a href=\"interieur-galerie\">Galerie d'int\u00e9rieur&lt;\/a>\n&lt;\/p>\n&lt;p class=\"button\">\n\t&lt;a href=\"terrains-jardins\">Terrains &amp; Jardins Gallery&lt;\/a>&lt;\/p>\n\t&lt;p class=\"button\">\n\t&lt;a href=\"installations\">Installations&lt;\/a>&lt;\/p>\n\t\t&lt;p class=\"button\">\n\t&lt;a href=\"nos-chambres\/\">Chambres&lt;\/a>\n&lt;\/p>\n&lt;br>\n&lt;br>\n&lt;h3 class=\"sidebarcustomhead\">\n\tNos Installations\n&lt;\/h3>\n\n\/* List of Amenities using Font Awesome Icons - FRENCH *\/\n\n&lt;ul class=\"address-info list-unstyled\">&lt;li>\n\t&lt;i class=\"fas fa-wifi\">&lt;\/i>Wi-Fi&lt;br>\n\t&lt;i class=\"fas fa-bed\">&lt;\/i>Lits superpos\u00e9s&lt;br>\n\t&lt;i class=\"fas fa-users\">&lt;\/i>Serviettes de toilette&lt;br>\n\t&lt;i class=\"fas fa-door-open\">&lt;\/i>Salle d'habillage attenante&lt;br>\n\t&lt;i class=\"fas fa-bath\">&lt;\/i>Salle de bain de luxe\n\t&lt;\/li>\n&lt;\/ul>\n&lt;br>\n\n\/* Heading and Action Buttons *\/\n\n&lt;h3 class=\"sidebarcustomhead\">\n\tNous contacter\n&lt;\/h3>\n&lt;p class=\"button\">\n\t&lt;a href=\"contact\">Poser une question&lt;\/a>\n&lt;\/p>\n&lt;p class=\"button\">\n\t&lt;a href=\"booking-availability\">Faire une r\u00e9servation&lt;\/a>\n&lt;\/p><\/code><\/pre>\n\n\n\n<div class=\"wp-block-image screenshot\"><figure class=\"aligncenter is-resized\"><img loading=\"lazy\" src=\"https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/image-6.png\" alt=\"\" class=\"wp-image-1754\" width=\"312\" height=\"401\" srcset=\"https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/image-6.png 578w, https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/image-6-233x300.png 233w, https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/image-6-500x643.png 500w\" sizes=\"(max-width: 312px) 100vw, 312px\" \/><figcaption> Custom HTML Block for the French Version <\/figcaption><\/figure><\/div>\n\n\n\n<p>With the code added, click <strong>Save<\/strong>.<\/p>\n\n\n\n<p>Now your widget should look something like this:<\/p>\n\n\n\n<div class=\"wp-block-image screenshot\"><figure class=\"aligncenter is-resized\"><a href=\"https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/image-1.png\"><img loading=\"lazy\" src=\"https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/image-1.png\" alt=\"\" class=\"wp-image-1749\" width=\"440\" height=\"190\" srcset=\"https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/image-1.png 698w, https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/image-1-300x130.png 300w, https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/image-1-500x217.png 500w\" sizes=\"(max-width: 440px) 100vw, 440px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>Now it&#8217;s almost ready to use &#8211; but first we have some styling to do.<\/p>\n\n\n\n<h2>4. Set Up the Custom CSS<\/h2>\n\n\n\n<p>If you&#8217;re familiar with CSS you will have noticed a couple of custom CSS classes are referenced. These are:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h3 class=\"sidebarcustomhead\"><\/code><\/pre>\n\n\n\n<p>and <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p class=\"button\"><\/code><\/pre>\n\n\n\n<p>For these two classes to work, you must add these to the Custom CSS block in the Customiser. These two classes &#8211; sidebarcustomhead and button &#8211; define the layout of the header (e.g.,  in the English version, &#8220;Explore the Chateau&#8221;) and the button (e.g., in the English version, &#8220;Interior Gallery&#8221;).<\/p>\n\n\n\n<p><em>Don&#8217;t worry about the Font Awesome icons list. That isn&#8217;t covered in this post but will be documented soon. <\/em><\/p>\n\n\n\n<p>To create the same look and feel as the buttons used in this example, copy the code below.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Button Styling *\/\n\n.button {\n  text-decoration: none;\n  display: inline-block;\n  font-size: 12px;\n\tfont-family: Montserrat;\n\tmargin:0px 10px 10px 0px;\n\t  box-shadow: 0 5px 5px 0 rgba(0,0,0,0.2), 0 5px 5px 0;\n\twidth: 100%;\n}\n\n\/* Header Text Styling *\/\n\n.sidebarcustomhead {\n  font-weight: 200;\n  text-align: center;\n  padding-top:10px;\n}<\/code><\/pre>\n\n\n\n<p>The sidebar inherits the majority of it&#8217;s styling from the h3 CSS definition (colour, font-family, etc.) and since, in this example, I don&#8217;t want this to change, I have only redefined three of the styling parameters:<\/p>\n\n\n\n<ul><li>font-weight<\/li><li>text-align<\/li><li>padding<\/li><\/ul>\n\n\n\n<p>While the sidebarcustomhead class is used only in the sidebar, the button class is used more widely across the site. This is because I prefer the level of control you have when using CSS than relying on the (often limited) button styling options that are available via the Customiser.<\/p>\n\n\n\n<h2>All done!<\/h2>\n\n\n\n<p>With those components in place you&#8217;ll have custom multilingual sidebars with custom heads and button styling.<\/p>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\"\/>\n\n\n","protected":false},"excerpt":{"rendered":"<p>In this post I describe how to create widgets that will work on a multilingual site. The main plugin I use for this is Polylang. The template used for this demo is OceanWP but the functionality should be the same in most templates. When we&#8217;re finished you&#8217;ll end up with a French (left) and English&#8230;<\/p>\n","protected":false},"author":2,"featured_media":1771,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"kt_blocks_editor_width":"","_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_vp_format_video_url":"","_vp_image_focal_point":[]},"categories":[28],"tags":[100,64,101,102],"uagb_featured_image_src":{"full":["https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/create-multilingual-widgets-wordpress-blog.jpg",1250,470,false],"thumbnail":["https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/create-multilingual-widgets-wordpress-blog-150x150.jpg",150,150,true],"medium":["https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/create-multilingual-widgets-wordpress-blog-300x113.jpg",300,113,true],"medium_large":["https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/create-multilingual-widgets-wordpress-blog-768x289.jpg",768,289,true],"large":["https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/create-multilingual-widgets-wordpress-blog-1024x385.jpg",1024,385,true],"vp_sm":["https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/create-multilingual-widgets-wordpress-blog-500x188.jpg",500,188,true],"vp_md":["https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/create-multilingual-widgets-wordpress-blog-800x301.jpg",800,301,true],"vp_lg":["https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/create-multilingual-widgets-wordpress-blog.jpg",1250,470,false],"vp_xl":["https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/create-multilingual-widgets-wordpress-blog.jpg",1250,470,false],"vp_sm_popup":["https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/create-multilingual-widgets-wordpress-blog-500x188.jpg",500,188,true],"vp_md_popup":["https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/create-multilingual-widgets-wordpress-blog-800x301.jpg",800,301,true],"vp_xl_popup":["https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/create-multilingual-widgets-wordpress-blog.jpg",1250,470,false],"1536x1536":["https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/create-multilingual-widgets-wordpress-blog.jpg",1250,470,false],"2048x2048":["https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/create-multilingual-widgets-wordpress-blog.jpg",1250,470,false],"page-title-image":["https:\/\/dev.languedoc121tech.fr\/wp-content\/uploads\/2020\/02\/create-multilingual-widgets-wordpress-blog.jpg",798,300,false]},"uagb_author_info":{"display_name":"Admin","author_link":"https:\/\/dev.languedoc121tech.fr\/?author=2"},"uagb_comment_info":0,"uagb_excerpt":"In this post I describe how to create widgets that will work on a multilingual site. The main plugin I use for this is Polylang. The template used for this demo is OceanWP but the functionality should be the same in most templates. When we&#8217;re finished you&#8217;ll end up with a French (left) and English...","_links":{"self":[{"href":"https:\/\/dev.languedoc121tech.fr\/index.php?rest_route=\/wp\/v2\/posts\/1763"}],"collection":[{"href":"https:\/\/dev.languedoc121tech.fr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.languedoc121tech.fr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.languedoc121tech.fr\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.languedoc121tech.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1763"}],"version-history":[{"count":0,"href":"https:\/\/dev.languedoc121tech.fr\/index.php?rest_route=\/wp\/v2\/posts\/1763\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dev.languedoc121tech.fr\/index.php?rest_route=\/wp\/v2\/media\/1771"}],"wp:attachment":[{"href":"https:\/\/dev.languedoc121tech.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1763"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.languedoc121tech.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1763"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.languedoc121tech.fr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}