CSS Basics

NOTE: We do NOT provide customization support on our support forum. Please make changes at your own discretion and carefully.

You can change your CSS in a few ways. Depending on the level of CSS skills you have, and the amount of CSS changes you plan on making, your preferred method may vary:

Method 1: Use the Custom CSS Theme Option

From your Dashboard, you can simply enter any CSS code into the Custom CSS box within THEME OPTIONS.

  1. Go to WP Admin ==> Gabfire Themes ==> THEME OPTIONS ==> Custom Styling ==> Find the Custom CSS box
  2. Enter your CSS code and Save Options upon completion.

Method 2: Use the Custom CSS File

As a means to isolate any of your changes from the theme’s CSS files, you can take advantage of the custom.css file. This will allow you to re-apply CSS changes should you ever update your theme, or wish to identify and modify your own changes.

  1. There is a custom.dist.css file within your theme directory.
  2. Rename it to custom.css and add your CSS code inside.

Method 3: Edit the CSS File Directly

You can edit the CSS file directly by FTP’n to your server. This is the method most tech-savvy users will prefer.

  1. FTP to your site and go to the theme directory and look within the /styles directory. There you will see several CSS files labeled per their style (such as default, red, blue, etc.)
  2. Open the file which reflects the active style you have selected in THEME OPTIONS. For example, if you are using the default style, then you would edit the default.css.
  3. Edit the file as you need.
  4. Save file.
  5. Refresh your site, clear cache (if any), and the CSS changes will be reflected.

CSS Basics Video Tutorial – Part 1

CSS Basics Video Tutorial – Part 2

CSS Basics Video Tutorial – Part 3

CSS Basics Video Tutorial – Part 4

Author Photo and Bio Below Entries

This is what we are going to display below post entries

Open single.php (or single-default.php) and paste this

<?php if ( get_the_author_meta( 'description' ) ) { // If a user has filled out their description, show a bio on their entries  ?>                        
    <div class="author single_postmeta">
        <?php echo get_avatar( get_the_author_meta('email'), '68' ); ?>
        <strong><?php printf( esc_attr__( 'About %s', 'journey' ), get_the_author() ); ?></strong><br />
        <?php the_author_meta( 'description' ); ?>
        <br />
        <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>">
            <?php printf( __( 'View all posts by %s →', 'journey' ), get_the_author() ); ?>
        <div class="clear"></div>
    <div class="clear"></div>
<?php } ?>

right before
<?php endwhile; else : endif; ?>

And then go to admin -> theme options -> paste this into custom.css of theme control panel

.single_postmeta {
    font:italic 13px/19px Georgia,Times,serif;
    padding:15px 0;
    border-top:1px solid #efefef;
    border-bottom:1px solid #efefef;
.author.single_postmeta {
.single_postmeta a {
.single_postmeta a:hover {
.single_postmeta .left {
.single_postmeta .right {
.single_postmeta .widget,.single_postmeta .gab_share_widget {
.single_postmeta .widgettitle {
    margin-top:5px !important;
.single_postmeta .share-separator {
    height:1px !important;
.single_postmeta .avatar  { 
    float: left;
    clear: left;
    border: 1px solid #eee;
    margin-right: 10px;

Website is Slow?

Have a slow site? There are dozens of possible reasons why this could be the case. Below are some steps you can take to speed up your site or decrease load time:

  1. Better hosting = faster server – The most common reason for slow sites is a slow server. If you are on cheap shared hosting, it’s likely that your host has many thousands of other sites on the same server. Since all those sites share the same server resources, there’s not much you can do to offset the lack of speed.
  2. Plugins – Lower number of plugins. Many plugins load several files, are poorly coded, or simply have broken links which cause slower sites. Deactivate all your plugins and retest your site to see if any plugins are causing slowness.
  3. Cache – Install a cache plugin such as W3 Total Cache. Furthermore, try Cloudflare if you’re really tech-savvy.
  4. Ads – Lower number of ads which results in less external requests for data. Each ad is served by an ad network which has to deliver that ad to your site (i.e., takes time)
  5. HTTP Requests – Lower number of http requests to site by reducing the number of posts visible on your homepage.
  6. Social Networks – Remove any third-party scripts taking too long to load (example: facebook, twitter, youtube, etc.)
  7. Images – Lower the number of images displayed on your homepage
  8. Images – Optimize your images for the web (save for web). Unoptimized images will slow down sites.
  9. Images – Do not use very large images
  10. Broken Links – make sure there are no broken images or links on your site
  11. Redirects – Avoid redirects on site
  12. Videos – Lower number of videos to see if that improves site speed.

Please note that there are many factors that contribute to your website’s load time, and identifying the one or more reasons is a time-consuming process. Be patient, and perform the process of elimination.

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.


How to Add an External RSS Feed Widget

WordPress core functionality allows you to insert RSS feeds onto your site using the RSS Widget. RSS Widget is not theme-specific and is a standard widget built into WordPress.

What is RSS?

RSS (Really Simple Syndication) is an XML-based format for sharing and distributing Web content, such as news headlines. Using an RSS reader, you can view data feeds from various news sources, such as CNN.com, including headlines, summaries, links to full stories.

When should I use RSS Feed?

Normally, you would add a RSS feed to retrieve data from another site onto yours. For example, one would want to add CNN news rss to their personal site.

There is no reason (no good reason at least) that one should be adding their own rss feed to their own site. That makes no logical sense as the data (i.e., articles/posts) already exists on your site so you shouldn’t have to retrieve it using the RSS XML protocol.

How do I add a RSS Feed Widget?

1) From your WP back-end, go to your Widgets section.

2) There you will find the RSS Widget. It looks like this:



3) Drag it into any widget area where you wish to display the RSS feed:Rss-widget-details

4) Fill in the inputs requested by the RSS widget. The most important input is the RSS feed url which is different than the URL of the external site. So make sure you are actually grabbing the RSS feed url (usually it has the word rss or feed in the url):

For example: To get CNN’s RSS feeds, this link provides their RSS feed urls. In the example screenshot, I use the CNN Top Stories RSS feed.

5) Save your widget.

6) Clear your cache. Refresh your site and you should now see the data being pulled from the source you requested.


  • RSS feeds are xml data being retrieved from source site. The source site controls what is being sent (not your theme).
  • In most cases, the image associated with the source article will not be retrieved. However, there are more advanced RSS plugins that will allow this functionality.

How to Use Links in WordPress

The blogroll is a WordPress feature that allows you to store a set of external links. These links can be organized into categories. Links and their categories can be added, deleted, and edited.



Clicking on the “Links” tab in the Admin WordPress Panel will send you to the Manage Links SubPanel. The Subpanel contains a list of all of your links. You can choose to modify one link only or many links at once by using the options found at the bottom of the SubPanel.

The links will come in handy for a widget feature called Links. Going to Widgets in the WordPress backend, you will see a widget called links that can be dragged and activated in any widget section. This will allow you to display a selective group of links on your web site.


How to Paginate a Post

Is your article too long or the post would be better if it was broken into multiple pages?

Well the ability to paginate a post is a functionality that is built into WordPress. On order to paginate a post follow the next steps:

You could split a post/page up into different web pages so that is has pagination. All you have to do is the following:

1) Switch to TEXT mode (not Visual). This it the tab on the top right side of the post body.


2) Type the following into the exact area you want to split the post into another page.


3) Save. That’s it!