It’s a very popular software platform and while mundane requests aren’t exciting, when you provide good answers you’re helping someone out. That’s a very cool thing. The answers provided there give someone an assist so that they can get out of a hole they put themselves in.

But the most satisfying topic is when someone is asking how to do something and I have to figure it out to support them. Especially when it involves something that I’m not too good at.

I’m a huge fan of child themes and I use them here on this blog. So when someone asked about modifying the Coraline theme, I was curious enough to ask for clarification. When the person explained by example and I saw that it was related to CSS, I got to work.

Using my test installation, I created a child theme for Coraline. I already had a copy of that theme and I started with what I already knew of CSS. I was close to getting it working but ended up searching via Google for the rest.

Armed with some new CSS information, I was able to get the my test install working satisfactorily and posted the solution. Total time spent was a little over 45 minutes.

Does that seem like a lot of time helping a stranger? It’s not.

I knew that what they were asking for was doable, but I’m horrible at CSS. It’s a creative thing for me and I’m just not good at it. But by helping that person out I was able to learn something new and stretch my own skills a little.

That’s how I learn, doing things that are outside of my experience. My little contribution is not earth shattering but it might help someone out and being able to pickup additional CSS is a bonus.

There are many really talented web designers that fully comprehend CSS and my own level of expertise will not match that. But by my accepting that forum topic as a challenge, I understand a little bit more than I did the night before.

Here’s the reply to my small effort.

You’re a genius, seriously. Thank you!

Concise, I like it. That’s not a bad result at all.

Somehow the Kodak B&W film is cleaner. I’m going to explain it poorly, but the Ilford comes out developed with dust particles. Not every frame but some do.

At first I thought it was just a bad day at the developing machine but it’s not that. Every Ilford Super XP2 400 roll I have used has samples where you get that look of scratched film or small particles of dust.

I don’t mind it as it adds character, but the Kodak doesn’t have that. It generally looks sharper to me and cleaner to me.

Shooting in B&W remains a surreal experience. It’s not like using Photoshop to make the image black and white, it’s got a separate character to it. With digital photography I almost always do some adjustment. It’s an automatic part of my process and makes for better images.

Not so with film photography. Even though it’s digitized and modified by the developer/scanner I never make adjustments. I don’t crop or change anything although I have re-sized the images for presenting here.

I’ll keep ordering both B&W films but for now I think I appreciate the Kodak more than the Ilford version.

To kill off all the processes of a user named joe who’s left logged in but used the user switcher, open up the Terminal app and run these commands.

sudo su -
ps aux | grep ^joe | awk '{ print $2; }' | xargs -I{} kill -9 {}

In my kitchen is the community iMac and I have set up accounts for my whole family. Sometimes people come over and forget to log out but used fast user switching to go to the login screen or a different user.

That’s not too bad, but some software combinations I’m running often take up lots of CPU needlessly. Yes, Firefox and Adobe Flash I mean you. The whole iMac becomes slow and unresponsive.

That makes for a sad Mac. More importantly at 5:30 AM it makes for a sad me. As long as you know Joe’s user id then this will zap all of his processes and log him out as a result.

If some of those processes are stubbornly cling to life then rinse and repeat.

For Christmas, one of my brothers gave me a Holga 120 CFN. This is a camera that takes 120 film and is entirely made out of plastic. Even the lens element is plastic.

Considering my infatuation with older film cameras, this really was a great gift. I’m always looking at eBay for a new vintage camera and this one is in that spirit. It’s all plastic; I’d never have bought one myself. But trying out 120 film was fun and I enjoyed shooting with it.

The Holga and the whole Lomography shoot-from-the-hip idea always struck me as silly. Switching to film still means you should still compose your shot and think about framing your image. While some out of focus images can be insightful, Lomography seems to me to be based on light leaks and poor photography.

That’s not to say that you can’t get good shots from one of these cameras, and I do admire the gallery. It’s just some of the examples look like the photographer wasn’t really trying.

