I will address setting the default language as root page using WPML. The first part will explain how the plugin handles multiple languages for a bit, if you are just interested in the solution scroll to the bottom of this article.

I have been building bi-lingual websites for a while, mainly with the help of the WPML plugin. It’s an awesome plugin that saves me a lot of the hassle required to build a multi-lingual websites.

WPML provides three ways to display your website’s languages:

1. Each language in it’s own directory ex: http://example.com/en (recommended)
2. Different domain per language ex: http://en.example.com
3. Add language name as a URL parameter ex: http://example.com/?lang=en

I have always used (and recommend) the first option.

It gives you the option to use or not use a directory for the default language, let’s say we have an English and Arabic website and English is the default language, you can have it like http://example.com/en and http://example.com/ar.

Or you choose not to use directory for the home page so it’s just the domain for the default language http://example.com/. But I prefer to have a directory for the default language as well, that way it’s more convenient for the user.

Having a directory for each language raises the question of what to show in the root domain, without the language directory. WPML gives us the two options:

1. A root page.
2. Static HTML file.

The root page

This is a regular WordPress page that WPML will display when a user visits the root URL of your website, you may use it as a landing page that makes the user choose what languages does he/she want’s to visit.

Static HTML file

The same as the root page but using an HTML file on the server, instead of a WordPress page.

default language as root page

I wanted to have a directory for each language but at the same time, didn’t want to display a root page nor a static html file for the root URL. Instead, I wanted the root URL to redirect to the default language directory so when a user visits http://example.com it automatically redirects to http://example.com/en

There is no way to do so through WPML settings but we are able to do so using a custom WPML/Wordpress function, just copy the following snippet and paste it anywhere in your functions.php file

Now visit the root of your website and it should redirect to the default language.

If you have anything to add, let us know in the comments.

A few years back when I started learning web design, I used to look for free web hosting companies because it was a bit expensive for me at the moment.

I kept experimenting with Google’s Blogspot and the free wordpress.com, but that didn’t give me a lot of control over my websites.

I can tell you that there is no such thing as free hosting, simply because it’s a costly business with a lot of hardware and software to manage, which require all sorts of people to manage from engineers to customer support agents and it wouldn’t make much sense for the host to go through all that just to give it away for free at the end.

But sometimes hosting companies do huge sales and promotions in order to acquire new customers, like the one we are talking about in this article.

The great offer

One.com have a great offer for you. In order to introduce you to their services, they are giving away a free year of their starter plan plus a free domain which you can use as a free WordPress hosting, and all you have to pay is a setup fee of $13.80. That is almost the price of just the domain.

If you give it a closer look, you will find they don’t over promise you with unlimited disk space like most shared hosting companies do, instead they provide what the plan actually is. Here is what you will get:

• 15GB of storage
• 512MB of RAM
• Single database
• SSL

What happens after the first year?

You are free to discontinue hosting with them, or you may renew according to their regular price of $1.89/month which is still a very competitive price.

What are you waiting for? go ahead and sign up at one.com

Task runners help automate various tasks like compiling sass, minify and concatenate html, css and javascript, pushing files to git and ftp, automatic browser refresh and more.

One of the widely used task runners is Grunt. below is a step by step guide on how to install it on a windows machine.

Install Node.js and NPM

Grunt is dependable in Node.js, a server side JS environment. We also need the Node Package Manager (NPM) – included in node.js installer – to be able to install grunt.

Head over to Node’s downloads page and download your system’s version.

Continue…

If you have been developing websites for a while, you know how often and tricky CSS centering might be. I faced this problem myself, specially with vertical centering. Below I will showcase the methods I use to center elements both horizontally and vertically.

Horizontal Centering

Inline or inline-block elements: apply “text-align: center” to the parent.

Block elements: apply set width, either fixed or fluid then give the element “margin-left” and “margin-right” of “auto”.

See the Pen Horizintally centered block element by Rafael Youakeem (@Youakeem) on CodePen.

Absolute positioned elements: use the same technique mentioned below for vertical block centering

That is it.

Continue…

Web fonts are a must when it comes to modern web design and good typography, and nearly all new websites are using custom fonts. There is more than one way to use them on your website and a few things to keep in mind for the best support and performance.

History of fonts on the web

Before we go through how you can use custom web fonts, let me give you a quick brief on how things used to be in the past.

Web safe fonts

In order to serve a font in a web page, the font file needed to be available on the users machine, just like a PowerPoint presentation  or a PSD. But different operation systems had different font sets installed on them.

That gave web designers a very limited options of fonts to use, these were the fonts that were installed by default on most of the operation systems.

Continue…

So you have just installed a new theme,everything is looking great except you want to modify it in a way or another. You have two options here.

Option one is to modify the theme files directly which will prevent you from updating the theme or else you will lose your modifications and if you don’t update your wordpress theme you are risking with getting your website hacked.

Option two is to create a child theme and put all of your modifications in it, this way you will always be able to update the parent theme without losing your modifications.

What is a wordpress child theme and how does it work?

You may consider the child theme as an additional layer on top of the actual – parent – theme, containing all our modifications.

Continue…