Theme Documentation

Created: March 01, 2013. Last updated: Apr 10, 2016. Version: 2.4.1. Author: SaurabhSharma. email: xconsau@gmail.com

Introduction

First of all, let me thank you for showing your trust in NewsPlus theme and purchasing it. I have handcrafted this document to lessen your efforts in configuring and using this theme seamlessly. If you find any bug or issue which is beyond the scope of this documentation file, feel free to contact me at xconsau@gmail.com. Thanks so much!

Important: When you install and activate the theme, it doesn't automatically load the content as shown on live demo. It will be required to import/create content, add images, configure settings and widgets so that they appear like live demo. Below is a step by step guide on configuring theme content.

Table of Contents

• Install WordPress
• Install NewsPlus Theme
• Install Child Theme
• Install Required Plugins
• Create Category and Posts
• Create Home Page
• Create Blog/Archive Page
• Create Contact Page
• Create Navigation Menus
• Using Post Formats
• Using Widget Areas
• Custom Widgets
• NewsPlus Theme Options
• Visual Short Codes and Style Elements
• Using Language options
• HTML structure
• CSS files and structure
• Javascript files
• php files and their role
• Frequently Asked Questions
• Filter Reference
• Shortcode Reference
• Sources and Credits

Install WordPress

If you have not set up your WordPress installation yet, you can grab a copy of latest WordPress archive here. Next, go through the installation instructions inside readme.html file and set up your WordPress installation. A detailed installation guide can be found on official WordPress Site.

Install NewsPlus Theme

In order to install NewsPlus Theme, follow these steps:

1. Download newsplus theme archive from your marketplace account's download section.

2. Unzip/extract the download archive and look for the folder named 'newsplus'. Compress/zip this folder as newsplus.zip using any compression tool like WinRAR. A compressed newsplus.zip is also available in main download.

3. Log in to WordPress and navigate to Appearance > Themes. Click on the "Add New" button.

Add new theme

4. On the "Add Themes" page, click on the "Upload Theme" button. Next, click on "Choose file" and locate the newsplus.zip file for installation.

Upload Theme

Install Theme

Important: Do not activate the theme now. We will install child theme and will activate it.

Install NewsPlus Child theme

In order to install child theme, follow same procedure as shown above for the main theme. Instead of newsplus.zip, you would use newsplus-child.zip file. Once the child theme is installed, activate it from Appearance > Themes, as shown below:

Activate Chid Theme

Upon theme activation you will see a dashboard notice, prompting to install required plugins.

Install Required Plugins

Install Required Plugins

1. Click on the "Begin installing plugins" link inside the dashboard notice. You will see a plugin installer sceen, as shown below:

Required and recommended plugins

These plugins are required/recommended for proper functioning of features as shown on live demo of theme. Below is a quick detail about each plugin:

Plugin Name	Description
NewsPlus Shortcodes	This plugin is required for proper functioning of shortcodes and widgets in NewsPlus theme.
SiteOrigin Panels	This is a page builder plugin used for creating page layouts. This is optional plugin, and install it only if you wish to use Page Builder for creating layouts. The theme can still show page layouts using shortcodes markup as provided inside dummy_data folder of your main download.

2. Click on the "Install" link of each plugin, or select all and choose "Install" option.

3. Once the plugins are installed, navigate to Plugins > Installed Plugins. Make sure the above mentioned plugins are activated. If not, click on "Activate" links for each plugin. Alternatively, you can activate these plugins by navigating to the plugins installer screen via dashboard notice.

At this stage, the theme is installed and the required plugins are installed as well. If you check the front end of site, you may see some unwanted widgets inside top header section of site. Nothing to worry. You can remove these widgets by navigating to WordPress Appearance > Widgets > Top widget area. Delete or pull out any unwanted widgets from this section. You can of-course place appropriate widgets in this section later on.

Create Category and Posts

Important: Skip this section if your site already contains posts and categories.

Your WordPress site content is a collection of categories, posts and featured images associated with them. Most of the site content will contain images. (This includes slider, post lists, widgets, etc). So let’s start by creating a category and publish some posts in it. But before that, a quick note about image preparation.

Image Preparation

Since the theme is responsive, images will be shown in fluid width. For better results, you can prepare images of around 800px to 1000px width and auto height. You can save these images in web optimized .jpg or .png format, and keep on your hard drive. These can be uploaded to the posts when required. Recommended size is 900 x 600px.

Create a Category

Navigate to Posts > Categories. Next, create a new category (say, Featured) and click on "Add Category".

A newly created category will appear.

Finding a Category ID: Hover your mouse pointer on the category name and watch it's link in the status bar of your browser. You shall see a link as taxonomy=category&tag_ID=xx. This xx is the category ID. Note this down as we will need the category IDs to populate the widgets, blog and portfolio pages.

You can also find category IDs by installing this useful plugin Reveal IDs.

You can follow same procedure for creating more categories like News, Photography, Designing, Blog etc. Let's create some posts for our "Featured" category.

Create a Post with Featured Image

1. Navigate to Posts > Add New. Next, enter a Post Title and Post Content.

2. Scroll down to the right-bottom side of your page. You will see a panel for "Featured Image". Click on the "Set featured image" link.

A media uploader will appear. You can either Upload new image files by dragging them in the upload box, or set already uploaded images from the 'Media Library' section. After choosing an image, click on the 'Set featured image' button.

The newly set featured image will appear inside the "Featured Image" panel.

3. Finally, assign the post to an appropriate category (in our case, Featured) and click on "Publish" button.

You can repeat same procedure for creating more posts in different categories. i.e. Create a post, set featured image, and publish it in appropriate category. Once you have enough posts and categories, they can be displayed in various sections of the site.

Create Home Page

Right now, your site will be showing default posts on Home page. That is because we haven't yet created a Home page. It will be required to create a Home page and set it as front page. The Home page cane be created in two ways:

1. Using dummy text markup as provided inside your main download_zip/dummy_data/home*.txt files.

2. Using Page Builder and loading the pre built layout.

We shall see each method one by one. You can choose any method which you prefer.

Create Home page using text markup

1. Navigate to Pages > Add New

2. Enter a title for your home page. Say, "Home".

3. Switch the editor mode to "Text" mode.

4. Main step: Open your main download's /dummy_data/home.txt file and copy it's contents. Paste these contents inside the Home page in "Text" mode of editor.

Create Home Page

5. After pasting content, Publish the page.

On front end you may see some posts or empty sections, depending upon the posts availibility. In order to show correct posts, follow next steps:

Changing category ID inside shortcodes

6. Edit your Home page in "Text" mode and look for the short codes. Each slider and post short code has a paremeter called cats="xx". This means, show posts from category ID xx. In dummy markup this id may be 2, 3, 5 or blank. These category IDs may be different on your site, so it will be required to replace them with correct one. See, How to find category ID.

[posts_slider effect="slide" cats="7,12,15" num="4" ]

Here, cats="7,12,15" means the slider will show posts from categories with numeric IDs 7, 12 and 15 respectively. Use "-1" if you wish to show posts from all categories except the uncategorized category. You can also show posts from tags or Custom Post Types. For that, you can make use of the 'Insert Posts' Short Code button inside 'Visual' mode of editor.

7. After changing category IDs, update the page. Now your site will show the posts as intended.

In above steps I have taken example of default Home page. You can copy markup from other Home page variations like home2.txt, home3.txt, etc.

Important: We have just created the Home page. But this will not appear as front page yet. For that, we will need to adjust Front Page Display Settings.

Set Home pages as front page

8. Navigate to Settings > Reading > Front page displays > A static page.

9. Set Front page as "Home", and leave Posts page to blank. Finally, Save the changes.

Set front page

Now your site shall show the newly created Home page with respective posts.

Create Home page using Page Builder

The theme supports drag and drop page builder by SiteOrigin Panels. Upon theme installation if you haven't installed this plugin, you can install it manually from the official link. Once the plugin is installed and activated, follow these steps for creating Home page.

1. Navigate to Pages > Add new.

2. Enter a title for the page, say, "Home".

3. Click on the "Page Builder" tab of editor.

Create Home Page

4. From the Page Builder panel, click on "Prebuilt" layout.

Prebuilt layouts

5. A panel will open. Click on the "Theme Defined" tab where you shall see all available prebuilt layouts.

Available layouts

6. Click on any page layout. For example, click on "Home 01" layout. It will be imported inside the editor, as shown below:

Imported layout

7. These are the rows, columns and widgets of Page Builder. In order to edit a widget, hover your louse pointer on the widget and click the "Edit link".

Edit page builder widget

A widget panel will open in which you shall see the text markup and shortcodes.

Edit widget contents

8. In this markup you can change heading, links and text contents as required. Inside slider and post shortcodes, replace the category ID inside cats="xx" with the actual category IDs on your site.

9. After making required changes, click on "Done" button.

10. Following the same procedure, edit other widgets and change the contents as required. Finally, publish/update the page.

11. Set this page as front page as described earlier in this documentation.

For detailed guide on using SiteOrigin Page Builder, kindly check their occificial documentation at https://siteorigin.com/page-builder/documentation/

Create Blog/Archive page

A blog or archive page can be created using built in page templates and providing category IDs inside page options panel. Below are some basic steps for creating a blog or archive page:

1. Navigate to Pages > Add New.

2. Enter a title for blog page. Say, "Blog".

3. Leave content section empty, and scroll down to Page Options > Archive and Blog Options panel.

Page options for blog

4. Inside "Category IDs to fetch Archive or Blog Posts", enter numeric category IDs for Blog posts. (E.g. 3, 4, 7). You can use -1 or leave blank to show posts from all categories.

5. Inside "Posts per page", enter a number of posts to show. E.g. 10.

6. From the Page Attributes panel > Template, select a Blog or Archive template and publish the page.

Assign a page template for blog

7. After publishing the page, view it in browser. It will show posts from the Categories as provided inside the Page Options Panel.

Create Contact page

NewsPlus comes with a built-in ajax/php contact page template. In order to use this template, follow these steps:

1. Navigate to Pages > Add New. Next, enter a title for contact page. Say, "Contact us".

2. Inside content editor, you can place any custom markup or text that shall appear just above the contact form.

3. From the Page Attributes > Template, select a template called "Page - Contact", and publish the page.

This will create a contact form with ajax/php form validation.

How to set your email address and custom mail sent message?

In order to configure your email address, navigate to Appearance > Theme Options > Contact. Here you can provide email address, Google Map location code, and mail sent message.

Contact page settings

4. Finally, scroll down and click on "Save Settings" to save these settings.

Create Navigation Menus

NewsPlus support WordPress menus in two locations. Primary menu in header section, and Secondary menu inside top utility section. Let's see how to create and use them.

1. Navigate to Appearance > Menus.

2. On the right side, you shall see a form for adding new menu. Enter a menu name; say "menu-1" and click on "Create Menu" button.

Create new menu

3. Next, assign this menu to any of the available theme locations. i.e. Primary menu or secondary menu.

Assign menu location

4. After assigning a theme location, save the menu. Next, add pages or custom links to the menu as required.

Tip: You can drag menu items up-down to manage order of appearance. You can drag them left-right to set as sub-page.

After adding menu items, save the menu.

Creating a Mega Menu

The theme supports mega menu with the help of CSS classes. In order to create a mega menu, follow these steps:

1. Navigate to Appearance > Menus

2. Click on the "Screen Options" tab on top right corner. From this panel, enable the "CSS Classes" checkbox. Next, close the panel.

Enable CSS Classes

3. Create a new menu (using steps as shown above), or edit an existing one.

4. Expand the main menu item under which you wish to set a mega sub-menu. Inside "CSS Classes" field, provide a class name as mega-menu. Additionally, provide a column class as mega-5col, as shown below:

Add CSS Classes

The mega-menu is a required class name, whereas mega-5col can be changed to mega-2col, mega-3col or mega-4col. i.e. Up to 6 columns are supported in mega menu. You can add a full-width class name for showing a 100% width menu. For example mega-menu mega-5col full-width will show a 5 columnar menu in full width. In this documentation we will take example of 5 columnar mega menu.

5. After adding the class, close the menu item.

6. Next, add a menu item as sub-menu, just under this mega menu item. Say "Column 1 parent". This will be the parent link of first column.

Add child menu items

7. Under "Column parent 1", set more sub-menu items. These will appear as list under the first column.

Set child items of first column

8. Following the same procedure, make 4 more columns by adding a parent item and child items under it.

Add up to 5 mega menu columns

9. After adding menu items, Save the menu. You shall now see the mega menu on front end.

Using Post Formats

Post formats are used to style and display a post according to a specific content. NewsPlus supports 2 Custom Post Formats other than the "Standard" post format. These post formats can be set from the "Format" panel of your post editor. Let's see how to use post formats.

1. Video Post Format

Video post format can be used to display a self hosted Video using oEmbed feature. WordPress supports video embedding using oEmbed. In order to create a Video post, follow these steps:

a. Create a new post and assign a post title. Say, "My Video Post".

b. Next, scroll down to the "Post Options > Post Format Options" panel.

c. Inside "Video URL", provide a full URL of the hosted Video. For example, http://vimeo.com/41369274

Video URL option

d. From the "Format" panel on right side, choose "Video", and Publish the post.

Publish Video Post

Your post will show a standalone video player as provided by their respective video sites. The theme supports all major video formats that are supported by oEmbed.

2. Gallery Post Format

A Gallery Post Format can be used to show post image attachments in form of a Slider. Before creating a gallery post, make sure you prepare some images that are of same height. These images will be attached to a post and used inside Slider. In order to create a Gallery post, follow these steps:

a. Create a new post, and assign a title. Say, "My gallery Post".

b. Next, click on "Add Media" button for attaching images.

Add Media
c. Inside Media Options panel, click on "Create Gallery" Link.

d. From the "Media Library" section, choose "Uploaded to this post" option. A media uploader will appear.

Gallery Uploader

e. Click on "Select files" or upload images by dragging them inside the uploader.

Create a gallery

f. Next, click on "Create a new gallery". A new gallery will be created and attached to the post.

g. Now you will be asked to insert gallery. Skip this step because we do not wish to show gallery images as thumbnails. We will process these images as Slider inside the theme code. So you can close the modal box at this step without inserting gallery. (If you wish not show show a slider and display images as gallery thumbnails, use "Insert Gallery" option instead).

Do not insert gallery

h. Finally, choose "Gallery" from the Post Format panel and publish post.

Create gallery post

It will now display a slider of gallery image attachments on single posts.

Using Widget Areas

Widget area is a section where you can use widgets for the theme. NewsPlus supports 14 widget areas in different locations. Additionally, we have an option for creating Exclusive Widget Areas for header and sidebar section that can be used on different pages and posts.

In order to access widget areas, navigate to Appearance > Widgets. You shall see available widget areas, as shown below:

These are the default widget areas. The theme will use these default widget areas when no exclusive widget area is defined for a page or post.

Important: Please be aware that blog related pages like author, archives, date, category etc. will use these default widget areas. Exclusive widget areas are only for Pages and Single Posts.

Let’s have a quick look on each widget area:

Widget Area	Description
Top widget area	The top most widget area above site body. Can be used for wide advertisement banners.
Fixed widget area left	The fixed widget area on left side of browser. This is located outside site container, and can be used for floating vertical ads.
Fixed widget area right	The fixed widget area on right side of browser. This is located outside site container, and can be used for floating vertical ads.
Default Header Bar	The default header widget area. (When two columnar header type is used)
Default Header Column 1	First widget area in header section
Default Header Column 2	Second widget area in header section
Default Header Column 3	Third widget area in header section
Widget area before content	Widget area appearing before main content and sidebar
Widget area after content	Widget area appearing after main content and sidebar
Default Sidebar	The default Sidebar widget area.
Default Secondary Column 1	First widget area of the footer section.
Default Secondary Column 2	Second widget area of the footer section.
Default Secondary Column 3	Third widget area of the footer section.
Default Secondary Column 4	Fourth widget area of the footer section.

Exclusive Widget Areas

As mentioned earlier, NewsPlus supports Exclusive Widget Areas for header and sidebar section. As an example, let’s create an exclusive widget area for "About Us" page.

1. Navigate to Pages > Add New. Next create a new page called "About Us".

2. Scroll down to the Page Options > Sidebar Options panel, and enable the "Create an exclusive sidebar for this page" option, as shown below:

Finally, Publish the page.. This will register one exclusive widget area with the name "About Us".

The newly registered sidebar will now appear inside the dropdown menu for "Available widget areas for Sidebar". It will be required to select this new sidebar and update the page one more time.

In order to use widgets on these sidebars, navigate to Appearance > Widgets. You shall now see one more sidebar widget area added to the theme.

Now you can drag and use appropriate widgets into this sidebar. Following the same procedure, you can register more sidebars from different pages. All these sidebars will get added to the dropdown menu for Page and Post options.

How to use an exclusive sidebar on a Post?

When a new sidebar is registered from Page Options, it will automatically get added to the "Available widget areas for Sidebar" dropdown list inside Page Options and Post options. Sidebars can be registered only from Page Options panel, whereas they can be used on pages or posts.

For example, edit any of the available posts and scroll down to the Post Options panel. Inside "Available widget areas for Sidebar" section, you shall see the available sidebars:

You can select available sidebars and update the post. Same procedure can be followed for header widget area as well. The secondary widget areas are NOT exclusive. They will be used globally throughout the site.

At this stage, we have seen widget areas and their usage. You can start adding widgets to your site. For that, drag widgets into appropriate widget areas, follow the options and save them. There is no particular format for adding widgets. You can add them according to the content and requirement.

Limitations on exclusive sidebar

The exclusive sidebar option works only for pages and posts. It will not work on archives or any other post types. For example, if you try to create an exclusive sidebar for the WooCommerce Shop page, it will not work. That's because the WooCommerce "Shop" page is an archive of product post types, and not a page.

Using Content Aware Sidebars Plugin

To overcome the limitation, use this handy plugin Content Aware Sidebars. After plugin installation, you can create exclusive sidebars and assign them to any group of pages, posts or archives. In case of WooCommerce shop, you will need to assign the sidebar to "Product Categories".

Custom Widgets

WordPress comes with built-in default widgets for your themes. Apart from these default widgets, NewsPlus comes with 6 custom widgets via NewsPlus Shortcodes Plugin. In order to use these widgets, navigate to Appearance > Widgets. You will see custom widgets with the name "NewsPlus". Let’s have a quick look on each widget.

Important: These widgets will appear only if the NewsPlus Shortcodes plugin is installed. You can find the plugin ZIP archive in newsplus/plugins/ folder.

NewsPlus Categories: This widget can be used to display a list of particular categories. For example, on home page, you may wish to show selective categories such as "products", "news", "awards" etc. In such case, you can use this widget. Drag the widget into appropriate widget area and enter the category IDs separated by commas. These cat IDs will be excluded from the list, and rest of the available categories will be shown.

NewsPlus Flickr: This widget can be used to display a Flickr photo-stream on your website. You can display Flickr photos from a user, userTag, userSet, group, all or allTag. Drag this widget into your widget area and play with the available options.

NewsPlus Popular Posts: Use this widget to display popular posts with thumbnails. The popular posts are chosen from most commented posts. You can also opt to hide thumbnails for popular posts.

NewsPlus Recent Posts: Use this widget if you wish to show your latest posts from a particular list of categories. For example, on a "News" page you may wish to show latest posts only from "News" category. Similarly, you may wish to show "Latest works" only from "Portfolio" category. At such stage, this widget comes in use. You can either include or exclude category IDs. Both options are available. For example, category IDs to include will be 3,4,6,8. And category IDs to exclude will be -3.-4,-6,-8.

NewsPlus Mini Folio: Use this widget to display a mini gallery of post featured images on sidebar. This widget generates a grid of thumbnails from posts images of particular category.

NewsPlus Social Icons: A social networking icons widget. You can configure your social networking links, RSS etc. using this widget.

NewsPlus Theme Options

NewsPlus comes with a theme options panel for basic settings and configuration of the theme.

In order to configure theme options, navigate to Appearance > Theme Options. You shall see 7 different sections in form of tabs. Let’s cover a brief introduction about each of these sections:

1. General
This section contains general settings for your theme. For example: Layout style, global sidebar placement, CSS disable/enable options, etc.

2. Header
This section contains settings for header section. You can manage settings for logo, header type, top utility bar, etc.

3. Blog
This section covers settings for blog related pages like archives, single post settings, related posts, author bio, social sharing buttons, etc.

4. Contact
This section covers basic settings for Contact page template. You can configure email address and other information for contact page template here.

5. Footer
This section provides basic options for footer text.

6. Custom Font
This section can be used to include custom Google Fonts for your theme. After including a font, it is required to add rules to the CSS files in order to make use of this font.

7. Image Sizes
This section can be used for changing image sizes of the theme. If you wish to serve scaled images of lesser dimensions, you can configure them in this section.

Once you have configured basic settings, click on "Save Changes" button at the bottom of page. You can also reset all settings to default by clicking on "Reset all settings" button.

Visual Short Codes and Style Elements

NewsPlus comes with useful shortcodes via "NewsPlus Shortcodes" plugin. These short codes are placed in form of buttons inside the "Visual Mode" of WordPress editor. These short-codes include basic layout columns, posts slider, content slider, posts carousel, posts insertion, tabs, accordions, toggles, lists, information boxes, line separators, level indicators, and buttons. In order to use these short-codes, it will be required to insert them inside the content editor of a post or page. Let's see how to do that:

Visual Short codes - An overview

Short codes can be inserted inside a post or page using the Visual Mode of content editor. When creating a new post or page, you will see a row of short code buttons inside the Visual Mode of content editor, as shown below:

In order to use a short code, place the cursor inside the content editing area (at the point of insertion) and click on the short code button. Next, you can control parameters as directed by the short code. Although each short code button is self-explanatory, let's take one example so that you get familiar with their working.

1. Insert Layout Columns

You can insert a set of layout columns using this short code. For insertion, place the cursor inside content editing area and click on the button as shown above. A modal window will appear which will guide you for various parameters. After choosing appropriate column set, click on "Insert Columns" button. For example, let's insert a 1/2 : 1/2 column set.

As you can see in the image above, a set of two half columns with appropriate short code is inserted. You can edit the content within short code tags.

Important: If you wish to add more columns, it will be required to place cursor at one complete carriage return (enter key).

This method will apply to all short codes. i.e. each short code should be inserted at next line (not on the same line). Adding a short code on same line may prevent them from working, or may result in unwanted line breaks.

Just as we saw in the above example, you can insert

• Posts Slider
• Content Slider
• Post Carousel
• Posts
• Tabs
• Accordion
• Toggle
• Content box
• Lists
• Line separators
• Buttons
• Level Indicators
• Logo Grids

Each of these short codes have their own options panel that will take different parameters from you.

Tip: After inserting a short code, always switch to the Text mode of editor. By doing so, you can fix unwanted line break or paragraph tags.

Using Language options

NewsPlus supports language localization. If you are using WordPress in other language, you can use .po file for translating messages into your own language. The .po file is located inside newsplus/languages/ folder.

First of all, it will be required to define the language inside wordpress/wp-config.php file. Open wp-config.php file in any text editor and look for the following code at around line no. 72:

define ('WPLANG', '');

Enter a parameter for WPLANG. This is generally in a format as language_country. For example, en_US, or de_DE. So, this line will change to:

define ('WPLANG', 'de_DE');

Save this file.

Next, go to themes/newsplus/languages/ folder. Duplicate a copy of languages_country.po file and rename it as de_DE.po file. (Make sure this name is same as what you've defined in wp-config.php file).

Now you have de_DE.po file. You will need poEdit software to edit and translate this .po file. You can download the software from this site:
http://www.poedit.net

After downloading the software, install it with default settings. Next, open de_DE.po file in poEdit. It will show all available messages for translation:

Click on any message string and type its translation inside the "Translation" text area.

Finally, Save the file. Once you save the file, poEdit will automatically compile and generate a .mo file as de_DE.mo. This .mo file will be used by WordPress for translating your messages.

HTML structure

The output of any WordPress theme is pure HTML in browser. The HTML output of NewsPlus theme, in most general case, can be divided into the following sections:

• Page
  • Utility Top
  • Header
  • Main Navigation
  • Main Content
    • Primary
    • Sidebar
  • Secondary
  • Footer

These sections can be seen in HTML markup as:

For quick reference, you can see this diagram and switch to appropriate class/ ID for modifying the appearance or content.

CSS files and structure

The CSS files used by NewsPlus theme are as follows:

• style.css
• editor-style.css
• responsive.css
• user.css
• rtl.css
• rtl-responsive
• css/admin.css
• css/ie.css
• css/prettyPhoto.css

1. style.css

This is the main stylesheet for NewsPlus theme. The general structure is divided into 9 different sections, each with a label, as shown below:

In order to change a particular style rule, you can quickly refer to the TABLE OF CONTENTS and then switch on to appropriate section.

For example, if you wish to change the style rules for primary navigation, you would first look into the TABLE OF CONTENTS. Since, primary navigation falls under section 4. HEADER, you would straightaway scroll down to 4. HEADER section. Here, you can modify/append your styles and save the file. You can also copy these rules into user.css file and then make changes, so that your customizations are not lost when making a theme update. For better results, it is recommended to use Child Theme.

2. editor-style.css

This file is used to style the TinyMCE editor. These styles will not have any effect on the front end of theme, and are only used to style the contents inside TinyMCE editor.

3. responsive.css

This file is used to make the theme responsive on various mobile devices. The styles for various devices are included using media queries. This file can be disabled inside Appearance > Theme Options > General > Disable responsive.css file.

4. user.css

Use this file for adding custom CSS styles to the theme. This is useful when updating the theme. You can keep a backup of user.css file and update theme files easily. By doing so, your customizations will remain safe.

5. rtl.css

This file is used to style theme layout and elements for languages with right-to-left direction. If you are using WordPress in RTL language, this file will be loaded automatically. You can also load this file force-fully by enabling an option inside Appearance > Theme Options > General > Enable rtl.css file.

6. rtl-responsive.css

This file is used for including responsive styles on RTL version.

7. css/admin.css

This file is used to style the the admin interface of Theme Options panel.

8. css/ie.css

This file is used to include Internet Explorer spcific styles and hacks. If you have any IE specific hack, it shall be included inside ie.css file.

9. css/prettyPhoto.css

This file is used by prettyPhoto plugin for styling the lightbox panel.

Javascript files

NewsPlus uses different javascript files for content enhancement and theme features. These files are:

1. Jquery Library for entire site (jquery.js ver 1.8.3+)
2. Jquery Plugins
   1. jquery.ui.core.min.js
   2. jquery.ui.widget.min.js
   3. jquery.ui.tabs.min.js
   4. jquery.ui.accordion.min.js
   5. jquery.flexslider-min.js
   6. jquery.hoverIntent.minified.js
   7. jquery.validate.min.js
   8. jquery.easing.min.js
   9. froogaloop2.min.js
   10. jquery.prettyPhoto.js
3. Miscellaneous
   1. custom.js
   2. contact-form.js
   3. tabs.js
   4. admin.js
   5. theme-customizer.js

Let’s have a quick look on these files one by one:

1. Jquery library for entire site
jQuery is a javascript library that reduces the amount of code we must write. The file jquery.js ver 1.8.3+ is included with WordPress 3.5+. This library is loaded in no-conflict mode, so that your custom plugins and JS code work seamlessly.

2. Jquery Plugins
These are open source Jquery plugin files created by various developers worldwide. Although, you need not modify or edit these files, I shall mention the role of these files one by one:

• ui.core.js, ui.widget.js, ui.tabs.js and ui.accordion.js: These files comes with WordPress installation, and are used for tabs and acordion on this theme.
• jquery.flexslider-min.js: This file is used for the Slider and Carousel.
• jquery.hoverIntent.minified.js: This file is used for hover intent delay on navigation menu.
• jquery.validate.pack.js: This file is used for client side form validation on contact page.
• jquery.easing.min.js: This file is used for easing enhancements on various jQuery animations.
• froogaloop2.min.js: This file is used to support Vimeo videos inside flex slider.
• jquery.prettyPhoto.js: This file is used for prettyPhoto lightbox support on theme.

3. Miscellaneous
These are custom JavaScript files used for initializing plugins and creating theme JS effects..

• custom.js: This file contains custom functions and JS effects for the theme..
• contact-form.js: This file is used to initialize form validation plugin on contact page.
• tabs.js: This file is used to initialize tabs and accordions.
• admin.js: This file is used for custom effects inside Theme Options panel.
• theme-customizer.js: This file is used for live rendering of colors and data inside Theme Customizer panel.

Apart from these files, the theme uses different JavaScript files for visual short codes. These files are located inside /includes/shortcodes/js/ folder. You need not modify the contents of these files.

php files and their role

NewsPlus uses various php files for entire functioning of the site. Let’s have a quick look on the role of these files:

php File	Role
404.php	Default 404 Error Template.
archive.php	Default Archive template for posts.
comments.php	Default comments template.
content *.php	All the php files starting with "content-" name are used as different style WordPress loop. (Grid, list, classic).
footer.php	Default footer template.
functions.php	Theme functions and definitions.
header.php	Default header template.
header-buddypress.php	Fallback header.php for buddyPress plugin support
index.php	Default template for showing posts and pages.
page.php	Default page template.
search.php	Default search template.
searchform.php	Custom search form.
sidebar.php	Default sidebar template.
single.php	Default single posts template.
includes/breadcrumbs.php	Template part for breadcrumbs.
includes/class-tgm-plugin-activation.php	Used for installation and activation notice of NewsPlus Shortcodes Plugin
includes/header-default.php	The default header type with two columns
includes/header-three-col.php	Three columnar header type
includes/header-full-width	Full width header type
includes/page-options.php	The page options panel.
includes/post-options.php	The post options panel.
includes/theme-admin-options.php	NewsPlus Theme options.
includes/theme-customizer.php	Theme customizer support for navigation background and footer color schemes
formats/ *.php	All the files inside formats/ folder are for different style post formats.
templates/*.php	All the files inside templates/ folder are custom templates for page, archive, blog, contact, etc.
plugins/newsplus-shortcodes.zip	The NewsPlus Shortcodes plugin archive

Frequently Asked Questions

Below are some Frequently Asked Questions that may help you in finding a solution to your specific issue.

1. I have just uploaded the download zip file to WordPress, and it is showing stylesheet missing error. Why?

Your download zip file is not the theme itself. It is a collection of theme and documentation. It will be required to unzip this folder first. Next look for the folder named "newsplus". ZIP this folder and upload it to the wp-content/themes/ directory.

2. Why images are not appearing properly on site?

WordPress thumbnail sizes DO NOT get generated for images that were uploaded before the theme was installed. i.e. only newly uploaded images will get generated into the theme specified sizes. (This is a limitation with WordPress). To rectify this issue, you can follow any one of these solutions:

A. Delete old attachments and re-upload the images into the media library. Next, set these newly uploaded images as featured image to each post. (This could be a long process and time consuming).

B. Use the Regenerate Thumbnails plugin. This plugin regenerates all your post thumbnails without having to upload images again. This is a handy plugin and widely used for themes with WP Thumbnails feature. The installation instructions can be found inside the plugin. After installing this plugin, navigate to Tools > Regen Thumbnails. Next, follow the instructions and re-generate the thumbnails.

3. What are recommended sizes for images in this theme?

Since the theme is responsive, images are of fluid width. You can upload images from 800px to around 1200px in web optimized format for better results. The height of images are set to auto. You can also specify custom image sizes inside Appearance > Theme Options > Image Sizes.

4. Where do I change font and styles for headings?

For any sort of style changes, I would recommend using user.css file. For example, open style.css file and copy the heading rules from section 2. typography. Next, open user.css file and paste these rule inside it.

/* Headings */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
  font-family: inherit;
  color: #333;
  }
  
  h1 {
  font-size: 2.5em;
  line-height: 1.2;
  margin-bottom: 0.6em;
  }
  
  h2,
  h1.page-title,
  h1.entry-title,
  .entry-list h3,
  .flex-caption h1,
  .flex-caption h2 {
  font-size: 2em;
  line-height: 1.375;
  margin: 0 0 0.5em;
  }
  h3,
  .section-title {
  font-size: 1.5em;
  line-height: 1.5;
  margin-bottom: 0.5em;
  }
 .section-title {
  margin-bottom: 1em;
  color: #999;
  }
  h4 {
  font-size: 1.166em;
  line-height: 1.5;
  margin-bottom: 1.071em;
  }
  h5,
  h6 {
  font-size: 1em;
  line-height: 1.5;
  margin-bottom: 0;
  }
  h6 {
  font-weight: bold;
  margin-bottom: 0;
  }

Now you can make changes to headings inside this file. By doing so, your customizations will not be lost when updating a theme. It will only be required to keep a backup of user.css file.

For Sidebar and Secondary area headings, look into Section 5. Widget area and Widgets:

h3.sb-title {
	font-size: 1.3333em;
	line-height: 1.5;
	margin-bottom: 0.75em;
	color: #999;
}

h3.sc-title {
	font-size: 1.333em;
	line-height: 1.5;
	margin-bottom: 0.75em;
	color: #fff;
}

5. How to add video to content slider?

The content slider short code supports Vimeo Video. You can insert a video slide using the [slide_video] short code, as shown below:

[slider]
[slide_video src="39683393"]
[slide]
<img src="http://yoursite.com/slideimage.jpg" />
[slide_text]
<h2>Slide caption here</h2>
[/slide_text]
[/slide]
[/slider]

In the above example, two slides will be inserted. One with video and another with normal image. You only need to provide the video ID inside [slide_video] src parameter. This video ID can be found from the video URL, http://vimeo.com/39683393 (where, the trailing number is video ID on vimeo).

6. How to show site title in red and black color as shown on live demo

The theme supports custom site title with HTML. For that, navigate to Appearance > Theme Options > Header > Site Name/Logo Settings > Custom Site Title. Inside this field, add the following markup:

<span>News</span>Plus

Next, scroll down and save settings.

7. How to show logo image instead of text site title

In order to show a logo image, upload your logo to the newsplus/images/ folder with the name logo.png. Next,, navigate to Appearance > Theme Options > Header > Site Name/Logo Settings > Display Logo Image. Enable this option and save settings. You can also upload logo to the media library and paste it's file URL inside the 'Custom Logo URL' field.

8. How to change navigation and footer background color scheme

Navigation and footer schemes can be changed by overriding some CSS rules. For that, open user.css file and add these rules for modification:

/* Primary Navigation Menu */
.primary-nav {
  background-color: #444;
}

/* Secondary and footer */
#secondary {
  background: #444;
  color: #aaa;
}
#footer {
  background: #333;
  color: #aaa;
}

Next, change the background and color values as required. You can also use Theme Customizer of WordPress by navigating to Appearance > Themes. Next, click on the "Customize" link inside active theme section. Inside Theme Customizer, open "Colors" section and change navigation color schemes as required.

9. How to use Theme Customizer

NewsPlus supports WordPress Theme Customizer for basic color schemes on main Navigation menu, secondary area and footer. In order to use Theme Customizer, navigate to WordPress Appearance > Themes. Next, click on the "Customize" link that appears on the active theme section. Inside theme Customize panel you can change colors by using color pickers inside "Colors" section.

While most of the color changes will be LIVE, only the link hover states will need a page refresh on the preview window on right side. After changing link hover states, click inside the preview window. It will get refreshed and you will be able to see link colors too.

Once you are done with color settings, click on "Save and Publish" button on the top of panel. This will load your new color settings on front-end of the site.

10. How to use PrettyPhoto lightbox

NewsPlus comes with built in Support for PrettyPhoto lightbox. In order to use lightbox, you can add data-rel attribute to images as shown below:

<a data-rel="prettyPhoto[group1]" href="http://url_of_big_image/image1.jpg"><img src="http://url_of_thumbnail_image/image1.jpg" title="Image title" /></a>
<a data-rel="prettyPhoto[group1]" href="http://url_of_big_image/image2.jpg"><img src="http://url_of_thumbnail_image/image2.jpg" title="Image title" /></a>

By adding data-rel attribute, these images will be available for display in lightbox. You can also use data-rel attribute as "prettyPhoto" or "prettyPhoto[group2]". If you wish to disable prettyPhoto support, you can do so inside Appearance > Theme Options > General > Disable PrettyPhoto

11. How to change Image Sizes of theme

Theme's image sizes can be changed inside Appearance > Theme Options > Image Sizes. Inside this section, provide image widths and height for different elements like slider, post lists, widgets, etc. After changing dimensions, click on "Save Settings". Once you are done, it will be required to regenerate thumbnails using Regenerate Thumbnails Plugin.

12. How to change slider speed and make it animate continuously

Slider animation and speed can be controlled by following parameters:

[posts_slider cats="xx" num="xx" effect="slide" easing="easeInQuad" speed="700" timeout="3000" animationloop="true"]

By using animationloop="true", slider will continue animating forever. Similarly, speed and timeout can be controlled using parameters as shown above.

13. How to disable dynamic height of slider and hide slider navigation/bullets

If using version 1.0.2 or higher, slider bullets and prev/next buttons can be disabled as shown below:

[posts_slider cats="xx" num="xx" smoothheight="false" controlnav="false" directionnav="false"]

Using smoothheight="false" will assign fixed height to slider. This fixed height is taken from largest height image. Using controlnav="false" will hide pagination bullets, whereas using directionnav="false" will hide Next/Prev buttons.

14. How to change font size of content area in pages or single posts without affecting rest of the font sizes

For changing only content area font size, add these rules at the end of style.css file or inside user.css file:

/* Increase font size in both pages and posts */
.entry-content p,
.entry-content ul {
    font-size: 1.1666em; /* or 14px */
}

If you wish to change only for single posts, add these rules:

/* Target only single posts */
.single .entry-content p,
.single .entry-content ul {
    font-size: 1.1666em;
}

If you wish to change for both pages and posts, while still keeping font size smaller for Home page post shortcodes, add these rules:

/* Increase font size in both pages and posts */

.entry-content p,
.entry-content ul {
    font-size: 1.1666em; /* or 14px */
}

/* Keep Home page font smaller */
.home .entry-content p,
.home .entry-content ul {
    font-size: 1em;
}

15. How to use word length inside post or slider short codes?

Post and slider short codes use excerpt length in characters. For example, excerpt_length="180" will show approximately 180 characters in excerpt. In some languages like Chinese, the character length is not calculated properly. In that case you may find word length useful. The usage is simple, as shown below:

[insert_posts use_word_length="true" excerpt_length="10"]

In the above example, the use_word_length="true" will enable word length, and the excerpt_length="10" will show 10 words of excerpt. Same parameter can be used in slider or carousel short code too.

16. How to show posts from multi site blog in short codes?

If you are using WordPress multi site installation, the theme can show posts from other blogs too. The usage is blog_id="xx" inside the post or slider short codes, as shown below.

[insert_posts blog_id="2" num="xx" cats="xx"]

In order to find blog ID, log in to WordPress and navigate to My Sites > Network admin > Sites. Hover your mouse pointer on a site name and check it's target link in status bar (bottom left corner). The link will appear as wp-admin/network.site-info.php?id=xx. This xx is the actual blog ID which can be used in short codes.

17. How to specify image sizes in slider and postshortcodes

Image width/height and crop parameters can be assigned using the following code:

