Conditional rtl support

sage
1

Hi all, your advice is mostly appreciated on this issue: :slight_smile:
My website is basically in English and translated to French and Hebrew, using WPML.
Hebrew requires rtl support, so I am using Bower to set bootstrap-rtl as a dependency, but am not sure how to set it to load only conditionally, with pages in Hebrew. What would be the best way to do this?

Thanks

2

Probably modify the manifest.json file so it’s included as a separate file(s) and enqueue it conditionally.

3

Probably, yes. I just wonder how exactly. Do you have any idea?
Thanks again! :slight_smile:

4

See https://github.com/austinpray/asset-builder/tree/master/help for figuring out how to create an additional CSS file (it’s also covered in many threads on this forum, in the screencast, and in the book)

Then you’d add your conditional to where the other assets are enqueued in the theme

5

So first off - thanks Ben and Kalen! both of you were very helpful!
Here’s the thing: I am still at a loss.
Kalen: I too have this feeling that the solution involves the manifest.json file. So we have advanced a notch. Next step is to try and figure out: what exactly should be done inside mainfest.json?
Ben, you have suggested that I should have a look at the documentation, I must confess I have already been there. Here’s what I have found: Apparently, main: true will set the dependency globally. What I still haven’t figure out is:
How do I set a dependency only partially? The example on github is:
“graph-page.js”: {
“files”: [“scripts/graphs.js”],
“bower”: [“d3”, “nvd3”]
}
I need an “rtl.css” script to load only on any URL that has the il pramater in it. For example: mywebsite.com/il/ mywebsite.com/il/mypage etc… How do I set it up on the manifest.json file?

Further on, Ben, you have suggested that I should look it up (again) in the screencast. I regret to say, that I went over the screencast a couple of times, and still missed that part. Would you be able to point it out for me? I know I am expected to be more independent and figure it out by myself, but since I keep failing at it, your help here would be most appreciated. Ben, you also suggested that I look it up in the book, but after spending $10 on mostly outdated information, I am a bit hesitant to spent more money on it.
Before I brought this question up I went ahead and searched the forum (!). But, again, I failed, because I couldn’t even figure out which search term to use for an efficient search. If you ever feel like hinting about a proper keyword, that by itself would also be a great help.
Thanks again, and in advance.

6 
"rtl.css": {
  "files": ["./rtl.css"],
  "bower": ["bootstrap-rtl"]
}

This is a guess, as I did not look at the Bower package.
Line 1 is the name you want the file to be
"files" is the files you want to be added to the end file.
“bower” is the name of the Bower package.

Once you have the file being generated, you enqueue the normal WP way. You should use the Asset function as well, so it would probably be something like

if (is_rtl())  {
  wp_enqueue_style('sage/rtl', Assets\asset_path('styles/rtl.css'), false, null);
}
7

Ok, thanks! I just realise what was my main fault: I was looking for a way to conditionally combine the rtl file with the main.css which, as it just dawned on me - doesn’t make sense at all… So I think I get it now - thanks again! :slight_smile: