cheap ralph lauren, ralph lauren uk outlet, mk outlet, Michael Kors outlet, Michael Kors Australia, cheap north face, cheap north face jacket, cheap moncler, moncler uk outlet, cheap moncler, moncler uk outlet, cheap moncler jackets, cheap ralph lauren, ralph lauren Australia, ralph lauren Outlet';
Wordpress Tutorial: Thumbnail Archives | Killer b. Designs



WordPress Tutorial: Thumbnail Archives

So a lot of folks blog these days. It’s no secret that WordPress is a powerful platform for building websites, especially blogs (duh!) Even though I went to college to get a degree in Graphic Design, surprisingly we only spent one semester learning Dreamweaver for the “web” portion of our program. I look back and think how strange that is, given that I started school in 2004 and the internet was already an established medium for designers. It wasn’t until after I graduated and accepted a job in print pre-production that I ironically got into websites. My boss had me invest all my free time in learning html and php via books and the universal teacher, Google. Anyway, this is a roundabout way of saying I have some self-taught experience in websites, and I think it would be fun and useful to post tutorials on how I use that on my blog. So for my inaugural post, I’ll cover my favorite feature, thumbnail archives!
So by default, when you choose to display your category archives, they’re in a list form of posts. That’s not very helpful for quickly navigating through old posts. Even if you just have a list, it helps to be able to see pictures of what you’re looking for. It also boosts traffic on your site, since visitors are more likely to click on several older posts and navigate through your site. You don’t even have to be fluent in code to do it.

Step 1: Download your plugins
From your dashboard, go to Plugins -> Add New -> Search and enter the phrase: Image Archives. It should be the first one to popup, and starts with “sorry for my bad English”. Don’t be scared, non-Americans are great coders too! This fella is pretty awesome. Anyway, choose to download and install this plugin.

Step 2: Activate your plugin

From the same plugins menu, choose to activate Image Archives. Now, click on “Edit” Now things are going to get a little tricky.

Step 3: Edit the plugin

Starting from the top, scroll down to the first place you see “// shortcode function”.  If you put your curser on the very top line and start clicking your down arrow, it will be 54 lines down. Okay. I don’t have the original code, what you see in the image is my edited code. You’re going to edit the line “function image_shortcode . What you see here is the code for my archives page, that shows every category of post. I have 25 different categories, which is a whole lot.

– I plan to name this page “Archives”. If you want to have a page displaying all your categories, I’d suggest naming it “Archives” as well. So change “function image_shortcode” to say “function image_archives_shortcode” (this will make a separate shortcode for your archives page. You will edit the “archives” portion for each separate category. Ex: image_archives_baby_shortcode, image_archives_diy_shortcode)

– the readme.txt document on the right side of your editor dashboard explains what each function means. It took me a while to figure it all out, so here’s what you will need to change:
First Image Mode -> On. I chose “on” though the default is “off”. This will grab the first image in your post’s gallery of images as the thumbnail. This way you don’t have to create a featured image for each post. I had several hundred posts prior to this plugin, so adding featured images to all of them would take forever. Choosing to set it to pull the first image in the gallery makes it so much easier on me.
Order -> DESC displays the latest posts at the top, and oldest ones on bottom. You can choose ASC if you want to display your older posts first.
Term id -> [important]VERY IMPORTANT!![/important] This is what defines which categories will display on the page. As I want to display them all, I need to start from 0 and go up to 25, with commas in between all of them. You can add a few extra numbers in case you add categories sometime in the future and don’t want to edit your plugin every time. It won’t hinder the functionality.
Limit -> How many posts can be displayed on each page. I chose 700 so they would all display on one page. It makes loading really slow. I need to change this to 100 or something for my Archives page.
Size -> Thumbnail is a good choice. You can choose thumbnail, small, medium, or large. I like thumbnail since it’s easy to navigate through many images/posts.
Design -> 2. There are a few different design formats, 1 through 5. I like design 2. You can play around with them and see which you like best by entering a different number and saving it.
Columns -> If you’re using design 2, you’ll need to set how many columns you like. I can fit 2 on my page, you may be able to fit more.
The rest I left alone. You can browse the readme.txt file if you want to use designs 4 or 5 which make use of the other settings.

Now you’re going to scroll down the code until you see the lines of asterisks.

Copy this section from your coding file:

• This is an image, because when I posted the text it actually used the code and displayed all my archives inside the post! Sorry guys •


• Press enter after the semicolon, and paste the section below it.

