How to Setup a Category Template

In most of our themes, we offer a several category templates which looks different from the standard default category template.

How to set different layouts for categories?

As always, all theme configuration is done from your THEME OPTIONS.

1) Go to Gabfire Themes tab > Theme Options > Miscellaneous
NOTE: For older versions, the setting may actually be found under Theme Settings –> Categories – Category ID to use for media template.

It will look like this:

Gabfire-category-templates

 

2) Enter the Category ID into the corresponding category template field. yIf you choose to use multiple category IDs, each category must be separated by a comma without spaces as shown below:

  • 7
  • 7,8,9 (no spaces)

3) Save Options. That’s it! Now any post that you create and assign a category ID to a specific category template will display as such.

TimThumb or WP Post Thumbnails

Also explained in this video.

TimThumb

  • Images are resized on-the-fly
  • Can resize images not uploaded with WordPress media uploader
  • Does not create multiple images on your server (storage)
  • Uses cached image(s)- some users prefer this rather than having to load same image in multiple sizes on a page
  • Easier to change width & height of an image (works out-of-the-box in most themes without any setup required)
  • Does require ability to write cache images on server (folder permissions)

WP Post Thumbnails

  • Image sizes have to be pre-defined in theme
  • A new image file is created and stored on upload to your server (if you have server storage limits, this is not ideal). 1 image can result in many images on server.
  • If you ever want to change an image size, you’ll have to regenerate thumbnails for all previous posts.
  • If you have existing posts, they will need to have thumbnails generated otherwise site will not have images in required sizes
  • If you switch themes, it’s likely that the images will not be sized perfectly for the next theme

Image Ratios

Just a quick reference 16×9 and 4×3 ratio images.

The 16×9 Ratio:

  • 100 x 56 – not ideal (too small, requires image to be stretched)
  • 200 x 112 – not ideal (too small, requires image to be stretched)
  • 300 x 168 – not ideal (small, requires image to be stretched)
  • 400 x 225 – more ideal (small, requires image to be stretched)
  • 450 x 253 – most ideal
  • 500 x 281 – most ideal
  • 550 x 309 – most ideal
  • 600 x 337 – most ideal
  • 650 x 365 – most ideal
  • 700 x 393 – most ideal
  • 750 x 421 – most ideal
  • 800 x 450 – more ideal (file size)
  • 900 x 506 – less ideal (file size)
  • 1000 x 562 – less ideal (file size)

The 4×3 (8×6) Ratio:

  • 100 x 75 – not ideal (too small, requires image to be stretched)
  • 200 x 150 – not ideal (too small, requires image to be stretched)
  • 300 x 225 – not ideal (too small, requires image to be stretched)
  • 400 x 300 – not ideal (small, requires image to be stretched)
  • 450 x 337 – most ideal
  • 500 x 375 – most ideal
  • 550 x 412 – most ideal
  • 600 x 450 – most ideal
  • 650 x 487 – most ideal
  • 700 x 525 – most ideal
  • 750 x 562 – most ideal
  • 800 x 600 – more ideal (file size)
  • 900 x 675 – less ideal (file size)
  • 1000 x 750 – less ideal (file size)

Avoid using BMP files. The PNG, JPG and GIF are the only supported file formats

How to Add a Post with an Image Thumbnail

If you already reviewed the section titled How Thumbnails Work – Image Handling, then you are ready to Add a Post with an Image.

Instructions are provided in both text-format and video tutorial format below.

Step-by-Step Text Instructions

Text-Based Instructions:

  1. Login to your WP Dashboard
  2. Click on Add New under Posts
  3. Write a title, write the article, etc. The usual stuff.
  4. On right side, you will see a section called ‘featured image’ – click Set Featured Image.
  5. If you do not see the Featured Image panel, then please click on Screen Options on top right corner, and check (enable) the panel for featured image. WP 3.1+ hides certain panels, but you can display them simply be performing this step.
  6. Upload an image from your computer.
  7. Once uploaded, the image will show its data. At the bottom of it, you will see a button link titled USE AS FEATURED IMAGE – Click that. That’s it. Now that featured image is associated as the featured image for the article. You are free to add images into the body of the article as well. But the featured image is the image used as the thumbnail for your articles on home page and category pages.

