WordPress Post Thumbnail

Post Thumbnails in the Blog List View

Post Thumbnails in the Blog List View

When WordPress came out with version 2.9 in the fall of 2010, one of the best things they added was the Post Thumbnail for featured images.

For art sites, this was something of a Godsend.  I had previously been using YAPB (Yet Another PhotoBlog) for inserting one image as the main image for each post.  This one image would then appear at different sizes in different types of views, such as a small thumbnail in the blog, archive and category list view, and a large image in the single post view.

But, my hosting service strongly encouraged me to stop using YAPB, as they said it was very resource-intensive and was one of several plugins for WordPress that were causing my sites to bog down.  So I spent weeks replacing the YAPB images on almost 6 years worth of posts on my art site (nearly 300 posts) with the new featured images post-thumbnails (whew!).  I also edited the code files to get the images to appear just as I wanted them at the time.

It was exhaustive but in the end a very good thing, because once again, all I had to do was insert one image in my post, and it showed up in many places, while apparently using less resources.

See examples of Post Thumbnails and Featured Images in use:

[nggallery id=1]

Issues with New Designs

One of the other great things about WordPress is that they are very innovative and are continually improving their features and code, streamlining some things and adding others.  The result is that what was once just a little blog engine has become the most popular and one of the most powerful and versatile CMSs (Content Management Systems) around.  Of course, the downside of that can be that your website themes and files can become quickly outdated, requiring more weeks of learning and re-coding to keep things up to date.

For that reason, I often use a website design tool called Artisteer to begin a new design for my websites.  Once you have settled on a design within the software, it spits out (almost) all the files and images one needs for various types of websites, including WordPress websites.  Every exported design needs a bit (or more) of design and code tweaking to get them to look and work just the way I want them to, but otherwise it’s a pretty good tool.

However, all this innovation has resulted in some significant changes in the code for WordPress, and thus the code that Artisteer generates in their latest version has also changed quite a bit in just a few months.  And unhappily, from my perspective, they broke the featured image function.

For whatever reason, the themes exported from Artisteer no longer support the large image part of the Post Thumbnail function.   Personally, I’ve got too much invested in this feature on far too many websites to abandon the use of it (especially as it would mean replacing all 300 images I’d already replaced yet again!  And then some!).

So I’ve searched the web, and asked questions on several forums to find answers about how to fix this, but only one person was willing or able to give me a hint.  (Hat tip to Amy on the Artisteer forums 🙂 ).

So, with Amy’s help, and a bit more research and a lot of trial and error, I have come up with the following code fixes.  These may not be the only or even best ways to do these things, but they work for me so far.  Should anyone know of a better way, I’m all ears!

Code Fixes for the Featured Image and Post Thumbnail Functions in Artisteer Themes

To enable Artisteer-generated files to once again implement the featured image function (files shown in bold italic; code show in bold):

  1. To show your featured image in your single posts and/or pages:

    in these files: content-single.php (for posts) and content-page.php (for pages), move or insert this code ‘thumbnail’ => theme_get_post_thumbnail(array(), between ‘before’ => theme_get_metadata_icons(‘edit’, ‘header’), and ‘content’ => theme_get_content(),

  2. If you want to size the featured images to be larger than the thumbnails, instead of  ‘thumbnail’ => theme_get_post_thumbnail(array(), use this code:

    ‘thumbnail’ => theme_get_post_thumbnail(array(“size” => array(600, 300))),

    changing the sizes to the sizes of your choice (here, 600 is the width in pixels, and 300 is the height)

  3. If you want to move the default location of the thumbnails in the blog list views from above/beside the post title and header metadata to below them:

    in this file: library/wrappers.php move echo $thumbnail; to between echo $before; and ?>

  4. If you want your featured images and post thumbnails to be aligned right instead of left:

    in “style.css” find: div.avatar{  position:relative;  margin: 0 5px;  border: 1px solid #aaa;  padding: 1px;  background: #fff;  float:left;} and change the float from left to right.  Warning: this may also change the float of your comment avatars; I can’t really say, so proceed with caution.

  5. Then, on your site, under Dashboard > Appearance > Theme Options, under Featured Image, set:

    Use featured image as thumbnail


    Use auto thumbnails

    Generate post thumbnails automatically (use the first image from the post gallery)

Your code and style in these files may be slightly different than mine, so adjust accordingly.


Hope this works for you…and now I’ve got it all listed conveniently in one place until the code changes yet again…

Plus, for reference purposes, here are a couple of posts in the WordPress Codex explaining the use and purposes of the Post Thumbnail and Linking to Post or Larger Image.

Pixel Wranglers website, version 2

Pixel Wranglers website, version 2

This is the new version of the website for the website design and development business that my husband and I are partners in. I redesigned it as a WordPress website to bring it up to date and make it easier to update. I added and massaged a lot of the content. I did only a slight visual redesign, because I wanted to maintain the basic look from the previous version of the site. You can visit the new site at http://pixelwranglers.com/.

Pixel  Wranglers website, version 1

Pixel Wranglers website, version 1

This was the original site design from several years ago — a basic 6-page site done in HTML/CSS.  I always liked this design, but I prefer the ease of updating a WordPress site, and the added functionality provided by the judicious use of plug-ins.

At Pixel Wranglers, we frequently work together to build more extensive websites and business applications than I do on my own. My husband is a certified webmaster with a degree in Computer Science, and is experienced in database development, design and normalization. He can integrate database applications, such as specialized lookup facilities and site-wide dynamic-page environments. He can customize database back-end applications and perform implementations for Unix environments (PHP/SQL) or Windows (ASP/Access). He is also an extremely talented writer.

Please visit our new Pixel Wranglers website for more information, and contact us if we can help you with any website or database design and development projects.

Bear Flag Construction website

Bear Flag Construction website

I’ve just completed a new website in WordPress for local custom home building and remodeling company, Bear Flag Construction.   Tom Ide, the proprietor of Bear Flag Construction, handles everything from Construction Management, Restoration and New Construction to Additions, Remodeling, and Home Improvements. He has worked from the San Francisco Bay Area to Massachusetts and now works in the Austin area.

Tom wanted a site to showcase his local achievements, and he wanted a site that allows him to do his own editing and updating, so I built a site for him using WordPress, and have trained him to work on the site himself.

Visit Bear Flag Construction at http://bfccustomhomes.com/ to view some of the excellent work he has done and read the testimonials.  Give him a call if you need some construction work done.  I can attest that he does beautiful work at reasonable rates, and he’s quite a joy to work with.

Texas Wax Website

Texas Wax Website

Artist and web guru extraordinaire Haley Nagy and I have just completed the design of a new website and blog for all members and fans of Texas Wax, a regional encaustic painting society dedicated to promoting the ancient art of painting with wax.

Haley and I have been members of Texas Wax since the Austin group began in the spring of 2008.  Texas Wax is composed of active encaustic organizations in four Texas cities: Austin, Dallas, Houston, and San Antonio.  As the four groups have grown and evolved over the past year+, we realized the groups had a need for a central website and blog to showcase all of our work, and to communicate with each other and with our fans.

Haley and I created the site in WordPress from a visual design that I created.  The underlying theme is based on the same theme I used for my fine art website and blog (a theme I created from bits and pieces of many other themes): Marilyn Fenn Studio.

The website features the usual stuff, but we also wanted to give all the artist members of Texas Wax the option of creating and updating their own profiles and gallery pages.  We modified the author page template with the help of several plug-ins (and some blood, sweat, and tears from yours truly), creating an artist directory that pulls their profile information into the author template/artist biography page. There’s also a link to their own gallery page.

We’ve included an events manager that will allow the regional chapter leaders to add events for their regions, and that will automatically move events from “Upcoming” to “Today’s Events” to “Archived” pages as the dates pass.  Featured on the sidebar are a dynamic Upcoming Events list and a rotating gallery of member artwork.

Member artists can add their voices to the blog and talk amongst themselves on a private member discussion list.

Fans of Texas Wax art and artists can sign up to receive blog posts as they are posted, and can sign up for mailing lists for the individual regions or for all of the chapters statewide.  We’ve also provided various contact forms.

Take a look at the brand-spanking new Texas Wax website, while we continue getting our artist members online (which is somewhat harder than herding cats!).