Wordpress Logo

Did you know that WordPress sends you emails when you get a new blog comment? I didn’t – because it has never worked for me. But once I knew it was supposed to email me I looked into it and found a fix.

Setup: My setup is running WordPress.org on a Ubuntu 9.04 box called Butterfree with sendmail installed.

The problem was that the Return-Path header in my outgoing mails wasn’t valid which caused some mail recipients to reject the mail, while other less picky ones, accepted the mail fine (e.g. gmail). The Return-Path header that sendmail was using looked something like this:

Return-Path: <www-data@butterfree.bitvolution.com>

I found this by changing the admin email from the one that didn’t work to a gmail one, then posting a test comment on one of my posts. Then I waited for the email to arrive in gmail and selected “show original” from the gmail interface. A quicker way is to check the entries in /var/log/mail.log.

In order to fix the issue, I configured the return path in emails sent from WordPress (i.e. PHP) to something different using the -f parameter for sendmail:

sudo emacs /etc/php5/apache2/php.ini

Find the sendmail_path and uncomment it and add the -f flag:

; -f will set the "return-path" headers.
sendmail_path = /usr/sbin/sendmail -i -t -f sendmail@bitvolution.com

Doing this solved this issue so I now get email about new comments.

My fix feels a bit of a hack. I would be interested in how to solve this problem the right way, so let me know if you can give me some advice. For example, perhaps I should have done something with my DNS settings for my domain?

Wordpress Logo

In WordPress 3.0, my WordPress logo image (on the left) broke. So I opened a bug and six weeks and 100 bug comments later, I have upgraded to 3.01 and it is working again. Thanks guys!

The reason why the logo image was broken was quite interesting(?)… In v3.0 WordPress automatically started auto-correcting Wordpress to WordPress (i.e. Word-lowercase-p-ress to Word-uppercase-P-ress) and because my image file name was called “WordpressLogo_blue-m.png”, the auto-correction was breaking the link. Auto-correction shouldn’t cause links to break and it seems that v3.01 fixes it.

The filter function that does this auto-correction is called “capital_P_dangit” – The WordPress guys are obviously pretty frustrated by this spelling mistake!

Old filter (v3.0):

function capital_P_dangit( $text ) {
       return str_replace( 'Wordpress', 'WordPress', $text );
}

New filter (v3.01):

function capital_P_dangit( $text ) {
        // Simple replacement for titles
        if ( 'the_title' === current_filter() )
                return str_replace( 'Wordpress', 'WordPress', $text );
        // Still here? Use the more judicious replacement
        static $dblq = false;
        if ( false === $dblq )
                $dblq = _x('“', 'opening curly quote');
        return str_replace(
                array( ' WordPress', '‘WordPress', $dblq . 'Wordpress', '>Wordpress', '(WordPress' ),
                array( ' WordPress', '‘WordPress', $dblq . 'WordPress', '>WordPress', '(WordPress' ),
        $text );
}

Wordpress Logo

When I was building the property gallery for greekislandpropertyfinders I wanted to use a fancy javascript image gallery like Galleria, however I came across a problem with Galleria in that it couldn’t display more than one gallery on any page. It’s open-source so I used the source code to help write my own version and turned it into a WordPress plugin with the features I needed.

The plugin isn’t all that generalised, so I’m not sure it’ll be useful to many people but I think it’s a tool worth sharing.

Plugin features:

  • This plugin doesn’t change the WordPress media gallery admin interface – galleries are created and inserted into pages/posts as normal (i.e. using the media upload GUI + the
    [gallery]
    shortcode). WordPress authors won’t need to change or learn anything new.
  • The plugin makes efficient use of WordPress media (no front-end image resizing via CSS!) which means it doesn’t matter if one of your authors uploads a load of 3MB images to a gallery – it’ll still run fast.
  • The plugin doesn’t pre-download images that aren’t needed – it displays a loading spinner image when the user is waiting for a image on load.
  • Should be easy to style the gallery in your own way – uses CSS classes and IDs.
  • The user can click on the main image to cycle through the gallery.
  • Uses jQuery for cross-browser hover fade effects.
  • Small JS footprint: 2854 bytes.
  • Outputs valid XHTML (unlike the default WordPress gallery!).

Screenshot of the plugin:

Screenshot of Bitvolution-image-galleria plugin

Click to enlarge

Demo of plugin: www.greekislandpropertyfinders.co.uk/what-we-are-finding.

Download the plugin from the WordPress.org plugin directory.

Screenshot of problem with too big tag

On this WordPress theme, the sidebar is quite small (only 220px) and the default WordPress tag cloud widget was producing tags that were clipped in a ugly manner. By default, the WordPress tag cloud widget has a maximum font size of 22px so I was looking for a way to reduce it.

Note: If you are not a theme editor, you might find it easier to just install a suitable tag cloud plugin, e.g. Configurable Tag Cloud (CTC).

The WordPress tag cloud widget already allows you to specify various options including the largest font size, e.g. <?php wp_tag_cloud('largest=18'); ?> so we only need to create a new widget that overrides the default widget and then unregister the default widget so there aren’t two widgets with the same name in the “Available Widgets” dashboard page. We can register our own widget using register_sidebar_widget and we can unregister the default tag cloud widget using unregister_widget('WP_Widget_Tag_Cloud');.

This is the code you need – put it in the functions.php file in your WordPress theme folder:

add_action("widgets_init", array('Tag_cloud_withLimitedFontSize', 'register'));

/** Widget - Override the default WordPress tag cloud BUT cap the largest font size to 18 (instead of 22)\
 because at 22 some tags don't fit in the sidebar. */
class Tag_cloud_withLimitedFontSize
{
  function widget($args){
    echo $args['before_widget'];
    echo $args['before_title'] . 'Tags' . $args['after_title'];
    echo wp_tag_cloud('largest=18');
    echo $args['after_widget'];
  }

  function register()
  {
    register_sidebar_widget('Tag Cloud', array('Tag_cloud_withLimitedFontSize', 'widget'));
    unregister_widget('WP_Widget_Tag_Cloud');
  }
}

If there’s a better way to do this, please let me know.

Wordpress LogoToday, I found out about a WordPress plugin called Elastic (http://elastictheme.org/, download link) which is a WYSIWYG theme editor for WordPress.

It looks like a very promising technology to make it easier to develop WordPress themes. I’m interested in re-useable modules so, if I develop something interesting for one client, I can re-use the same something for a different client with 1-click (therefore being able to quote them a reduced price). Plugins and widgets achieve this to some extent but Elastic aims to make the same possible at a more fundamental level.

Wordpress LogoA typical use case for a hidden page might be so you can store your website licensing agreement or image attribution links without having it explicitly in the main navigation links – most folk link to their licensing agreement in the footer.

If you want to have a page on your self-hosted WordPress website that is accessible via a URL but not directly linked or advertised on the site, you have several options:

  1. Use a plugin such as “Exclude Pages“.
  2. If your pages are displayed via a sidebar widget, you can go to the widget settings page in the WordPress admin section and use the “exclude” field to hide a page ID.
  3. Save the page as a “draft” but never publish it. Even though it’s not live, you can still access the page if you type the direct URL to the page. e.g. http://yourblogurl/?page_id=69.
  4. Modify the wp_list_pages function in your current theme:
    • If you know you don’t use any sub-pages on your site, you can hide any page you want by making it a sub-page of the homepage and then display your menu using: <?php wp_list_pages('depth=1'); ?>
    • To exclude a page with id 69, use: <?php wp_list_pages('exclude=69' ); ?> If you do this you can automatically hide additional pages by making them a sub-page of the hidden page.
  5. Create a new file in the theme directory. It will be accessible via http://yourblogurl/wp-content/themes/yourthemename/yoursecretpage.php. If you want to use regular wordpress functions in the secret page, include the following on line 1: <?php require_once(dirname(__FILE__) . '/../../../wp-blog-header.php'); ?>

Note: WordPress does have a “Private” checkbox that you can tick in the visibility section of the publish options. However, private pages will not be accessible via any URL.

If you are making a WordPress theme you owe it to the user of your theme to make sure image alignment works as expected. Most of the Visual Editor formatting buttons use inline CSS which won’t be affected by the theme but this is not the case with the alignment buttons in pages/posts when applied to images.

The red labels show what Visual Editor buttons I’m talking about:

Wordpress visual editor image alignment buttons

Read on…