After shooting a couple of rolls I can say that my opinion has been changed. The Holga is just for fun and intentionally taking soft picture is part of that.

This model comes with a built-in flash with color filters. You rotate the dial and get red, yellow, blue, or plain white. For black and white I used the white flash, for color I liked the yellow filter.

With 120 film there are two mask inserts, one for 6×6 cm and another for 6×4.5 cm. The 6×6 gets you 12 shots and the 6×4.5 gets 16. My first two rolls were shot with the 6×6 and I haven’t developed the 6×4.5 rolls yet.

Once thing I really need to watch out for is double exposures. On my 35mm cameras, the film advance cocks the shutter and you can’t take more than one exposure. On the Holga, the shutter and film advance knob are not mechanically connected. You can expose the same shot multiple times and that ability is part of the appeal.

I ruined a few of my B&W T Max shots because I hadn’t realized that I had already exposed that film. That’ll teach me to pay more attention.

Overall it was fun but I don’t expect this to replace my Olympus Trip 35. When the weather gets warmer I’ll take some outdoor shots with my remaining roll.

The Elemin theme has it’s own built-in page navigation after the posts. It’s attractive, but not quite as flexible as the WP-PageNavi plugin. With this plugin you can put a page counter, link to the start and end pages, etc. It’s a cool add-on and I’ve gotten comfortable using it on my WordPress blog.

Adding support for that plugin to Elemin can be done simply by creating an includes directory for the child theme, and copying the elemin/includes/pagination.php file into the child theme includes directory. You then modify the copy with the wp_pagenavi() code and due to the magic of get_template_part() the child theme will pick that up.

Modifying a copy of a parent theme file isn’t too bad and that file is very small. But that’s not a very interesting solution. What’s more fun is to add support via hooking into the loop.

I’ve made many modifications to my child theme and not once have I had to copy and/or modify one of the parent theme files. For me, that’s the whole point of this exercise: creating a child theme that only uses functions.php and CSS.

So far using that method for this child theme I’ve been able to do the following:

1. Add a random header image
2. Made some CSS changes including a page background
3. Added a fix for Internet Explorer 8 issues
4. Created a front page view that shows the full content and then the excerpts and without using a front-page.php template

I’m having a great time doing it too. WordPress is very extensible and I’m picking up more and more PHP knowledge as a result of playing with my WordPress blog.

Here’s how I added support for WP-PageNavi to the Elemin theme.

1. Update the child theme’s functions.php file

The page navigation comes after all the posts so there are two actions I’m interested in. Those actions are called loop_start and loop_end. Neither is well documented in the WordPress Codex (it’s open to editing by anyone), but looking at other add_action() examples it’s not that hard to figure out.

A WordPress loop can happen at many different times in a WordPress blog. A plugin can create it own loops, the page slider does it, etc.

There is only one loop I want to play with and that’s the loop that happens right after the wp_head completes. To test that I check if the action wp_enqueue_scripts has completed. That action only completes in wp_head once so it’s a good test. I could have tested for wp_head but I forget why I chose that action instead.

If it did complete we’re after the wp_head so increment a counter. I implemented that check and counter using this code.

// Start the loop counter after wp_head
add_action( 'loop_start' , 'mh_main_loop_test' );

function mh_main_loop_test( $query ) {
global $mh_loop_count, $mh_pagenavi_done;
   if ( ( did_action( 'wp_enqueue_scripts' ) == 1 ) and !$mh_pagenavi_done ) {
      $mh_loop_count++;
      echo '<!-- loop counter = ' . $mh_loop_count . ' -->';
   }
}

At end of the loop, another action will be called. The loop counter is checked to see if it’s the first loop and only the first loop after wp_head. If it is, output the wp_pagenavi() and then decrease the counter. There is a check to make sure that the function wp_pagenavi exists so that PHP does not toss any errors.

// Display wp_pagenavi() at the end of the first loop only
add_action( 'loop_end' , 'mh_insert_after_posts' );

