Do you blog in more than one languages, which demand a completely different layout style for either of them; for example you like to blog in English, a tool for global communication, and at the same time you love to write in your native language: Urdu, Arabic or Persian, written from right to left unlike English and many European languages, which are written from Left-to-Right.

In this case your Urdu, Arabic or Persian posts appears in Left-to-Right alignment on your blog. One solution you have is to localize your WordPress theme but it would make your English posts appear in Right-to-Left alignment too.

When I first set-up my bilingual blog I WISHED all of my posts in category Urdu appear in Right-to-Left alignment with my favourite Urdu fonts while English posts remain unaffected and appear in default Left-to-Right alignment. I didn’t know anything about Wordpress codex back then but still I was hopeful. Somehow, I came across Wordpress codex and developed this solution, which exactly comes up to my WISH mentioned above.

If you are familiar with PHP and CSS, applying this solution to your wordpress themes is easier than snapping your fingers. If not, still this step-by-step tutorial will help you achieve all that.

First go to admin area of your blog and create a new category naming it Urdu (you can name it Arabic, Persian or any other but in that case you will have to make little change to the script below replacing the red highlighted ‘urdu’ with your category name). To create a new category go to Manage >> Categories in admin area.

After you have created the new category open index.php file from your theme. If you are editing with a script editor or notepad you can open it directly from the theme folder. If you want to edit via admin area of wordpress go to Presentation and then to Theme Editor tabs. On the right side you will find several files listed.

theme-editor

Open Main Index Template from the right side menu and find this line of code in your file:

<?php while (have_posts()) : the_post(); ?>

Now right below this line add the following script:

<?php $catid = get_cat_ID($cat_name=’urdu‘);
if ( in_category($catid) ) { ?>
           <div class=”urdu”>
<?php } else { ?>
           <div class=”english”>
<?php } ?>

Now again, locate in the index.php  or Main Index Template this line of code:

<?php endwhile; ?>

or

<?php endwhile; else: ?>

or

<?php endwhile; endif; ?>

This depend on the theme. In either case just above this line add a </div>. We are closing the div that was initiated by our additional script to index.php.

Now repeat this three step  process with single.php file of your theme with one little change. Frist find:

<?php while (have_posts()) : the_post(); ?>

Then below it add:

<?php $catid = get_cat_ID($cat_name=‘urdu’);
if ( in_category($catid) ) { ?>
           <div class=”urdu”>
<?php } else { ?>
           <div class=”english”>
<?php } ?>

then locate :

<?php comments_template(); ?>

This line loads your comments template. You must add a </div> above it. Be minful that you add </div> above any new div with this line.

Congratulation! you have done all the scripting job. Now we would play with the CSS.

So, in your single.php file look carefully on all tags from the:

<?php while (have_posts()) : the_post(); ?>

To

<?php endwhile; ?>

or

<?php endwhile; endif; ?>

Worried having seen so many tags? Well, we don’t have to care about every thing. Only three things matter to us. First the style of post title and second the style of post content. Structure of single.php file in a simpler theme would be like this:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?><?php $catid = get_cat_ID($cat_name=’urdu‘);
if ( in_category($catid) ) { ?>
           <div class=”urdu”>
<?php } else { ?>
           <div class=”english”>
<?php } ?>       <div class=”post” id=”post-<?php the_ID(); ?>”>
            <h2><a href=”<?php echo get_permalink() ?>” rel=”bookmark” title=”Permanent Link: <?php the_title(); ?>”><?php the_title(); ?></a></h2>

            <div class=”entry”>
                <?php the_content(’<p class=”serif”>Read the rest of this entry »</p>’); ?>

                <?php wp_link_pages(array(’before’ => ‘<p><strong>Pages:</strong> ‘, ‘after’ => ‘</p>’, ‘next_or_number’ => ‘number’)); ?>
                <?php the_tags( ‘<p>Tags: ‘, ‘, ‘, ‘</p>’); ?>

<?php comments_template(); ?>

    <?php endwhile; else: ?>

Note the parts highlighted in green. The first div is the container of our post. All of its elements: title and content reside within that div. The second tag <h2> formats only the title and it closes at the end of the title. Note </h2>. Many themes instead of h2 would use div here with class “entrytitle” or “title”.

Next div with class “entry” formats content of the post. We have to remember that h2 ( or in case of other themes the div with class “entrytitle” or “title”) and div entry resides within the class “post”.

Now open style.css or Stylesheet file from your blog theme.

Add these lines anywhere in your file.

.urdu .post { }

.urdu .post h2 { font-family: ‘Urdu Naskh Asiatype’, Tahoma; direction: rtl; text-align: right; }

.urdu .post .entry { font-family: ‘Urdu Naskh Asiatype’, Tahoma; direction: rtl; text-align: right; }

If your title is formated with div and class “entrytitle” or “title” add as appropriate:

.urdu .post .entrytitle { font-family: ‘Urdu Naskh Asiatype’, Tahoma; direction: rtl; text-align: right; }

or

.urdu .post .title { font-family: ‘Urdu Naskh Asiatype’, Tahoma; direction: rtl; text-align: right; }

Here, we have specified layout style for our post in category Urdu (or whatever name you are using with changes to script).

Note for the non-Urdu readers: ‘Urdu Naskh Asiatype’ is a popular font among Urdu Internet users. You may assign your favourite font instead of it.

The basic job is done. Now your posts in category “urdu” will appear in Right-to-Left alignment while rest of the posts would remain unaffected. Don’t worry about dividing your post in proper categories; they will be. For example  if you have a post on politics and want to publish it under category “Politics” but the post is written in Urdu, just post it under both Politics and Urdu categories. The category Urdu will help it format and still your post will be under its appropriate category namely “Politics”.

bilingual theme working

Your newly modified theme is working but I know many of you would not be satisfied with it. so was I, because  the method described above will only change your post layout. What about comments? what if you also want comments with your Urdu posts appear in Right-to-Left direction and all the formatting that you have chosen for left to right style?

Open comments.php file from your theme and locate this line:

<?php comment_text() ?>

Now you have to add our code above and below this line in this way:

<div class=”commentlang”>
<?php $catid = get_cat_ID($cat_name=’urdu’);
if ( in_category($catid) ) { ?>
           <div class=”urdu”>
<?php } else { ?>
           <div class=”english”>
<?php } ?>
            <?php comment_text() ?>
</div>
</div>

We have created a new div to our theme with class “commentlang”; then there is the same code we used above and after the <?php comment_text() ?> we have closed both of the divs. Both! yes, one we created ourselves and the second is created by the PHP/HTML code we used here.

We have one task left. Open your style.css or Stylesheet file again and add the following line to it.

.commentlang .urdu { font-family: ‘Urdu Naskh Asiatype’, Tahoma; direction: rtl; text-align: right; }

Your comments with posts under category ‘Urdu’ will appear in Right-to-Left alignment.

comment-sshot

Your bilingual theme is complete.

Additional Tips: After bilingualization ( a new word by me :) ) if you find out that your Urdu text is appearing too small -a likely case if you are using Urdu Naskh Asiatype font  - increase your font size by adding font-size: 18px (or whatever size you want) to your style.

.urdu .post { }

.urdu .post h2 { font-family: ‘Urdu Naskh Asiatype’, Tahoma; direction: rtl; text-align: right; font-size: 20px; }

.urdu .post .entry { font-family: ‘Urdu Naskh Asiatype’, Tahoma; direction: rtl; text-align: right; font-size: 16px;

}

You are also free to flirt with your CSS to further improve your  bilingual theme.

Explanation of the PHP code:

All of the code used here comes from the Wordpress Conditional Tags and Function Reference. I Just adopted it to this unique purpose.

<?php $catid = get_cat_ID($cat_name=’urdu’); ?>

This line select the ID of category “urdu” in your blog. The Id is used for the if ( in_category() ) conditional tag of Wordpress. Since this statement accept arguments only in integer we have to use the above line. With get_cat_ID() function we retrieve the id and then assign it to $catid variable. This variable is then presented to if ( in_category() ) conditional tag as argument.

if ( in_category($catid) ) { ?>
           <div class=”urdu”>
<?php } else { ?>
           <div class=”english”>
<?php } ?>orif ( in_category(’7′) ) { ?>
           <div class=”urdu”>
<?php } else { ?>
           <div class=”english”>
<?php } ?>

if ( in_category () ) conditional tag can be called the core of our workaround. It tells the Wordpress Loop what to do if a post appears in category with ID, presented to it as argument. For example if you want to do something with posts in category with ID 7.  

if ( in_category(’7′) ) { ?>
do this
<?php } else { ?> 
do that / do nothing         <?php } ?>

It can be prolonged with else if statement.

I am not a programmer neither a computer geek so if you find any error in terminology I used, feel free to mention and correct it. I will be happy for your guidance.

Also, I tried to developed Plugin for this purpose. I wanted to add these codes to the theme directly with the plugin and I used both add_action and add_filter methods. But could not succeed. If you are an expert and having read this article any idea clicks your mind please share with me or develop the plugin.