Lately, I wanted to update my blog’s theme to the newest version. But hey! I had a lot of modifications such the one above that kept me from doing a smooth update: BNR Slider, custom images for RSS and Twitter, hints, Syntax Highlight and so on.

The newest solution that I come up with is using a child theme, feature provided by WordPress engine. Basically, you have a theme applied to you blog that you like. Instead of modifying it, you create a new folder in theme’s directory with a special name who’ll be applied OVER your base theme, customizing only the aspects you need. Assuming that your theme’s name is MyFavoriteTheme, you’ll have to create the child theme as MyFavoriteTheme-child.

In order to use your new theme, you’ll have to create in the MyFavoriteTheme-child folder two files:

1. styles.css – required – who’ll mark your folder as a child theme
2. functions.php – optional – for our example is required, as we’ll write code inside of it

First, you Really need to setup the styles. The content is simple and explained in this straight-forward article.

The most interesting part is the functions.php, where we’ll define code to add our Syntax Highlight classes. You’ll have to put all needed JavaScript files in the /scripts folder, in the root of the WordPress install, and the css files respectively in /styles folder. This is just for easy of migration from one theme to the other, if you get bored or want to change your current one.

Then, in the aforementioned functions.php from your MyFavoriteTheme-child folder you have to insert the following text:

<?php
$path_to_scripts = "/scripts/";
$path_to_styles = "/styles/";

function register_syntaxhighlight() {
  wp_enqueue_script('shcore',  $path_to_scripts.'shcore.js');

  wp_enqueue_script('shbrushcsharp', $path_to_scripts.'shBrushCSharp.js');
  wp_enqueue_script('shbrushcpp', $path_to_scripts.'shBrushCpp.js');
  wp_enqueue_script('shbrushcss', $path_to_scripts.'shBrushCss.js');
  wp_enqueue_script('shbrushobjc', $path_to_scripts.'shBrushObjC.js');
  wp_enqueue_script('shbrushjscript', $path_to_scripts.'shBrushJScript.js');
  wp_enqueue_script('shbrushphp', $path_to_scripts.'shBrushPhp.js');
  wp_enqueue_script('shbrushplain', $path_to_scripts.'shBrushPlain.js');
  wp_enqueue_script('shbrushruby', $path_to_scripts.'shBrushRuby.js');
  wp_enqueue_script('shbrushsql', $path_to_scripts.'shBrushSql.js');
  wp_enqueue_script('shbrushxml', $path_to_scripts.'shBrushXml.js');
  wp_enqueue_script('shbrushas3', $path_to_scripts.'shBrushAs3.js');
  wp_enqueue_script('shbrushjava', $path_to_scripts.'shBrushJava.js');
  wp_enqueue_script('shbrushSql', $path_to_scripts.'shBrushSql.js');

  wp_enqueue_script('shstarter', $path_to_scripts.'shstarter.js', array('shcore'));

  wp_enqueue_style('shcore',  $path_to_styles.'shcore.css');
  wp_enqueue_style('shThemeDefault', $path_to_styles.'shThemeDefault.css');
}

add_action('init', 'register_syntaxhighlight');

?>

The code explanation:

1. First we set some global vars, to know where the directories are;
2. Then we create a new function in which we add one by one the scripts required for the site – you can add the ones that you use and when you’ll post some content that requires a new brush, the shCore will kindly alert you that one of the brushes is missing, specify also the name of it. This way you’ll load only the ones used and no more, keeping the webpage size low and quality high.
3. wp_enqueue_script assures that the script will be loaded once. So if it is already loaded by any other plugin or theme, you will not have it downloaded twice;
4. finally, we add an WordPress action, binding to the init hook and add there our code.

After uploading your code to your WordPress install (be careful to names – Linux is case sensitive), you’ll have to select as theme the child theme, so your modification will be applied. Until you’ll select the child theme, you will not see any changes!

That’s it, folks!

Post from: Radu Poenaru's Weblog