function mh_insert_after_posts( $query ) {
   global $mh_loop_count, $mh_pagenavi_done;
   $mh_after_head = did_action( 'wp_enqueue_scripts' );
   if ( $mh_after_head == 1 ) {
      if ( $mh_loop_count == 1 and function_exists( 'wp_pagenavi' )  and !$mh_pagenavi_done ) {
         echo '<!-- /loop counter = ' . $mh_loop_count . ' -->';
         wp_pagenavi();
         $mh_pagenavi_done = true;
      }
      // Done, so decrease the loop counter
      $mh_loop_count = $mh_loop_count - 1;
   }
}

Each time the loop starts the counter goes up, when the loop ends it decreases. I only want the wp_pagenavi() to run once and only at the end of the first loop. I output the counter as an HTML comment to confirm that everything is firing correctly.

2. Configure WP-PageNavi to use your CSS

Install the plugin and set the options as you see fit. Make sure you enable “Use pagenavi-css.css” because the default styling will look unattractive and the Elemin styling is pretty good.

I’ve create a file called pagenavi-css.css in the child theme and put in your CSS. I’ve copied the CSS from the Elemin child theme for the class pagenav. Except for some minor touches, the wp-pagenavi CSS class is identical to the pagenav class.

/* Hide the old pagenav */
.pagenav {
	display: none;
}
/* dupplicate the styling for WP-PageNavi */
.wp-pagenavi {
        clear: both;
        padding-bottom: 20px;
        text-align: right;
        margin: -30px 20px 0 20px;
}
.wp-pagenavi a, .wp-pagenavi span {
        min-width: 24px;
        min-height: 20px;
        line-height: 100%;
        text-decoration: none;
        text-align: center;
        margin: 0 3px;
        padding: 4px 0 0;
        vertical-align: middle;
        display: inline-block;
        zoom:1;
        *display:inline;
        -webkit-border-radius: 10em;
        -moz-border-radius: 10em;
        border-radius: 10em;
}
.wp-pagenavi a {
        background: #000;
        color: #fff;
        text-decoration: none;
}
.wp-pagenavi a:hover {
        background-color: #333;
        text-decoration: none;
}
.wp-pagenavi .current {
        color: #666;
        text-decoration: none;
}

There is one difference though. I’m using CSS to hide the default Elemin page navigation on the bottom. Yes, that means the old HTML is also being sent with the web page. But unless you look at the HTML source code you’ll never even know it’s there.

This CSS only gets used if the WP-PageNavi plugin is activated and if the pagenavi-css.css option is selected. Just by deactivating the plugin, the old page navigation is restored.

3. How about making this a plugin?

These functions and add_actions can be made into a plugin easily enough just by copying the code into a file in the wp-content/plugins directory. Call it elemin-wp-pagenavi.php.

At the top of that file put these lines

<!--?php <br ?-->/*
Plugin Name: Add WP-PageNavi support to Elemin
*/

Then copy the code above right after that. You will still need to copy the pagenavi-css.css file to the elemin directory or the CSS will not get picked up.

Using this as a plugin will accomplish the same thing and avoid creating a child theme.

But if you are looking to making changes to the a theme then creating a child theme remains an easy thing to do. And I’ve been able to do this while avoiding modifying any copies of parent theme files.

At my wife’s work they’re now using Internet Explorer 8. That’s an improvement, they’ve been on version 6 for years.

This blog’s theme uses CSS border radius effectively and it doesn’t render correctly on version 8. You get square blocks where you wanted round corners. The next version it works fine, version 8 and below not so much.

There is a work around but it’s ugly. Add conditional CSS to your head for any version of IE less than 9 and reference PIE.htc from CSS3 PIE.

This is easily done by adding some code to my theme’s functions.php file.

1. Download the zip file for PIE.

As of this writing that is PIE-1.0beta5.zip. Head over to http://css3pie.com/download-latest and grab a copy.

