How To Add a Custom Body Class

If you’ve done much theme development, you’ll know how handy it is to be able to add specific classes to the <body> tag depending on which page is being viewed. Since WordPress version 2.8, that’s a simple thing to do. That version added a function called ‘body_class()‘ which, used in conjunction with the correct action, lets us easily add new classes whenever we need them, with a few lines in the theme’s functions.php file.

One of the biggest advantages to using this function/action method is that it keeps the logic out of the header.php template file, giving us cleaner coding in the template, and allowing us to split out appearance/function even more.

Using the body_class() function

Using the body_class() function is easy – write a function to add a class or classes depending on certain conditions, then ‘hook’ that function into the body_class action. (As always, a quick look at the WordPress Codex entry for body_class() can be helpful.)

One note – your theme must be coded to handle the body class function. Check the theme’s “header.php” file, look for the <body> tag. It needs to look like this:

<body <?php body_class($class); ?>>

(i.e., the tag has the call to the body_class() function). If it isn’t there, add it.

## add a custom body class
add_action( 'body_class', 'ilwp_add_my_bodyclass');
function ilwp_add_my_bodyclass( $classes ) {
  $classes[] = 'my-custom-class';
  return $classes;
}

Just adding a class like that wouldn’t do us a lot of good, though. We need some conditions, which we’ll add using WordPress conditional tags.

Adding a class to a specific page by page slug:

## add a custom body class
add_action( 'body_class', 'ilwp_add_my_bodyclass');
function ilwp_add_my_bodyclass( $classes ) {
  if ( is_page( 'sample' ))
    $classes[] = 'my-custom-class';
  return $classes;
}

Adding a class to a specific page by page ID:

## add a custom body class
add_action( 'body_class', 'ilwp_add_my_bodyclass');
function ilwp_add_my_bodyclass( $classes ) {
  if ( is_page( '1' ))
    $classes[] = 'my-custom-class';
  return $classes;
}

Adding a class to a specific category page, by category slug:

## add a custom body class
add_action( 'body_class', 'ilwp_add_my_bodyclass');
function ilwp_add_my_bodyclass( $classes ) {
  if ( is_category( 'custom-category' ))
    $classes[] = 'my-custom-class';
  return $classes;
}

Or, we can get a little more complicated…

Adding a class to specific post, but only if that post is a ‘video’ post (assuming you are using custom post types):

## add a custom body class
add_action( 'body_class', 'ilwp_add_my_bodyclass');
function ilwp_add_my_bodyclass( $classes ) {
  global $post;
  if ( 'video' == $post->post_type AND 'my-post' == $post->post_name )
    $classes[] = 'my-custom-class';
  return $classes;
}

Do you need to drill down to a very specific page/post?

## add a custom body class
add_action( 'body_class', 'ilwp_add_my_bodyclass');
function ilwp_add_my_bodyclass( $classes ) {
  global $post;
  $classes[] = $post->post_name;
  return $classes;
}

You’re really only limited by your imagination when it comes to adding custom body classes. You can use any of the WordPress Conditional tags, you have access to the $post object for specific properties – whatever you want to do, you can probably do.

We’ve MOVED

If you are at all observant, you’ll have noticed that the URL to ILikeWordPress.com has changed to ILikeWP.com.

This is because of a very polite email from Otto at wordpress.org informing me that Automattic is starting to aggressively protect the WordPress trademark.

I’ve put in place automatic redirects, but I’d ask that you update any links pointing to ilikewordpress.com because after the domain expires, they will not work. Thanks.

How to Display Your Post/Page Content in Two Columns

Ok, so life has intruded and I haven’t updated things here as often as I’d hoped.

So here’s a little treat: how to display your content in two columns.

Why should you display content in two columns? Narrower text columns can increase readability, especially if you have a wide ( 600px or more ) content column. There is a lot of discussion out there on the advantages of narrow text columns, give Google a shot if you’re interested.

How to do it? We’re going to use the WordPress shortcode handler, and a little bit of CSS, instead of modifying a theme template. This way, if you WANT two columns, you can have them, if not, don’t. Also, it’s still a little problematic to split a body of text automagically using scripting.

The columns usually NEVER break where you want. Using shortcodes to define the column content allows us to control what goes where.

We could create a plugin for this, but for ease of demonstration, we’ll just put it in the theme’s functions.php file. Note: with some themes like Thesis or Genesis, you may need to add this to a ‘custom’ functions file. Consult your documentation.

