Kevin's Space

I’m in the middle of an update to Testimonial Basics and and I’ve been looking into an issue that is best characterized by a few user problems I have received :

Hello! I’m trying to add testimonials, but there is just ???? instead of cyrillic symbols. How can I resolve it? Thank you in advance.

I tried to submit a form in Hebrew. I got ????? instead of letters. Please make your plugin support UTF-8.

It turns out that this problem is related to the collation of the Testimonial Basics database table. So what is Collation? Taken from :

Character Sets and Collations in General

A character set is a set of symbols and encodings. A collation is a set of rules for comparing characters in a character set. Let’s make the distinction clear with an example of an imaginary character set.

But what if we want to say that the lowercase and uppercase letters are equivalent? Then we would have at least two rules: (1) treat the lowercase letters “a” and “b” as equivalent to “A” and “B”; (2) then compare the encodings. We call this a case-insensitive collation. It is a little more complex than a binary collation.

Further References :

WordPress Codex Posts :
Converting Database Character Sets
http://codex.wordpress.org/Editing_wp-config.php

This is a good article on character sets and collation for further interested readers:WordPress Database Charset and Collation Configuration

Testimonial Basics Problems with Collation

When Testimonial Basics is first set up it uses the Default Collation for the MySQL setting. If MySQL is not set up for a specific character set and collation it will use a default which unfortunately, in many cases is latin1 character set and latin1_swedish_ci collation. This setup works fine for English but for some languages it causes the ???? to be returned. I don’t know why this happens, it will have something to do with certain characters not recognized and the dreaded ? being returned. I will be the first to admit that I’m a little out of my realm here. However I do know how to change the collation and character sets.

Disclaimer – The procedure below will show you how to go into your WordPress Database and change the collation on the Testimonial Basics Table. There is some risk here, and if you proceed it is at your risk. Back up your database, in case you are having problems. Only change the Testimonial Basics Table. See the references above if you need to change over the entire WordPress Database.

The next version of Testimonial Basics (now in testing) will use the WordPress core character set and collation (UTF8 and utf8_general_ci). You could transfer your testimonials to a notepad file, uninstall the old version and install the new version. Note that simply upgrading will not change the collation, you will have to install a clean version. The reason for this is that I will not go into existing databases and start messing with these kinds of settings. If you are comfortable with phpMyAdmin, you can skip this method and follow the steps below.

1) Log into phpMyAdmin with your database username and password. Go to your WordPress Database. You should see something like the screenshot below. Notice the collation for the Testimonial Table is latin1_swedish_ci and that the default is the same (arrow).

2) To change the default setting select the “Operations” tab. The next screenshot comes up Select “utf8_general_ci” from the drop down list and then “Go”.

3) Click the “Structure” tab and the screenshot below appears. Note that the default collation is now utf8_general_ci. In the wp_testimonial_basics line select “Structure”.

4) The screenshot below will come up. Select “Operations” to change the table setting.

5) Change the table setting to utf8_general_ci and click “Go”. Go back to the “structure” tab and you will see that the table has been changed (at the bottom) but not the columns(presented as rows but are really table columns).

6) Select “Change” for one of the columns (I selected the “tb_group” column) and the screen below will appear. Change the “tb_group” collation to “utf8_general_ci”.

7) Repeat for the other columns

Your Testimonial Basics database table collation is now set to utf8_general_ci. I believe this should solve many of these ???? issues. If you are still having problems drop me a line and I will continue to pursue the problem. I am certainly far from having confident knowledge about character sets and collation, so if you have anything further to add, please comment.

Well the first cut of my second WordPress Theme was just submitted to WordPress.org.

I am very excited about this theme as it has many very neat features. Check the theme out at :demo2.kevinsspace.ca

The theme is responsive, and should look great on most mobile devices, iPad type devices, and full computer screens. I have tested the theme on an iPad 1, 3, iPad mini and iphone 4 and it worked great on all these devices.

I’ll be setting up the theme for download at my site next so stay tuned.

In the mean time if anybody out there has other devices, I’d appreciate it if you took a look at the demo and provided feedback on how it performed.

Happy coding!

I haven’t posted anything in a while. I’ve been busy developing a second WordPress Theme. The theme I am designing uses Post Formats and also is being designed as a mobile ready responsive theme.

As part of the post format options I needed to determine what I was going to do with an audio post. I did some Google searching and after a while I settled on audio.js. The original version of audio.js can be downloaded at kolber.github.com/audiojs/.

Notes from the developer :

“audiojs is a drop-in javascript library that allows HTML5′s ‘<audio>` tag to be used anywhere. It uses native `<audio>` where available and falls back to an invisible flash player to emulate it for other browsers. It also serves a consistent html player UI to all browsers which can be styled used standard css.”

“It plays mp3s. **No ogg**. Because, lets be honest, in the real world, no one really exports ogg files. Sadly, that means Opera and Firefox get flash audio. Hopefully they can add mp3 support soon.”

So this javascript plug in allows you to use the HTML Audio tag in all browsers for mp3 files only. There is one small caveat: In Opera the plug in won’t load local mp3 files in localhost servers. Firefox, IE 7,8 and 9, Chrome and Safari all tested fine. Opera still works in most servers. I was even able to get it to work on a localhost but only when accessing an mp3 on the internet.

I made some modifications to the files to be able to use it in WordPress and to change the css styling to be responsive. I’m used to working with separate css files for jquery plugins so the first thing I did was to remove the css from the audio.js file and create an audiojs.css file. To do this I opened up audio.js in Notepad++ and removed lines 86 to 125 and put them in the audiojs.css file. You then need to remove the javascript markup (backslashes, etc) and set up the css in a more readable format.

It took a lot of tinkering to get the display to be responsive, and rather than get into the details of the mods, I’ve commented the css file so you tinkerers can check it out.

The results of the mod can be seem with this demo.

Setting up Audio.js in WordPress

For themes I develop I put javascripts in a /themes/theme-name/js/ folder. In this case I created a folder for the audiojs files in /themes/theme-name/js/audiojs/.

Next you have to load up your scripts and css files. To do this add the following to your functions.php file:

if ( !function_exists ('prefix_load_js')){
  function prefix_load_js() {
    $disable_audiojs = 0;/* I've set to zero, 
                           but get this from user options */
    wp_enqueue_script('jquery');
    if ($disable_audiojs != 1) {  /* this is optional */
      wp_enqueue_script( 'audiojs', 
                         get_template_directory_uri() 
                        . '/js/audiojs/audio.js', 
                        array( 'jquery' ), '' );
      wp_enqueue_script( 'audiojs_doc_ready', 
                        get_template_directory_uri() 
                       . '/js/audiojs/audiojs-doc-ready.js', 
                        array( 'jquery' ), '' );
    }
  }
  add_action('init', 'prefix_load_js');
}

if ( !function_exists ('prefix_load_styles')) {
  function prefix_load_styles() {
    $disable_audiojs = 0;/* I've set to zero, 
                           but get this from user options */
    if ($disable_audiojs != 1) {
      wp_register_style( 'audiojs_style',
                        get_template_directory_uri() 
                        . '/js/audiojs/audiojs.css',
                       array() );
      wp_enqueue_style( 'audiojs_style' );      
    }
  }
  add_action('wp_enqueue_scripts', 'prefix_load_styles');
}

Highly recommended references at WordPress.org:

WordPress Enqueue Scripts

WordPress Enqueue Styles

The first enqueue is wp_enqueue_script('jquery');. This is the default jquery library for WordPress. Always use the default WordPress jquery library. This library is tested with WordPress and is compatible with the WordPress System. Use older or newer jquery libraries at your peril. When conflicts arise from new releases, the biggest headache always seems to be jquery related, WordPress version 3.5 has just been released and there have been major issues with jquery compatibility.

The second enqueue loads the audio.js plugin, and the third loads the doc ready script. The doc ready script is a small function that enables the audio.js plugin.

A final comment about the script. I feel that it is always a good plan wherever possible to give the user an option to disable the script. In the user options admin panel of the theme I am developing, the user can disable the plugin by simply clicking a checkbox. The conditional wrap I’ve included above allows you to get the user input and disable the plugin.

The second function registers and enqueues the css file needed for the plugin. It is also conditionally loaded.

To use the plugin simple enter <audio src="http://www.yoursite.com/folder/file.mp3" preload="auto"></audio>

I hope you enjoyed the post.

Download the demo here: Audiojs (125)

A update to Testimonial Basics is now available. The update offers a number of enhancements and bug fixes:

• Allow HTML in comments : Modified the input forms to allow only <p></p><br> tags.
• Added default font to custom styling, so that uses can use the theme’s font in the custom styles
• Added option for italic style both in basic and in custom styling.
• Added groups so users can group testimonials and display them in separate pages.
• Added an option to use gravatars if present.
• Modified Edit Testimonials Panel to accomodate Groups and e-mail
• Removed user documentation from plugin, it’s getting too big to include in WordPress.org and will be included in the download from the plugin site.
• Minor changes/bug fixes:
  • All css styling has been optimized
  • Website link now opens a new tab
  • Fixed strip slashes bug in input title and e-mail note
  • Fixed data entry to allow up to 100 characters for author,email,url and location

As always, let me know if there are any problems with the update, I will attend to them. Also many changes have been made at the request of the users so keep that feedback coming. And finally, I do this mainly because it is fun, but it is also a lot of work. Testimonial Basics is about 3000 lines of code, the latest upgrade was in excess of 100hrs of effort! Try out the plugin, and if you like it show your appreciation.