• Blog

    Latest from our Blog

  • Tools

    Our Favourite WP Tools

  • Hosting

    Recommended Web Hosts

  • Coupons

    Get great money off deals

  • Themes

    WordPress Theme Directory

  • Plugins

    WordPress Plugins Directory

  • Promote

    Your WordPress Product

A few days ago, someone on a forum asked “How to add company profile boxes below each posts like Techcrunch“. I didn’t reply to the question at that time but recently I came across a situation where I had to create something similar, and I thought that WPlift readers would like to read about it.

In this tutorial we will be adding company profiles (categories) with a thumbnail, a little description, and a link to a page with more posts about that company. However, you can replace company profiles with anything like celebrities, countries, cities, staff and department, products, brands, etc. This tutorial also answers the question “How to add category images and descriptions below posts in WordPress”.

As I love saying, that freedom of open source and WordPress is that there are multiple ways to do something. Some methods more easier and simple, while others complex and difficult. What we are doing here can also be done by using custom taxonomy instead of categories. But in this tutorial we are using categories as most people use them.

We will be showing category images inside the loop. Oli has previously written about showing category icons, in case you just want to display a list of categories with images next to them outside the loop or post content.

Preparing the Category Images

To use this code you need to create a directory in uploads folder with the name category_images. If you name your directory something else you will have to remember to change it in the code aswell. If you don’t use uploads folder and instead upload all your files into wp-content folder then you need to create category_images folder into wp-content directory.

In this code we are not resizing or cropping the images and you need to manually upload your category images. It is not necessary but highly recommended that you use the same size for all the images. In this tutorial, I used 100x100px size images. Another important thing to remember is that all your images should be using the same extension. In this example we are using .jpg, feel free to replace it in the code with .png if you want.

To display some description next to your category images, you will have to add the descriptions to your categories from Categories admin section. I will recommend adding just a few lines that describe just a little bit about the company.

Displaying Company Profiles With Images

The problem is that by default WordPress does not have a feature to add images for categories, tags, custom taxonomies, etc. So what we are going to do in this code is that we are storing our category images with the same name as category-slug in a dedicated directory. The code gets the categories a post is assigned to, then it looks for the category-slug or category nicename, and then displays it with .jpg. So it is important to remember that your category image name should be exactly the same as category slug.

Note: This code goes into your themes functions.php file

function wplift_category_images() {

//finding upload directory
$upload_dir = wp_upload_dir();
$img_dir= $upload_dir['baseurl'];

//looping through categories
foreach((get_the_category()) as $category) {
    echo '</pre>
<h3 class="company_profile_header">Company Profile</h3>
<div class="company_profile">
<a href="' .get_category_link($category->term_id ). '"><img src="' .$img_dir. '/category_images/' .$category->category_nicename. '.jpg" alt="" /></a>
' .$category->category_description. ' <a href="' .get_category_link($category->term_id ). '">Read more posts about ' .$category->cat_name. '</a></div>
<pre>
';

}

}

In the above code we have created a function called wplift_category_images. Inside the function we first tried to find out the upload directory. After that we ran a loop that looks for categories associated with a post and display an image, description and link to the category page.

Now we will use this function in our single post template. Usually it is single.php but your theme might have multiple templates to display different single post types. I am using Twenty Eleven theme and it uses content-single.php as the template to display single posts. Add the following code just below the post content:

<!--?php if (function_exists('wplift_category_images')) { wplift_category_images(); }   ?-->

The output of this will look something like the image below:

Styling Company Profile Box

In order to display these company profiles nicely we need to add some styling to it using the classes we have used in our function. Here is the sample code I have used, I know it is not very good looking so please modify it to meet your needs.

.company_profile img {
border: 2px solid #eee;
padding:2px;
margin:3px;
background:#ccc;
float:left;

}

.company_profile {
background: #f3f2f7;
border: 1px solid #eee;
font-family: Arial, Verdana, sans-serif;
font-size:small;
padding:5px 5px 0px 5px;
color:#666;
margin-bottom:20px;

}

h3.company_profile_header {
background:green;
color:white;
padding:5px;
margin:0px;
font-weight:bold;
font-size:large;
font-family:Garamond, Times, "Times New Roman";
}

After adding the above style to your theme’s stylesheet.css, your company profile box will look like this:

This code snippet is capable of handle multiple categories so if you have discussed more than one company and assigned this post to more than one categories then this code will display each one of them in their own company profile box. Like this:

Conclusion:

Like I said, there are plenty of other ways to add category images and descriptions below posts. You can also try “Taxonomy Images II” plugin to associate images with categories and then experiment with how you want it to display images for categories. Also if any one of you has already done something similar on your websites please drop your link below in the comments, I would love to see some other and may be better examples.


Disclosure: This page may contain affiliate links for which we will receive compensation if a purchase is made via the link.

Noumaan is a blogger and social media expert. He loves Quora, Facebook, Wordpress, OpenSource Software and The Sims.

Leave Yours +

6 Comments

  1. Naji

    Very nice post

  2. Noumaan bro nice tutorial.

  3. Great tutorial, nice idea to use to give an extra boost info/SEO boost to each page. I will definitely being trying this out!

  4. nafasmedia.com

    waoo that’s a great tutorial to create like that…

  5. Great walkthrough, but I am still thinking of using tags instead of categories. Does anyone of you implemented such feature? If yes, I’ll be glad to hear from you because I have absolutely no idea how to put nuts and bolts together. Thanks!

  • Comments are Closed

Search

Our Sponsors