Multilingual WordPress Website – part 2

wordpress multilangThis is the second part of this series covering the process of creating a multilingual WordPress website. Please refer to part one if yo need to start from scratch or if you are looking for theme internationalization steps only.

This chapter will cover the following:

  • - Theme localization(translating a theme to a specific language)
  • - Plugin selection and configuration(In this case I’ll be using Polylang)

Localization

Once we have a translatable theme ready to use – meaning it has a .po file – you might what to give it a specific language translation, this is a pretty straight forward process, basically you need to take the original .po file you created and create a new .po and .mo files which will contain the desired language strings, don’t simply copy the .po file, there are some pieces of software you can use to generate both the .po file and the .mo file, one is the popular Poedit, but honestly, if found it buggy and I prefer to avoid it, other one is a WP plugin that you can easily install, Codestyling Localization, for this tutorial I’ll use this one, it allows you to easily translate every string on each theme or plugin installed on the same site in a wide variety of languages.

First step is to locate our theme or plugin and add a new language, I’ll chose spanish, this will generate a es_ES.po file.

add new lang, Codestyling Localization

Next hit “scan” and once its done proceed to translate all strings this might take you a while.

scan/rescan/translate, Codestyling Localization

 

Onece done, hit “generate mo-file” this will of course create the .mo file, in this case es_ES.mo contain the new translation.

Continue Reading..

Multilingual WordPress Website – part 1

If you get to this post your are probably looking for a full tutorial on how to make a WordPress based website fully translatable and multilingual, but at the same time easy to use for you and even your clients, if yes, you are on the right page, in this series of posts I’ll show a way to do this without making you to shoot yourself on the head.

Introduction

wordpress multilangThere are tons of tutorials and how-to’s outside on this topic, most of them are really helpful but some – seem to me – forgot important steps or don’t explain what is going on. I will try to avoid this since I got some headaches while I was translating my site(this site) and other sites, but at the end I end up creating a very friendly site in both spanish and english,  for a demo, just click on the “Spanish” link on the menu, you’ll see how the hole page translates to spanish including the page and/or posts Permalinks on the directions bar, search results, archives page, etc. This series will be covering the following:

  • Theme Selection(In case you are not able to create one).
  • Theme internationalization(the process of making a translatable theme).
  • Theme localization(translating a theme to a specific language)
  • Plugin selection and configuration(In this case I’ll be using Polylang)
  • SEO tips and general tips.

From now on, I will refer to “internationalization” as “i18n” this is the standard way to do it since “internationalization” is to long, “i” is the first letter, “n” the last one and “18″ the number of words between “i” and “n”.

Step 1. How to chose a theme for a multilingual site.

This step is just if you are planing to use a pre-build theme or you are not able to create one, if you need to internationalize a theme you have create or one that is not internationalized refer to step 2.

Selecting the right theme is an important step to get closer to a multilingual site, sadly most themes out there are not translatable by default. For example you can have your content fully translated but your visitors will be confused if they are reading lets say.. in French and then a “Go back to top” or “leave your comments here” appears, French wording should be there instead. This kind of words or phrases are usually are located on the theme files, for example the “leave your comments here” phrase will probably appear on the comments.php file, problem is, it won’t translate to any other language by itself.

The key with this is to look for a translatable theme, check on the theme features if there is something like “translatable” or “fully translatable”, you can also check on the theme files(if you can access them) and look for a .mo or a .po file, if there is a “fr_FR.mo”(or any other file like this es_ES.mo) file it means the theme is already translated to a language in this case(fr_FR.mo) French(see more localizations codes here), if there is only a “somename.po” or a “somename.pot” file the theme is translatable but not yet translated to a specific language, any of those should be enough to begin with the translation process.

WP translatable theme

Also, if you feel comfortable looking into code, open some of the theme files and look for “<?php _e('some words here', 'theme_name'); ?>“, if you found this most of the work is done but the theme is not fully translatable, a .po or .pot file must be generated, more about this on the next step.

Step 2. Theme i18n making a theme translatable.

This is only if you have created a theme that is not translatable yet or if you have a not yet translatable theme, otherwise wait for the next chapter on this series which will cover the process of  translating a theme to any language.

We’ll need to understand some concepts before getting in to the work.

PO (Portable Object) files: Plain text files that contain both the original language string and it’s translation, this one is used to create the .mo file.

MO (Machine Object) files: is the actual binary file wp uses to translate a theme, this one is usually generated by a third party software.

Refer to this articleto have a further explanation on .po and .mo files.

So, basically we first need to make some changes on our theme files, WordPress provides a set of functions that allow us to make the translation process easy, when we have a string(or phrase) on a theme it might look like this:

<h3>Leave a comment!</h3>

This is just not right, we need to provide a way to let know WordPress that this is translatable string, in order to do so we use the _e() or, in some cases __()functions like this:

<h3><?php _e('Leave a comment!', 'theme_name') ?></h3>

You should do this with every single hard coded string on the theme.

The only functional difference between the two methods is that _e() echoes the string and __() simply returns the string. __() is used when you want to supply a string to a function. _e() is used when you want to output the string as part of your XHTML. WordPress FAQ

More about this functions and it’s different uses can be found here.

One last thing to do, we need to declare a text domain for out theme, open your functions.php file and paste the following code:

//i18n
load_theme_textdomain( 'theme_name_here', get_template_directory() . '/languages' );

$locale = get_locale();
$locale_file = get_template_directory() . "/languages/$locale.php";
if ( is_readable( $locale_file ) )
    require_once( $locale_file );

Make sure you update the “theme_name_here” part to your theme name.

After all your strings are wrapped between the _e() function we need to generate the .po file, there are several methods, one is using a third party software called Poedit, this is not my favorite method since I found the software buggy(it prompted me some errors) and confusing, so I’ll not go deep with this one but here is a how to directly from the codex, other method  is to use this web based .po generator icanlocalize, process is pretty straight forward, upload a zip file containing all the theme .php files(no css or javascript files are needed here), this will return a .po file with all the strings ready for translation, name it as you like, “theme_name.po” would be ok.

With this steps you are providing the minimal translation support for a theme or plugin, now anyone can create a .po and .mo file for a specific language based on the new .po file.

On the next chapter I’ll be covering the process of creating a language file(.mo) so that the theme is ready for an specific language and how to configure a multilingual site.

code snippet: equal column heights with jQuery

Solution:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
	(function(){
	    var max_height = 0;
	    $('#container .column').each(function() {
		default_height = $(this).height();
		if(default_height > max_height)
		max_height = default_height;
	    });
	    $('#container .column').css('height',max_height);
	})();
    </script>

Hope it works for you!, it’s helpful when you have a multiple column layout.

WordPress SEO by Yoast review, improve your SEO the right way

While there are tons on SEO related plugins out there I would like to say that WordPress SEO by Yoast is one of the best(if not the best), and one of my favorites too; I’m always looking after clean ways to make websites SEO friendly, and when it comes to WordPress much of this depends of the theme I’m using and many times, the plugin(s) I’m are using,  sadly not all of this plugins are so great, some of  them are ridiculously big and might even decrease website performance, some even hurt sites after they are uninstalled!

WordPress SEO by Yoast Here is where WordPress SEO by Yoast comes in the game, simple, easy to use, powerful and with very useful stuff, this are the plugin’s features as it says on the plugin homepage:

  • Post titles and meta descriptions
  • Robots Meta configuration
  • Canonical
  • Breadcrumbs
  • Permalink clean up
  • XML Sitemaps
  • RSS enhancements
  • Edit your robots.txt and .htaccess
  • Clean up head section

You can see it offers some cool stuff beyond the usual, I’m not explaining all of them, just the features I like most, and have been helpful to me.

Continue Reading..

How to layer a psd file?

Why should designers take the time to order and perfect their psd files? think about this practical example, if you are focused on web design, and you work in a team, lets say, designers and developers, chances are the someone else will have to take your work and convert it in to a website, app, or whatever; turns out that I’m on the development side, this is what I usually found:

poor ordered psd

Kinda freaks me out, notice the nav section inside the footer section(when the nav section is actually placed on the header).

Other? probably content will fit better there, anyway, think of it, in some cases some other people will be using your work to do theirs, you don’t want them to think you are retarded or something like that, probably if you are an independent designer that works solo then it doesn’t matters, but still, ordering your composition the right way will make your work clearly easier, and by “the right way” I don’t mean something too special, is not like there is a manual on how to order/layer a composition, just use common sense, if you are designing a website it would probably have a header a content section, sidebar, footer, etc – just an example – that means you should group the header layers on a header gruop (do this by selecting the needed layers and pressing cmd + g or ctrl + g for PC), even better, if you have a header and it has a navigation menu on it, group the menu layers and get that inside the header group, Photoshop allows up to 8 levels, quite enough.

Continue Reading..

Vim Zen Coding with Sparkup Vim plugin

Digging on GitHub I found this neat Vim plugin, Sparkup, by rstacruz, basically is like the Vim Zen Coding pluging (yes, there is also a Zen Coding plugin for Vim, I use it before I meet Sparkup), but with some other great features like adding content to elements, create elements with attributes such as an <a href="http://rafaelhigueros.com"></a> and any other attribute, and of course all the Zen coding features you might already know, nesting, multiply elements, etc.

Installation

Download or git clone
Copy the contents of vim/ftplugin/ to your ~/.vim/ftplugin directory.

Basic usage

To trigger: ctrl+e, so for example, lets create an <a href="http://scream.ws">scream</a>:

a[href=http://scream.ws][target=_blank]{scream}

Meaning;
[ ] for atributes
{ } for content
. to add a class and # to add an id, just like zen coding.

Continue Reading..

maju – a very minimal but awesome WordPress theme

maju - minimal wordpress theme

A minimalistic WordPress Theme for blogers or mortals, a tiny Framework for developers and WP themers. (see more screenshots at the end of the post.)

Get it on Github.

Features

  • Extremely easy to use.
  • No special set ups or  extra coding (unless you want to).
  • Theme options page(where you can set a logo, link colors, fav ico, twitter user, etc)
  • WordPress 3+ ready (menus, featured image, widget ready, etc)
  • Built using 960 Gris System and adapt.js
  • Responsive design, works on ANY screen :)
  • HTML5
  • CSS3 (a bit since its supposed to be minimal)
  • SmartMetaBox class(thanks to Nikolay Yordanov), which makes easy to add meta boxes to pages, posts or custom post types, neat feature for developers.
  • Firefox, Chrome, Safari, Opera and IE7+ supported
  • Well commented (if not feel free to post me)
  • New on v 1.2.1!! syntax highlighting via google code prettify.
  • New on v 1.2.1!! SEO friendly – includes rich snipets via schema.org
  • New on v 1.2.1!! Tables engine powered by twitter bootstrap.
  • New on v 1.3! Facebook Open Graph Integration.
  • New on v 1.3! Lightbox engine for both default WP galleries and single images(Thanks to the fancybox2.0 team).
  • New on v 1.3! i18n, theme fully translatable, because a premium theme is a translatable theme(includes a pot file).
  • New on v 1.3! spanish translation included.
  • and more..

Additionally , you can use it as a(very tiny) framework for your  projects.

Continue Reading..

simpler life

a few days ago I started to realize i had to much stuff above me, to much paper, clothes, Cd’s, stuff I don’t use any more, what to do.? where to place this stuff.? I decided to get rid of it (of course I’ll donate the clothes, recycle paper and everything possible). why.?  because i don’t need it, takes space, in a little way it distracts me, it makes my room look cluttered..

After all the clean up I feel better and comfortable, i work as a web developer and also i work from home, so the cleaner my space is, the better i feel when working :)

getting rid of all that stuff you don’t really need it’s something we all should do, it clears our mind, spirit and space, by doing this we also reduce our stress and we’ll have less things to worry about in the future,  and that way our life becomes simpler, greener, smarter.

my goal is to reduce my stuff to just 60 things including clothes, i guess its a possible goal, Gandhi for example, he died with less than ten possessions! so think about this, get simple, get green :)

the archeology museum Guatemala

if some day you come to Guatemala city, the archeology museum is a great place to visit, it has a lot of information about ancient cultures such as mayans, and you will also see some of their work, like the wooden sculpture above. I really enjoy the visit :)