NOTE: It is not required that you insert the image into the post. The image is still automatically attached or associated to that post by WordPress.

  1. Assign the category you want for the article. For example, If you want to see it in home-page slider, then assign it the category you selected in THEME SETTINGS or THEME OPTIONS => CATEGORIES for the Featured Area. This is why it is important to always configure your THEME OPTIONS first before posting questions on the forums.
  2. Publish the post.
  3. That’s it. Refresh your site and you will see it shows the image as the thumbnail.

Video Tutorial

Video Tutorial: HOW TO ADD A POST WITH AN IMAGE USING THE SET FEATURED IMAGE OR CUSTOM FIELD METHOD

Note: In older version of WordPress, the Set Featured Image panel was referred to as Set Thumbnail. They are one and the same.

Please go through all documentation and video tutorials before posting questions on the forum. We take the time to create these tutorials so that we can save time and effort trouble-shooting commonly asked questions.

Trouble-Shooting

If you do not see images on your site, it’s almost ALWAYS due to one of the following:

  1. You have NOT configured your THEME OPTIONS to display a post from the category you selected for your post with image. Go to Appearance => THEME OPTIONS => and configure each setting on each tab.
  2. You did NOT chmod the cache directory as instructed in the Theme Installation Guide
  3. You are attempting to use an image from a different server. Image must be on your server so that it can be manipulated.
  4. You have not set a featured image.
  5. The image is so small – or – so large that WordPress cannot create the various thumbnails for it.
  6. Your server does not have the GD Library installed. Please submit a ticket to your host and they will install it for you.

 

References

How Thumbnails Work – Image Handling

Background on Thumbnails

Fundamentally, one needs to understand the concept of thumbnails before we get into how thumbnails work in WordPress. Essentially, a thumbnail is a smaller version of a larger, higher-quality image. Thumbnails are used in many WordPress themes to provide both informational and aesthetic benefit to site. Newspaper themes / Magazine themes use thumbnails extensively on their home page. The diagram below reflects how a single large image can be used to generate thumbnails of various sizes. This is exactly what happens behind-the-scenes in most WordPress themes.

Image-handling-thumbnails

 

Now that you know what a thumbnail is, let’s quickly discuss two important concepts:

1) Image Quality – for best image quality, you always want to use a large, high-quality image. This is logical and obvious! Please do not expect great thumbnails if you are starting with an image smaller than the thumbnail size. For example, if your original image is 100px x 100px, and the thumbnail size generated is 200px x 200px = that will result in stretching the image and loss of image quality. This is common sense, right?

2) Image Dimensions – pay attention to image dimensions and types. If your site uses landscape thumbnails (width is greater than height), then do not expect amazing thumbnails if your original image is portrait (height is greater than width). Obviously, either the width or the height has to be compensated for to fit into a fixed content area.

Keep these two factors in mind when working with images and investigating thumbnails.

Featured Image

If no custom field is defined, the theme will try to find a post thumbnail set in WordPress. To define an image as post thumbnail you just need to click on Set Featured Image button below the category under Featured Image panel on edit/add new post window.

Thumbnail-featured-image

Upon uploading the image, be sure to click on the Use as Featured Image button at the bottom of the upload dialog box as shown in this screenshot.

Thumbnail-use-as-featured-image

No Image

If theme cannot find a custom field defined or a wordpress featured image thumbnail set, it will display a default category image. In Gabfire Themes, this is usually an image that displays the text “No Image Found.” The default images are stored in wp-content/themes/THEME_NAME/images/thumbs directory. You can always change these default images to your own logo/branding or preference, however keep the image sizes exactly the same as each corresponds to a different content area.

Catch First Image