How to add Syntax Highlight to WordPress

As a Ruby developer, I work quite a lot with their “special” plugins called gems. The nice fact about the gems is that they bring lots of functionality. By example, there’s a gem for paginating a collection who takes just few parameters and not only that finds out how many objects the collection has, but also how to split them, generating the corresponding links and serving to the original container (that used to show the entire collection) only the collection part that is representative in the context of current page and items per page.

Before someone new to a specific gem starts thinking to implement it, usually searches on the net for examples. The most important gems are described and exemplified in Railscasts.com. The content is excelent, the quality is good, sound is nice but the format chosen for movies is Apple’s .MOV proprietary format. There are few plugins to install for playing the files with MediaPlayer, but frankly I wanted a quicker solution than go on some obscure websites and getting from there a creepy .exe installer.

So I’ve created a simple .mov player that will replace the 33 MB of useless QuickTime Player (if you’re a Mac user, you have already this installed so you’ll not need my hack).

Go directly to the player >

So let’s see some code!

First, I decided to use the Object method in order to play mov files. Apple provides a .cab file, who is able to play this files in browser. More documentation on its parameters you can find in their Embedding tutorial.

Don’t forget to add a link to JQuery library!

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

The html code is shown below and it is pretty straight forward:

<body>
<div class="media">
  <div class="navigationTabs">
      <input type="text" id="txtURL" style="width:75%"/>
      <input type="button" id="btnPlayMov" value="Play"/>
      <input type="button" id="btnClearMov" value="Clear"/>
      </div>
      <div id="divPlayer">

http://media.railscasts.com/videos/188_declarative_authorization.mov

  </div>
</div>
</body>

The JavaScript is a little bit trickier as it involves JQuery.  For a newbie, it is pretty hard to debug, but after a while you’ll just feel it:

$(function() {
  // bind an onClick event for this second Flash container
  $("#btnPlayMov").click(function() {
    var _height = "306px";
    var _width = "400px";
    var _movie =  $('#txtURL').val();

    var _html = '';

    $("#divPlayer").html(_html);
  });

  $("#btnClearMov").click(function() {
    $("#divPlayer").html("http://media.railscasts.com/videos/188_declarative_authorization.mov");
  })
})

Not to mention that it works in all major browsers (IE 8, FireFox 3.6 and Chrome) !

Go directly to the player >

Post from: Radu Poenaru's Weblog

Create a simple HTML .MOV player

I found a lot of information on the Softpedia forum, in an interesting article How to "Fix" Your Vision? and a very large list of discussions (in Romanian). I read a lot of advices pros and cons like:

• All about vision: “Choosing the right eye surgeon probably is the single most important step you can take to decrease any risks associated with LASIK. An experienced, reputable surgeon will make sure you are properly screened and let you know up front if you aren't a good candidate for LASIK eye surgery.”
• Presentation of LASIK on Wikipedia
• More about Lasik Technology
• after the surgery I found out the FDA’s opinion on Lasik – it can be fully read under Home > Medical Devices > Products and Medical Procedures > Surgery and Life Support Devices :  here ( excerpt from their site: Food and Drug Administration is  an agency within the Department of Health and Human Services and consists of centers and offices, which are listed in menu at left. The FDA is responsible for protecting the public health by assuring the safety, efficacy, and security of human and veterinary drugs, biological products, medical devices, our nation’s food supply, cosmetics, products that emit radiation, and tobacco products.)

Among others, FDA presents the main risk factors associated with this operation:

• Blepharitis. Inflammation of the eyelids with crusting of the eyelashes, that may increase the risk of infection or inflammation of the cornea after LASIK.
• Large pupils. Make sure this evaluation is done in a dark room. Although anyone may have large pupils, younger patients and patients on certain medications may be particularly prone to having large pupils under dim lighting conditions. This can cause symptoms such as glare, halos, starbursts, and ghost images (double vision) after surgery. In some patients these symptoms may be debilitating. For example, a patient may no longer be able to drive a car at night or in certain weather conditions, such as fog.

• Thin Corneas. The cornea is the thin clear covering of the eye that is over the iris, the colored part of the eye. Most refractive procedures change the eye’s focusing power by reshaping the cornea (for example, by removing tissue).  Performing a refractive procedure on a cornea that is too thin may result in blinding complications.

• Previous refractive surgery (e.g., RK, PRK, LASIK).  Additional refractive surgery may not be recommended.  The decision to have additional refractive surgery must be made in consultation with your doctor after careful consideration of your unique situation.

• Dry Eyes. LASIK surgery tends to aggravate this condition.

Because during the research I also looked for centers, I found out that in Istanbul there is a clinic named EyeStar or its Romanian version  who uses the latest lasers(Wavelight Allgretto 400 hz eye- Q) and technologies to improve vision:

Our laser, the Wavelight Allegretto Wave Eye-Q 500Hz/400Hz. is the newest, fastest, and most advanced FDA-approved eye laser platform on the market. It is reputed for the most precise outcomes, and the highest level of safety and patient comfort.

Another argument pro was that a former colleague ,with whom  I’ve worked in Alensa, had the same LASIK for myopia in this clinic and she was very happy about her choice. Also I liked very much their care for their clients: lifetime warranty for the operation, included transportation to and from the clinic, help in your native language (native English, German, Bulgarian, Japanese, French, Italian, Romanian, Russian, Turkish, Spanish).

Next, I’ll present to you the Discussions with Patient coordinators.

Post from: Radu Poenaru's Weblog

Research on LASIK

It bothered me some while I got the some free time to actually look into this, between exams, work and master research. After some wandering on the internet, I found here the correct directions. What I learnt: Always search for the API!

In order to make sure that the preview is always correctly populated, you should add the tags shown below to the <head> element in your HTML code. If you don’t tag your page, Facebook Share will grab the title of your page as specified in the <title> tag, and will create a summary description from the first text that appears in the body of your page. A list of thumbnails will all be selected from available images on your page.

You can control the exact title, description, and thumbnail that Facebook Share uses by adding the following meta tags to the <head> element in your page:

<meta name="title" content="title" /> <meta name="description" content="description " /> <link rel="image_src" href="thumbnail_image" / >

Also, beware of this fact:

The thumbnail_image is the URL to the image that appears in the Feed story. The thumbnail’s width or height must be at least 50 pixels, and cannot exceed 130×110 pixels. The ratio of both height divided by width and width divided by height (w / h, h / w) cannot exceed 3.0. For example, an image of 126×39 pixels will not be displayed, as the ratio of width divided by height is greater than 3.0 (126 / 39 = 3.23). Images will be resized proportionally.

OK. so these are the Facebook requirements. How can we implement them?

So let’s get into some code.

First, I tried to modify the theme – adding the following code to the header.php file:

$id =$post->ID;
$the_content =$wpdb->get_var("SELECT post_content FROM $wpdb->posts WHERE ID = $id");
$pattern = '!<img.*?src="(.*?)"!';
preg_match_all($pattern, $the_content, $matches);
echo '<link $image_src="$matches['1'][0];" $matches); $the_content, preg_match_all($pattern, />';

While it is workable, from performace point of view isn’t very nice because you try to read at ANY page refresh the post and show the image. But what if you’re on the first page with lots of posts? Or in archive? The code that I settled in the final was placed in functions.php file in my current theme. It allows me to use triggers that output to the head of the page the desired content and also to do this only when a single post page is requested. The code is:

function add_image_src(){

  global $post;
	// get the global variable post
  // if it exists and is only a single post
  if ($post){

    // pattern for recognizing first image in post
    $pattern = '!<img.*?src="(.*?)"!';
    preg_match_all($pattern, $post->post_content, $matches);

    //first image would be the representative image
    $image_src = $matches['1'][0];
    // extract it as Facebook wants it
    echo '<link rel="image_src" href="', $image_src,'" />';
  }
}

