How to Hack the Mystique Theme to add Default Category Thumbnails

The Editing Chainsaw

The current base for my website it the Mystique WordPress Theme created by Digital Nature. As you can tell, I’ve been slowly but surely hacking the code apart into something a little more to my liking.

While beating this last bit of code into place (using default category thumbnails) I figured it might be nice to document what I’m doing. Part of this is so that other people can make the same tweaks and part of it is just so I’ll remember what the heck I did!

Step 1 – Create the Category Thumbnails

First off I created a new folder on the server to store my icons in. I chose to stick it under wp-content just to be consistent.

In order to use the $category[0]->category_nicename to fill in the image names, I named the icons to match the category slugs [ie. 1 – Custom Models.com’s icon was custom-models-com.jpg]. A quick upload later, I was ready to start mucking about with some code!

Step 2 – Find the Source Code

Then I went hunting in the code to figure out where the thumbnail line was generated… I really do wish some of this code was a little better documented, but if nothing else the backwards engineering is teaching me PHP by default.

Anywho, to change the Thumbnail line you have to hack the function mystique_post_thumb which can be found in core.php.

I ended up using Windows to find the bit of code I needed within the backup on my harddrive. A lot of the files you’ll need to fiddle with to tweak this theme are under themes/mystique/lib.

This is the original code (with some extra spaces):

function mystique_post_thumb($size = 'post-thumbnail', $post_id = false){
  global $post, $id;
  $post_id = (int)$post_id;
  if (!$post_id) $post_id = $id;
  $image = '';

  if (has_post_thumbnail($post_id)) $image = get_the_post_thumbnail($post_id, $size);

  if(get_mystique_option('post_thumb_auto') && !$image): // get the 1st image
    $attachments = get_children(array('post_parent' => $post_id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID'));
    if($attachments):
      $attachment = array_shift($attachments);
      $image = wp_get_attachment_image($attachment->ID, $size);
    endif;
  endif;

  if($image && !get_post_meta($post->ID, 'asides', true)):
   echo '< a class="post-thumb size-'.$size.' alignleft" href="'.get_permalink($post_id).'" >'.apply_filters("mystique_post_thumbnail", $image).'< / a >';
   return true;
  endif;
  return false;
}

As you can see, the commenting is a little sparse– which isn’t so great for those of us still learning the ins-and-outs of PHP and WordPress coding.

From what I understand (I broke it in new an interesting ways until I figured out what it was doing): This function creates the code for the post thumbnail and returns a value of True if the post is an aside and False if it isn’t.

  • The first If uses the thumbnail/Featured Image, if one has been chosen in the post.
  • The next If grabs the first attached image in the post, if there was not one chosen.
  • The third If checks to see if the post is an Aside or not.

Step 3 – Modify the Source Code

Before you ever modify the code, make sure you A) have a backup and B) have the backup ready to re-upload as soon as you have a mistake. Once you muck up core.php, the whole WordPress installation will stop working until you upload a ‘clean’ copy. (Ask me how I know this… sigh)

So, what I was looking to do was modify that second If. If there is no chosen thumbnail, I want the code to insert the corresponding category picture.

I changed the second If line to only check for if(!$image), removing the check of get_mystique_option(‘post_thumb_auto’) since I don’t care what had been set in the theme’s control panel.

Then, after gutting the If statement, I put in some new innards.

I used $category = get_the_category(); to pull the category list and then used $category[0]->category_nicename and $category[0]->cat_name to create the file name and the ALT and TITLE information.

One downside to this code is if I want to change the thumbnail size, I’ll have to manually update the width=”64″ height=”64″. I know there’s a way around it, but I just haven’t figured it out yet. *pokes code*

This is my modified function:

function mystique_post_thumb($size = 'post-thumbnail', $post_id = false){

//This function provides the code for the post thumbnail
//If the post doesn't have a thumbnail assigned, it will provide the default category thumbnail
//Default icons are stored under the category name in the wordpress/wp-content/icons folder

  global $post, $id;
  $post_id = (int)$post_id;
  if (!$post_id) $post_id = $id;
  $image = '';

  // Checks to see if the post has a thumbail
  if (has_post_thumbnail($post_id)) $image = get_the_post_thumbnail($post_id, $size);

  //If there isn't a thumbnail, it pulls the category default icon
  if(!$image):
    $category = get_the_category();
    echo '< a class="post-thumb size-post-thumbnail alignleft" href="'.get_permalink($post_id).'" >< img class="attachment-post-thumbnail wp-post-image" title="'.$category[0]->cat_name.'" src="https://martha.net/wordpress/wp-content/icons/'.$category[0]->category_nicename.'.jpg" alt="'.$category[0]->cat_name.'" width="64" height="64" / >< / a>';
  endif;

  //This checks to see if the post is an aside -- and does something, not sure what since I don't use asides
  if($image && !get_post_meta($post->ID, 'asides', true)):
    echo '< a class="post-thumb size-'.$size.' alignleft" href="'.get_permalink($post_id).'" >'.apply_filters("mystique_post_thumbnail", $image).'< / a>';
    return true;
  endif;

  return false;
}

Probably not as pretty as it could be, but it gets the job done. Some day if I’m feeling brave, I’ll write some code that allows you to do this through the interface instead of manually uploading and renaming the files…

Martha Bechtel

My name is Martha Bechtel and I write fantasy and science fiction stories, paint small model horses silly colors, cast resin and plaster magnets, code random code (and Wordpress plugins)... Come on in and join in the fun!

This Post Has 2 Comments

  1. Rajesh

    Nice tips, thanks for sharing ๐Ÿ™‚

    1. Martha Bechtel

      I’m having way too much fun teaching myself PHP and WordPress coding by backwards engineering. Figured I’d better start keeping track of what I was doing… hopefully it will be helpful to others! ๐Ÿ™‚

Leave a Reply