We will define two shortcode pairs, [leftcol] and [rightcol]. You’ll start the left column content with the [leftcol] shortcode tag, and end it with the [/leftcol] closing tag. Repeat for the right column. Shortcode tags MUST begin on a new line in your editor, or WordPress won’t recognize them as shortcodes. If you see one of the shortcode tags in your displayed post, that’s probably why.

Here is what the two columns above look like in the post editor:

[leftcol]How to do it? We're going to use the WordPress shortcode handler, and a little bit of CSS, instead of modifying a theme template. This way, if you WANT two columns, you can have them, if not, don't. Also, it's still a little problematic to split a body of text automagically using scripting.[/leftcol]
[rightcol] The columns usually NEVER break where you want. Using shortcodes to define the column content allows us to control what goes where.[/rightcol]

Here is the code:

/**********************
*
* shortcode handler for columnization of project posts
* ex: [leftcol]content here...[/leftcol]
*/
function shortcode_columnize_left( $atts, $content = null ) {
 $content = wptexturize( $content );
 $content = wpautop( $content );
 $content = '<div style="width: 45%; margin-right: 5%; float: left; text-align: justify; ">' . $content . '</div>';
 return $content;
}

/* columnize right inserts 'clear' div after content */
function shortcode_columnize_right( $atts, $content = null ) {
 $content = wptexturize( $content );
 $content = wpautop( $content );
 $content = '<div style="width: 45%; float: left; text-align: justify;">' . $content . '</div><div style="clear: both;"></div>';
 return $content;
}
add_shortcode( 'leftcol', 'shortcode_columnize_left' );
add_shortcode( 'rightcol', 'shortcode_columnize_right' );

We define functions to take the content that is between the shortcode tag pairs, run it through the same filters that WordPress uses for post content, wptexturize() and wpautop(), then spit it out within a div with a width of 45%, right margin of 5%, floated to the left, and the same with the right column but without the right margin. We add a div after the right content with a style of “clear: both” so that the rest of the page content clears the floated divs.

Then we tell WordPress to use our functions when it encounters the [leftcol] and [rightcol] shortcode tags within our post.

Voila, finit. That’s all there is to it.

Simple Link Cloaker Plugin Available for Download

Because some days are better than others, I managed to upload the wrong zip file of the link cloaker plugin. That error has been corrected. This is the correct download link for the Simple Link Cloaker plugin.

It seems that if I had named the Simple Link Cloaker plugin The Fabulous Redirector instead, all would have been well – but the guys/girls that run the WordPress plugin repository didn’t like the term ‘cloaker’. I guess it implies being shady, which we all know is not the intent or use for this plugin.

At any rate, since you can’t get it from WordPress any more, you can get it here: ilwp-simple-link-cloaker. Installation is a snap, if you remember the old way of installing plugins:

  1. download the plugin zip file to your computer
  2. unzip the file into a directory
  3. upload the entire plugin folder to your wp-content/plugins folder
  4. activate through the Dashboard > Plugins interface

Thank you for all of your support!

Fixing the Blank Screen Syndrome on a WordPress Blog

With the advent of WordPress version 3, my most common fixit request has been, “Help! I just see a white screen on my blog!”

I’ll share with you what I’ve found to be the most common cause, but first there’re a few things you can do to at least get back up and running again.

If you have Dashboard access, first disable ALL of your plugins. 9 times out of 10, you’ll see your site reappear.

If you still see just a white screen, the next step is to switch themes. Activate WordPress’s default theme (the twenty-ten theme, now) and check your site again.

If that didn’t fix your problem, you’ll need to start verifying core files and such, or employ the services of a WordPress professional to help you get your site back up and running.

Changing WordPress Auto-Save and Revisions Settings

The WordPress  team did a great and wonderful thing when they included auto-save and revisions for posts/pages. If you’re in a collaborative environment, referring to previous revisions can be a useful tool. And auto-save? If you haven’t had a computer crash in the middle of writing a blog post, you’re probably in the minority 🙂

On the flip side, most of us don’t need to see countless revisions that we may have made. Fix a typo? One more revision. The list can get pretty long.

And really – do we really need an auto save once every minute? I don’t know about you, but I don’t type that fast…

Fortunately, as for most annoyances in WordPress, there is a relatively easy fix for both auto-saves and post/page revisions. You’ll need to edit your wp-config.php file (for those of you who installed WP by hand, that’s the file where you entered your database information).

FTP into your WordPress installation on your server, then download the wp-config.php file to your computer. Immediately, before you do anything else, make a backup copy. Always always always keep a backup copy of files you edit. An error as tiny as a misplaced comma can render your blog unusable.