// hooking to the head generation loop my function defined above
add_action('wp_head', 'add_image_src');

Post from: Radu Poenaru's Weblog

How to generate image_src for Facebook links in WordPress theme

Enjoy!

Post from: Radu Poenaru's Weblog

Technorati checks my blog

This weekend fun was adding to my website the cool sliding control from Jérémie Tisseau website. That pretty it was, I immediately started thinking it as a container to my BNR exchange rate page. The coded worked perfectly, with few modifications.

Firstly, WordPress uses the $ operator for Prototype library, so if you want to add your jQuery library the invocation to WordPress Firebug will report the error “$ is not a function”. So here’s the fix: you’ll have to change any occurrence of the $ sign to jQuery. Just like in the following example:

$(document).ready(function() {

	// Expand Panel
	$("#open").click(function(){
		$("div#panel").slideDown("slow");

	});	

	// Collapse Panel
	$("#close").click(function(){
		$("div#panel").slideUp("slow");
	});		

	// Switch buttons from "Log In | Register" to "Close Panel" on click
	$("#toggle a").click(function () {
		$("#toggle a").toggle();
	});		

});

TO:

jQuery(document).ready(function() {

	// Expand Panel
	jQuery("#open").click(function(){
		jQuery("div#panel").slideDown("slow");

	});	

	// Collapse Panel
	jQuery("#close").click(function(){
		jQuery("div#panel").slideUp("slow");
	});		

	// Switch buttons from "Log In | Register" to "Close Panel" on click
	jQuery("#toggle a").click(function () {
		jQuery("#toggle a").toggle();
	});		

});

Secondly, you’ll have to add the scripts to your current theme path (all except jquery from js and all css files except style.css from styles directory), and their declaration in the header.php file:

....

<!-- Sliding effect -->

<!-- PNG FIX for IE6 -->
<!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->

<link rel="stylesheet" type="text/css" href="<?php echo get_bloginfo('template_url') ?>/slide.css" media="screen" />
<script type="text/javascript" src="<?php echo get_bloginfo('template_url') ?>/js/slide.js"></script>
<!-- end Sliding effect -->

<?php wp_head(); ?>

Thirdly, you’ll have to  add the code of the actual HTML elements to your webpage:

<!-- Panel -->
<div id="toppanel">
  <div id="panel">
    <div class="content clearfix">
      <div class="left">
        <h1>Welcome to Web-Kreation</h1>
        <h2>Sliding login panel Demo with jQuery</h2>
        <p class="grey">You can put anything you want in this sliding panel: videos, audio, images, forms... The only limit is your imagination!</p>
        <h2>Download</h2>
        <p class="grey">To download this script go back to <a href="http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery" title="Download">article »</a></p>
      </div>
      <div class="left">
        <!-- Login Form -->
        <form class="clearfix" action="#" method="post">
          <h1>Member Login</h1>
          <label class="grey" for="log">Username:</label>
          <input class="field" type="text" name="log" id="log" value="" size="23" />
          <label class="grey" for="pwd">Password:</label>
          <input class="field" type="password" name="pwd" id="pwd" size="23" />
                <label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" />  Remember me</label>
              <div class="clear"></div>
          <input type="submit" name="submit" value="Login" class="bt_login" />
          <a class="lost-pwd" href="#">Lost your password?</a>
        </form>
      </div>
      <div class="left right">
        <!-- Register Form -->
        <form action="#" method="post">
          <h1>Not a member yet? Sign Up!</h1>
          <label class="grey" for="signup">Username:</label>
          <input class="field" type="text" name="signup" id="signup" value="" size="23" />
          <label class="grey" for="email">Email:</label>
          <input class="field" type="text" name="email" id="email" size="23" />
          <label>A password will be e-mailed to you.</label>
          <input type="submit" name="submit" value="Register" class="bt_register" />
        </form>
      </div>
    </div>
  </div> <!-- /login -->  

    <!-- The tab on top -->
  <div class="tab">
    <ul class="login">
        <li class="left"> </li>
          <li>Hello Guest!</li>
      <li class="sep">|</li>
      <li id="toggle">
        <a id="open" class="open" href="#">Log In | Register</a>
        <a id="close" style="display: none;" class="close" href="#">Close Panel</a>
      </li>
        <li class="right"> </li>
    </ul>
  </div> <!-- / top -->

</div> <!--panel -->

Post from: Radu Poenaru's Weblog

How to add a nice jQuery slider

Cursul oficial BNR

5

It is very nice and user-friendly to have Webslices on your website. It improves the user experience by allowing visitors to be up to date with the latest content that you provide, assuming that it is fitted to this presentation style. Since my BNR exchange rates page was this kind, I pursued in adding a Webslice especially for it.

Adding a webslice to your website is simple. After you read the main specifications or my previous article, you’ll understand the concept behind: first you signal to the browser that you have a special part of your website by setting to a container element the class “hslice”:

<div id="BNRExchange" class="hslice">
  <div style="display: none" class="entry-title">
    <img id="image" alt="Radu Poenaru's weblog gives you BNR Exchange rates" src="http://www.radupoenaru.com/bnr/images/radupoenaru.jpg" width="128" height="128" />
    <p>
       Cursul oficial BNR
    </p>
  </div>
  <p>
    <a style="display: none" href="http://www.radupoenaru.com/bnr/bnr.php" rel="entry-content">
    <a style="display: none" href="http://www.radupoenaru.com/bnr/bnr.php" rel="Bookmark" target="_blank">
    <span style="display: none" class="ttl">5</span>
  </p>
  <div id="updateTrigger" class="entry-content" runat="server" />
........ your content that you want surrounded by the green webslice part ..............
</div>

The id of the container must be the same for all the container who contain the same information – as in my case, the graph of the exchange rates must have the same Id on every page.

Very important to add is the link to the actual page who will generate the content, in my case a php file. Thus, you’re not obliged to use Microsoft’s languages, like C# or VB, but you can use anything – from plain HTML, JavaScript, PHP, Ruby on Rails – just to mention few.

Then you have to specific the refresh period of the page by using the ttl class, set at 5 minutes intervals in my case.

Another very interesting thing on this technology is that you can surround content with it, making clear to the user what he will use if he wants that Webslice’s content.

Post from: Radu Poenaru's Weblog

How to add a Webslice

From time to time, you’ll need to get a backup of your MySQL database and install it on a different machine – as I needed when reinstalling my Windows 7. I wanted to do something simple, as the last time. But now the database sql file is 11 Mb as opposed to merely 2 MB last time.

But I thought that this would be a breeze for the MySQL interface that I use and enjoy – HeidiSQL. It’s free, easy to use and user friendly. I personally don’t like too much the phpMyAdmin interface from the Vertrigo webserver installation that I use for local development.

After starting the import, I was happy – the HeidiSQL app runned so fast for the first 5000 statements … but wait! Starting with the 7000, it became very slow – probably no memory flush for queries ?

After waiting an hour and half, it got to around 7500 statements. Eager to start, I looked for a faster solution – the command line for importing large files. You’ll find out that in MySQL bin folder there is the core of the server : mysql.exe. You can call it with parameters, instructing it what to do.

After reading some help, I realised that what I looked for was :

mysql -u username -p database_name < textfilewithsqlstatments.sql

So you’ll have to provide the username for connecting to database – be careful to have enough rights to create tables, insert records and so on. Next, the database in which you want to import the content of the textfilewithsqlstatements. For Linux users, be careful to also check for any case sensitive issues that might appear.

Also be very careful with the less than sign. Less than means import, while greater than means export!

After pressing return key, you’ll be prompted for the password associated with the username provided. Then the import will start and everything is imported in MySQL, assuming that you didn’t misspelled or did some errors, case in which you might want to read again this post.

Enjoy!

Post from: Radu Poenaru's Weblog

WordPress – Database backup and restore

Cursul oficial BNR

5

You might ask: what is a Webslice? It is a chunk of information, allowing you to stay up-to-date with the latest news without actually needing open a website. They are added to special toolbars (special because they usually require a specific version of a browser, like IE 8). But otherwise, the content inside itâ??s just plain old HTML. When a WebSlice is added to the toolbar, it will be represented as a clickable drop-down area, allowing you to click on it and then see a specially designed small-scale version of the website. For example, my website provides a webslice for BNR exchange rates , allowing you to keep up with latest information available.

Usually, while hovering to an area webslice-enabled, the browser will show a specific icon â?? developed by Microsoft and symbolizing this technology. There are few design guidelines that you need to follow, quoted from Microsoft website :

• The icon must be used in its entirety as shown in these guidelines.
• The icon must appear by itself with minimum spacing (25% the height of the icon) between each side of the icon and any other graphical or textual elements.
• The (green) color version of the icon is recommended. If the color version is not practicable, you may use a black & white version of the icon.
• The icon may not be distorted, warped, or displayed in any aspect ratio except the 1:1 ratio.
• Do not flip or rotate the icon.
• Do not use the icon as a repeating pattern or background element.
• The icon must be represented at 100% opacity.

Today, it is unimaginable that a Web site not to provide content updates through Really Simple Syndication (RSS) news feeds. This feature, that became quite obsolete yet omnipresent, requires a Web site to duplicate some content as a special XML file in a certain standardized format, called a feed. To this feed a news reader application can attach, download and check for updates. Opposite to this, a Web Slice enables users, in my case, to subscribe to exchange rates directly within a Web page . Thus, a separate feed file is not required. This way, users can monitor the content changes and view only the important, the updated part of the Web page on which they are interested on directly from the Favorites bar (the improved Links toolbar) of Windows Internet Explorer 8.

The draw back is that Firefox doesnâ??t know by itself to read these Webslice, thus it requires a plug-in to do this.

Post from: Radu Poenaru's Weblog

Add Webslice to your website

This is the second part of managing WordPress feature of post revisions, for the  users who had disabled or turned off post revisions tracking or versions history feature. As you already know, this feature exists in WordPress (starting with WordPress 2.6). After disable it (of course, if you really need to do that), it also make sense to also delete and remove all existing stored post revisions. By doing so, you’ll remove changes made on pages stored in the database such that you’ll slim down the wp_posts table size´. This is  especially recommended when there is already lots of revisions or changes inside.

For this process , you will get your hands dirty in some SQL statements. For doing that, you’ll need to delete and remove all existing post revisions (not all posts!)entries from WordPress database Posts table. We’ll start simply, by logging into MySQL command-line interface, phpMyAdmin, SQLyog or other MySQL GUI tool. Next, select the respective WordPress database (just in case that you have on the same server more than one database).

First time when I looked into this matter, a simple sql statement like the one below will do the trick.

DELETE FROM wp_posts WHERE post_type = "revision";

But hey, there are other information associated with this table, how I later found out, stored in other tables, eating space also in other areas of database.

Then I found out that all you have to do is to issue the next command (found on Andrei Neculau’s website and modified a little by me for better visibility). But before is highly recommended  to backup the database before performing the deletion SQL statements:

DELETE P,TR,PM
  FROM wp_posts P
    LEFT JOIN wp_term_relationships TR ON (P.ID = TR.object_id)
    LEFT JOIN wp_postmeta PM ON (P.ID = PM.post_id)
WHERE P.post_type = 'revision'

After all post revisions are deleted, the users will no longer be able to verify the changes by phase or diff between versions. Thus, this process can be used also by an admin in order to ensure privacy or not letting authors or writers in the blog knowing their posts have been edited.

Post from: Radu Poenaru's Weblog

WordPress – How to Delete Existing Post Revisions