Posts Tagged ‘theme’

How To Add Image Thumbnail Using WordPress Custom Fields

Thursday, July 31st, 2008

Over the past few days, I have been toying around with the idea of setting up WordPress as the CMS for a web site directory. One thing I wanted to do with my personal finance directory is to show a thumbnail image of the featured site when I am on the main page, category pages, tag pages, and search result pages.

As you know the thumbnail feature is not common in free WordPress themes, so I had to do some work to get it working. You can see how the directory looks below:

How To Add Thumbnail Image To WordPress Template

Now, let’s take a look at what we need to do to enable this feature.

1. Modify the main page (index.php) to show image

Note you could make the same changes to archive.php and search.php to get the same result. Note, I added the following code right under the title inside The Loop:

<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><img style="float:left;margin: 0 10px 10px 0;border:1px solid #000;height:90px" src="/wp-content/uploads<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="thumbnail" height="90" /></a>

There are two parts to this code, the <a> tag and the <img> tag.

  • The <a> tag is the same as the one on the post title. I am adding it here so that users can click on the image to get to the full post.
  • The <img> tag has a couple of components:
    • The style attribute tells the browser to float the image to left, add some white space around the image, surround it with a black border, and make it 90 pixels high.
    • The src attribute tells the server to grab the image from /wp-content/uploads directory with the rest of path and filename information coming from a custom field called “Image”

2. Add custom field called “Image” to each post

Now, when you are writing a post, you need to add a custom field called Image to the post with a value that reflects the rest of image path and filename information. In this example, we will use the same image that is shown inside the post itself. To do this:

  • Upload an image to the post
  • Switch to HTML mode and take note of the image path (see image below) — note the image path is /wp-content/uploads/2008/07/annualcreditreport.png in this example.

  • Next add the custom field called Image. Note that we already defined some of the path information in the template — i.e., /wp-content/uploads. So you are adding the rest of the path information and filename in the value field — i.e., /2008/07/annualcreditreport.png. (see image below)

  • Save and you’re done!

That’s it! Your blog should start showing thumbnail image next to each post once you completed these two steps.

Things to consider

Right now, if the Image custom field is not defined, the template will show missing image error. With a bit of PHP programming using if-then statement to detect the if the custom field is defined or not, you could show the thumbnail only when the Image custom field is defined.

This article was featured in:

How to Find the Right WordPress Theme

Tuesday, February 5th, 2008

Whoa, is there such a thing as the wrong WordPress theme? Sadly, the answer is yes. There are literally thousands of themes out there. There are some really good ones, and inevitably, there are some bad ones too.

Moolanomy Theme

Where to find WordPress themes

Before I show you what make a theme bad, I would like to share some resources where you can find WordPress themes:

10 Signs of Bad WordPress Themes

This is not a hard and fast rule, and certain flaws are worse than others — also, some could be fixed with relative ease. Note that my theme doesn’t pass all the tests either, but I know where the problems are and I am working on it. In other word, you may have a tough time finding the perfect theme that passes all these 10 points.

  1. Ugly — I know beauty is in the eyes of the beholder. So you have to decide on this one. If it’s ugly, move on and don’t even bother.
  2. Doesn’t stand out — Another design problem is using a theme that looks the same as everyone else’s. Worse, you have a theme that look very similar to the more popular blogs in your niche. Your theme is an important part of your brand, so it’s worth investing a little time to make yours stand out.
  3. Bandwidth hog — Some themes have too many images, large CSS file, add-on JavaScript files, and large HTML files. Make sure that what you are getting is worth the bandwidth usage. To check your theme bandwidth efficiency, check out Web Page Analyzer from Web Site Optimization. If you use Firefox, try Firebug and YSlow add-ons combination (awesome!). Some tips on reducing bandwidth usage:
    • Reduce the number of images, scripts, and external CSS file (each image takes at least 1 HTTP request)
    • Optimize images to make them smaller
    • Reduce the size of CSS file — i.e., using Clean CSS — or you can do it on your own by stripping out comments, extra spaces, reduce long-hand coding to their short-hand equivalents, etc.
    • Eliminate unnecessary clutters from your blog — i.e., links, text, images, widgets, clicklets, etc.
  4. Database hog — Some themes can make a lot of unnecessary calls to the database. For example, Tigopedia Reloaded uses only 2 database calls compared to its predecessor that uses 30+ calls. Other than that, judicious use of plug-ins will also help reducing database usage.
  5. Invalid HTML — This is probably one of the easiest problems to fix. Unfortunately, some theme designers don’t even take the time to validate their code. To check if your theme validates, try the W3C Markup Validation Service. You can use the “show source” option to help you track down and fix problems.
  6. Invalid CSS — This is similar problem to the HTML validation. To check your CSS validation, try the W3C CSS Validation Service.
  7. Poorly optimized for search engines — There are many articles about how to optimize WordPress for search engines, but when it comes to theme, we are dealing mainly with location of content relative to other code, use of headings, and use of links. In general, good theme has the following characteristics:
    • Present main content first and sidebar(s) afterward
    • Use only one H1 heading for the post title (some may argue using H1 for blog title, but I think it’s more advantageous to use H1 for post title)
    • Use links sparingly and link directly to the post title
  8. Poor separation of content and design — Good theme should make good use of id and class attributes. It should have very little style declaration inside the template files itself. Also, CSS and JavaScript code should be in separate files and not included with the main HTML page.
  9. Inflexible (hard to modify) — Code should be clean, well formatted, and strategically commented. I have tried several themes in the past and there are some that are so hard to work with, I simply stop using them.
  10. Portable — One of the common problems I see when visiting blogs through a portable device (e.g., a blackberry) is bad rendering. Occasionally, I will see blog showing broken CSS code before I can get to the content. If you have an opportunity, check your site through a portable device and see for yourself. To get an idea on how your blog appears on text only or portable device, try Lynx Viewer.

I hope this post help you find your next theme. Before I go, I also want to share a really cool plug-in called Admin Theme Preview. This plug-in let your blog runs uninterrupted, while you can work on a new theme in the background.

Who Are You Talking To? Defining Your Target Audience.

Thursday, January 31st, 2008

I’d love to say “Everyone should read my blog.” Well, maybe everyone should, but not everyone will. Every blog has a target audience, no matter if they realize it or not. Defining who *is* interested and reaching those people is a key concept to your blog’s growth and development. Why?

Hitting the target

Photo via Wikimedia Commons

If I try to cater to a wide variety of interests, I’ll end up providing useful content some of the time for a wide segment of people, but the majority of the time, each individual will not find valuable information to them at my site. If a reader only finds my blog useful 10% of the time, the chances of them coming back diminish every time my content doesn’t provide them with value, until eventually they stop coming. Trying to be everything to all people is a recipe for disaster. Instead of fighting your core readership, embrace them and attract more of the same. This isn’t limiting your blog’s potential, it is strengthening it at the core and giving it the potential to flourish.

Before we can target our core readership, we have to define it. For some, this is a simple process, and for others, it is a little more confusing. Here are three steps to defining your target audience:

What do you write about specifically?

Even in a personal blog, there will be specific recurring themes. Your target audience consists of people who respond to and are interested in those themes. Knowing the topics that you consistently write about is the first step to understanding who reads your blog.

What topics bring people to your blog?

What posts get the most views? Which topics of the ones you write about seem to garner visits again and again? Knowing what you write about is key, but knowing what the reader wants is even better.

Which topics in your blog resonate with both you and the reader?

Which posts, even re-reading them, really resonate with you? What posts get people commenting and generate discussion amongst your readers? These are your core topics, and these are the things your target audience is interested in. And if they resonate with you, they’re topics you can continue to write about and expand on without fear of losing interest. Remember, if you don’t care about your topic, you can’t expect your reader to.

~*~*~*~*~*~*~

For me, I started writing a blog to create personal motivation and accountability within my own financial life. I found, as I wrote, and as readers started coming to my blog, that I was not only writing as an online journal of sorts, but as a resource and motivation for others in similar situations to my own. Although not all my readers are in debt, my target audience is those who are in debt and looking for emotional and informational support to free themselves from debt, as well as those who can identify with being in debt and going through the process of getting out. That doesn’t limit my audience – the number of people I’ve just defined is much larger than the current readership of my blog – but it does define what topics and conversations my typical reader will find of value to them.

So, now that I know who I’m writing for, how do I find my audience? Look for future posts on strategies to attract your target audience, including using carnivals, social networking, guest posting, and other ways to get your content noticed by your potential readers. Stay tuned!