Wordpress and RTL - wordpress

WordPress is so powerful.. but yet it is so weak with RTL Languages like Arabic and Hebrew...
I need to have the Front-End in Arabic and Admin area to stay in English and of course LTR..
If I use the Arabic version of WordPress. Everything including the admin area will be in Arabic and RTL. which will not be suitable at all.
In the same time. Visually editing an Arabic post should be in RTL while the HTML view should be LTR..
I can see that MU version on wordpress.com can have admin area in English while the frontend is in Arabic.
How to do that?

WordPress's back end can handle Arabic just fine, with both the editor and the database itself. If you want the front end to display in Arabic you'll need to use/develop a theme that uses Arabic.
If your blog is Arabic-only, you can add a CSS class to the div surrounding the post in the blog template file that sets the text-direction to ltr. If you use Arabic and English, you can set an if statement to decide what direction each post needs to be based on a custom field you add to the post from the back end.

The general steps to add RTL are:
Step 1 - Create the RTL CSS for Your Theme.
The first step is to create the CSS for displaying RTL languages correctly on your website. There are two methods for doing this. The first is to simply feed your existing stylesheet into a CSS RTL generator. This tool will examine your CSS and attempt to make a copy, but switching all the left and right alignments. This effectively creates a mirrored version of your website.
Step 2 - Ensure WordPress ‘Sees’ the RTL Styles.
If you’re using a CSS generator tool, you’ll now need to enqueue your new style-rtl.css stylesheet so WordPress can load it in at the appropriate time. This is just a matter of adding a snippet to your theme’s functions.php file.
Step 3: Test Your RTL Styles in WordPress RTL Tester plugin.
You have a few options for testing out RTL languages in your WordPress installation. The first is to simply switch WordPress to an RTL language. To do this, go to the Settings > General page in your WordPress dashboard. Then, select the first script language you see in the Language drop-down box
Here is a full guide: https://torquemag.io/2018/03/rtl-support-wordpress/
For a successfully RTL site example, check out this one.

If you have access to the file system where the site is hosted:
Go to ./wp-content/themes/{THEME_NAME}/.
Find the CSS files of both LTR and RTL (They may be named as "style.css" & "style-rtl.css", depending on the theme and if it supports RTL).
Rename them by switching their names.
This way RTL is only applied to the theme.

I had the same issue. The blog is in Arabic, and the admin back-end is in English.
If you are using Firefox, you can simply overcome this problem by clicking Switch Text Direction from the right-click menu on the TinyMCE.

Related

WordPress responsive menu in chinese language

I am using this plugin in my wordpress website.
https://wordpress.org/plugins/wp-responsive-menu/
But when i translate my website in chinese language menu items not showing. Please can you suggets me how i can translate it?
in this plugins, the folder "lang" is empty... It does not use languages. So you need change php files and i recommend you do not do this.
But if you really need change, use sublimetext or other soft or command line for use best function : "search in folder".
Use WMPL[Multilingual Plugin].
Just install this plugin in your website and just translate each and every menu which has been used in English.{you can even Sync the menus to the selected language}.
When you choose your language the menu gets changed to Chinese language and nothing get affected.
You will most probably need to either change the page encoding or if use an approach like in this answer.
(HTML5) cannot display Chinese characters when using UTF-8

bootstrap integration with wordpress and datatable changes whole wp-admin background as white?

I am using DataTables 1.10 and bootstrap downloaded from Datatables CDN link source.When I am integrating both with wordpress plugin, bootstrap changes the background color as white(#ffffff) for the whole wordpress admin panel and plugin page by default.Not getting why this happened ? This should not happen as i have seen in the examples.Please help me to sort this out. Thanks in advance
I believe you are probably enqueuing the CSS for whole WP admin, rather than just that specific plugin settings page. Also, if the background for body / container is changed, probably you are enqueuing some generic styles file (which sets style for body element). It's the easiest to see why this happens from Chrome's console (or Firebug or similar tool) - click "Inspect element" on the changed background, and see what CSS file does it come from.
Also you might want to check this free WordPress plugin that integrates DataTables in WordPress: http://wordpress.org/plugins/wpdatatables/

How to change 'inherited' font families using the CSS style sheet

I am not a programmer. The language is foreign. I am creating a WordPress website. I created a child-theme.
I read the theme documentation. Understood very little.
sent an email to the theme owner. No answer (2 weeks ago)
searched the web - found many websites - i.e. http://www.w3schools.com/ - http://css-tricks.com/sans-serif/ & others - me, no speak the language. Can you place html code in a CSS file?
The child-theme consists of a new style.css file. The top section of the style.css file is what was needed to create the child-theme. Then there are color changes which I inserted & that has gone very well.
Changing the font family is confusing. Poking around the parent theme and also using 'Firebug' the font(s) seem(s) to be ('inherited'?). .genericon, 'Roboto Condensed', Sans-serif, Arimo, Arial and a few other standard MS Word fonts. I saw on the Google font site a couple of fonts I would prefer to use for my website.
How do I (or even can I) download the Google fonts to the Style.css file?
What do I need to insert in the child style.css file to override the parent fonts?
In case this is important, the theme has more than one template (PHP?) option. I am using W7 OS.
The Google Fonts site is really direct and helpful.
In your example, you mention Roboto. Here's the page for that font.
You would check the varieties of Roboto that you want to be able to use on your site under Step 1.
Step 2 allows you to select additional character sets -- for example if you were likely to be displaying text in Russian.
Step 3 gives you three ways to "enable" the font on your site. You'll be placing a line of code somewhere, telling users' browsers to go and get the font from Google when called for. The easiest way to do this is probably the #import option. Copy and paste the code under that tab into your style.css at the top (that's important -- it should go before any of the stuff describing the layout or type on your stylesheet). Your sub-theme likely has a bunch of other #import lines up there already.
Step 4 shows what specifically you need to tell your stylesheet to look for.
Good luck!
External style sheets have the highest hierarchy, so just specify your styles with the id, class or element name.
Google is your friend here.
To use google fonts, go to the google font page and search for your font with the search box on the left, then click add to collection. Once in your collection, go to your collection and click "use".
You should get an "#import()" code, place this at the top of your external sheet.

Why are the text-align buttons not appearing in my CK Editor in Drupal 7?

Essentially, I've been back and forth through settings and configuration for using the CK Editor as well as re-installing it but for whatever reason the text-align buttons for this WYSIWYG editor are not showing up despite the fact they appear to be configured to do so.
I'm using Drupal 7.19 and CK Editor 7.x-1.12. For clarification, this is the CK Editor as stand-alone project, not a part of the WYSIWYG project.
Also to be clear, this is not a problem of the buttons not working or text-align properties being stripped out, the buttons are simply not there. Which is a problem for ease of use for my end-users.
Why would this be happening?
Most likely you have downloaded a standard package which does not include justify plugin. Download the full package or add this plugin using online builder.
This is due to the "Limit allowed HTML tags and correct faulty HTML" filter settings. As outlined in this issue, you must explicitly allow those classes on the p tag https://www.drupal.org/node/2649546
<p class="text-align-left text-align-center text-align-right text-align-justify">
Also this is for Drupal 8

Put Links at the End of a Page ( Drupal)

Is there a module in Drupal that allows me to put link at the end of a page?
http://lh6.ggpht.com/_SDci0Pf3tzU/Sfm7vF_MSiI/AAAAAAAAEtY/VX3BXaMOfSM/s400/linksatend.jpg
I tried to use menu and put it as a block at the footer, but the menu items are arranged vertically, instead of horizontally.
Is there anyway to do it without ( preferably) touching the CSS and HTML?
changing the menu items from vertically to horizontally is a matter of 1 or 2 css rules. which is why i doubt that there is a module for this. if you would post a link to your site, or the html + css, i could help with the css.
Links at the end of the page can be controlled by a few different things.
First, check the Blocks administration and see if there is a content area for the footer. Maybe there is a block there that is controlling these links.
Next, depending on well the theme is built, check the configuration options under Admin > Site Building > Themes > Conigure > (Your theme). Many have options to change what links display in the footer.
Lastly, check the page.tpl.php. They could also be hard-coded in the template (which is bad) and edited from there.
In terms of answering your question about 'a module to alter links', you can see that since the links can be controlled from different places, a module just for this purpose would be pointless. The correct way is to set the appropriate options in template.php so it can be configured in your theme settings.
You might have some luck using the Nice Menus module - it's intended to create animated menus but if you give it a flat menu tree, it might be close enough to what you want. If that doesn't work, there's about 100 modules dealing with navigation.
Still, the best way would be to place the menu's block in the footer and modify the theme to flatten it with CSS.
Assuming you don't won't to touch the theme, maybe because you're using an unmodified contrib theme, you can use either of two approaches:
create the block by hand as a custom HTML block, which gives you full control over the contents. The main downside is that you'll have to maintain it by hand instead of using admin/build/menus
create a PHP block, either custom (boo !) or in your site-specific module (better), to generate a block with markup appropriate for the theme you're using, based on the actual primary links, which you obtain from menu_primary_links(). Downside it that you have to create a site module if you don't already have one, or that you'll have to enable the PHP filter if you create it as a custom block.
This being said, I think you'd still be better off modifying the theme if it's a custom one, or creating a sub-theme for the theme you're using if it's a contributed one. It will be less work and, this being a matter of appearance, falls rather in theme scope than in module scope.

Resources