The problem…

Recently though, I found out that within WordPress you can also leave comments on images as well as Posts. It came to my attention through a test blog that I have setup. I use this test site as a “staging server” when I’m making the final touches to a clients website, prior to cutting it across to their “live” domain. It allows me to show the client the finished product with all their content and allows them to check for any last minute revisions. Most of the time Comments are normally Disabled through the Dashboard Settings option (Settings > Discussion > Allow people to post comments on new articles) however recently I started receiving Spam Comments on images themselves. This was happening even though Comments were disabled. It seems that even if your WordPress blog is configured to not allow comments, depending on your theme, it may still be possible for someone to post comments via one of your images.

The solution…

To get around this, you will need to create an attachment.php file for your theme, if it doesn’t already have one. If one does exist, WordPress will use your attachment.php file when viewing a single attachment, such as an image. Since all themes are different, I’ll show you how to make the modifications to the standard Twenty Ten theme that comes bundled with WordPress.

At around Line 111 in the attachment.php file that is included in the Twenty Ten theme, you should see a line that calls the comments template. It will look like this…

<?php comments_template(); ?>

To avoid having comments posted on your images when you’ve disabled them, simply replace this line with the following…

<?php if (comments_open($post->post_parent)) {
   // Only show the Comments Form if the parent post has comments open
   comments_template();
} ?>

The If statement in the first line checks the Parent Post to see if comments are allowed and if so, will then call the comments template. If comments aren’t allowed, the comments form wont be displayed. The second line is simply a std PHP code comment and can be removed if you’d prefer. Personally though, I like to keep my code well documented.

Of course, if you’d rather not have comments posted on images (or any attachments), then you could also simply comment out or remove the call to the comments_template() function all together, from your attachment.php file.

If your theme doesn’t have an attachment.php file, you will need to create one. The simplest way to do this is to start by duplicating (& renaming) your single.php file and then adding in the extra functionality as per the attachment.php file included in the Twenty Ten theme.

I know that I’ll be including an attachment.php file in any themes that I create from now on. Leave a comment and let me know if this has helped you.

The only catch of course, is that your theme needs to support this new feature. Fear not though, as you’ll see here, it’s extremely easy to implement into your existing theme.

Step 1: Register your menu

The first thing you need to do is to register your menu so that you can use it within your theme. There are two functions you can use, depending whether you’d like to register just one menu or multiple menus.

To register a single navigation menu, use:

register_nav_menu( $location, $description );

$location is the slug name
$description is the label used within the Dashboard

To register a multiple navigation menus, use:

register_nav_menus( $locations = array() );

$location is an array of menu slug names & labels

Within your functions.php file, add the following code to register your menu. To ensure backwards compatibility for earlier versions of WordPress, verify the function exists prior to usage by calling function_exists().

if ( function_exists( 'register_nav_menu' ) ) {
	register_nav_menu( 'main-menu', 'Main Menu' );
}

Step 2: Displaying your new menu

There are two ways that you can display your navigation menu within your theme. You can either add the menu directly into your theme code using the wp_nav_menu() function, or you can add the menu by using the new Custom Menu widget.

Using the Custom Menu widget

Provided your theme allows for widgets, simply drag the Custom Menu Widget across to one of your sidebars. You can then give it an (optional) Title as well as selecting your menu from the drop-down list. The name that appears in the list will be the label that you used in the call to register_nav_menu().

Using the wp_nav_menu function

If you’d like more control over your menu, you can use the wp_nav_menu() function. The simplest form is to simply call it without any arguments, by adding the following code to your theme wherever you’d like your menu to appear.

<?php wp_nav_menu(); ?>

For even more customisation, the following arguments are available to use:

• $menu: (string) The menu that is desired; accepts (matching in order) id,  slug,  name
• $container: (string) Whether to wrap the ul, and what to wrap it with
• $container_class: (string) The class that is applied to the container
• $container_id: (string) The ID that is applied to the container
• $menu_class: (string) CSS class to use for the ul element which forms the menu
• $menu_id: (string) The ID that is applied to the ul element which forms the menu
• $echo: (boolean) Whether to echo the menu or return it
• $fallback_cb: (string) If the menu doesn’t exists, the callback function to use
• $before: (string) Output text before the link text
• $after: (string) Output text after the link text
• $link_before: (string) Output text before the link
• $link_after: (string) Output text after the link
• $depth: (integer) How many levels of the hierarchy are to be included where 0 means all
• $walker: (object) Custom walker object to use
• $theme_location: (string) The location in the theme to be used – must be registered with register_nav_menu() in order to be selectable by the user

For our particular menu we want to specify the menu that we registered earlier (main-menu). We also want to specify the  containing class for the menu. Within your theme files, wherever you’d like your menu displayed, add the following code.

<?php wp_nav_menu( array( 'menu' => 'main-menu', 'container_class' => 'nav' ) ); ?>

Step 3: Setting up your menu within the Dashboard

After you’ve updated your theme files, the next task is to actually set up your menu within the WordPress Dashboard. The Menus option can be found within the Appearance section of the left hand navigation. Once you click this, you should be presented with something similar to the image below…

3.1 Select your menu

Section (a) is where you select your menu that you’d like to use. The only menus displayed are the ones that you’ve registered within your functions.php file.

3.2 Specifying custom links

If you’d like to specify a custom link, as opposed one of your existing Pages, simply enter the URL and a menu label into Section (b). Once you click the Add to Menu button, your new menu item will appear in Section (e).

3.3 Specifying a page link

Most times you’ll simply want your menu items to link to Pages that you’ve created. Section (c) allows you to select which pages you’d like to link. Simply tick the appropriate checkboxes and then click the Add to Menu button.

3.4 Naming your menu

Enter in an appropriate name for your menu in the Menu Name text field in Section (d). This name should match the name that you’ve used when registering your menu in the functions.php file which in turn matches the name used in the wp_nav_menu function, without the hyphens. In our case the menu name would simply be Main Menu.

3.5 Fine-tuning your menu options

Section (e) is where all your menu items will be listed. Clicking the small down arrow next to each menu item will display the individual menu options shown above. Each of the menu items can be easily dragged into a more appropriate order if so required. Also, if your menu is going to be a dropdown menu, then you can also drag the items onto each other so as to form a hierarchy.

If you find that not all the above menu options are displaying such as CSS Classes or if the Custom Links section is not displayed, for example, then click on the Screen Options link at the top-right of the Dashboard. You will be presented with a configuration panel where you can specify what options are displayed.

Simply tick the options that you’d like to appear. For example, ticking the Posts checkbox will allow you to add your Posts to your menu in the same way that you add your Pages. If you’d like to be able to specify a particular class for an individual menu item, tick the CSS Classes checkbox. This is handy if your dropdown menu requires you to add specific classes to the first & last dropdown menu items, for styling purposes.

3.6 Saving your menu

Last but not least, don’t forget to save your menu by clicking the Save Menu button on the far right of the screen (not displayed).

Step 4: Styling your menu

Although I’m not going to go into how you style your menu using css, I would like to point out one handy feature of this new menu system. You can use the current-menu-item class to style the menu option of the currently selected page. This allows you to highlight or identify the individual menu item associated with the page that is currently being viewed. As an example, the following CSS could be used to style our current menu item. Since I specified the container_class as nav when I originally set up the menu, I need to include this class as part of the css.

.nav li.current-menu-item a {
        font-weight:bold;
	color:#0082c8;
}

This should give you enough information to add a WP3.0 custom menu to any of your themes. It’s a great feature for this new version of WordPress and one which I’ll be using quite frequently from now on.

Have you implemented this new menu feature in your theme? Are you planing on using the new menus feature? Leave a comment and let me know. I’d love to hear.

Next up, I tested the site to see if it was up and running ok. On the surface things looked fine but then I noticed that when I tried to type in a URL without the trailing forward-slash (‘/’), the page wouldn’t appear. Normally, depending on how you’ve configured your Permalinks, it will simply add the trailing slash automatically. Instead, all I got was a blank white screen starring back at me. Needless to say, a few expletives were uttered!

I tried thinking back to when everything seemed to be working fine. I also tried to remember what changes I’d made the day before. From memory, it was mainly some CSS updates to change links colours. There were no major code updates from what I could remember. I also couldn’t work out why the URL’s weren’t being processed correctly. After doing some Googling, I decided to raise a (low priority) support ticket with my hosting provider to see if any server changes had been made within the last few days. It was as if the .htaccess rules weren’t being obeyed. Good and bad news. The good news… no changes had been made to the server. The bad news… this didn’t get me any closer to resolving my issue.

The next step was to try changing to the default WordPress theme and do some testing. Things seemed to improved after changing themes. I could save my pages consistently. I could log in and out of the Dashboard without a problem. Even the URL’s worked fine, with or without the trailing slashes. Hmmm It would appear that the culprit was my own theme, which I’d been lovingly hand crafting. Next test was a restore from a backup of my theme. Luckily I’m quite strict at performing backups. I perform a backup of my workstation and my development server every couple of days, with the files kept on a separate hard drive. I rotate between 4 different sets for each machine. I restored the oldest backup which was just over a week old. Sure enough, everything worked fine. The next backup I tried was one from only two days prior. This also worked fine. Things were starting to look up! What this meant was that I’d narrowed it down to being caused by the changes that I’d made the previous day.

I now needed to compare the latest version of my code (the one with the problems) to the version from two days prior. I downloaded and installed WinMerge, which is an extremely handy Open Source differencing and merging tool (for Windows). Luckily there weren’t too many files changed. As mentioned earlier, most of the changes were in my main stylesheet. Starting from a copy of my restored (working) theme, I slowly started to integrate the changes that I’d made the previous day. Most seemed fairly mundane. A few CSS changes and some very minor code updates. I then got to my functions.php file. I incorporated the changes and lo and behold, things broke immediately. Yay!! I’d found the damn file that was causing all my problems! Now it was simply a matter of narrowing down the exact cause.

Looking through the code reminded me of the changes that I’d made. I’d added a few comments to the code to document a couple of the functions (Silly me, I know! Real developers don’t document code!!). The other thing I’d done was to add a blank line in between where I’d closed a PHP tag and opened up the next one. The code snippet is question looked like this…

You’ll notice that between the closing PHP tag and the following opening tag, there’s a blank line. Gasp!! This is what was causing all the drama! The solution was to simply remove the offending blank line. In fact, since I was simply closing the PHP tag and immediately reopening it, I could easily omit both of them. The resulting code looked like…

As for the problems that it caused, well there were quite are few.

URL’s weren’t processed properly

Since my Permalinks were setup using the format “/%year%/%monthnum%/%postname%/“, the posts wouldn’t display properly if they didn’t have the trailing slash. Normally, this is something that is handled by your .htaccess file. Instead, I was simply receiving a blank page unless I specifically had the slash on the end of the URL.

Strange content appearing

This was a strange one. As you can see in the image below, characters such as quotes and apostrophes were being rendered incorrectly. You’d think this was because their was some ‘strange’ characters stored in the database, but nope, it displayed perfectly fine once functions.php was fixed.

Blank lines appearing at top of document source, before the DOCTYPE

One of the repercussions of the blank line “incident” was that it caused blank lines to appear before the DOCTYPE within the html. This can cause problems with your RSS feed, in particular with Feedburner. Blank lines (outside of PHP tags) in any of your page templates can also cause the same problem, so I made sure I thoroughly checked those as well.

Problems in the WP Dashboard

As mentioned above, one of the first things that alerted me to the problem was my administration dashboard becoming unstable. I found that whenever I tried to save some content changes, the page wouldn’t refresh. Also, I couldn’t even log out of the WordPress Dashboard. I was able to browse through the various menu options within the Dashboard, but when it came to performing an action such as saving a page, that’s when the problems surfaced.

Due the the ‘strangeness’ of some of the problems, this was one bug that took a while to track down. Thankfully though, it’s all fixed now. It’s certainly something that I’ll be more mindful of in the future when I create themes.

Have you come across this problem or any other strange issues? I’d love to hear, so feel free to leave a comment

Since WordPress is so configurable, it’s possible to have multiple sidebar columns defined such as when you have multiple page templates set up. For example, you may have a specific page template defined for your sites static homepage. As well as defining the body content for that page, you can also define a separate sidebar in case you would like it to appear differently from the rest of the site.

It’s also possible to register multiple sidebars that contain all the widgets. This latter sidebar is what we’ll be discussing here. A typical WordPress theme may only have one sidebar configured although it’s not uncommon to have 2 or 3 or even more. Even though it’s called a “sidebar” it doesn’t need to specifically reside in the sidebar of your website. You can add a “sidebar” to anywhere in your site you want to display your widgets. A common place to include them is the site footer.

Defining your new sidebar

Adding additional sidebars to your site is relatively easy. Within your functions.php file you will most likely have something similar to the code below, for your existing sidebar.

<?php

if ( function_exists('register_sidebar') ) {

   register_sidebar(array(
   'before_widget' => '<li id="%1$s" class="widget %2$s">',
   'after_widget' => '</li>',
   'before_title' => '<h2 class="widgettitle">',
   'after_title' => '</h2>'
   ));

}?>

To add another sidebar you simply need to register another instance. If you are registering more than one, then you will also need to name them. Change your functions.php file to look like the following. Take care to add in the extra line that specifies the name of your sidebar. Once these are functions are defined, you will notice the extra sidebar appear in the WordPress Dashboard under the Appearance > Widgets option. It’s here that you can drag and drop all your widgets into your various sidebars.

<?php

if ( function_exists('register_sidebar') ) {

   register_sidebar(array(
   'name' => 'sidebar 1',
   'before_widget' => '<div id="%1$s" class="widget %2$s">',
   'after_widget' => '</div>',
   'before_title' => '<h2>',
   'after_title' => '</h2>'
    ));

   register_sidebar(array(
   'name' => 'footer sidebar 1',
   'before_widget' => '<div id="%1$s" class="widget %2$s">',
   'after_widget' => '</div>',
   'before_title' => '<h2>',
   'after_title' => '</h2>'
   ));

}?>

