A web developer's blog. PHP, MySQL, Javascript/jQuery, Zend Framework, Wordpress, Code Igniter, Django, Python, CSS and other web development topics.

Unable to update / upgrade anything in WordPress using Auto-Update

You are unable to upgrade automatically your WordPress installation. You are also not able to update your plugins. You have also tried everything to make your connection settings correct and it still does not work.

The reason: Your PHP scripts does not have the permission to write.

To solution: Install suPHP

$ apt-get install libapache2-mod-suphp

Add this in your Apache conf:

suPHP_Engine on

Then:

$ a2dismod php5
$ /etc/init.d/apache2 restart

CHOWN and CHGRP your home directory

$ chmod -R wenbert /home/wenbert
$ chgrp -R wenbert /home/wenbert

Resources: http://www.suphp.org/DocumentationView.html?file=apache/INSTALL

FYI: I am on Ubuntu.

Posted in Uncategorized | Tagged , , | Leave a comment

Ruby on Rails: execjs Javascript runtime error when executing “rails server”

My schedule right now is not very tight and I have a couple of hours free almost everyday. So instead of playing Skyrim, I am learning Ruby on Rails.

I am using RVM (http://beginrescueend.com/) on Ubuntu Ubuntu 10.04 LTS (Lucid Lynx).

Here is the error I get when I try to run “rails server”:

wenbert@ubuntu:~/projects/rails/depot$ rails server
/home/wenbert/.rvm/gems/ruby-1.9.2-p290/gems/execjs-1.2.12/lib/execjs/runtimes.rb:47:in `autodetect': Could not find a JavaScript runtime. See https://github.com/sstephenson/execjs for a list of available runtimes. (ExecJS::RuntimeUnavailable)
	from /home/wenbert/.rvm/gems/ruby-1.9.2-p290/gems/execjs-1.2.12/lib/execjs.rb:5:in `<module:ExecJS>'
	from /home/wenbert/.rvm/gems/ruby-1.9.2-p290/gems/execjs-1.2.12/lib/execjs.rb:4:in `<top (required)>'
	from /home/wenbert/.rvm/gems/ruby-1.9.2-p290/gems/coffee-script-2.2.0/lib/coffee_script.rb:1:in `require'
	from /home/wenbert/.rvm/gems/ruby-1.9.2-p290/gems/coffee-script-2.2.0/lib/coffee_script.rb:1:in `<top (required)>'
	from /home/wenbert/.rvm/gems/ruby-1.9.2-p290/gems/coffee-script-2.2.0/lib/coffee-script.rb:1:in `require'
	from /home/wenbert/.rvm/gems/ruby-1.9.2-p290/gems/coffee-script-2.2.0/lib/coffee-script.rb:1:in `<top (required)>'
	from /home/wenbert/.rvm/gems/ruby-1.9.2-p290/gems/coffee-rails-3.1.1/lib/coffee-rails.rb:1:in `require'
	from /home/wenber

A lot of people have already experienced this error. There is a popular thread for this in Stackoverflow – here. The Original Poster of the thread selected the this answer:

I’m on Ubuntu 11.04. Had similar issues. Installing node.js fixed this for me

https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager

But I think the more appropriate answer is the one by vincent jacquel in this thread.

The Fix

  1. Open the Gemfile
  2. Add these lines:
    gem 'execjs'
    gem 'therubyracer'
  3. Save.
  4. Then run this command: $> bundle after
Posted in Uncategorized | 4 Comments

WordPress: Get post thumbnail of Featured Image

Note: I’m posting this for myself so that I can refer to it in the future.

$cat_id =get_cat_id('Uncategorized');
$query = new WP_Query('cat='.$cat_id.'&year='.$year.'&monthnum='.$month.'&day='.$day);
$image = false;
while ( $query->have_posts() )  {
    $query->the_post();
    the_title();
    $image = wp_get_attachment_image_src(get_post_thumbnail_id($query->ID));
    echo '<a href="'.$image[0].'">';
}

More here for wp_get_attachment_image_src
Related: get_post_thumbnail.

Posted in Uncategorized | Leave a comment

Responsive Barebones (Skeletal) WordPress Theme

Using Skeleton (http://www.getskeleton.com), I managed to come up with a “minimized” WordPress theme.

What is Skeleton?
Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone. More here…

My workflow

  1. Design a layout (Photoshop, etc.). You can use the template found in /templates or download it from http://getskeleton.com/#download
  2. Convert the layout into HTML
  3. Convert the HTML file into a WordPress theme

This theme will come in handy in Step 3. For example, you define the grid layout, columns, text colors, fonts, spacing, etc. yourself.

* Since most of the WordPress theme I created have a horizontal navigation bar, I have included the CSS for #access in style.css
* Also added the image CSS (align right, left, etc) by default.
* This also contains the default CSS for Skeleton.
* When adding images, do not set a specific image size. You can however use percentage.

You can download the theme here: https://github.com/wenbert/Ekini-WP-Skeleton.

Disclaimer: This is a work in progress.

Comments / suggestions are encouraged! ;-)

Posted in Uncategorized | Leave a comment

jQuery: Generic Image Swap

Found this little gem in Stackoverflow.

$(function() {
    $("img")
        .mouseover(function() { 
            var src = $(this).attr("src").match(/[^.]+/) + "over.gif";
            $(this).attr("src", src);
        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("over", "");
            $(this).attr("src", src);
        });
});

Thanks to Jarrod Dixon.

Here is another simpler version.

$(".icons_inner img").hover(
      function(){this.src = this.src.replace("_off","_on");},
      function(){this.src = this.src.replace("_on","_off");
});

You just have to name you email images as “my_icon_on.png” and “my_icon_off.png”. I find this version a lot simpler to implement and debug. Source.

Posted in General | 2 Comments

Wordress: Using custom fields as key to sort queries with meta_query and meta_key

The example shows that I sort posts with custom field “Start Date”. I am using ‘meta_query’ to query the custom fields – you can find out more here.

$args['post_type'] = array('ur_post', 
    'programs_post', 
    'education_post', 
    'blog_post'
);
$args['meta_key'] = 'Start Date';
$args['meta_query'] = array(
    array(
        'key' => 'Start Date',
        'value' => date('Ymd'),
        'compare' => '>=',
        'type' => 'date'
    )
);
 
/*This will sort. Make sure there is no underscore. It's orderby NOT order_by.*/
$args['orderby'] = 'meta_value'; 
 
$args['order'] = 'asc';
$the_query = new WP_Query($args);
 
while ( $the_query->have_posts() ) {
    $the_query->the_post(); 
    $start_date = get_post_custom_values('Start Date', $the_query->ID);
 
    /*var_dump($custom_values);*/    
    if (date('Ymd',strtotime($start_date[0])) >= date('Ymd')) {     
        echo '<div class="event_date">';
        //display date here...
        echo '</div>';
 
        echo '<div class="event_post_time">';
        $start_time = get_post_custom_values('Start Time', $the_query->ID);
        echo $start_time[0];
        $end_time = get_post_custom_values('End Time', $the_query->ID);
        if ($end_time != NULL) {
            echo ' - '.$end_time[0];
        }
        echo '</div>';
    }
}
wp_reset_postdata();
Posted in General | Tagged , , , , , | Leave a comment

HN: Better RESTful approach

Someone (bradgessler) in HN made a very good comment in this thread.

I’m just going to copy-paste everything. Source.

The biggest problem with today’s REST implementations is that they’re essentially a database serialization layer. Consider how a RESTful Rails model is typically represented as:

  {
     book: {
        id:1,
        name:"To Kill a Mocking Bird",
        author_id:2
     }
  }

How do you get more info on the author if you only have this piece of information? Rails/ActiveResource guesses through convention: “/authors/2″, but that might not be the case, which makes this approach very brittle.
A better more “RESTful” approach might be:

  {
     book: {
        href:"/books/1",
        name:"To Kill a Mocking Bird",
        author: {
           href:"/authors/2"
        }
     }
  }

The REST client would then be able to traverse the representation without making guesses at the URL, and if the end-point of ‘/authors:id’ changes for whatever reason, the href would be updated accordingly.
Pagination/large data-sets could be solved as well:

  {
     books: [
        href:"/books/1",
        name:"To Kill a Mocking Bird",
        author: {
           href:"/authors/2"
        }
     }
    ],
    rel: {
       prev: "/books?page=1",
       next:"/books?page=3"
    }
  }

… and a bajillion other common RESTful API problems through better convention.
I’d agree with the author that REST is misunderstood, but my opinion is that its misunderstood on the grounds that today’s “REST” implementations are lame database serializations. The web has been doing this since the <a href/> tag was conceived, but for some reason, modern REST implementations left this out.

Posted in General | Tagged , | 2 Comments

New blog theme

Okay, I just spent a few days coming up with new look for the blog. It is based on the WordPress + Blueprint Barebones/Skeletal (or whatever you call it) theme. This is still a work in progress and if you find bugs/errors, post a comment or contact me ;)

Posted in General | Leave a comment

WordPress: Multi-language translation for your theme

Although, there are more advanced multi-language plugins like qTranslate available, this post will deal with basic translations in your theme. Like for example, if you want to translate a “hard-coded” English strings in your theme.

<h1>Programs</h1>

… translated into French, will display:

<h1>Programmes<h1>

when you have something like http://mysite.com?lang=fr_FR in your URL bar.

Start easy
Let’s start with the simple string above. Instead of directly outputting the string, do it like this:

<?php  
    echo '<h1>'.__('Programs').'</h1>'
?>

So, what does the double underscore (“__”) mean? The double underscore is a GetText call. There are two ways you can do a GetText call, the other way is:

    _e('Programs'); //This echoes the directly to the browser.

We use the GetText call to output the translated strings.

The translated strings
The translation are stored in a .pot file. It is a text file that looks like this:

msgid ""
msgstr ""
"Content-Type: text/plain; charset=utf-8n"
"Content-Transfer-Encoding: 8bitn"
"Project-Id-Version: n"
"POT-Creation-Date: n"
"PO-Revision-Date: n"
"Last-Translator: wenbert n"
"Language-Team: n"
"MIME-Version: 1.0n"

#: single.php:21
msgid "Programs"
msgstr "Programmes"

#: single.php:30
msgid "Contact Us"
msgstr "Contactez-nous"

You can choose to generate this file manually or use this to extract the GetText calls in your PHP files.

Generating the .mo (Machine Object) file
Once you have all the string translations in your .pot file, you will need to generate a .mo file for it. You will need POEdit to do this. It is a simple and straight forward program. You just need to import the POT file and then save it.

Save all of your files inside the “languages” folder inside your theme folder.

/mytheme/
    .. index.php
    .. single.php
    ..archive.php
    ..page.php
    /languages
        ..fr_FR.mo
        ..fr_FR.po
        ..fr_FR.pot

Triggering the translation
Put this code in your functions.php file.

add_filter( 'locale', 'my_theme_localized' );
function my_theme_localized($locale) {
    if (isset($_GET['lang'])) {
        return $_GET['lang'];
    }
    return $locale;
}
 
load_theme_textdomain( 'my_theme', TEMPLATEPATH . '/languages' );

What it does is that if $_GET['lang'] is set in the URL — and let’s say the value is set to “fr_FR” (http://mysite.com?lang=fr_FR), WordPress will look for the “fr_FR.mo” file.

Please note that this post tackles the subject in a VERY rough way. You should read further here and here — both sites were used as reference for this post!

Posted in General | Tagged , , , | Leave a comment

CSS: Simple cross-browser DIV shadows

I am posting this for myself and for my brother, John (haha).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
<style type="text/css">
.Example_F {
 -moz-box-shadow: 0 0 5px 5px #888;
 -webkit-box-shadow: 0 0 5px 5px#888;
 /*box-shadow: 0 0 5px 5px #888;*/
 box-shadow: 0 0 5px 5px  rgba(0, 0, 0, 0.1);
 } 
</style>
<div class="Example_F">
This is a test! We use this!
</div>
</body>
</html>

Source: http://www.css3.info/preview/box-shadow/

Posted in General | Tagged , | 1 Comment

Bad Behavior has blocked 846 access attempts in the last 7 days.