In some themes, we may offer an option titled “Catch First Image”. This function checks the body of the post and use the first image found as the image for thumbnails. NOTE: Only available in some themes (not all). If your theme does not have this option in the THEME OPTIONS, then it means it is NOT available for that theme.

Thumbnail-catch-first-image

Hierarchy Order of Thumbnails

To recap, here is the order of hierarchy for thumbnails:

  1. Custom field “thumbnail” with a valid value (URL) is used to define the image for thumbnails.
  2. WordPress ‘Featured Image’ function is used to define the image for thumbnails.
  3. Catch First Image from the body of the post (if any).
  4. If none of the above, then default image is used for thumbnail in order to maintain the structure of the site.

How to Add a Post with an Image

Instructions are provided in both text-format and video tutorial format on the code here – How to Add a Post with Image Thumbnail.

Basic Image Requirements

  1. Correct format (landscape-horizontal, not portrait-vertical),
  2. Proportionally close to 16:9 ratio (or 4:3) – for example, Advanced slider image is 16:9 proportion (478×270)
  3. Minimum width and height of largest image size in theme. Though, if it’s reasonably smaller or larger in width or height, theme will resize as needed.

Why are my thumbnails stretched, skewed, blurry, ugly?

Provided you read the information above, you should now understand the concept of thumbnails and the importance of the original image. If you are encountering issues with the quality of your thumbnails, then these are possible reason(s):

  1. Original Image is not an ideal size (too small) – trying to use a small image and make it fit into a large thumbnail area
  2. Original Image is not an ideal size (too large) – trying to use a very large image (example: 2000px or 3000px wide) – or large in MB filesize (example: 5MB or 10MB) – and asking WP to re-size it. You should not want images this large anyway.
  3. Original Image is not high-quality – trying to use a low-quality image and make it render beautifully
  4. Original Image is in a different format (landscape vs. portrait) – trying to fit a portrait image (3×4) into a landscape area (4×3) or vice versa
  5. Original Image is in a non-standard file format (something other than .jpg, .png, or .gif)

99% of the time, one of the above is the cause of such issues.

References

If you are interested in more documentation related to image thumbnails, here are some references:

  1. How to add a post with an image – see video tutorial above. (link to the same video tutorial on support forum)
  2. All themes come equipped with a README folder inside the theme directory. Within that directory is the Installation Guide.pdf which has a section specifically on how thumbnailing works.
  3. To understand WordPress Featured Image function, see WP CODEX and this blog post.
  4. To understand Timthumb, see this resource. Timthumb.php is a commonly used, open-source PHP script that generates thumbnails. Many themes use this script to generate thumbnails.
  5. Image Ratios

These are common / standard functions used in almost all themes (not just Gabfire).

How or Where to Download Themes

You can download your theme from the Gabfire Themes Member Dashboard.

  1. Click to Gabfire Themes Member Dashboard
  2. Login using the same credentials you setup during the purchase process. These are the same credentials used on the Support Forum.
  3. On Main Page, you will see all your purchased products under the Active Resources panel.
  4. Click on any product and download the zip file.

Below is a screenshot that explains the page visually. If you need instructions on how to upload, activate, and setup a theme, refer to the Theme Installation Guide.

Member-dashboard-explained

How to Update Your Theme

Who is this for? These instructions are for users who have an EXISTING site and wish to upgrade to the latest theme version. If you are a NEW user or have a NEW site, you do NOT need these instructions.

IMPORTANT: The instructions below are a guide for upgrading to a newer version of a theme. Please understand that everyone’s site is unique. You have your own plugins (usually many), your own content, your own customization, and your own personal settings. So there is no such thing as a guide that works for everyone. With that understanding, I am providing instructions on HOW I upgrade a site to a newer version.

DISCLAIMER: Any time you upgrade WP or a theme or a plugin, you do so at your own risk. Please backup your sites before making such upgrades.

When to Upgrade

If you have a high-traffic site or simply do not want to impact your readers, you should perform the upgrade at a time of low traffic. For most people, this is usually late-night. I do upgrades at midnight.

Maintenance Mode – You can also use a maintenance plugin so your users will see an maintenance mode page while you perform an upgrade. You can search the WP plugin repository for such plugins.

Instructions

Everyone has their own preferred methods for upgrading. Here is how I perform an upgrade. Following these instructions will minimize the amount of time you need to re-apply your settings into the new theme.

Backup Your Site

You have an awesome site! Protect it. You should already be backing up your site regularly. It is wise to perform a backup right before doing an upgrade.

There are many plugins available. I recommend the following:

Backup Your Theme Settings

Since you are updating your theme, it is expected that you will want to have the same Theme Settings (or Theme Options) selected on your current site.

Backup Widgets

Activate Widget Importer Exporter and export your current widgets on admin -> tools Widget Importer Exporter page.

Install New Theme

Now you need to perform the simple process of uploading the new theme and following the instructions as shown in the INSTALLATION GUIDE.

If you are uploading a new version of the same theme, then your existing theme has the same name as the new theme. In this case, you’ll want to delete the theme on your server first.

After you have uploaded new version and activated it, go into Appearance ==> Theme Options ==> and check your settings are set correctly.

Have a Beer!

That’s it! Preparation is the key. This can all be done in less than 10 minutes if done carefully. Enjoy.

Frequently Asked Questions (FAQ)

Q: Do I have to upgrade?
A: No. Upgrading is a personal choice. You do not have to upgrade. Free updates are a benefit of being part of the Gabfire community. We regularly update theme to improve on existing features, introduce new features, and satisfy our awesome customers.

Q: Where do I get the lastest version of the theme?
A: Upon purchase of the theme, you setup a profile to the Gabfire Member Dashboard. Login there and you will see all your active subscriptions. Here are instructions on how and where to download your theme or plugin.

Q: My support forum access has expired – what do I do?
A: You can purchase another year of support forum access simply by clicking the renew link from your Gabfire Member Dashboard.

Q: Will I lose all my posts and images if I upgrade?
A: No. Posts / images / content are stored in your WordPress database. They are not affected by your theme. Only theme-specific settings, styling, customization, and widgets are impacted.

Theme Documentation

All the steps to install the theme are covered here in this page. Please read through it before you submit any support question. All support questions shall be addressed in the support forums. Please note that we offer support for common issues but not necessarily customization issues.

Access to support forum is limited to registered members who have purchased a Gabfire Theme. Registration approval is subject to moderation. When registering to our Forum please use the same email address you used to purchase the theme to help us recognize and validate your registration (this can take up to 24 hours depending on payment status / vendor).

Please note the most common reason a new user does not receive access to the support forum is because they did NOT use the same email address used when purchasing the theme and therefore our system is not able to validate their purchase.

Installation of Theme

Install and activate your theme following these instructions. Note the instructions are the same to install and activate any WordPress theme.

  1. Go to WordPress Admin Dashboard > Click on Appearance –> Click on Themes
  2. Click on the Install Themes tab at the top
  3. Click on Browse and select the theme .ZIP file
  4. Click Install Now. Once installed, please Activate the theme.

Theme-install-themes-upload

NOTE: If you have access to FTP, it may be better to upload your theme to avoid conflicts with the theme having same name as your existing theme. To avoid this, you can rename your old theme directory to themename-old. Then proceed with the upload of new theme.

Re-generate Thumbnails

Install & Activate the OTF Regenerate Thumbnails plugin:

If you are going to use this theme with a brand new site, SKIP THIS STEP (proceed to next step).

 

Theme Settings / Configuration

After initial installation of the theme, your site may look empty. The reason for this is that you need to configure your Theme Options.

  1. Please make sure you have several posts assigned to various categories. This will ensure we have some posts to fill up the site. If your site looks blank, it’s because you have not published any content yet. Additionally, the navigation menu items will only display once you have at least 1 post in a respective category.
  2. In the admin dashboard of your site, click on Appearance > Theme Options (or Theme Settings)
  3. Configure the various theme specific options. Please make sure you go through each setting, and each tab as there are several options you can configure.
  4. Make sure you save your settings and refresh your browser to see the result. Now, you are all set to continue forward with your site.

IMPORTANT: PLEASE DO NOT CLAIM YOUR SITE DOES NOT WORK WITHOUT HAVING CONFIGURED EACH SETTING. IT’S VERY IMPORTANT THAT YOU SELECT A SETTING FOR ALL TABS IN THEME OPTIONS.

Theme-options

Theme Specific Installation Guides

View All Theme Installation Guides

How to Troubleshoot Theme and Plugin Issues

Gabfire Themes uses WordPress’ best practices to make our themes as compatible as possible with WordPress. However, some sites have third party plugins which do not adhere to these best practices and can often result in a theme or plugin conflict.

The following sections provide instructions for determining if an issue you are experiencing with Gabfire Themes is caused by the theme or a plugin conflict. If you determine that your issue is not a theme or plugin conflict by following these instructions, please report your issue on the Support Forums. If you were directed to this topic after having posted your issue in the Support Forums, confirm in your posted topic that you have followed these steps and were still able to recreate this issue. Please note that most issues are caused by

Testing for Plugin Conflicts

To test for a plugin conflict:

  1. Deactivate ALL plugins (not just one, deactivate ALL of them for more accurate results)
  2. Check to see if the issue occurs by refreshing your site
  3. If the issue does not occur, one (or more) of your plugins is causing a conflict with Gabfire Themes. To determine which plugin(s) is causing the conflict, follow these steps:
    • Activate each plugin one by one, and refresh your site
    • Check to see if the issue occurs after each plugin is re-activated. If / When the issue re-occurs, you will be able to identify the conflicting plugin.
  4. If the issue persists, keep plugins deactivated and continue forward and perform steps in next section.

Testing for Code Conflicts

To test for a code conflict:

  1. Ads – Go to Theme Options > Manage Ads, and remove all ad code
  2. Widgets – Go to Appearance > Widgets, and remove all third-party code from all widget zones
  3. Hard-Coded Snippets – Remove any code you inserted into theme files.
  4. Check to see if the issue occurs
  5. If the issue does not occur, one (or more) of your own code insertions is causing the issue. To determine which code(s) is causing the conflict, follow these steps:
    • Re-enter each code snippet one by one, and refresh your site
    • Check to see if the issue occurs after each snippet is re-entered. If / When the issue re-occurs, you will be able to identify the conflicting code.
  6. If the issue persists, keep plugins deactivated and keep code snippets removed, and continue forward to perform steps in next section.

Testing for Theme Conflicts

To test for a theme conflict:

  1. Activate default Twenty Eleven theme
  2. Check to see if the issue still occurs
    • If the issue does not occur after having activated the default Twenty Eleven theme, AND you’ve performed the tests for plugin conflicts and the test for third-party code, then please submit a thread on the Support Forum indicating these steps have been completed, and the instructions for us to reproduce the issue. We will look into it immediately and find a solution or workaround.
    • If the issue continues to occur, then it is likely that either plugins, third-party code, or your WordPress installation has errors.

How to Create a Gravatar for Your User Profile

If you have never setup a Gravatar account:

  1. Register / login to Gravatar. Upon registering, use the SAME email address that is associated with your WordPress User Profile.
  2. Upload your photo and associate it with that specific email address. (see image below)

If you already registered at gravatar.com, follow these steps:

  1. Under “My Account”, click on Manage My Gravatars
  2. click on “Add a New Email”
  3. Enter the email associated with your user profile on your WP site
  4. Then, you’ll need to click on “Add a New Image”
  5. Upload an image (square is best as gravatars are square)
  6. Then select the email address, and then select your image from bottom. Now it’s associated with that email address. Click Save.
  7. It will take about 5-10 minutes to propagate on the internet, and then will appear on site.

Gravatar-image-association