2. Create a pie directory where your theme is and extract that zip file there.

I’m using a child theme of Elemin, so for me that’s located in mostlyharmless-elemin/pie. I like to make a separate directory to keep things organized. In 6 months I don’t want to ask myself “what’s that file again?”

3. Find the “offending” CSS.

In your theme’s style.css look for any references for border radius, those are the elements you’ll need to apply the fix to. The one’s I’ve looked for are these.

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

Those are the elements that need this hack for IE 8. For my theme those elements (separated by commas) are

#header, .post-nav span span, .number, .back-top a,
input[type=reset], input[type=submit], input[type=text],
input[type=password], textarea, input[type=search]

4. Add code to your functions.php file.

What we want to do is add to the head a conditional so that if the Internet Explorer browser is less than version 9, add the behavior tag to those CSS elements. We could do if via editing the theme’s header.php but that’s an even uglier solution.

add_filter( 'wp_head' , 'mh_ie_lt_9_hack' );
function mh_ie_lt_9_hack() { ?>
<!-- child theme hack for versions of IE 8 or less -->
<!--[if lt IE 9]>
<style type="text/css" media="screen">
#header, .post-nav span span, .number, .back-top a,
input[type=reset], input[type=submit], input[type=text],
input[type=password], textarea, input[type=search] {
        behavior: url("<?php echo get_stylesheet_directory_uri() . '/pie/PIE.htc'; ?>");
        position: relative;
        zoom: 1;
}
</style>
<![endif]-->
<!-- /child theme hack for versions of IE 8 or less -->
<?php }

To get it work I had to add position and zoom. Not sure why, my CSS is often lacking.

Now visit your site via Internet Explorer 8 or even 7. The site should now enjoy it’s CSS3 radius glory for those elements you’ve identified.

5. I don’t have Internet Explorer 8 installed, how can I test this?

Neither did I. I had to test from work and my wife’s laptop. But if you have patience you can check out your site via Browser Shots or via Adobe’s Browser Lab.

This is something I’m doing mainly to get the web site to look spiffy for older browsers. In IE 8 and IE 9 this blog renders well. Even in version 7 it looks mostly okay. IE version 6 and below need not apply.

People should be encouraged to upgrade to the latest version of their browser. Even Microsoft get’s that and is trying to stomp out version 6. But for half of my visitors who use Internet Explorer 8 this works fine for now.

One of the appeals of shooting film is black and white photography. It’s the other side of the coin for color photos and somehow it tells a slightly different story. There are some really good fine grain films out there such as Kodak Tri-X 400, Ilford Delta 400 Professional, and Fujifilm Neopan 400 Professional. I’ve used Tri-X 400 before and the results were attractive.

The problem is, these films are not developed using the C-41 process. That’s the film development system/chemistry that most consumer color films use. It’s what is used to develop film at Costco via their big automated developer and printer.

To get those B&W films developed I have to use a lab in Manhattan and they’re not cheap. At Costco development with DVD but no prints costs about $5 a roll. At the lab it’s closer to $10 and the DVD has lower resolution images.

I shoot a lot of film. Costco wins.

That’s where films like Ilford XP2 Super 400 comes in. It’s a B&W film meant for C-41 so I can take it to get developed and scanned cheaply. I ordered 3 rolls from Amazon and here’s samples from the first roll.

I like the look. I can get better detail, resolution, and less noise (grain) from any of my digital cameras but shooting with my Olympus Trip 35 is a joy.

This weekend we’re celebrating Christmas at my brother Ed’s place so I plan to use at least one roll there. My sister-in-law keeps a beautiful house and there’s going to be lots of images for me to capture.

So can an oEmbed’ed tweet also embed the Youtube video?youtube.com/watch?v=UfcNoM…

— Jan Dembowski (@jan_dembowski) December 21, 2011

That’s pretty remarkable. I’ve embedded a tweet that has an embedded Youtube video in it. I didn’t even bother to wrap the URL in the [ embed] … [ /embed] shortcode, I just pasted in the link to that tweet.

That’s very cool! It shouldn’t be long before this is put into a plugin; I put it into my theme’s functions.php because I’m used to poking in there.

Interestingly enough, when the Twitter Blackbird Pie plugin is activated it overrides the oEmbed output and puts the tweet into that nice format that they use. For now I’ll use the oEmbed option.

I updated my Elemin theme to the latest and greatest and ran into a problem. They’ve changes how style sheets are queued up to use wp_enqueue_scripts.

That’s good, but now my child theme’s style.css will not get loaded, just the Elemin parent style.css file.

Easy to fix and I’ve added the following lines to my child theme’s functions.php file:

add_action( 'wp_print_styles', 'mh_remove_themify_styles' );
function mh_remove_themify_styles() {
        wp_dequeue_style( 'themify-styles' );
}
add_action( 'wp_enqueue_scripts' , 'mh_add_child_style' );
function mh_add_child_style() {
        wp_register_style( 'mh-child-style' , get_stylesheet_uri() );
        wp_enqueue_style( 'mh-child-style' );
}

That removes the parent theme style sheet and adds the child theme’s version.

Update: Themify (seriously, they’re really good and you should buy their themes) is going to address this problem with an update today. Which is good, de queuing their style sheet broke other styling and I ended up using add_action(‘wp_head’… instead of the above.

I was able to get two full posts on the home page and leave the rest as excerpts but the CSS was baffling me. I couldn’t work out how to set the post-meta to format as I wanted it to.

My CSS is at best “not too good” and I was messing up some inherited properties.

The response was good: why not just wrap the posts in divs with the correct class and let the default style.css do the rest? That way the generated output would look kind of like this:

<div class="list-post">
 [post 1]
 [post 2]
</div>
<div class="grid2">
 [post 3]
 [post 4]
 [post 5]
 [post 6]
 [post 7]
 [post 8]
</div>

That was a real light bulb moment for me. I know I can do that by making a copy of the elemin/index.php file into my child theme directory and making modifications.

So that’s exactly what I did and replaced the regular get_template_part() line with this code:

<!-- child mods -->
<?php if( is_home() and $post_layout == "grid2" and $paged < 2 ) {
   $mh_post_count++;
   switch($mh_post_count) {
      case 1: ?>
         </div><!--/loops-wrapper list-post-->
         <div class="loops-wrapper">
         <div class="list-post">
         <?php get_template_part( 'includes/loop','index');
         break;
      case 3: ?>
         </div><!-- /list-post -->
         <div class="grid2">
         <?php get_template_part( 'includes/loop','index');
         break;
      case get_option('posts_per_page'):
         get_template_part( 'includes/loop','index'); ?>
         </div><!-- /grid2 -->
         <?php break;
      default:
         get_template_part( 'includes/loop','index');
   }
} else {
   get_template_part( 'includes/loop','index');
} ?>
<!-- /child mods -->

I also had to put in a conditional right before get_sidebar() to properly close off the last div. Changing the excerpt to the post content is still handled in the child theme functions.php file.

It all works and I’m now using it my child theme. This only gets applied when I select the two column excerpts page format. Switching to anything else restores the default Elemin formatting.

But you copied and edited a theme file!

Yes, I did and I’m thoroughly ashamed of myself.

There are hooks into different parts of the WordPress loop so that I should be able to put into my child theme’s functions.php file the logic to figure out where in the loop we are and insert the HTML as needed.

The logic is dependent on if we’re at post #1, post #3, and the last post defined by the posts_per_page option. So all I need to do is add the appropriate add_filter() or add_action() to my functions.php file. I already add to the_content using a filter for before and after.

But I’m not quite there yet. I’m pretty sure that I can pull it off with something like add_action( ‘the_post’, ‘insert_before_posts’ ) but I’m still doping it out.

I’m also having a great time doing it too which is really the point of all this effort. Now if only that WordPress Bible would get here sooner…