You can find more details on the various parameters of the above call on the WordPress Codex.

Adding your new sidebar to your template

Within your sidebar.php file, change the call to your existing sidebar to include its name that you defined within the functions.php file earlier.

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar 1') ) : ?>

   <h2>Articles by month</h2>
   <ul>
      <?php wp_get_archives('title_li=&type=monthly'); ?>
   </ul>
   <h2>Categories</h2>
   <ul>
      <?php wp_list_categories('show_count=0&title_li='); ?>
   </ul>

<?php endif; ?>

To add your new sidebar, you can either copy the above code or you can simply copy the following lines. Add these lines to wherever you’d like your new widgets to appear. In this example you can see from the name that I’m placing mine in the footer of my website. As before, don’t forget to specify the correct sidebar name. In the above code, the html that appears between the php statements is what will appear when there are no widgets added to your sidebar. This ‘default’ code can obviously be modified to suit your theme. In the following code, since there is no extra html, nothing will be displayed unless a widget has been added into the sidebar within your WordPress dashboard.

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer sidebar 1') ) : ?>
<?php endif; ?>

You will now find that your site has two widgetized sidebars. As mentioned earlier, there’s no reason why you couldn’t include further ones. It’s simply a matter of registering the new sidebar and then including the php to display it, in the relevant part of your site template.

I’ve also published this tutorial on Twitter Study Group. It’s a great place to learn, so check it out.

Thinking of adding more widgets to your WordPress site? Leave a comment and let me know if you found this useful. Thanks

To get the best effect, it’s advisable to use an image that is looking down on your subject. An image such as a busy street scene viewed from a multi-story building or where the camera is above the horizon line, works perfectly. Alternatively, you can also download the image I’ve used in this tutorial.

Step 1: Increasing the color saturation

We’ll start off by increasing the color saturation. This makes the effect more noticeable.

After opening your image, create a new Vibrance Adjustment Layer. You can do this by selecting the half-filled circle at the bottom of your Layers palette or from the Layer > New Adjustment Layer > Vibrance… menu option. The amount you increase the Vibrance & Saturation will depend on your particular image. For this image though, I’ve increased both to +40 to really exaggerate the colors.

Step 2: Adjusting the curves

Next, add a new Curves adjustment layer. Again, you can select this from the half-filled circle at the bottom of the Layers palette or from the Layer > New Adjustment Layer > Curves… menu option. Increase the highlights and decrease the shadows slightly to provide further contrast between the colors. The amount of adjustment required in the curves dialog may vary depending on the particular image used.

Step 3: Simulate the depth of field

The main effect in a Tilt-Shift image is the shallow depth of field. To simulate this, we first need to blur the image. Select your background layer (or the layer that has your image) and press Ctrl-J (Command-J on Mac) to duplicate this layer. If it’s not already, select this new duplicated layer and then select Filter > Blur > Gaussian blur… menu option. Blur your image with a Radius of 4.5 pixels.

With your blurred layer still selected, add a new Layer Mask by selecting the Add Layer Mask icon at the bottom of the Layers palette or by selecting the Layer > Layer Mask > Reveal All menu option. Make sure your Layer mask (not the image) is selected by clicking on it. Select the Gradient Tool and in the options palette, select Reflected Gradient (4th Gradient icon from the left). Also, ensure that the ‘Reverse’ checkbox is unticked. Next, drag the gradient vertically over a small portion of the image. To make sure it’s perfectly vertical, hold down the Shift key while you drag. What you are doing here is creating a mask on the blurred image so that the original image sitting on the layer below, can be seen. Since we only want to simulate a narrow Depth of Field, the gradient should be quite small. It may take a couple of goes to get the correct effect. Once you’ve added your gradient to the Layer mask, you should find that the area you dragged the cursor over will no longer be blurred.

Step 4: Fine tune your image

To ‘fine tune’ your gradient, click the small “link” icon between the image and the Layer mask (in the Layers palette) to turn it off. Making sure your Layer mask is still selected, select the Move Tool and use the Up & Down arrow keys to fine tune the position of your mask. The subject matter of your image will influence where best to position the mask to get the best effect.

Step 5: Grab a coffee

Once you’re happy with the placement of your mask, your image is complete. You can now sit back and contemplate what you’re going to “miniaturise” next

I’ve also published this tutorial on The Web Squeeze.

If you found this tutorial interesting I’d love to hear so please leave a comment. Thanks.