Help File: The Gossip

GhostPool.com | Created 04-Dec-12 | Last Updated 25-Apr-13

Changelog | Setup Help & Bug Fixes | Tweaks & Customizations

Table of Contents

1. Installation
2. Demo Content
3. Setting Up The Theme
   • Homepage
   • Editing The Homepage
   • Navigation
   • Background
   • Sidebars/Widgets
   • Shortcodes
   • Sliders
   • Blog Pages
   • Gallery/Portfolio Pages
   • Contact Page
   • Customizing Theme Design
   • Translation
   • Using The Lightbox
4. Updating The Theme
5. FAQs
6. Credits

1. Installation

Before installing the theme make sure you have installed WordPress 3.5 or higher. You can download WordPress for free from WordPress.org. Now follow the steps in the image below:

2. Demo Content

Two demo files come with the theme. The demo.xml file imports example posts, pages, comments, custom fields, categories, tags and the widget_data.json file imports widgets. The demo content can help you in learning how the theme works. To add this content follow the steps below:

• Go to Tools -> Import and select the WordPress option. If you are prompted to install the WordPress Importer plugin you should do this.
• Click the Browse button and locate the demo.xml file that is inside the thegossip-theme/thegossip/Help/Demo Content/ folder and double click the file to select it and then click the Upload file and import button.
• A new screen will appear, check the Download and import file attachments option and click Submit.
• To import the demo widgets go to Tools -> Import Widgets, click the Choose file button and locate the widget_data.json file that is inside the thegossip-theme/thegossip/Help/Demo Content/ folder and double click the file to select it and then click the Upload file and import button.

3. Setting Up The Theme

Homepage

• Go to Pages -> Add New to create a new page.
• Give your page a title and in the text editor add one of the following:

Homepage Example 1 code:

[slider content="slide" cats=""]

[clear]

[two]

[featured_posts header="Technology" rss="#" color="#e93952" cats=""]

[/two]

[two_last]

[featured_posts header="Music" rss="#" color="#9521f7" cats=""]

[/two_last]

[clear]

[carousel header="Gaming" rss="#" color="#52C0D4" cats=""]

[clear]

[featured_posts type="horizontal" per_page="5" large_meta_tags="true" small_image_width="78" small_image_height="78" small_meta="false" large_excerpt_length="350" header="Business" rss="#" color="#bdd452" cats=""]

Homepage Example 2 code:

[slider width="1440"]

[clear]

[two]

[featured_posts header="Technology" rss="#" color="#e93952" per_page="1" cats="technology" large_image_width="691"]

[/two]

[two_last]

[featured_posts header="Music" rss="#" color="#9521f7" per_page="1" cats="music" large_image_width="691"]

[/two_last]

[clear]

[featured_posts type="horizontal" header="Business" rss="#" per_page="5" color="#BDD452" large_meta_tags="true" large_image_width="691" large_image_height="350" small_image_width="78" small_image_height="78" large_meta="false" small_meta="false" large_excerpt_length="0" cats="business"]

[clear]

[featured_posts type="horizontal" header="Gaming" rss="#" per_page="5" color="#D45255" large_meta_tags="true" large_image_width="691" large_image_height="350" small_image_width="78" small_image_height="78" large_meta="false" small_meta="false" large_excerpt_length="0" cats="gaming"]

Homepage Example 3 code:

[slider]

[clear]

[posts image_width="400" image_height="300" image_wrap="true" cols="1" excerpt_length="800" header="Latest Posts" rss="#" color="#52C0D4"]

• Add your category slugs where it says cats="", so for example cats="technology".
• Additionally change the Layout drop down menu option to Fullwidth and Title drop down menu option to Hide.
• Scroll down to the Discussions panel and uncheck the Allow comments option, if you cannot see the Discussions panel click here.
• Go to Settings -> Reading, select A static page option and from the Front page drop down menu select the page you just created (leave the Posts page drop down menu empty).
• You can create your own custom homepage layouts by using different shortcodes and changing the shortcode options.

Editing The Homepage

• Once you have created or imported your homepage (see the Homepage section) you will want to edit the existing shortcodes.
• To load your own post categories, change the category titles and change the category colours edit the shortcodes highlight below.
• You can completely customize the homepage by adding/removing/moving different shortcodes. For a list of all the available shortcodes and their options click here.

Navigation

• Go to Appearance -> Menus to set up your top and body navigation menus.
• Click the + button and create two menus.
• On the left-hand side from the Theme Locations panel select your menus from the Top Navigation and Body Navigation drop down menus.

Add navigation link colors

• To change the navigation link colors, add one of the available colour classes in the CSS Classes text field for the desired menu link.
• The available colors: terracotta, red, blue1, blue2, green1, green2, yellow, purple, pink, orange, lightgrey, darkgrey, black.
• If you cannot see the CSS Classes field, in the top right corner of the page click the Screen Options button and make sure the CSS Classes box is checked.

Separate dropdown menu into columns (mega menus)

• Add the text nav-title in the CSS Classes text field for the desired menu item.
• If you cannot see the CSS Classes field, in the top right corner of the page click the Screen Options button and make sure the CSS Classes box is checked.
• Beneath the nav-title menu item, insert the menu items you want to display for this column. Make sure you do NOT indent them.
• Insert another nav-title menu item to start a new column.

Separate dropdown menu into rows (mega menus)

• Add the text sub-nav-title in the CSS Classes text field for the desired menu item.
• If you cannot see the CSS Classes field, in the top right corner of the page click the Screen Options button and make sure the CSS Classes box is checked.
• Beneath the sub-nav-title menu item, insert the menu items you want to display for this row. Make sure you do NOT indent them.
• Insert another sub-nav-title menu item to start a new row within the same column.

Add text to dropdown menu (mega menus)

• To add text instead of a link, create a custom link from the Custom Links panel, add the desired text to the Label text field.
• Now add the text nav-text in the CSS Classes text field for the desired menu item.
• If you cannot see the CSS Classes field, in the top right corner of the page click the Screen Options button and make sure the CSS Classes box is checked.

Background

• Go to Appearance -> Background to add your own background colour or upload your own background image.
• If you only want to add a background colour with no background image you will still need to upload an image to overwrite the existing background image. Upload the transparent image that comes with the theme located at thegossip-theme/thegossip/lib/images/blank.gif.

Sidebars/Widgets

• Go to Appearance -> Sidebars, click the Add Sidebar link and give your new sidebar a name.
• Now go to any post or page and scroll down to the settings panel and select one of your sidebars from the Sidebar drop down menu.
• Go to Appearance -> Widgets and drag and drop widgets from the Available Widgets panel over to your sidebar widget panels on the right.
• You can also add any of the shortcodes with the theme within a Text widget.

Popular Widget
To set up the "Popular Widget" widget seen on the live preview you should do the following:

• Go to Plugins -> Add News and search for "Popular Widget".
• Install the plugin called "Popular Widget".
• Go to Appearance -> Widgets and drag the Popular Widget widget over to the desired sidebar.

Shortcodes

This theme comes with several shortcodes. Shortcodes are pieces of code that can be inserted directly into your posts, pages and widgets to add certain content easily such as videos and dividers.

• Click the Visual tab at the top of the text box on any post or page.
• Click the GP button to open the shortcode window.
• From the shortcode drop down menu select a shortcode, which will automatically be inserted into the text box.
• You can view the full range of options for all the shortcodes from the following page.

Sliders

Creating Slides

• You can add slide posts and/or normal posts to your slider.
• Go to Slides -> Add New and/or Posts -> Add New to create a slide.
• On the right-hand side you will see a Featured Image panel, click the Set featured image link to set an image for this slide.
• After uploading or selecting your featured image click the Set featured image button in the image upload window.
• Enter your page, image or video URL that you want the slide to link to in the Custom URL text field.
• On the right-hand side you can add your slide to a category from the Categories panel.

Inserting Slider Shortcode

• To insert a slider into your page add the following code to the text box on any post or page:

[slider name="slider" width="1110" height="400" slides="10" content="slide" cats=""]

• To display both slides and posts use: [slider content="slide,post"..., to display just slides use: [slider content="slide".. and to display just posts use: [slider content="post"....
• To display slides and/or posts from a specific category add the category slugs to the cats="" option (go to Slides -> Slide Categories and/or Posts -> Post Categories and get the slugs from the slug column) e.g.[slider cats="tech,gaming"...
• You can also change a variety of other slider options by adjusting the shortcode, for a full list of slider options see this page.

Blog Pages

This theme comes with a [posts] shortcode that can be used to display posts in a blog or gallery/portfolio format.

Creating Posts

• Go to Posts -> Add New to create a new post.
• Give your post a title and content in the text editor.
• Scroll down to the Post Settings panel where you can control the way the post looks.
• On the right-hand side you will see a Featured Image panel, click the Set featured image link to set an image for this post.
• After uploading or selecting your featured image click the Set featured image button in the image upload window.
• On the right-hand you can assign your post to categories from the Categories panel.

Inserting Posts Shortcode

• Go to Pages -> Add New and insert the following post shortcode into the text editor:

[posts]

• To add posts from a specific category to a post shortcode add the post category slugs to the cats="" option (go to Post -> Categories and get the slugs from the slug column).
• You can also change a variety of other blog options by adjusting the shortcode, for a full list of blog options see this page.

Gallery/Portfolio Pages

This theme comes with a [posts] shortcode that can be used to display posts in a blog or gallery/portfolio format.

Creating Posts

• Go to Posts -> Add New to create a new post.
• Give your post a title and content in the text editor.
• Scroll down to the Post Settings panel where you can control the way the post looks.
• On the right-hand side you will see a Featured Image panel, click the Set featured image link to set an image for this post.
• After uploading or selecting your featured image click the Set featured image button in the image upload window.
• To add additional images/audio/images in a lightbox click the the Add Media button and upload your files.
• On the right-hand you can assign your post to categories from the Categories panel.

Inserting Posts Shortcode

• Go to Pages -> Add New and insert the following post shortcode into the text editor:

[posts image_width="250" image_height="150" cols="3" per_page="3" excerpt_length="10" pagination="false" meta_author="false" meta_date="false" meta_cats="false" link="image" title_size="18"]

• To add posts from a specific category to a post shortcode add the category slugs to the cats="" option (go to Posts -> Categories and get the slugs from the slug column).
• You can also change a variety of other post options by adjusting the shortcode, for a full list of portfolio options see this page.

Contact Page

• Go to Pages -> Add New to create a new page.
• Insert the contact form shortcode into the text editor e.g. [contact email="youremail@address.com"].
• Replace youremail@address.com with your own email address.
• If your contact form is not working click here.

Customizing Theme Design

You will probably want to customize the design of the theme. This may involve editing the HTML in the php files (theme structure) and the CSS in the style sheets (theme design). If you are not familiar with HTML and/or CSS you will want to hire a developer to modify the theme for you. You can contact one of these developers from here. If they are unavailable you will have to look elsewhere such as FreelanceSwitch.

Developer Tools

An excellent way of styling your theme is to use the developer tools that come with most modern browsers. The developers tools allow you to see what HTML elements need to be styled and allows you to edit the styling of the theme within the browser window. These changes are not permanent and nobody else sees them, it's just a great way of adjusting the look of your site quickly. Here are some links to the developer tools for each of the major browsers:

• Google Chrome - Inspect Element Tool
• Firefox - Firebug Tool
• Internet Explorer 9 - F12 Developer Tools

Editing the Style

Once you know what HTML elements you need to style and how, you can either edit the stylesheets directly (style.css etc.) or override the default styling by adding your CSS code to the Custom CSS box as explained below:

• Go to Appearance -> Theme Options -> CSS Settings and in the Custom CSS text box.
• The CSS code you add to this text box will overwrite the default styling of the theme.
• The benefit of adding your CSS code to the Custom CSS text box rather than editing the stylesheets is that when theme updates are released your style modifications will not be overwritten.
• For example, to edit the link and link hover colours you would add the following to the Custom CSS text box:

a {
color: #ff0000;
}

a:hover: {
color: #000000;
}

• To change the colour of the post meta text you would add:

.post-meta {
color: #ff0000;
}

Translation

Translating The Theme

• Install the translation program Poedit.
• Open the thegossip-theme/thegossip/languages/en_EN.po file with Poedit.
• Translate the file with Poedit, click here for more information.
• Locate wp-config.php, which is in the root directory of your WordPress installation and change the language, click here for more information.
• If you want your website to support multiple language you can use the qTranslate plugin.

Updating Your Translation Files

• If you have updated the theme and the changelog says the translation files have been updated, if you have modified the translation files or created new ones you will want to update them rather than using the new ones.
• To do this insert your modified translation file (e.g. en_EN.po) into the thegossip-theme/thegossip/languages/ folder overwriting the new file.
• Now open this file in PoEdit and click Update and it will display the text changes since the latest theme update.

Using The Lightbox

Gallery Shortcode

• To enable the lightbox on the [gallery] shortcode add itemtag="div" link="file" to the shortcode, like so:

[gallery itemtag="div" link="file" columns="3"]

Manual Use

• To use the image or video pop up effect on any content add rel="prettyPhoto" to your links as follows:

<a href="http://example.com/imagename.jpg" rel="prettyPhoto"><img src="http://example.com/imagename.jpg" alt="" /></a>

• If you want to group items in the lightbox add [pp_gal] to the link e.g. rel="prettyPhoto[pp_gal]".
• You can add the following files to the lightbox, using the following formats:
  • YouTube: http://youtu.be/Sw-H3FoV2lc&image=http://www.example.com/image.jpg
  • Vimeo: http://vimeo.com/8245346
  • QuickTime: http://www.example.com/video.mov?width=780&height=418
  • Flash: http://www.example.com/video.swf?width=792&height=294
  • External Site: http://www.twitter.com?iframe=true&width=400&height=200

Disabling The Lightbox Script

• To disable the lightbox script that comes with this theme open thegossip-theme/thegossip/lib/scripts/custom.php and find and remove:

jQuery("a[rel^='prettyPhoto']").prettyPhoto({
	theme: 'pp_default',
	deeplinking: false,
	social_tools: ''
});

4. Updating The Theme

Checking for theme updates

From time to time free theme updates will be released which will include bug fixes and feature updates. To be notified of updates via email login to your ThemeForest account, go to Downloads, find the theme and check the Get notified by email if this item is updated box.

Updating the theme

If you have made NO changes to the theme files

• Go to the Envato Toolkit page in your admin panel and insert your marketplace username and secret API key in the designated input fields. To obtain your API Key, visit your My Settings page on any of the Envato Marketplaces.

• Once the API connection has been established you will see a list of themes that can be auto installed.
• Locate the The Gossip theme and click install automatically link.

If you HAVE made changes to the theme files

• If you have made any changes to the theme files view the changelog before updating as it tells you which files that have been updated, added and/or removed.
• You can use DeltaWalker or DiffMerge and compare the code changes between your modified files and the new theme files.
• Using an FTP client download your current thegossip theme folder from the wp-content/themes/ directory to your hard drive and then rename the folder to something like thegossip-old.
• Now upload the new thegossip folder that is inside your thegossip-theme folder to your WordPress themes directory wp-content/themes/.

5. FAQs

You can view all the FAQs for this theme by clicking here.

6. Credits

• Aqua Resizer
• CarouFedSel
• FlexSlider
• prettyPhoto Lightbox Script
• Sidebar Generator WordPress Plugin
• WP Show IDs Plugin