How to Find the Widget Map

What is a widget map?

A widget map is a visual interpretation of where each widget area is located in relation to the theme layout.

How do I see the widget map?

If you would like to see your theme’s widget map, follow these simple instructions:

  2. Enable the checkbox under Widget Map, enable it.
  3. Refresh your site and you’ll see all widget areas in their corresponding locations.

How to Use a Page Template

In most of our themes, we offer sever PAGE TEMPLATES. A Page Template is a template which comes with your theme. WordPress can be configured to use different Page Templates for different Pages. You can select which Template will be used when displaying a particular Page.

The Page Template is specially coded to output certain data in a certain way. Gabfire Themes provides several templates along with most themes.

For example (these are Page Templates included in BlogNews):

How To Use a Page Template

1) Go to Pages –> Add New

2) On the right-hand side, you will see the following panel titled Page Attributes with a drop-down under Template:

NOTE: If you do NOT see this panel, look to the top right of your screen for the words – Screen Options. Click that and enable the checkbox next to Page Attributes.



3) Select the Page Template you desire.

4) Publish the Page. That’s it! Now that page will display the pre-defined content within that page template.

Reference Links:

  1. Page Templates as Defined by WordPress

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:



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.


  • 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


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.


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.



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.



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.


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.


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.


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.


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.


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.


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.


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.



Theme Specific Installation Guides

View All Theme Installation Guides