Table of contents
- 1. Theme Installation
- 2. Theme Activation
- 3. The Theme’s Administration Panel
- 4. Sidebars and Widgets
- 5. Shortcodes
- 6. Galleries
- 7. Review System
- 8. Sliders
- 9. Menus
- 10. Files & Code
- 11. Tips & Tricks
- 12. Credits
We’ll guide you step by step on how to install the theme once you have downloaded the package from ThemeForest.
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:
- Gazette — extracted folder
- Demo Content
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).
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.
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:
The following plugins are required:
- 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.
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:
- 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.
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.
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.
This tab is designed for general functionality, such as picking your own logo image, login logo image, favicon. You may also paste-in your analytics code (any provider, not only Google) in the textarea named Google Analytics Code.
Tip: hovering the question mark next to the item's field will give you more detailed information about that item.
Change your homepage's appearance, content and layout. Featuring an inside-the-panel editor, you can control your entire website's homepage appearance straight from this tab.
This is the tab that will bring your website life & color. Over here you may: choose if you'd prefer the light or dark skin settings, assign a pattern, image or color to the background, customize the colors and fonts of almost every element in your website.
You get to choose the colors from a predefined color pallete if you wish, but a colorpicker is also available so you may pick the color manually.
Some of the interface items have light & dark skin settings which you may combine in contrast with your website's skin settings for greater effects!
When picking fonts, an advanced dropdown with searchable, previewable fonts will pop-up so you can choose the perfect font and preview it at the same time!
You may control elements' height, spacing between them, and a lot of other layout-related options here.Your website can have a width of a minimum 960px, ranging from 10px to 10px, up to a maximum of 1600px. The choice is yours and then you may also pick your sidebar's width percentage.
Another cool option here is that you may choose to put the logo in the navigation bar instead of having it displayed in the header.
This tab comes packed with a few more options such as squared or rounded avatars, boxed widgets, etc.
This is the tab that will let you create your own slider or pick the slider data from WordPress posts. In both cases, you may choose from 3 different slider types (with more to come), advanced customization options for each of them, and a lot of custom options to customize your slider!
The looks of the sliders can be customized under the appearance tab!
Control your images' dimensions from within this tab. Please note that you could use different aspect ratio dimensions such as 16:9 or 4:3 to make the images look the way you want!
The Retina Images option will turn on double sized images for your website so they look great on high-dpi screens!
This tab is dedicated to displaying posts, what to display in them, what to exclude, how they should look etc.
If you have a separate blog page, please make sure to choose it from the first option's dropdown.
Then you may choose your favourite post-displaying layout, choosing from the 3 predefiend types. The checkboxes below let you choose what elements to display or not in the posts.
This tab is dedicated to the review system. You may skip this section if you don't plan to use it.
From this tab you can control who can rate on your posts, where to display the reviews, and what the default symbol you'd like to use for the images - type. We might consider an icon-picker for this option in the very next update!
Enable or disable any effect you wish.
Effects bundled in the are: Scroll to top button, Animated Sticky Menu, Expandable Search Bar, Uniform - form stylings, fitVids.js - responsive videos, Mobile Menu - Responsive Mobile Navigation, Slide Toggles, slabText, Swipebox.
A more in-depth description and what each option does can be found by hovering the question mark in the right side of the item!
This is the place to create new custom sidebars. The Interface is quite easy. Once a sidebar is created, make sure to save the changes in order to have it appeared in the Widgets section and further assign it to a page or post.
Within this tab, you may control your website's footer caracteristics. Choose from 18 different layouts to display the widgets in it, and choose what to display and what not. The apperance of the footer can be customized under the Appearance tab in the theme's admin panel.
The options in this tab lets you add the socials you see in the top navigation area. They are quite an important element and as a matter of fact, it's being displayed in the top navbar, the most 'visible' element.
The Import / Export option lets you save and import later or on a different installation, the admin panel's settings. It's a great solution when you need a rapid backup of your website, just copy-paste the string! In this area, you may also change the administration panel logo so your clients don't know they are using a theme.
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!
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!
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!
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:
- 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.
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.
5.1 Content Shortcodes
The content shortcodes can be added using the Insert Shortcode button above the editor:
Clicking the button above will popup the following window:
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: http://wordpress.org/plugins/shortcodes-ultimate/.
5.2 Gazette Specific Shortcodes
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.
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.
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.
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.
The portfolio image is assigned using the Featured Image option.
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!
7. The Review System
The Review Area for posts and pages is located in the bottom section of the editor, check the screenshot:
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!
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.
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.
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.
10. Files & Code
10.1. File Structure
Gazette’s file structure is as it follows:
- 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.
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.
- 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.
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.
10.3. JS Files
The theme’s JS files are located in the framework/scripts/ folder.
- 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.
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!
Special thanks to Matt and his team first of all for developing this mad CMS named http://wordpress.org! Kudos to you, lads!
Two plugins that have a major impact in our theme’s functionality:
Items used to improve our template, and special thanks to their creators!!
Many thanks for the superb images we had the permissions to use in our template to http://unsplash.com/
Also, many thanks to the http://jquery.com/ library and the jQuery plugins that make it so special: