nooshu - Matt Hobbs' Web Development Blog

Kneeling on the shoulders of giants

Category: PHP

Posts about the Hypertext Preprocessor and its usage.

WordPress plug-ins and svn:externals

So last week I decided to play with the post-commit hook in Subversion which allows you to easily update your WordPress install after committing changes to your repository. After some trial and error this works perfectly. One issue you may run into with WordPress when it’s committed to SVN is using the auto-update plug-in function.

Committing your plug-ins to SVN tends to break this (very cool) auto-update functionality. SVN adds a hidden “.svn” directory to each directory you commit. WordPress auto-update tries to delete the updating plug-ins folder before downloading and extracting the new version into the “wp-content/plugins directory”. WordPress isn’t able to delete the “.svn” directories so the auto update process fails, leaving you without the plug-in you were trying to update (since it deleted it before failing).

So what’s the solution? Well you could download the latest plug-in version and manually extract / commit it to your repository; but that’s too long winded (and boring). The ideal solution lies in the use of the svn:externals property. It allows you to attach an external repository location to a folder in your own repository. Since all WordPress plug-ins are hosted in the WordPress repository you can update all your plug-in’s directly from there with a quick “SVN Update”! Perfect!

You can do this via SSH and the command line or you can do it via a SVN client with a GUI (I use TortoiseSVN). I’ll be showing you how to do it via the GUI.

First you need to remove the plug-in you want to update from your repository if it’s been added. This may seem a little strange as you are trying to update it; but we need to update from an external repository and if a version already exists it will fail:

Delete the plug-in you wish to update

Delete the plug-in you need updating from the repository first

Next you need to setup your svn:externals property on the “wp-content/plugins” directory via the properties menu:

tortoise properties menu

Edit the properties on the 'plugins' directory.

Now for the tedious bit. For all the plug-ins you want SVN to auto-update, you will need to find the WordPress repository URL for. So for the example, to update Akismet and All in One SEO pack you will enter the following:

1
2
akismet http://plugins.svn.wordpress.org/akismet/trunk/
all-in-one-seo-pack http://plugins.svn.wordpress.org/all-in-one-seo-pack/trunk/
Using Tortoise SVN externals

Add the plug-in repositories to the externals properties, one per line.

Once you’ve added all the plug-ins you want to auto-update (remember to remove them first if they already exist in your repository!) commit your changes. Then watch the magic happen via an update:

Updating WordPress plugins directly from the repository

Plug-ins checked out from the WordPress repository.

Akismet and All in One SEO Pack have been checked out from the WordPress repository trunk. Every time you do an update SVN will check for new versions of the plug-ins. Great stuff! There is a slight warning with checking out from trunk; the developer could be working on a new release and unfinished code may have been committed, so the plug-in may be broken if updating from trunk! To get around this you may want to checkout from the plug-in tags (final versions) instead. To do that change the repository URLs to:

1
2
akismet http://plugins.svn.wordpress.org/akismet/tags/2.4.0/
all-in-one-seo-pack http://plugins.svn.wordpress.org/all-in-one-seo-pack/tags/1.6.9/

Unfortunately this will involve changing your svn:externals property every time a new version of a plug-in comes out, but it’s less likely your plug-ins will break. Note: Remember to replace the tag version number with the latest version.

I hope this little tip helps you streamline your deployment!

P.S. On a side note, if anybody knows how to auto update from a tag automatically please leave a comment, I’d love to know if it’s possible.

Page not found with custom post types

Just a quick post on a very frustrating problem I was having with WordPress and the new custom post types introduced in version 3.0. Everything was rolling along smoothly until it came to actually viewing one of the custom posts… 404 error. Weird, maybe a .htaccess issue… nope that’s all good, spelling error.. nope. Long story short, this tinkering went on for a good couple of hours and the problem wouldn’t go away…. cry! I tried everything I could think of but nothing helped. I could view the post pages with permalinks turned off, but it failed with them turned on.

After hours of frustration I stumbled upon a similar forum post with the answer:

1
flush_rewrite_rules( false );

Hours of frustration over such a simple fix. Sods law I guess. Add this code to the function you use to register your custom post type like so (usually in your themes functions.php):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function post_type_myposttype() {
    $labels = array(
        /* Labels here */
    );
     
    register_post_type(
        'myposttype',
            array(
                'labels' => $labels,
                'singular_label' => __('My Post Type'),
                /* More settings etc */
                'rewrite' => array('slug' => 'custom-post-slug'),
                'query_var' => false,
                'supports' => array(
                    'title',
                    'editor',
                    'author',
                    'thumbnail',
                    'excerpt',
                    'custom-fields',
                    'revisions')
    ));
    /* IMPORTIONT: Remember this line! */
    flush_rewrite_rules( false );/* Please read "Update 2" before adding this line */
}
//Initialise custom post type
add_action('init', 'post_type_myposttype');

No more 404 errors! Huzzah! One last tip: make sure you turn off any caching plug-ins (DB-Cache reloaded, Hypercache etc) before you start redeveloping your WordPress blog. Yes I made that mistake too! Yesterday evening is one I wish to forget…

Update: If you are adding custom taxonomies to your post types you may need to add the flush rewrite rules to the function when you initialise them:

1
2
3
4
5
6
function create_custom_taxonomies(){
    register_taxonomy('taxonomy1', 'posttypename', array( 'hierarchical' => true, 'label' => 'Taxonomy1'));
    register_taxonomy('taxonomy2', 'posttypename', array( 'hierarchical' => true, 'label' => 'Taxonomy2'));
    flush_rewrite_rules( false );/* Please read "Update 2" before adding this line */
}
add_action('init', 'create_custom_taxonomies' );

Update 2: Adding flush_rewrite_rules in the places mentioned above will force a flush for every page load. This is bad! For a better solution see Kens comment below.

Alternatively you could add the flush_rewrite_rules where suggested and reload your page; this will flush the rewrite rules and fix the 404 errors. Remember to remove or comment out the flush_rewrite_rules line after as it’s no longer needed! Thanks Ken for this update.

Adding a custom header image to your WordPress theme

Every new iteration of WordPress (version 3.0.1 at the time of writing) brings a host of new features and bug fixes. One feature that I completely missed in 3.0 was the new custom header functionality. Before 3.0 it would be a case of hacking together your own solution using custom fields or using a separate plug-in. Thankfully the WordPress team have added this functionality directly to the core.

It just so happens that I’ve had a request for a customisable header image on an future project, so decided to have a play and see how difficult it is to implement. Well it isn’t difficult at all, very simple in fact.

First you will need to edit your functions.php located in your theme directory. Go ahead and create one if it isn’t in the directory. Now copy and paste the code below into the file. I’ve commented the code but it’s all quite self explanatory. Change the height and width of the image and change the directories where needed.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<?php
//Check see if the customisetheme_setup exists
if ( !function_exists('customisetheme_setup') ):
    //Any theme customisations contained in this function
    function customisetheme_setup() {
        //Define default header image
        define( 'HEADER_IMAGE', '%s/header/default.jpg' );
       
        //Define the width and height of our header image
        define( 'HEADER_IMAGE_WIDTH', apply_filters( 'customisetheme_header_image_width', 960 ) );
        define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'customisetheme_header_image_height', 220 ) );
       
        //Turn off text inside the header image
        define( 'NO_HEADER_TEXT', true );
       
        //Don't forget this, it adds the functionality to the admin menu
        add_custom_image_header( '', 'customisetheme_admin_header_style' );
       
        //Set some custom header images, add as many as you like
        //%s is a placeholder for your theme directory
        $customHeaders = array (
                //Image 1
                'perfectbeach' => array (
                'url' => '%s/header/default.jpg',
                'thumbnail_url' => '%s/header/thumbnails/pb-thumbnail.jpg',
                'description' => __( 'Perfect Beach', 'customisetheme' )
            ),
                //Image 2
                'tiger' => array (
                'url' => '%s/header/tiger.jpg',
                'thumbnail_url' => '%s/header/thumbnails/tiger-thumbnail.jpg',
                'description' => __( 'Tiger', 'customisetheme' )
            ),
                //Image 3
                'lunar' => array (
                'url' => '%s/header/lunar.jpg',
                'thumbnail_url' => '%s/header/thumbnails/lunar-thumbnail.jpg',
                'description' => __( 'Lunar', 'customisetheme' )
            )
        );
        //Register the images with Wordpress
        register_default_headers($customHeaders);
    }
endif;

if ( ! function_exists( 'customisetheme_admin_header_style' ) ) :
    //Function fired and inline styles added to the admin panel
    //Customise as required
    function customisetheme_admin_header_style() {
    ?>
        <style type="text/css">
            #wpbody-content #headimg {
                height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
                width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
                border: 1px solid #333;
            }
        </style>
    <?php
    }
endif;

//Execute our custom theme functionality
add_action( 'after_setup_theme', 'customisetheme_setup' );
?>

By adding the code above you will now see a new option under “Appearance” in the admin panel called “Header”. From there you should be able to see all the images and options we just set in the functions.php file. The only thing left to do now is add the header image to the theme.

Where you place the following code will be depend on your theme setup; I’ve decided to place it in the header.php file as I want the image to appear on every page. You may only want the image to appear on specific templates e.g. pages, archive, category (you could also use WordPress conditional tags to do this).

1
2
3
4
5
6
<div id="header">
    <!-- other header code here.... -->
   
    <!-- This line adds the header to the theme -->
    <img id="headerimg" src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="Header image alt text" />
</div>

And there you have it, one header image that you can customise via the WordPress admin panel. An ID is attached to the image for CSS styling where needed.

The example above is quite a simplified version of the header image functionality. It is possible to place text over the image and even have a different image per blog post by using the custom thumbnail functionality, but these are beyond the scope of this blog post. Copy & paste and enjoy!

Drupal Love! Stuff I’ve learnt!

I created a post a couple of months ago about how I was learning Drupal for an up and coming project; well that project finally went live this week. Huzzah! It wasn’t all smooth sailing; there was lots of trial and error, head scratching and a few mini panics, but I got there in the end. It’s amazing what you learn over the course of a project. Any future Drupal projects will be so much quicker and easier to setup due to the fact that I now actually know how to use Drupal!

So anyway here are a few things I learnt along the way:

  • There are some very simple yet powerful templating rules you can use to style your website. Learning how they work will really help you style specific pages and blocks.
  • Looking for some functionality that is missing by default? I bet there’s already a module that does the job. Check out Drupal modules, this excellent website lists and rates thousands of Drupal modules which you can install and use.
  • If you do find a module that adds the functionality you need, double check that there aren’t other modules about that do it better. Since Drupal has been around for some time, many modules haven’t been updated in quite a while so they may just be occupying the name space. It’s always best to check before you dive into using one particular module as it may not always be the best route to take.
  • Learn how to use the Content Construction Kit (CCK). If you are missing a type of CCK field, look for an additional module; I’m sure there will be one you can install that does the job. You really can make content types do anything you want with CCK.
  • Learn how to use the Views module. I really can’t express this point enough. The Views module is without a doubt one of the most powerful additions to any CMS I’ve ever come across. With it you can take any content and display it however you like on a page. The layout is a little intimidating at first, but once you get your head round it you will have a dynamic site up and running in no time at all.
  • Install the ImageCache module. It ties in with both CCK and Views allowing you to upload and display images on your site however you need to. If you add a new image preset the module will automatically iterate over old images so you never have to go in and manually adjust images if you change your site design / functionality.
  • One thing I missed from Drupal was the ability to add parent / child nodes. Luckily theres a module called Node Hierarchy that will add this functionality. It even handles the breadcrumbs and Views for you. Note: Make sure you don’t have ‘Taxonomy breadcrumb’ enabled with Node Hierarchy as the breadcrumbs won’t work. I learnt that the hard way!

Hopefully other budding Drupal users found the tips helpful. I’m still a Drupal novice, but now I know the basics the site possibilities are endless.

Looking for a new CMS for small websites

Recently I’ve been looking at other small CMS solutions for future projects. For a while now I’ve been using Frog CMS; unfortunately development seems to have stopped which is a shame. At the weekend I stumbled across quite a major security concern with Frog involving a Cross-site request forgery (CSRF). Using Google it is even possible to find ready to be used scripts (which I won’t link to here). Being hacked using CSRF is unlikely to happen as it requires a user who regularly uses the site to click on a rogue link, but even so it’s quite concerning.

Now I could keep using Wolf CMS (which is a variation on Frog) but my thoughts are why keep all your eggs in one basket. If Frog is vulnerable then its likely that Wolf will be too. So time to look about for a new small CMS.

The CMS will be used for very small websites (5 – 20 pages) where MODx, Drupal and WordPress are just overkill; It gets updated regularly and is based on PHP / MySQL. I’ve been having a search and have found a few that look really promising:

Textpattern

Very clean looking CMS (love the typography on its homepage… not that it matters) and having tried the demo I can see the admin interface is simple to use and all the features are easy to find. I think the admin area needs a little work in terms of design, but the comments on Opensourcecms all seem to be very positive so I’ll definatly be installing it locally and having a closer look.

Text pattern homepage

A flexible, elegant and easy-to-use CMS. We shall see!

Concrete5

Another interesting CMS, the video on the homepage makes it look like some sort of action movie, maybe a little over the top but whatever. I was unable to find a live demo of the CMS unfortunately, but the screencasts from the video looked very promising. There’s also an option of Concrete5 hosting the CMS, which removes the (sometimes) tricky setup process; great for non-technical people.

concrete5 homepage

Dramatic homepage video, but how well does it work? Live demo please!

CMS Made Simple

Of the new CMS’ I’ve looked at CMS Made Simple is my favorite. The live demo looked good with a very intuitive administrator area. Some of the comments on Opensourcecms were quite negative; so I’ll have to do some testing of the installation and template system before I commit to building a live site with it.

CMS Made Simple homepage

Some negative comments but it looks very promising.

For my next small project I’ll be using one of these small CMS’, but which one will it be? When i decide I’ll be sure to update you. Got any other suggestions? Why not leave a comment.

Currently on page 1 of 41234