Documentation

[su_spacer size=”1″]

Table of contents

[su_spacer size=”100″]

1. Installation

We’ll guide you step by step on how to install the theme once you have downloaded the package from ThemeForest.

[su_spacer size=”30″]

1.1 Using the WordPress Installer

Extract the contents of the downloaded ZIP archive from ThemeForest in a folder on your desktop. Follow the scheme and the image below:

[su_list icon=”icon: folder-open-o” icon_color=”#666″]

  • Gazette – extracted folder
    • Demo Content
    • Documentation
    • Gazette
    • License
    • Gazette.zip

[/su_list]

gazette_activate_1

Next, select the Gazette.zip file contained in the archive you have extracted on your desktop before. Press Install. If you encounter any problems, please follow step 1.2 of the documentation (manual installation).

[su_spacer size=”30″]

1.2 Manual Installation

Extract the contents of the downloaded ZIP archive from ThemeForest in a folder on your desktop.

Connect to your server using a FTP client. Navigate to: [Your wordpress install]/wp-content/themes/

From the folder you have created on your desktop (the one containing the files in the archive downloaded from ThemeForest), drag the “Gazette” folder into your FTP client window, under the /themes/ folder. Wait for all the files to upload and navigate to WordPress -> Appearance -> Themes and activate Gazette. Don’t hesitate to contact us if you encounter any further issues with the theme’s installation.

[su_spacer size=”100″]

2. Activation

Once you have installed the theme, you’ll need to activate it, so press ‘Activate’ in order to use Gazette.

When the theme is activated, you will be prompted to install a couple of plugins, some mandatory, some optional. Please see the below image for reference:

gazette_plugin_install

The following plugins are required:

[su_list icon=”icon: circle-o” icon_color=”#9ab821″]

  • Shortcodes Ultimate – With this plugin you can easily create tabs, buttons, boxes, different sliders, responsive videos and much, much more.
  • Category Colors – Allows you to pick a unique color for every category and the theme will display it accordingly.

[/su_list]

The theme also makes use of a couple of other plugins, which are optional, but if you find them useful, they really fit in with the theme and its options! The list is as follows:

[su_list icon=”icon: circle-o” icon_color=”#666″]

  • Social Count Plus – As seen in the live preview, it’s the first widget in the right that informs your users about your website’s statistics and lets them subscribe to your active social networks.
  • MailPoet Newsletters – Formerly known as Wysija, it’s a plugin that lets your users subscribe to your newsletters and you can mass-send (highly customizable) e-mails to them, containing your newsletters.
  • BuddyPress & bbPress – The social plugins by WordPress which will turn your magazine into a community.

[/su_list]

You will be prompted as seen in the image above to install any of these plugins as they come bundled with the theme. Please remmeber that the Shortcodes Ultimate plugin is a must and the popup will not go away until you install it.

[su_spacer size=”100″]

3. The theme’s panel – explained

To access the theme’s administration panel you’d have to navigate to: [WordPress Dashboard] -> Appearance -> Theme Options.

The panel comes split in 13 (more may come) tabs which let you customize different settings in your website.

[portfolio_list thumb=”large” showposts=”13″ cat=”admin” disable=”date,more,visit,pagination”]

Please note that all options in the admin panel are followed by a question mark symbol. Hover it to see the additional description or information regarding that element. It might be quite handy!

[su_spacer size=”100″]

4. Sidebars and Widgets

4.1 Create a Sidebar

In order to create a new Sidebar, navigate to Appearance → Theme Options → Sidebar tab.

Enter the sidebar’s name in the input and click Add Sidebar. Remember to Save the changes in order for changes to take effect!

gazette_add_sidebar

[su_spacer size=”30″]

4.2 Assign a Sidebar to a Post or Page

Whenever you are creating a new post or page (or of course, editing one that already exists), just under the editor there is a section named Gazette General Page/Post Options in which you can change a couple of things which we’ll discuss in a further chapter. The option that we’re looking for here is the Custom Sidebar dropdown which gets populated with the sidebars you have created in the theme’s admin panel. Select the sidebar you’d like to use and update the post!

gazette_assign_sidebar

[su_spacer size=”30″]

4.3 Gazette Widgets

When using the Gazette theme, a couple more widgets will be displayed in the Widgets area of your WordPress installation (Appearance → Widgets). These are:

[su_list icon=”icon: circle-o” icon_color=”#666″]

  • Gazette – Contact Form → Quickly add a contact form to your sidebar
  • Gazette – Contact Us → Quickly add contact info to your sidebar (e.g. address, phone #, email)
  • Gazette – Flickr → Pulls in images from your Flickr account
  • Gazette – Popular Posts → Custom popular post widget with post preview image
  • Gazette – Recent Posts → Custom recent post widget with post preview image
  • Gazette – Reviews Posts → Displays the posts that have a rating given, in the order you wish, with a preview image
  • Gazette – Sub Navigation → Displays a list of SubPages
  • Facebook Like Box Widget → Facebook Like Box Widget is a social plugin that enables Facebook Page owners to attract and gain Likes from their own website. The Like Box enables users to: see how many users already like this page, and which of their friends like it too, read recent posts from the page and Like the page with one click, without needing to visit the page.

[/su_list]
[su_spacer size=”100″]

5. Shortcodes

Gazette owns 2 types of shortcodes and this is an important thing to know! There is the Shortcodes Ultimate plugin which comes packed with hundreds of content styling shortcodes, and there is the Gazette Shortcode Generator which lets you generate custom theme shortcodes to display posts, galleries, add a contact form etc.

[su_spacer size=”30″]

5.1 Content Shortcodes

The content shortcodes can be added using the Insert Shortcode button above the editor:

gazette_insert_shortcode

Clicking the button above will popup the following window:

gazette_shortcodes

If you don’t have much experience with shortcodes, you might want to check the plugin’s page for more information on how to use the shortcodes, updates, etc: wordpress.org/plugins/shortcodes-ultimate/.

[su_spacer size=”30″]

5.2 Gazette Specific Shortcodes

gazette_shortcode_gen

Select the shortcode you’d like to use from the dropdown list and then follow the steps by filling in the required input fields and continue by clicking the Send Shortcode to Editor button. Please remember that this only works if the cursor is placed somewhere in the editor. The best result is to place the cursor exactely where you’d like to put the shortcode.

[su_spacer size=”100″]

6. Galleries

The entire gallery / portfolio system included in Gazette WordPress Theme is located in the WordPress Dashboard under the Portfolio section. Gazette supports an unlimited number of portfolios / galleries.

[su_spacer size=”30″]

6.1 Create a new Gallery Category

First step into creating a new gallery is to create a Portfolio Category. To do this, navigate to Portfolios → Portfolio Categories and fill in the fields in the left (only Name is mandatory), followed by clicking the Add New Portfolio Gallery button.

gazette_pfolio_add_category

[su_spacer size=”30″]

6.2 Add a gallery item

Under the Portfolios sections, click Add New. Adding a new portfolio / gallery item is as simple as creating a WordPress post or page.

gazette_new_pfolio

The portfolio image is assigned using the Featured Image option.

[su_spacer size=”30″]

6.3 Output the Portfolio / Gallery

The portfolio / gallery system is being displayed using the portfolio shortcode. So, wherever in your content area, make use of the Gazette Shortcode Generator and select Portfolio from the dropdown list, then follow the instructions and send the shortcode to the editor. That’s it all!

[su_spacer size=”100″]

7. The Review System

The Review Area for posts and pages is located in the bottom section of the editor, check the screenshot:

gazette_review

Steps to setup the rating system for a post:

1. From the Review System dropdown, make sure to enable the review system in order for the other inputs to popup. Please note that there is also an Enabled – Place manually option which lets you create a rating system for that post, though it won’t be displayed by itself, you’ll be provided with a shortcode upon creation which you can use anywhere in the content area.
2. Choose your Review Style. That can be Stars (general 5 stars or other symbols), Percentage (0% – 100%), Marks (as in grades, give a point mark to the article).
3. Fill in the other fields as described.
4. Create Review Criterias and give them a rating. Please note that all ratings on the admin panel are percentage based but they display diferrent on the website. Remember to Update the post / page when done. This is it, you may preview the post now to see how the rating looks and eventually make a couple of adjustments to what you’ve filled in so far in order to meet your needs!

[su_spacer size=”30″]

7.1 Customize the Review System

The review’s system functionality can be customized in the Reviews section of the theme’s administration panel (Appearance → Theme Options). By functionality, we mean, people who should be able to rate your posts, where should the rating previews be displayed, default indicators, etc.

To change the looks of the review system, you’d have to navigate to the Appearance tab in the theme’s backend (Appearance → Theme Options) and look for the Review System category there.

[su_spacer size=”100″]

8. Sliders

The image / content slider that you see in the live preview is entirely set up from the Slideshow tab in the theme’s admin panel.

gazette_slideshow

Although, on the initial release we only have 3 slider types to choose from, we pledge to come up with a bunch more in the next releases. So, pick your default preferred slider type from the dropdown. Expand the Advanced Slider Settings to customize the slider.

The last option in the Advanced Slider Settings area, named Slider Source lets you create your own custom slides by picking images from the Media Library or uploading them, or display the posts from your selected categories.

This is it, remember to save the changes. The slider should be now displayed on your homepage. To have an additional slider displayed on another page, follow the meta option below the editor named Slider on this page? and choose your favourite slider to display.

[su_spacer size=”100″]

10. Files & Code

10.1. File Structure

Gazette’s file structure is as it follows:

[su_list icon=”icon: folder-open-o” icon_color=”#666″]

  • bbpress – Files overwriting the bbPress plugin in order to fit in the theme.
  • buddypress – Files overwriting the BuddyPress plugin in order to fit in the theme.
  • framework – The core functions of the theme.
    • admin – The admin panel, the options, everything is in here!
    • classes – Framework’s required classes including widgets, the resizing script and contact form.
    • css – The CSS files the theme uses. See next chapter (10.2) for more detailed information.
    • extensions – Additional files and plugins used to create the theme are located in this folder.
    • functions – The main controllers of the theme are situated in this folder. Change only if you know what you’re doing!
    • scripts – All the jQuery plugins used in the theme, and the theme’s main js controller.
    • shortcodes – Gazette’s Shortcodes
  • images – Assets and Patterns the theme makes use of.
  • languages – .pot, .po and .mo files for translation inside! Languages coming soon as we get submissions!
  • templates – Template files for pages’ templates.

[/su_list]

[su_spacer size=”30″]

10.2.CSS Files

Except the style.css (which also contains the most important core CSS functions of the theme) and rtl.css files located in the theme’s directory, the rest of the CSS files are located in the /framework/css/ folder.
Files are:

[su_list icon=”icon: circle-o” icon_color=”#666″]

  • dark.css – Contains the dark skin settings of the theme.
  • fontello.css – The font icons used in the sociables section of the navigation bar.
  • light.css – In opposite to the dark.css file, it contains the light skin settings of the theme.
  • responsive.css – The responsive queries for the entire theme so it looks great on tablets and mobile devices.
  • review_system.css – The CSS for the entire Review System.
  • royalslider.css – The RoyalSlider’s required CSS file and the extra design brought by us to fit in the theme.
  • rs-minimal-white.css – RoyalSlider’s Minimal White Skin.
  • uniform.default.css – UniformJS’ default CSS file.
  • uniform.gazette.css – Our custom skin for UniformJS.

[/su_list]

There is also a framework processed CSS file, located in the same folder as these CSS files, and it’s named processed.css.php. It’s a PHP file that parses all variables the framework outputs in order to create custom CSS commands.

BuddyPress and bbPress CSS files are located in their directories, buddypress and bbpress in the theme’s root directory.

CSS scripts are enqueued in the theme.php file located under the framework/functions/ folder.

[su_spacer size=”30″]

10.3. JS Files

The theme’s JS files are located in the framework/scripts/ folder.
Files are:

[su_list icon=”icon: circle-o” icon_color=”#666″]

  • jquery.fitvids.js – FitVids jQuery library include.
  • jquery.flexslider-min.js – FlexSlider jQuery library include.
  • jquery.hoverdir.js – HoverDir plugin.
  • jquery.royalslider.min.js – The RoyalSlider lib.
  • jquery.slabtext.js – SlabText jQuery library include.
  • jquery.uniform.min.js – Uniform jQuery library include.
  • main.js.php – This is where the magic happens! All jQuery functions the theme uses are parsed over here.
  • numina_reviews.php – The JS file that handles the user-ratings AJAX submissions.
  • waypoints.min.js – The Waypoints library.

[/su_list]

[su_spacer size=”100″]

11. Tips & Tricks

Adding a class=”fade-in” or simply the fade-in class to any element will animate it when appearing as seen in the live preview.

There is a Grab the code at the bottom of every page in our live preview, so you can grab the code and copy-paste it in your editor to achieve the same style for some elements you might want to use!

[su_spacer size=”100″]

12. Credits

We’d like to thank everyone who had even a tiny contribution into creating this amazing theme! Things happen because you’re awesome, people!

Special thanks to Matt and his team first of all for developing this mad CMS named WordPress! Kudos to you, lads!

Two plugins that have a major impact in our theme’s functionality:

[su_list icon=”icon: circle-o” icon_color=”#666″]

[/su_list]

Items used to improve our template, and special thanks to their creators!!

[su_list icon=”icon: circle-o” icon_color=”#666″]

[/su_list]

Many thanks for the superb images we had the permissions to use in our template to Unsplash.com

Also, many thanks to the jQuery library and the jQuery plugins that make it so special:

[su_list icon=”icon: circle-o” icon_color=”#666″]

[/su_list]

[su_spacer size=”100″]

Thinking that the documentation is missing something? Please let us know about it! We’ll have it added immediately to this section!

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *