Add RTL Support to WordPress Theme with Sass and Gulp

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 use Gulp as a JavaScript task runner to automate everything in theme development, things like Sass compilation, CSS auto-prefix, JavaScript validation, browser refresh, … and In this post, I will use gulp-rtlcss and gulp-rename plugins to generate the RTL CSS file (rtl.css).

I assume you have some experience with Gulp, Node.js are installed in your system and have WordPress installed and configured.

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:

cd ~/www/wordpress/wp-content/themes/wordpress-rtl-with-gulp

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.

The 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.

Conclusion

Gulp makes the development process much easier than before, not only compiling Sass to CSS, or generating the RTL file, but for many other tasks like CSS auto-prefixing, JavaScript validation, watching files and much more, and I highly recommend to add it to your development arsenal.

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?

Did you enjoy this post? Why not give it some ❤️ or a share?

Also, if you are looking for a new WordPress, Ghost, or Jekyll theme, check out Aspire Themes 👌