New MashModo theme – unofficial pre release

This is the MashModo theme. The MashModo theme is a tribute to Mashable and Gizmodo web designs. I was really intrigued by Mashables menu bar and how much it frees up the head of a website. I also found Gizmodo’s excerpt post design very useful. This theme is not to take away from these two great implementations of web design but to tribute to it. The theme does not fully replicate either of the designs in look, feel and/or functionallity and was not intended to do so but rather build on the idea.
The theme was carved out of Automattics Twentythirteen theme which is also a great piece of work by Automattic and I appreciate all the great work by the Automattic team.

I am fairly new to web development and web design and this is my first, so far unofficial, release for a wordpress theme. I will continue to work on this and hope to be able to have it ready soon for an official release with wordpress.

I would appreciate any and all feedback for the theme as it would greatly help to improve whatever needs to be improved.

Get it here: MashModo

MashModo Theme Download

The MashModo theme is a tribute to Mashable and Gizmodo web designs. The theme does not fully replicate either of the designs in look, feel and/or functionallity and was not intended to do so but rather build on the idea. The theme was carved out of Automattics Twentythirteen theme which is also a great piece of work by Automattic and I appreciate all the great work by the Automattic team.

How to create a default WordPress thumbail for post thumbnails.

I have been trying to create a default thumbnail for my blog. I just can’t get over that empty space that remains if there is no thumbnail defined. I could have let the post take up the entire width in case there is no thumbnail but i kept running into an issue where, on mobile devices everything turned out quirky. Either the thumbnail would take up the entire post or push the actual content out of view so that one would to constantly have to scroll sideways in order to read the post. So i would rather settle to set up an image that would show up in case i don’t have or don’t specify a thumbnail.

Well, easier said then done. I found some good information around the web including wordpress’s own support forums; however, none of the suggested solutions quiet suited me needs perfectly. For one, i want this to work as automatically and integrated as possible as i am actually working on this as a solution for a wordpress theme. This basically rules out any plugin as I would like it to incorporate with the theme itself. Also, plugins often, by nature, offer many more features then what I would have use for. I want to keep this as simple and functional as possible.

So my first thought was to add a simple “IF” “ELSE” and add a direct link to the image. Easy right? Yes it is, it is also not working. This would not have been an ideal solution since one would have to add the link to every new page created. Also, it have to code the link appropriately because you can not just go ahead and do something like this:

<a href="<?php the_permalink(); ?>" rel="bookmark"><img src="images/default-thumb.png" alt="thumbnail" /></a>

This did not work, so did this:

<a href="<?php the_permalink(); ?>" rel="bookmark"><img src="http://www.yourdomain.com/images/default-thumb.png" alt="thumbnail" /></a>

The first example won’t work because wordpress won’t be able to find the directory specified, this is especially not usable for a theme because at this point we don’t really know where that directory is going to be. In the 2nd example we did specify the full path; however, this will work as a quick fix for someone with very few pages. Also not suitable for a theme  because every  person using the theme would have to change the path specific to their environment. That’s no good.

Unfortunately, all to often I saw people recommend this method  or similar methods to accomplish a quick and easy fix. I found a handful who took that approach and have at least done it right. If so, it should look something like this:

<a href="<?php the_permalink(); ?>" rel="bookmark"><div><?php echo '<img src="' . get_bloginfo('template_directory') . '/images/default-thumb.png' . '" alt="thumbnail" />'; ?></div></a>

What is different here? First of, we are calling the “template_directory”. This makes things much easier as we don’t have to specify the full path and can make sure that wordpress will look in and  find the right directory. So regardless where the wordpress installation is stored or deep it is buried in your file system it will always look in it’s own directory. Second, we can’t use the “template_directory” by itself. Not only is it not a free standing call function but we also still need the full path. The “get_bloginfo()” function can do that for us. The “get_bloginfo()” function basically holds all the basic information about your blog, everything is set up on under the “General Settings” in your wordpress admin panel. All the information, like the template directory, can be called up individually.

So now, with the right information in place, putting this snippit into your pages makes much more sense. I wanted to take this one step further. Instead of having to add this code snippit everywhere I would rather like to be able to call it up as a function or function parameter which leads us to the functions.php.

What I did was, set up a function in the functions.php dedicated to the default thumbnail handling. I ended up with this:

function default_thumbnail() {
echo '<img src="' . get_bloginfo('template_directory') . '/images/default-thumb.png' . '" alt="Default Thumbnail Placeholder" />';
}
add_action('default_thumbnail','textdomain_default_thumbnail');

See what I did here. Yeah, the link is pretty much the same. I just made it a function. This way I can just call on “default_thumbnail” and don’t have to remember the full link and so forth. We are not all done yet though. We still have to add the theme support like this:

add_theme_support( 'default_thumbnail' );

And all done. Now your new default thumbnail link will look like this:

<a href="<?php the_permalink(); ?>" rel="bookmark"><div><?php default_thumbnail(); ?></div></a>

And the full loop could look something like this:

<?php if ( has_post_thumbnail() && ! post_password_required() ) : ?>
<a href="<?php the_permalink(); ?>" rel="bookmark"><div class="entry-thumbnail"><?php the_post_thumbnail(); ?></div></a>
<?php else : ?>
<a href="<?php the_permalink(); ?>" rel="bookmark"><div class="entry-thumbnail"><?php default_thumbnail(); ?></div></a>
<?php endif; ?>

Changing Post Meta information and markup

I am attemting to change some of the “meta” information for blog posts. In particular the “Quote Caption” location of the Quote Post Format. This is really only applicable to WP 3.6+ which is currently still in beta. I have been working on a theme which was based on Automattic’s “Twentythirteen” theme which makes great used of the new features in WP 3.6+.

I changed the post layout so that the category will be on top followed by title. In case of the “Quote Post Format” the category will be named according to the category “Quote” in order to keep them easily searchable by category instead of post type. Everything worked out good so far but I did encounter one problem.

192

Underneath the title of the quote, which is not actually really a title but rather the caption, i wanted to list the author and the source of the quote. The meta for the quote post format pulls the information automatically and displays it underneath the quote itself. Which is not where i want it. I could relocated via CSS; however, i don’t want anything funky to happen if someone uses a different browser. I would much rather pull the meta into the location where i want it. I am not a complete noobie to PHP and/or WP but things I have tried so far have not worked out so I hope to get some help.

If you have any ideas or suggestions, let me know.