At Aspire Themes, I always care and provide RTl CSS support for all WordPress themes, this helps many customers and website owners to provide and support more languages like Arabic or Hebrew, or any language that you can read from right to left (RTL).
I will use the underscore as the base theme. You can download it and activate from the dashboard.
Then, navigate to the theme directory using the command line, like:
While you are in the theme directory, run the
npm init command and follow a few simple steps to create a
package.json file which will include some information about the theme and the packages that will be installed.
An example of
package.json that you will get after finishing up the steps.
Install the required Gulp plugins:
Next, create a Sass directory with a basic structure
style.scss is the main starting point file, which will include all your components, modules, functions inside it based on your preference. You can copy the content of
style.css file into
style.scss or you can create your own styles, and in this case,
style.css will be overwritten by your new styles.
The next step is to create a
gulpfile.js file and include the newly installed plugins and add the
The idea behind
gulp-rtlcss is to convert all the CSS properties like floats, text-align, text direction, and other properties from left to right.
The second plugin is
gulp-rename which will rename the file to
In this step, the plugin will convert all the CSS properties like floats and text direction from left to right, then rename the file to
rtl.css, and then output the file to the theme root.
gulp from the command line.
This will generate
right, and direction
I’ve created a GitHub repo for this article’s WordPress theme and you can check out the code here.
You can check the WordPress theme for this article on Github.
Have you tried to work and generate WordPress
rtl.css file before, what was your experience? If you use Gulp in your development workflow, which plugins do you use regularly and recommend?