Collins is a web developer and freelance writer from Nigeria. When not wrangling with code, you can find him writing at his personal web development blog. Follow me on Twitter @w3guy

Agbonghama's articles

  1. WordPress L10n: How to Translate Your Plugin

    In the first part of this series on WordPress plugin i18n and l10n, we learned how to internationalize a WordPress plugin.

    This second (and concluding) part will be a walk-through on making a plugin ready for translation, as well as learning how to localize or translate a plugin into a new language.

    The process of making a plugin ready for translation is fairly straight-forward. First of all, you’ll need to generate a .pot file. This file is used by translators to translate your plugin into a new language.

    This .pot file contains the original strings (in English) of your plugin.

    Here is an example POT file entry:

    #: plugin-name.php:123
    msgid "Welcome to SitePoint"
    msgstr ""
    

    A translator looking to translate the text Welcome to SitePoint (at line 123 in your plugin file) into German will add the translation between the quotation marks.

  2. WordPress i18n: Make Your Plugin Translation Ready

    In a previous post, I covered the fundamentals of WordPress internationalization (abbreviated as i18n); how to install a localized version of WordPress and how an existing WordPress site can be easily converted to a localized version.

    In this article, I’m going to walk you through the process of Internationalizing WordPress plugins. The process isn’t difficult and once the knowledge is acquired, you can have your WordPress plugins easily translated to other languages.

    Difference Between Internationalization and Localization

    Over the years, developers tend to misconstrue the meaning of these terms – Internationalization and Localization.

    • Internationalization is the process of developing your plugin so it can easily be translated into other languages.
    • Localization describes the subsequent process of translating an internationalized plugin to a new language.

    It is worthy of note that Internationalization is often abbreviated as i18n (because there are 18 letters between the ‘i’ and the ‘n’) and Localization is abbreviated as l10n (because there are 10 letters between the ‘l’ and the ‘n’.)

    Why Internationalize?

    The answer is simple; WordPress is used all over the world in many different languages. When plugins are internationalized, they attract a larger audience from other parts of the world who would obviously benefit by using the plugin in their own language.

    As a developer, you may not have time to provide localized versions of your plugin because you do not speak other languages. However, when you internationalize your plugin, you leave the door open for others to create localization without necessarily modifying the source code.

    Plugin Internationalization

    Now that we are familiar with the concept of plugin internationalization and localization, let’s dive into the process of making plugins ready for translation.

    Set Translation Headers

    The first step to take in making a plugin translatable is to include the translation headers among the plugin headers.

  3. WordPress i18n and Localization

    WordPress is arguably the world’s leading content management system (CMS) in use today (some argue that it’s also much more than a CMS), powering over 60 million websites globally.

    By default, WordPress is presented in U.S. English (en_US), but it does come with a built-in language capability. This has allowed the WordPress community to translate WordPress into several languages. WordPress themes, translation files and support have also been made available in various languages.

    WordPress i18n Support

    WordPress uses the gettext libraries and tools for internationalization (i18n).
    It is the libraries that facilitate the internationalization of WordPress, themes and plugins.

    Note: i18n is an abbreviation for internationalization and its called i18n because there are 18 letters between “i” and “n”.

    If you are not familiar with the concept of i18N, translations, and Gettext, I strongly encourage you to read this series to have an understanding of what’s involved.

    In this article, I’ll cover the basics of WordPress i18n. I am going to walk you through the simple process of installing a localized version of WordPress (WordPress in your own language), and also show you how to turn an existing WordPress site to a localized version.

    Installing a Localized Version of WordPress

    A lot of WordPress enthusiasts from different parts of the World have teamed-up to translate WordPress into their various languages.
    For example, the French, German and Italian localized version of WordPress is available at fr.wordpress.org, de.wordpress.org and it.wordpress.org respectively.

    Let’s see how we can install a localized WordPress using the German internationalization as our benchmark for this tutorial.

  4. Build Your Own WordPress Contact Form Plugin in 5 Minutes

    Most websites are typically designed to comply with standard web practices by including a dedicated page where a contact form is located. This provides visitors with an easy way to reach out to the site owner.

    In simple terms, a contact form has a set of questions and fields which are filled in by a visitor. The information is usually automatically sent via email to the site administrator or another nominated email account. It is worth noting that this email address isn’t displayed to visitors, so using a contact form typically reduces email spam from bots that harvest naked email addresses on the Internet. Contact forms play a very important role on a website, where they are used for collecting feedback, enquiries and other data from users.

    If your website is powered by WordPress, there are numerous plugins that seamlessly integrate a contact form on your website.

    In this article, I will provide a list of some free WordPress contact form plugins. I will also discuss why you should consider rolling your own contact form. Then, I will provide you with a short tutorial showing you how to build your own WordPress contact form plugin.

  5. How to Manage and Batch Install Your WordPress Plugins

    According to Forbes, over 60 million websites globally are powered by WordPress. Numbers like this show that WordPress is no doubt a leading contender when it comes to Content Management Systems (CMS).

    The application of WordPress has gone past just a blogging platform; it has evolved over the years to become a platform for virtually any website of choice, all of which is due to the flexible backbone upon which WordPress was developed.

    One of the platform’s most loved features is the use of Plugins – tools that extend the functionality of WordPress.

    If you have been a continuous user of WordPress, either in building your network of blogs or developing websites for clients, you should have a collection of plugins reserved for installation on every WordPress site.

    WordPress lacks the ability to install multiple plugins at once. Therefore, we are left with no option than to install our can’t-do-without plugins one at a time.

    If you find this as frustrating as I do, WPCore will definitely get you excited.

    Introduction to WPCore

    One of my investigations on Google led me to WPCore – a simple tool for managing collections of your favorite WordPress plugins. WPCore also gives you the ability to batch install your WordPress plugins.

    WPCore works in four simple steps:

    1. Create a collection and add your favorite WordPress plugins.
    2. Visit any of your WordPress sites and install the WPCore plugin.
    3. Drop the collection key into the WPCore plugin settings within WordPress.
    4. WPCore automatically pulls in all the plugins from your collection and installs them on your site.

    Follow me as I walk you through the steps above.

    Create a Collection

    Head over to WPcore.com, register and login to your account.

    Click on the New Collection navigation menu to create your plugin collection.

    Enter the collection name/title, set the visibility to public or private and hit the Add Plugins button to begin collating the plugins.

  6. Creating a World Cup 2014 WordPress Widget

    Football is undoubtedly the most popular and prestigious sporting game in the world. It is globally governed by the Fédération Internationale de Football Association (FIFA), the sport’s international administrative body.

    The FIFA World Cup, usually referred to simply as the World Cup is a competition hosted every four years, contested by the senior men’s national teams of qualified countries. This year’s tournament hosted in Brazil is currently ongoing.

    World Cup 2014

    While reading Hackers News, I stumbled upon an API for the World Cup that scrapes current match results and outputs match data as JSON.

    You can get the following World Cup data from this API:

    • All match data, updated every minute
    • Today’s matches
    • Tomorrow’s matches
    • Matches for any country by entering their FIFA Code
    • The current match if a match is happening, otherwise nothing.
    • Results for group stage (wins, losses, draws, goals_for, goals_against)

    I love football and I know a lot of us do too. Due to my busy schedule, I always find myself asking friends about the match schedule.

    To eliminate this barrier, I decided to build a Match Fixtures widget for WordPress that displays a list of matches to be played today and tomorrow, powered by the World Cup API.

    Building the Fixtures Widget

    The Fixture widget to be developed at the end of this tutorial will be a tabbed widget; the first tab displays matches for today and the second tab displays matches for the next day.

    World Cup Widget

    Let’s get started with widget plugin development.

    First, we need to include the plugin header. Without the header, WordPress won’t recognize the widget plugin.

  7. Client-Side Form Validation with HTML5

    When building web applications, it is important you take security seriously, especially when it has to do with collecting data from users.

    It is a common maxim in security to trust nobody, hence never trust the user to enter correct or valid form values. For example, in an email form field, instead of entering a valid email address, the user might enter an invalid one or malicious data obviously ignoring the intent of the request.

    When it comes to validating form values, it can be done on the client-side (web browser) and on the server-side (using your preferred server-side language).

    In the past, client-side validation could only be achieved using JavaScript or using libraries from frameworks (think jQuery validation plugin). But that is changing or rather has changed because validation can now be done using HTML5 without having to write complex JavaScript validation code.

    Form Validation with HTML5

    HTML5 includes a fairly solid form validation mechanism powered by the following attributes: type, pattern, and require. Thanks to these new attributes in HTML5, you can delegate some data verification functions to the browser.

    Let’s examine these new form attributes to see how they can aid form validation.

    The type Attribute

    This form attribute indicates what kind of input control to display such as the popular for handling simple text data.

    Some form controls inherit validation systems without having to write any code. For example, validates the field to ensure the entered data is in fact a valid email address. If the field contains an invalid value, the form cannot be submitted for processing until it is corrected.

    Invalid form value

    There is also , and for validating numbers, URLs, and telephone numbers respectively.

    Note: The formatting of phone numbers varies from country to country due to the inconsistency in lengths and formats. As a result, the specification doesn’t define an algorithm for validating these, hence it isn’t supported web browsers at the time of writing.

    Mind you, validation can be provided to tel using the pattern attribute which accepts a Regular Expression string, and which we’ll consider next.

  8. Effortless Website Backups with Mover.io

    The traditional way of doing a website backup is to download and save a local copy of the site files to your computer or to cloud storage services like Dropbox and Amazon S3.

    But things get unwieldy when the size of the backup is huge. Hence a large internet data plan with fast downloading speed, and a considerable chunk of your time is required to pull this off.

    I back up my WordPress blog and save it in a special bucket on Amazon s3. I must confess, the process isn’t fun. That’s why I searched for an alternative to automate the backup process and, after many hours of research and testing, I finally settled on a service called mover.

    Introduction to Mover.io

    Mover.io is a secure cloud transfer company that acts as a middleman between various web technologies that don’t play nice together. Mover takes your files from one place (internally referred to as “connectors”) and transfers/converts them to another while you have a cup of coffee.

    Since it doesn’t run on your computer, it doesn’t use any of your resources — CPU, memory, disk space, or network bandwidth — to transfer the files. It supports over 20 connectors including FTP, SFTP, Dropbox, Google Drive, MySQL, Rackspace, and a host of others.

    Mover gives you 2 GB free upon signing up and no credit card is required. You can view all the pricing details here.

    Why Choose Mover?

    I am quite sure a lot of us maintain accounts on multiple cloud storage solutions. Like the saying “don’t put all your eggs in one basket”, it is important you save your website backup in multiple locations to be on the safe side.

    Mover not only allows you to back up websites but you can also transfer the backup to multiple cloud storage accounts that you own without having to download and re-upload the backup.

    Website Backups with Mover

    Now that we’ve discussed a little bit on the features of Mover, and why you should use it, let’s see how we can use Mover to save a backup of WordPress to Amazon S3. With Mover, you can take a backup of not only your website files but also your database inclusive. Take note: Only MySQL databases are supported at this time.

    To demonstrate how website backup is made easy with Mover, I will be showing you how I save a backup of my WordPress files and database to an Amazon S3 bucket. The backup will be divided into two processes: First the WordPress files, then the MySQL database.

    We will be using the following three connectors for our backup process: FTP (used by mover to access website files in a server), Amazon S3 and MySQL.

  9. Image Scraping with Symfony’s DomCrawler

    A photographer friend of mine implored me to find and download images of picture frames from the internet. I eventually landed on a web page that had a number of them available for free but there was a problem: a link to download all the images together wasn’t present.

    I didn’t want to go through the stress of downloading the images individually, so I wrote this PHP class to find, download and zip all images found on the website.

    How the Class works

    It searches a URL for images, downloads and saves the images into a folder, creates a ZIP archive of the folder and finally deletes the folder.

    The class uses Symfony’s DomCrawler component to search for all image links found on the webpage and a custom zip function that creates the zip file. Credit to David Walsh for the zip function.

    Coding the Class

    The class consists of five private properties and eight public methods including the __construct magic method.