[posts_slider imgwidth="400" imgheight="200" imgcrop="true" cats="xx" ... other parameters ]

[insert_posts display_style="three-col" imgwidth="640" imgheight="480" imgcrop="true" cats="xx" ... other parameters ]

Please be aware that image will be cropped and scaled according to the specified dimension. But final view still depends upon the width of parent container. For example, if you specify image width to 600 in three-col post shortcode, it may still shrink to it's parent container width which is less than 600px.

18. How to get started with WooCommerce

Note: If you have installed WooCommerce for the first time, it will be required to run the WooCommerce Setup wizard.

Follow on screen setup wizard instructions as they appear. This wizard will set up basic shop pages, shipping, payment options etc. You can configure these settings later too inside WooCommerce > Settings, but I would recommend setting up pages and basic things.

You can skip these steps if you are on an existing WooCommerce site. For more details on WooCommerce setup, please check the official WooCommerce Documentation.

Create WooCommerce Products

Once all the required and recommended plugin are installed, we need to create some content. This content includes creating products, posts and pages. In this section we will see how to create a shop product.

1. Navigate to Products > Add Product.

2. Provide a product name inside the "product name" field.

3. Inside content editor area, provide a product description. This description will be shown inside the "Product Description" tab on product pages.

4. Inside "Product Data" panel, choose a product type. It can be a simple, variable, or grouped product, depending upon your product type and requirements. For example, a pair of jeans with different sizes should be a variable product, whereas a decorative show-piece can be a simple product.

5. Inside "Product Short Description" panel, provide a short description for the product. The title of this panel can be mis leading, but this is the main description which is shown on right side of the product image, just below the product title. You can keep it descriptive.

For complete details and in-dept guide on WooCommerce product handling, please refer to the official WooCommerce Documentation.

19. How to update the theme?

Update can be done in two ways, depending on how the theme is installed and whether you have made custom changes to the theme or not.

A. If you are using child theme and all customization are done in child theme itself, follow these steps:
Step 1: Log in to your themeforest account and download latest update archive.
Step 2: Unzip the archive and upload the 'newsplus' parent theme folder to wp-content/themes/, replacing the old one. This can be done via FTP software or Control Panel of your Hosting account. This will update main theme while your changes will still remain intact in child theme.

B. If you are using main theme and customization are done in the main theme itself, follow these steps:
Step 1: Log in to your themeforest account and download latest update archive.
Step 2: Unzip the archive and open the file 'changelog/vx.x.x.txt'. For example, v1.0.8.txt file. This file contains list of all modified files in comparison to it's direct previous version.
Step 3: Update each of the files listed in Step 2 via FTP into your main theme folder. i.e. inside wp-content/themes/newsplus/. That will update the theme successfully.

Note: Modifying parent theme is not recommended, but if you do so, alywas keep a record of changes and modified files. This will help in updating the theme.

Filter Reference

NewsPlus supports 6 filters for changing post meta information in various sections of theme. Available filters are:

Filter name	Description
posts_slider_meta	Used to change output of post meta inside posts slider shortcode.
posts_slider_output	Used to change output of posts slider slide
posts_carousel_meta	Used to change output of post meta inside posts carousel shortcode.
posts_carousel_output	Used to change output of posts carousel slide
insert_posts_meta_small	Used to change output of post meta inside insert_posts shortcode for grid and list-small style posts.
insert_posts_meta_big	Used to change output of post meta inside insert_posts shortcode for one-col, two-col and list-big style posts.
insert_posts_two_col_output	Used to change output of two columnar display style in [insert_posts] shortcode
insert_posts_three_col_output	Used to change output of three columnar display style in [insert_posts] shortcode
insert_posts_four_col_output	Used to change output of four columnar display style in [insert_posts] shortcode
insert_posts_list_big_output	Used to change output of list-big display style in [insert_posts] shortcode
insert_posts_list_small_output	Used to change output of list-small display style in [insert_posts] shortcode
insert_posts_list_plain_output	Used to change output of list-plain display style in [insert_posts] shortcode
widget_recent_posts_meta	Used to change output of post meta in recent posts widget
widget_popular_posts_meta	Used to change output of post meta in popular posts widget
newsplus_post_meta_big	Used to change output of post meta in single post, list-big and classic style archives.
newsplus_post_meta_small	Used to change output of post meta in grid style archives.

How to use filters

In a very simple example, let's say you want to add a "Read More" button inside Slider Shortcode. Then you would add the following code inside your functions.php file:

function add_new_item($out) {
    $out .= sprintf( ' | Read More', get_permalink() );
    return $out;
}

add_filter( 'posts_slider_meta', 'add_new_item' );

This will append "| Read More" next to the post meta inside slider.

Shortcode Reference

Below is a detailed reference of all available shortcodes and their parameters.

[col]

Used to show a column grid.

// Example usage

[col type="half"]
 - content here -
[/col]

[col type="half last"]
- content here -
[/col]

Parameter	Description	Required	Values	Default
type	The type of column class. E.g. full. Use a "last" class name for last column instance.	optional	full, three-fourth, two-third, half, one-third, three-eighth, one-fourth	full
xclass	Any extra class you want to add	optional	text	none

[row]

Used to wrap columns in a single row.

// Example usage
[row]
[col type="half"]
 - content here -
[/col]

[col type="half last"]
- content here -
[/col]
[/row]

Parameter	Description	Required	Values	Default
xclass	Any extra class you want to add	optional	text	none

[tabs]

Used to show tabbed content.

// Example usage

[tabs]
    [tab title="Tab1"]
        Tab1 content here
    [/tab]
    [tab title="Tab2"]
        Tab2 content here
    [/tab]
    [tab title="Tab3"]
        Tab3 content here
    [/tab]
[/tabs]

[tabs] Parameters	Description	Required	Values	Default
xclass	Any extra class you want to add	optional	text	none
[tab] Parameters
title	The title of tab button. E.g. About	Yes	text	mytab

[toggle]

Used to show a collapsible toggle content.

// Example usage

[toggle title="My Toggle"]
Insert your content here.
[/toggle]

Parameter	Description	Required	Values	Default
title	The title of toggle button. E.g. Click to toggle	Yes	text	mytoggle

[accordion]

Used to show accordion content.

// Example usage

[accordion]

    [acc_item title="Accordion item1"]
        Accordion1 content here.
    [/acc_item]
    
    [acc_item title="Accordion item2"]
        Accordion2 content here.
    [/acc_item]
    
    [acc_item title="Accordion item3"]
        Accordion3 content here. 
    [/acc_item]
    
[/accordion]

[accordion] Parameters	Description	Required	Values	Default
xclass	Any extra class you want to add	optional	text	none
[acc_item] Parameters
title	The title of accordion handle. E.g. FAQ	Yes	text	myaccordion

[box]

Used to show content boxes.

// Example usage

[box style="0"]
    Your box content here.
[/box]

Parameter	Description	Required	Values	Default
style	The style code for box. E.g. 0 0 for default (Grey) 1 for warning (Yellow) 2 for success (Green) 3 for error (Red) 4 for information (Blue)	optional	0 1 2 3 4	0
close_btn	Whether to show a close button in box. E.g. true	optional	true/false	false
xclass	Any extra class you want to add	optional	text	none

[btn]

Used to show a button.

// Example usage

[btn link="http://yoursite.com" color="pink" size="size-m" target="_blank"]Click Me[/btn]

Parameter	Description	Required	Values	Default
link	The link URL for the button. E.g. http://google.com	Yes	Valid URL	none
color	The color class name for button. E.g. pink	optional	aqua red grey pink skyBlue royalBlue orange forestGreen yellowGreen	none
size	The size class name for button. E.g. size-m	optional	size-s size-m size-l	none
target	The link target for button. E.g. _blank		_blank _parent _self	none
xclass	Any extra class you want to add	optional	text	none

[hr]

Used to show a horizontal rule.

// Example usage

[hr style="double"]

Parameter	Description	Required	Values	Default
style	The style code for HR. E.g. double	optional	single double 3d bar dashed	single
xclass	Any extra class you want to add	optional	text	none