Changing the AutoSave interval

You’ll need to add the following line to your wp-config.php file:

define('AUTOSAVE_INTERVAL', 180 );  // # of seconds between saves

Change the ‘160’ number to whatever autosave interval you want. I usually use 180, or 3 minutes.

Change the post Revisions settings

Unlike AutoSave, you can actually turn post/page revisions off if you really want to. Or, you can specify the number of revisions you want to keep.

To turn revisions off, add this line to wp-config.php:

define('WP_POST_REVISIONS', false );

If you want to keep revisions on, but limit the number that WordPress saves, use a number instead of the keyword false:

define('WP_POST_REVISIONS', 6);

There. Pretty simple, eh? Save your wp-config.php file, then upload it back to your server. Your changes will take effect immediately.

WordPress Plugins – Using the Options Table Properly

Note: if you’re not a WordPress plugin developer, this probably won’t interest you.

I ran across this again today, hence my rant:

I installed a plugin from the WordPress Plugin Repository ( the place that hosts WordPress plugins so you can download them ), THEN looked through the code. This small specialty plugin added 17 options to the options table!

WP developer peeps, there is no excuse for this. By adding so many options, you clog up the options table. Unless you specify the option as an autoload, you’re using a database read every time you call get_option(). What a waste!

What should you do instead? Glad you asked!

Combine your options into an array. Easy smeasy. WordPress will store your options array as serialized data. Return get_option() to a variable at the start of your script, giving you easy access to all its components.

The WordPress core is getting sizable enough that responsible developers need to optimize their code as much as possible. Eliminating unnecessary database reads/writes is a good first step.

If you need an example, leave a comment and I’ll post one.

EDIT: as requested, here’s a couple of examples. First, what many developers do but shouldn’t:


$myoption1 = "ted";
$myoption2 = "fred";
$myoption3 = "jed";

update_option( 'myoption1', $myoption1);
update_option( 'myoption2', $myoption2);
update_option( 'myoption3', $myoption3);

Notice how the above uses 3 different options: myoption1, myoption2, myoption3. These take up 3 rows in the database, and require 3 different calls to get_option() when the data is needed. Now, 3 isn’t very many – but consider when your plugin uses 30 or 40 different options or presets ( some of mine do ). The potential to clutter up the database and cause a slowdown in your page load times is huge.

Here’s how you should code your options:


$myoptions = array( 'option1' => 'ted', 'option2' => 'fred', 'option3' => 'jed');
update_option( 'myoption', $myoptions );

And that’s all there is to it. The update_option function recognizes that you are passing an array and serializes the values for entry in the database. When you need to retrieve the options, simply call get_option into an array variable, and access from there. One call, 40 options. Lotsa overhead saved 🙂


$myoptions = get_option( 'myoption');

/*
now, $myoptions['option1'] = 'ted', $myoptions['option2'] = 'fred', and so on.
*/

Free Month Web Hosting from HostGator

I don’t put my stamp of approval on too many things, but I do need to tell you about the hosting that I use and highly recommend – HostGator.

I have been on the web for over 10 years now, and seen a lot of hosting companies come and go, and used several. Never have I had the experience that I have had with HostGator. It’s been, in a word, fantastic.

Remember to use the coupon code "ILIKEWORDPRESS" for your first month free!

Support

Number one, their support has been great. I have experienced a handful of isolated problems over the last 3 years I’ve been with them, and all were handled promptly, professionally, and FAST. There’s nothing worse than having a client call in the middle of the night crying, “my site is down!” In those situations, I need the problem handled quickly, and HostGator has never let me down.

Features

What a hosting company can do for me is important. I need technical goodies, I need plenty of bandwidth and storage space, and I don’t need to be nitpicked over how many databases I use. HostGator shines in that department. Unlimited storage, unlimited domains, unlimited bandwidth, unlimited MySQL databases. Of course, ‘unlimited’ doesn’t always mean unlimited. If your account starts hogging server resources, you’ll garner some attention.

That said, I’ve never had it be an issue. On one of my Baby accounts, I run 35 sites. Admittedly, they’re not high-volume super popular sites, but they get their share of traffic.

Special Deal for ILikeWordPress.com readers

HostGator has allowed me to offer you a special deal! Use the coupon code “ILIKEWORDPRESS” and get your first month’s Baby plan hosting for only $0.01!! That’s right – ONE PENNY. How cool is that?

Go ahead and get signed up – click any of the links to go to HostGator, or one of the banners, and remember to use coupon code ILIKEWORDPRESS at checkout for your discount!