Z Installation Guide

The theme is not going to look anything close to live demo when you first install and activate it. Here in this short tutorial we will try to replicate live demo as much as possible.

First, go to front page of your site -> Click on Theme Options link at the very top of page -> You will be redirected to Theme Control Panel -> On Theme Control Panel click on Intro tab -> Select the Intro Type you’d like to have -> Save Changes -> Now click on Intro tab again -> Fill the fields shows up -> Save Changes once again.

Check the front page of your site once again. You will probably like what you see this time 🙂

Please note that Vimeo videos does not show on localhost if you are trying to use a Vimeo video as background of Intro. But you will see your video as soon as you upload your site to a webserver.

Every section on front page can easily be disabled, go through all tabs and disable any section or customize it up to your liking.

Navigation

Disabling a section via theme control panel will not disable the related Navigation link. On theme control panel go to Misc tab -> you will notice the links used for navigation on that page. You can edit or disable any of navigation links under Misc tab.

You may want to set up a custom navigation as well. The custom navigation is set to display right after Home link. For instance, the Extras link on navigation of live demo is created as a Custom Menu. This tutorial shows how to set up a custom menu.

Team Members

Team members field looks empty by default. You may add a new team member by going admin -> Members -> Add New field. You can increase the number of Members shows on front page via theme control panel -> Team Members tab. While adding a team member, you will see a field that asks Portfolio Tag. Thats important if you want to show the Recent Projects on CV page of the employee. Just add any tag to that field (make sure to use small letters and if you have any white space, replace it with – eg. Blue Sky tag should be written as blue-sky). Later, while adding Portfolio posts you will need to use same tag on New Portfolio Post.

Portfolio

Create some categories on admin -> Portfolio -> Portfolio Categories page. Then add new portfolio entries on Portfolio -> Add New page. If you want to connect a portfolio work to any team member, make sure to use tags as well. Later while creating

Blog Posts

On theme control panel -> Timeline tab -> Set the criteria to display the posts of a single category or most recent posts of all categories on blog posts row. You can also set the number of entries to display.

If you want to display a button to link all blog posts (Check “See All Blog Posts” on live demo) Go to pages -> Add New -> Use whatever you like as page title -> You will see Page Template selectbox on right hand below publish button -> Select Blog -> Publish the page. Now go to Theme Control Panel -> Timeline -> Select the page you just created for “Button Below Blog Posts” option.

 

Event Master Theme Installation Guide

Logo and Social Links

Upload a logo field is located under General tab on Admin -> Appearance -> Theme options page. We suggest a logo thats not higher than 30px – 1 line.

The social icons on header are hidden by default. They will start to show when a link is entered into social site links field on theme control panel, under header tab. You need to make sure to use http:// before any link otherwise the link will be broken

Navigation

Create a custom navigation on Admin -> Appearance -> Menus page.

Register Now Link

You will need to enter Register Now Link and Text on theme control panel -> Header section to display Register Now button.

Event Details

Event details bar is managed on theme control panel -> Event Details tab

Speakers

Create a category for Speakers -> Categories tab on theme control panel -> Select the Speakers category -> set the number of posts to 7 to display speakers blog (0 will disable that section). Posts -> Add new -> any post saved under Speakers category will show up on Speakers block. Square images are suggested as featured image for speakers block.

Sponsors

You can place all sponsor images into one single file and save it as a single image and upload it as a single sponsor image. Or upload them one by one on via sponsors tab on theme control panel

Twitter Widget

The theme doesn’t come with Twitter widget. you will need to download and install Gabfire Widget Pack. Once enabled, move Twitter widget into secondary-right widget zone

Newsletter Widget

Admin -> Theme Control Panel -> Footer -> Follow the instructions on screen.

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
Authorinfo

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() ); ?>
        </a>
        <div class="clear"></div>
    </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;
    color:#999;
    padding:15px 0;
    margin-bottom:15px;
    border-top:1px solid #efefef;
    border-bottom:1px solid #efefef;
    width:100%;
    overflow:hidden
}
.author.single_postmeta {
    border-bottom:none;
    padding-bottom:0;
}
.single_postmeta a {
    font-family:Helvetica,Arial,sans-serif;
    color:#999;
    font-style:normal;
    font-weight:bold;
    text-decoration:none;
}
.single_postmeta a:hover {
    color:#333
}
.single_postmeta .left {
    width:330px;
    display:block;
}
.single_postmeta .right {
    width:300px;
    display:block;
}
.single_postmeta .widget,.single_postmeta .gab_share_widget {
    margin:0;
    padding:0;
    margin:0;
}
.single_postmeta .widgettitle {
    margin-top:5px !important;
}
.single_postmeta .share-separator {
    height:1px !important;
}
.single_postmeta .avatar  { 
    float: left;
    clear: left;
    display:block;
    border: 1px solid #eee;
    padding:2px;
    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 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:

  1. Go to THEME OPTIONS ==> MISCELLANEOUS.
  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.

Page-templates

 

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