[indicator]

Used to show progress bar indicators.

// Example usage

[indicator bg="#f90" value="66"]

Parameter	Description	Required	Values	Default
label	The label for indicatior. E.g. HTML Skills	Yes	Text	Label here
bg	The hex background value for indicator bar. E.g. #ff9900	optional	Hex color value	#ffcc00
value	Teh value of indicator bar out of 100. E.g. 75	Yes	Number between 0 to 100	75

[slider]

Used to show a content slider of images or text.

// Example usage

[slider effect="slide" easing="easeInQuad" speed="400" timeout="5000" animationloop="true" smoothheight="false" controlnav="false" directionnav="false"]
    
    [slide]
        <img title="image title" src="http://yoursite.com/wp-content/themes/newsplus/images/slide.jpg" alt="" />
        [slide_text]
            <h2>Slide Heading 1</h2>
            Optional slide content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus leo ante, consectetur sit amet vulputate vel, dapibus sit amet lectus. Etiam varius dui eget lorem elementum eget mattis sapien interdum.
        [/slide_text]
    [/slide]
    
    [slide]
        <img title="image title" src="http://yoursite.com/wp-content/themes/newsplus/images/slide.jpg" alt="" />
        [slide_text]
            <h2>Slide Heading 2</h2>
            Optional slide content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus leo ante, consectetur sit amet vulputate vel, dapibus sit amet lectus. Etiam varius dui eget lorem elementum eget mattis sapien interdum.
        [/slide_text]
    [/slide]
   
    [slide]
        <img title="image title" src="http://yoursite.com/wp-content/themes/newsplus/images/slide.jpg" alt="" />
        [slide_text]
            <h2>Slide Heading 3</h2>
            Optional slide content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus leo ante, consectetur sit amet vulputate vel, dapibus sit amet lectus. Etiam varius dui eget lorem elementum eget mattis sapien interdum.
        [/slide_text]
    [/slide]
    
    [slide_video src="39683393"]
    
[/slider]

Parameter	Description	Required	Values	Default
effect	The effect for slide transition. E.g. fade	optional	fade slide	fade
easing	Easing function for the animation	optional	easeInQuad easeOutQuad easeInOutQuad easeInExpo easeOutExpo easeInOutExpo	swing
speed	The speed of slide transition in miliseconds. E.g. 600	optional	Number	600
timeout	How long the slide shall stay visible (in miliseconds). E.g. 4000	optioanl	Number	4000
animationloop	Whether slider shall loop infinitely. E.g. true	optional	true/false	false
slideshow	Whether to animate slider automatically. E.g. true	optional	true/false	true
smoothheight	Allow height of the slider to animate smoothly. E.g. true	optional	true/false	true
controlnav	Create navigation for paging control of each slide. E.g. true	optional	true/false	true
directionnav	Create buttons for previous/next navigation. E.g. true	optional	true/false	true
xclass	Any extra class you want to add	optional	text	none
[slide] Parameters
xclass	Any extra class you want to add	optional	text	none

[posts_slider]

Used to show a slider from posts.

// Example usage

[posts_slider cats="3,5,8" num="4" effect="slide" easing="easeInQuad" speed="400" timeout="5000" animationloop="true" smoothheight="false" controlnav="false" directionnav="false"]

// Show posts from Custom Post Type product
[posts_slider query_type="cpt" post_type="product" taxonomy="product_cat" terms="men,women,kids" num="5"]

Parameter	Description	Required	Values	Default
query_type	The type of WordPress query for showing results. E.g. tags	optional	posts pages tags cpt	category
cats	Numeric category IDs to show posts from, separated by comma. E.g. 3,5,7	optional	Number	null
posts	Numeric post IDs to show posts from, separated by comma. E.g. 102, 354	optional	Number	null
pages	Numeric page IDs to show posts from, separated by comma. E.g. 192, 326	optional	Number	null
tags	Tag slug names to show posts from, separated by comma. E.g. men, women, spaced-tag	optional	Text	null
post_type	The post type name to show posts from. E.g. product	optional	Text	null
taxonomy	The taxonomy name from which custom post type is shown. E.g. product_cat	optional	Text	null
terms	Term names of Custom post type taxonomy, separated by comma. E.g. men, women	optional	Text	null
blog_id	Numeric blog ID to pull posts from when using multisite. E.g. 2	optional	Number	null
operator	Operator for term relationship in Custom post type. E.g. AND	optional	AND IN NOT IN	IN
order	The order of posts. E.g. ASC (for ascending)	optional	ASC DESC	DESC
orderby	The orderby value for sort order. E.g. date	optional	See reference	date
num	Number of posts to show. E.g. 5	optional	Number	2
offset	Number of initial posts to skip from the available results. E.g. 2 (will skip first 2 posts)	optional	Number	0
ignore_sticky	Whether to ignore sticky posts. E.g. 1 (for yes)	optional	0 or 1	0
excerpt_length	The excerpt length in characters or words. E.g. 120	optional	Number	140
use_word_length	Whether to use excerpt length in words. E.g. true	optional	true/false	false
hide_excerpt	Whether to hide excerpt. E.g. true	optional	true/false	false
hide_meta	Whether to hide post meta. E.g. false	optional	true/false	false
hide_image	Whether to hide image. E.g. false	optional	true/false	false
imgwidth	Width of image in px (without unit). E.g. 600	optional	Number	800
imgheight	Height of image in px (without unit). E.g. 400	optional	Number	450
imgcrop	Whether to hard crop images. E.g. true	optional	true/false	true
imgupscale	Whether to upscale images. E.g. true	optional	true/false	true
effect	The effect for slide transition. E.g. fade	optional	fade slide	fade
easing	Easing function for the animation	optional	easeInQuad easeOutQuad easeInOutQuad easeInExpo easeOutExpo easeInOutExpo	swing
speed	The speed of slide transition in miliseconds. E.g. 600	optional	Number	600
timeout	How long the slide shall stay visible (in miliseconds). E.g. 4000	optioanl	Number	4000
animationloop	Whether slider shall loop infinitely. E.g. true	optional	true/false	false
slideshow	Whether to animate slider automatically. E.g. true	optional	true/false	true
smoothheight	Allow height of the slider to animate smoothly. E.g. true	optional	true/false	true
controlnav	Create navigation for paging control of each slide. E.g. true	optional	true/false	true
directionnav	Create buttons for previous/next navigation. E.g. true	optional	true/false	true
xclass	Any extra class you want to add	optional	text	none

[posts_carousel]

Used to show a posts carousel.

// Example usage

[posts_carousel cats="3,6" easing="easeInQuad" speed="500" timeout="5000" animationloop="true" controlnav="false" directionnav="false"]

Parameter	Description	Required	Values	Default
hide_video	Whether to hide video embed in posts. E.g. true	optional	true/false	false
Other parameters same as [posts_slider] parameters.

[insert_posts]

Used to show posts loop in different display styles.

// Example usage

[insert_posts cats="3,6" num="6" display_style="three-col"]

// Show posts from custom post type product
[insert_posts query_type="cpt" post_type="product" taxonomy="product_cat" terms="men,women,kids" num="6" display_style="three-col"]

Parameter	Description	Required	Values	Default
display_style	The type of display for posts output. E.g. three-col	optional	one-col two-col three-col four-col list-big list-small lis-plain	one-col
query_type	The type of WordPress query for showing results. E.g. tags	optional	posts pages tags cpt	category
cats	Numeric category IDs to show posts from, separated by comma. E.g. 3,5,7	optional	Number	null
posts	Numeric post IDs to show posts from, separated by comma. E.g. 102, 354	optional	Number	null
pages	Numeric page IDs to show posts from, separated by comma. E.g. 192, 326	optional	Number	null
tags	Tag slug names to show posts from, separated by comma. E.g. men, women, spaced-tag	optional	Text	null
post_type	The post type name to show posts from. E.g. product	optional	Text	null
taxonomy	The taxonomy name from which custom post type is shown. E.g. product_cat	optional	Text	null
terms	Term names of Custom post type taxonomy, separated by comma. E.g. men, women	optional	Text	null
blog_id	Numeric blog ID to pull posts from when using multisite. E.g. 2	optional	Number	null
operator	Operator for term relationship in Custom post type. E.g. AND	optional	AND IN NOT IN	IN
order	The order of posts. E.g. ASC (for ascending)	optional	ASC DESC	DESC
orderby	The orderby value for sort order. E.g. date	optional	See reference	date
num	Number of posts to show. E.g. 5	optional	Number	2
offset	Number of initial posts to skip from the available results. E.g. 2 (will skip first 2 posts)	optional	Number	0
ignore_sticky	Whether to ignore sticky posts. E.g. 1 (for yes)	optional	0 or 1	0
excerpt_length	The excerpt length in characters or words. E.g. 120	optional	Number	140
use_word_length	Whether to use excerpt length in words. E.g. true	optional	true/false	false
hide_excerpt	Whether to hide excerpt. E.g. true	optional	true/false	false
hide_meta	Whether to hide post meta. E.g. false	optional	true/false	false
hide_image	Whether to hide image. E.g. false	optional	true/false	false
hide_video	Whether to hide video embed. E.g. true	optional	true/false	false
imgwidth	Width of image in px (without unit). E.g. 600	optional	Number	800
imgheight	Height of image in px (without unit). E.g. 400	optional	Number	450
imgcrop	Whether to hard crop images. E.g. true	optional	true/false	true
imgupscale	Whether to upscale images. E.g. true	optional	true/false	true
xclass	Any extra class you want to add	optional	text	none

[newsplus_sidebar]

Used to show a registered widget area (sidebar) in page.

// Example usage

[newsplus_sidebar id="my-sidebar"]

Parameter	Description	Required	Values	Default
id	The id name of registered sidebar. E.g. home-sidebar	true	Slug name of sidebar	default-sidebar
xclass	Any extra class you want to add	optional	text	none

[newsplus_grid_list]

Used to show posts grid with overlay text.

// Example usage

[newsplus_grid_list cats="6" display_style="s1" num="5" aspect_ratio=".75"]

Parameter	Description	Required	Values	Default
display_style	The type of display for posts output. E.g. s1	optional	s1 s2	s1
query_type	The type of WordPress query for showing results. E.g. tags	optional	posts pages tags cpt	category
cats	Numeric category IDs to show posts from, separated by comma. E.g. 3,5,7	optional	Number	null
posts	Numeric post IDs to show posts from, separated by comma. E.g. 102, 354	optional	Number	null
pages	Numeric page IDs to show posts from, separated by comma. E.g. 192, 326	optional	Number	null
tags	Tag slug names to show posts from, separated by comma. E.g. men, women, spaced-tag	optional	Text	null
post_type	The post type name to show posts from. E.g. product	optional	Text	null
taxonomy	The taxonomy name from which custom post type is shown. E.g. product_cat	optional	Text	null
terms	Term names of Custom post type taxonomy, separated by comma. E.g. men, women	optional	Text	null
blog_id	Numeric blog ID to pull posts from when using multisite. E.g. 2	optional	Number	null
operator	Operator for term relationship in Custom post type. E.g. AND	optional	AND IN NOT IN	IN
order	The order of posts. E.g. ASC (for ascending)	optional	ASC DESC	DESC
orderby	The orderby value for sort order. E.g. date	optional	See reference	date
num	Number of posts to show. E.g. 5	optional	Number	2
offset	Number of initial posts to skip from the available results. E.g. 2 (will skip first 2 posts)	optional	Number	0
ignore_sticky	Whether to ignore sticky posts. E.g. 1 (for yes)	optional	0 or 1	0
excerpt_length	The excerpt length in characters or words. E.g. 120	optional	Number	140
use_word_length	Whether to use excerpt length in words. E.g. true	optional	true/false	false
hide_excerpt	Whether to hide excerpt. E.g. true	optional	true/false	false
hide_meta	Whether to hide post meta. E.g. false	optional	true/false	false
hide_image	Whether to hide image. E.g. false	optional	true/false	false
hide_video	Whether to hide video embed. E.g. true	optional	true/false	false
imgwidth	Width of image in px (without unit). E.g. 600	optional	Number	800
imgheight	Height of image in px (without unit). E.g. 400	optional	Number	450
imgcrop	Whether to hard crop images. E.g. true	optional	true/false	true
imgupscale	Whether to upscale images. E.g. true	optional	true/false	true
viewport_width	The viewport width (in px widthout unit) to calculate max width of post grid. E.g. 960	optional	Number	1192
gutter	The gutter width between grids. E.g. 4 Important: Changing this value will need some CSS changes too This value is only intended for image cropping according to gutter width.	optional	Number	4
aspect_ratio	The aspect ratio of overall grid images. E.g. .75 Other standard values are .666 and .5625	optional	Number	.75
featured_label	The featured label to show on first bigger post image	optional	Text	none
xclass	Any extra class you want to add	optional	text	none

[newsplus_news_ticker]

Used to show a news ticker of posts.

// Example usage

[newsplus_news_ticker cats="6" ticker_label="Latest News"]

Parameter	Description	Required	Values	Default
query_type	The type of WordPress query for showing results. E.g. tags	optional	posts pages tags cpt	category
cats	Numeric category IDs to show posts from, separated by comma. E.g. 3,5,7	optional	Number	null
posts	Numeric post IDs to show posts from, separated by comma. E.g. 102, 354	optional	Number	null
pages	Numeric page IDs to show posts from, separated by comma. E.g. 192, 326	optional	Number	null
tags	Tag slug names to show posts from, separated by comma. E.g. men, women, spaced-tag	optional	Text	null
post_type	The post type name to show posts from. E.g. product	optional	Text	null
taxonomy	The taxonomy name from which custom post type is shown. E.g. product_cat	optional	Text	null
terms	Term names of Custom post type taxonomy, separated by comma. E.g. men, women	optional	Text	null
blog_id	Numeric blog ID to pull posts from when using multisite. E.g. 2	optional	Number	null
operator	Operator for term relationship in Custom post type. E.g. AND	optional	AND IN NOT IN	IN
order	The order of posts. E.g. ASC (for ascending)	optional	ASC DESC	DESC
orderby	The orderby value for sort order. E.g. date	optional	See reference	date
num	Number of posts to show. E.g. 5	optional	Number	2
offset	Number of initial posts to skip from the available results. E.g. 2 (will skip first 2 posts)	optional	Number	0
ignore_sticky	Whether to ignore sticky posts. E.g. 1 (for yes)	optional	0 or 1	0
title_length	The word length of title to be trimmed to. E.g. 10	optional	Number	10
ticker_label	The label of ticker. E.g. Latest News	optional	Text	Breaking News
xclass	Any extra class you want to add	optional	text	none

Sources and Credits

The theme uses following files and resources, as listed:

jquery, ui.core, ui.widget, ui.tabs and ui.accordion

As provided with the WordPress installation.
http://jquery.com/
Copyright 2010, John Resig

jquery.flexslider-min.js

jQuery FlexSlider v2.1
Copyright 2012 WooThemes
Contributing Author: Tyler Smith

jquery.validate.min.js

jQuery Validation Plugin - v1.10.0 - 9/7/2012
https://github.com/jzaefferer/jquery-validation
Copyright (c) 2012 Jörn Zaefferer; Licensed MIT, GPL

jquery.hoverIntent.minified.js

http://cherne.net/brian/resources/jquery.hoverIntent.html

jquery.marquee.min.js

http://aamirafridi.com/jquery/jquery-marquee-plugin

Font Awesome (Vector font icons)

Font Awesome 4.5.0 by @davegandy - http://fontawesome.io - @fontawesome
License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)

prettyPhoto

Author: Stephane Caron (http://www.no-margin-for-errors.com)

jquery.easing.min.js
froogaloop2.min.js

Images on live preview are Standard License purchases from fotolia.com

WordPress for providing a platform on which we can create themes.