• Replace ‘image_archives’ with each subsequent category name. For example “image_archives_carpentry” “image_archives_baby”
• Replace ‘image_archives_shortcode’ with each subsequent category name. For example, “image_archives_carpentry_shortcode” “image_archives_baby_shortcode”
• Repeat for all your categories

The very bottom of your page should end with this

Okay, made it this far? Now it’s time to make the page so you can see your new fancy archive buttons.

Step 4: Add your page

Go to your dashboard, and to Pages -> Add New. Name your first page Archives. I added a little blurb to the top, but you don’t have to have text if you don’t want it. Now you simply add in your wordpress shortcode:

Save the page, and voila! You have thumbnail image archives! Add pages for each individual category, and use the different shortcodes. Example:

• If you don’t want comment capabilities on your pages, be sure to turn that feature off from the Page menu settings.

To Add Individual Category Archives:
*Go Back to your plugin editor*

• Now you want to highlight from “//shortcode function” at the top all the way down to the closing bracket “}” and copy it. That’s 100 lines of code in total.
• After the bracket, hit enter, and paste that code.
• You will change “image_archives_shortcode” to “image_archives_categoryname_shortcode”. Substitute categoryname for your actual categories, like “baby” “cooking” “DIY” etc.
Term ID setting: This is where you’ll have some trial and error. You’ll need to figure out which number corresponds to which category name. It’s hit or miss. Carpentry was #5, Makeovers was #3, etc. What I did was grab a pen and paper, open multiple tabs so I could edit my plugin, edit my page, and look at the blog so I could see which posts displayed with each number. Expect to spend about 30 minutes to an hour on this.
• Leave all your other settings alone.
• Go back down to that bottom ending bracket, hit enter, and repeat for all your category names.

You should have already done this step, but if you didn’t, make sure you have shortcode coding for each category by copying this section below:

• This is an image, because when I posted the text it actually used the code and displayed all my archives inside the post! Sorry guys •


• Press enter after the semicolon, and paste the section below it.

• Replace ‘image_archives’ with each subsequent category name. For example “image_archives_carpentry” “image_archives_baby”
• Replace ‘image_archives_shortcode’ with each subsequent category name. For example, “image_archives_carpentry_shortcode” “image_archives_baby_shortcode”
• Repeat for all your categories

The very bottom of your page should still end with this

Now you’re done! You have clean, simple, attractive thumbnail buttons for each post. I know it seems like a lot of work, but it’s totally worth it. You will increase traffic when your site is more easily navigated and has added usability.

[important]NOTE[/important] If you do not see every post showing up in your comprehensive archive or category page, here’s the problem I ran into:

Figure out what post is missing. From your dashboard, go to Posts then choose the one missing and click Edit. From the post menu, click on your “Add an Image” button and make sure there are images in your gallery. I had moved from free wordpress to paid website wordpress, and had imported hundreds of posts from my previous blog. In transit, some of my galleries had been emptied. You have to have an image in your gallery for the shortcode to pull from and display that post. It won’t display text without an image. So, if you have a post that’s just words, upload a general image to your gallery. It doesn’t have to be in your actual post, just in the gallery. And remember it pulls from the first image, and they’re sorted alphabetically. So keep that in mind when you name your images.

Alright! I hope you enjoyed my first tutorial, and I’d love for you to give me some feedback on how easy this post was to digest and understand. And of course, if you happen to do this on your own blog, I would be so happy if you left a link so I can check it out!


Skip to comment form

  1. Greg Karpoff

    Killer b, thanks for this very helpful tutorial. I transitioned my photoblog from Pixelpost over to WordPress, and couldn’t believe how little information there was on how to enable this type of functionality in WP. Your article cleared it up completely. Thanks again.

    1. Notice: Trying to get property of non-object in /home3/killerbd/public_html/wp-content/themes/graphene/includes/theme-comments.php on line 266

      I’m glad it could help!

  2. Elena Frost

    This is awesome I’ve been looking for a thumbnail index plugin that matches my categories for sometime now. It was clear and precise, just one thing there were so many } brackets (Adding an individual category), I guessed that it was the one after
    “return $this->ia_core();


    which luckily it was! Thank you so much for the help!

    And voilà my link, although I’m still working out styles etc.

    Thanks again,

    Ellie xx

    1. Your page looks awesome! Very clean and chic. Thanks for the help defining the bracket placement. I’m not really a “techie” so I’m not the greatest at explaining my methods. Which are more “try this and see if it works!” than actual methods!

Comments have been disabled.

Notice: Trying to get property of non-object in /home3/killerbd/public_html/wp-content/plugins/jetpack/modules/gravatar-hovercards.php on line 238
%d bloggers like this: