Customizing Individual Blog Posts, Part 1

Most of my posts have a design like this post: a pic­ture near the top, some text, both at a fixed width col­umn against a white back­drop, same typog­ra­phy and colour scheme through­out. For all the con­ve­nience Word­Press offers to orga­nize and pub­lish web con­tent, the cost is a cer­tain degree of monot­ony in pre­sen­ta­tion. Most of the time this trade off is accept­able. But some­times you want to accom­mo­date an over­size pic­ture, or write a cap­tion in the left mar­gin, or use a dif­fer­ent coloured can­vas. Some­times you want a blog entry to have its own style. To that end, I cre­ated the Week­end Food Blog­ging series to let me exper­i­ment with alter­na­tive lay­outs, colour, typog­ra­phy and, (why not) recipes. Recipes already have a great deal of inher­ent struc­ture — a list of ingre­di­ents, prepa­ra­tion instruc­tions, pos­si­ble vari­a­tions — and so leave you room to focus fully on their pre­sen­ta­tion. Plus, if the cus­tom design doesn’t pan out, then there’s good food to be had.
This approach is not for the timid. But if you get as much sat­is­fac­tion out of design­ing at the post level as I do, then there are ways to min­i­mize the tedious bits through stylesheets, cus­tom fields and user-defined func­tions file. The rest of this post explains just how to do that.

1. First, cre­ate the unique blog post styles.
   So far, I’ve kept nav­i­ga­tional ele­ments such as tags, cat­e­gories and menus con­sis­tent among the design vari­a­tions so that vis­i­tors would not have to re-learn the inter­face. For the <a hget_permalinkosturl id=662]” title=“Chocolate Chip Cookies”>Chocolate Chip cookie recipe I changed the title, the excerpt, the links and added a big cookie to the back­ground. Here is a snip­pet of the CSS that shows the back­ground cookie:

   body.postid-662 {
     background-color:transparent;
     background-image:url('chocolate-chip-cookie.png');
     background-position:right 45px;
     background-repeat:no-repeat
   }

   I use a The­matic, a Word­Press theme frame­work that adds unique post and body classes you can use to eas­ily mod­ify any post through CSS. If you do not, you will likely have to make use of !impor­tant dec­la­ra­tions to con­trol the presentation.

2. Asso­ciate the new styles to the blog post.
   You can sim­ply add these styles to the exist­ing stylesheet. How­ever, that approach for each cus­tom design is a lit­tle tedious com­pared to the alter­na­tive that makes use of Word­Press cus­tom fields. Cus­tom fields let you set up just about any design vari­a­tion within the admin­is­tra­tion panel that you can turn on with a name/value switch. Here I’ve spec­i­fied custom_css as the name and added the cor­re­spond­ing styles as the value. The cus­tom field name/value pair looks like this:
   
   The styles are now part of the post’s meta­data and are avail­able to use in Word­Press theme files. In this case you will retrieve the cus­tom styles in the header.php.
3. Link to the styles in the header.
   While I could have added this func­tion directly to the header.php, I’ve cho­sen to define a sep­a­rate func­tion called custom_stylesheet_head and add it to the functions.php:

   <?php
   // Add custom stylesheet to head
   function custom_stylesheet_head() {
    
     if (is_single()) {
       $css = get_post_meta($post->ID, 'custom_css', true);
       if (!empty($css)) {
         echo '<style type="text/css">'.$css.'</style>';
       }
     }
   }
    
   add_action('wp_head', 'custom_stylesheet_head');
   ?>

   First, the code makes sure we’re on an actual post’s page by using the Word­Press con­di­tional tag is_single(). Then it looks for a cus­tom field custom_css. If one is found, its value is dis­played between <style> and </style> tags.
   The add_action func­tion with the wp_head hook, to call the custom_css func­tion. This tells Word­Press to run the func­tion when­ever the wp_head func­tion is called by the header.php). This approach leaves my theme files in tact, while I tweak with­out risk of over­writ­ing the file when I change or upgrade my theme, and with­out risk of break­ing my theme.

The reward for all this effort is the rel­a­tive con­ve­nience of cus­tom design­ing your next blog post. When you write a post that will receive cus­tom CSS styling, cre­ate the cus­tom field named custom_css and paste your cus­tom CSS styles as a value.