Getting started

First of all, we would like to thank you for purchasing our Theme. If you have any questions that are beyond the scope of this help, please feel free to email us via our user page contact form here.

We'd be glad to help you if you have any questions related to this theme. No guarantees, but we'll do our best to assist. If you have a more general question relating to our themes you might consider visiting our support forum.

Plugins

We always care the most about our customers so we know how valuable is their time. To make your life easier we included all necessary components that can improve your work on a day to day basis.

All you need is already onboard:


Installing the Chirps Theme

Please follow the video to install the Chirps Theme, recommended plugins and import the demo content in just few clicks.



Updating the Chirps Theme

Please follow the video to update the Chirps Theme in just few clicks.



By default the Chirps Theme displays the site title in the Header Theme Area. You can easily change it and display the logo image instead by following these simple steps:

  1. Go to the WordPress Admin › Appearance › Theme Options › Design › General section
  2. Upload the desktop logo and set its width and height
  3. Save Changes

Now when your logo is uploaded, you can adjust the margins around it in the WordPress Admin › Appearance › Theme Options › Design › Header section.

What about Retina devices?

To make your logo look sharp on high-resolution screens, please upload double-sized logo in the WordPress Admin › Appearance › Theme Options › Design › General › Desktop Logo (High DPI). The theme detects which version to use to make the best viewing experience.

My logo is hardly visible on a dark/light background

With a little effort you can stop worrying about different color schemas behind your logo. Prepare two extra versions of your logo. One for the light (eg. white, yellow) and one for the dark (eg. black, brown, grey) background. Upload these logos in the WordPress Admin › Appearance › Theme Options › Design › General › Desktop Light Logo/Desktop Dark Logo. Of course you can also make them retina ready by uploading double-sized versions.


Setting up your homepage

By default WordPress displays latest blog entries on the homepage. Of course you can change it easily.

Creating a static home page

Please follow these simple steps:

  1. Add a new page in the WordPress Admin › Pages › Add New
  2. Go to the WordPress Admin › Appearance › Theme Options › Pages section
  3. Select your previously created page from the "Home Page" dropdown menu

Customizing the color scheme

Global styles

The Chirps Theme is divided into five theme areas you can style independently:

  • preheader
  • header
  • content
  • prefooter
  • footer

Let's say you want to change the color scheme of the prefooter area. Please follow these simple steps:

  1. Go to the WP admin panel › Appearance › Theme Options › Design › Prefooter
  2. Scroll down to the Basic Color Scheme section

Styling individual elements

Nearly every element has its own color settings, so you can overwrite the global ones and add custom colors per item. This way you can place e.g. multiple buttons with different colors on the same page. Most elements can be restyled using the Page Builder or the Shortcode Generator. Additionally every More Than Menu provides its own interface to change the color scheme.


Writing

Using the G1 Page Builder plugin

G1 Page Builder is a plugin that lets you build your pages using intuitive graphic interface.

How to install?

The plugin is built into the theme so after theme activation you will be asked to install it.

How to Set Up?

This plugin has no administration page, all you need to do is to go to any of your page and enable it.

How to Update?

To update the plugin, go to the WP Admin Panel › Appearance › Install plugins, find the "G1 Page Builder" plugin on the list and click "Update" right below it.

Notice

If you can't find the Install plugins link in the WP Admin › Appearance section, all your plugins are up to date and you don't need to update anything.

Before the first use

Please read this section if you start using the builder on a page that was previously created manually (with plain html and shortcodes).

Graphic interface should help you create your pages quicker and easier. You can stop thinking about shortcodes and focus on your significant content. When you build your page from scratch using our builder, all your markup will be created correctly by the builder. On the other hand, if you have pages created before the builder was launched, you can come across some little problems with your old markup. Sometimes builder won't be able to recognise some elements (eg. if you made a typo with shortcode name). In this case you should check and fix your markup.

Important

After first switch to our builder, you will see the "Cancel" button. If you see any problems with your layout, please use it to return to the original content. Check your markup, fix all problems and then switch to the builder again.

How to embed inline JavaScript code?

Builder accepts only inline scripts that points to external files. Please always use - due to security concerns - code like this:

<script type="text/javascript" src="SOME_FILE.js"></script>

instead of:

<script type="text/javascript">
	INLINE CODE...
</script>

You can easily create a new SOME_FILE.js file inside the child theme folder and move your inline code there. This will keep separation between content and script logic.


Adding a custom sidebar


You can add new sidebars by following these simple steps:

  1. Go to the WP admin panel › Appearance › Widgets.
  2. On the right side of the screen there is a column containing all existing sidebars. Below them you can also find the "Add a new sidebar" form.
  3. Enter the name of your new custom sidebar in the text input field. A sidebar's name can only consist of: lowercase and uppercase letters, digits, underscores and hyphens.
  4. Click the "Add" button

Then, when editing a single entry, a category or a tag, select this newly created sidebar from the "Sidebar" dropdown.


Creating a post carousel

One of the most powerful and flexible elements delivered with the theme is the "Posts" element.

You can use it as:

  • a regular shortcode (in the text mode)
  • a page builder component (in the page builder mode)
  • a widget (e.g. in sidebars)

Besides other configuration parameters it has the "view" option that lets you define how to display a collection. Choose the "carousel" view if you want to rotate your posts.


How to create a filterable collection of posts?

One of the most powerful and flexible element delivered with the theme is the "Posts".

You can use it as:

  • a regular shortcode (in the text mode)
  • a page builder component (in the page builder mode)
  • a widget (e.g. in sidebars)

Besides other configuration parameters it has the "view" option that lets you define how to display a collection. Choose the "filterable" view if you want to use taxonomies (category, tag) filters.

Using the Shortcode Generator

The Chirps Theme comes with many custom shortcodes you can use to spice up your content. When editing the content in both Visual and HTML modes, click the “[/]” icon (see the image below) to open up the Shortcode Generator. This little tool provides a user friendly interface for all shortcodes and code snippets.

shortcode_generator_v01


Articles


Changing a single article template

For each single article you have few different templates to choose. You can use the creative or the classic one, with sidebar or without it.

Change the global template

To set the same template for all articles, please go to the WP Admin › Appearance › Theme Options › Posts › Single and choose the appropriate template.

Change template for a single article

You can override global configuration by setting template for a specific article. To do this, please go to your post edition view, scroll down below the content editor and choose the template in the "Single Page Options" box.


Hiding | showing various elements on a single post page

For each single post you can define which elements should be visible and which not. You can do this individually for a single post or for all posts at once.

Manage elements visibility globally

To hide eg. the Breadcrumbs for all posts, go to the WP Admin › Appearance › Theme Options › Posts › Single and set the "Breadcrumbs" to "hide".

Manage elements visibility individually

To hide eg. the Title only for some specific post, go to the post edition view, scroll down below the content editor, and in the section "Single Page Options" set the "Title" to "hide".


Use the gallery shortcode

The gallery shortcode allows you to add one or more image galleries to your posts and pages.

You can use it as a shortcode, like this:

[gallery ids="729,732,731,720"\

where the ids attribute represents ids of images.

But who wants to check images ids and compose shortcode manually. Not to mention other attribute names. There is a much more user friendly way to manage your galleries.

Use the visual editor

To insert a new gallery to a post/page, please follow these simple steps:

  1. Go to a post/page edition view
  2. Click the "Add Media" button (on the left side, above the content editor)
  3. Choose the "Create Gallery" from the left popup navigation
  4. Select images to be used, or upload new ones
  5. Click the button "Create a new gallery" (in the right-bottom corner of the popup)
  6. Now you can set up your newly created gallery using options available under the "Gallery Settings" (right sidebar)

Special features

The Wordpress gallery, by default, can be used only for displaying images. We extended this functionality to give you a more powerful tool.

Use Lightbox

When you edit your gallery you can choose the "Lightbox" option for the "Link to" setting (under the Gallery Settings).

Turn gallery into a slider

To set up a slider, please follow these simple steps:

  1. Go to the Gallery Settings (gallery edition view, right sidebar).
  2. Set the "Slider" to "on".
  3. Then decide if you want to show next/previous and coin navigations.

Hiding comments, pings and trackbacks

In some cases you don't want to have comments, pings and trackbacks enabled on your posts/pages.

Comments are not needed, mostly, on regular pages. On posts they are preferred but it's always better to have an option to disable them.

Hide comments, pings and trackbacks globally

For all posts

To disable comments, pings and trackbacks, please follow these simple steps:

  1. Go to the WP Admin › Appearance › Theme Options › Posts › Single
  2. Set the "Allow Comments" to "off".
  3. Set the "Allow Trackbacks And Pingbacks" to "off".

Those settings will be applied only for new posts. For existing posts you need to turn on/off comments manually (see the Hide comments, pings and trackbacks individually section).

For all pages

To disable comments, pings and trackbacks, please these simple steps:

  1. Go to the WP Admin › Appearance › Theme Options › Pages
  2. Set the "Allow Comments" to "off".
  3. Set the "Allow Trackbacks And Pingbacks" to "off".

Those settings will be applied only for new pages. For existing pages you need to turn on/off comments manually (see the Hide comments, pings and trackbacks individually section).

Hide comments, pings and trackbacks individually

To hide all discussion related elements for a single post/page, please follow these steps:

  1. Go to a post/page edition view
  2. Check if you have the "Discussion" option selected in the Screen Options (the top-right section of a window)
  3. Scroll down to the "Discussion" box
  4. Uncheck options to hide

Archives

To display featured posts at the top of your category page, first you need to mark some posts from this category as sticky.

The next step is to enable the "Featured Entries" section for this category.

You can do this:

  • globally (for all categories) in the WP Admin › Appearance › Theme Options › Posts › Categories › Featured Entires
  • individually (just for a specific category) in the WP Admin › Posts › Categories › YOUR CATEGORY › Featured Entries

Changing the maximum number of posts to show on a single category page

You can define how many posts will be displayed on your category page in the WP Admin › Posts › Categories › YOUR CATEGORY by setting the "Entries per page" value. Leave this field empty to inherit from the global configuration, set -1 to show all.

Use the global configuration

If you want to use the same value for all your categories, you don't need to set it up separately for each category. Just go to the WP Admin › Appearance › Theme Options › Posts › Categories and set the "Entires per page" for all categories.


Changing a single category template

For each category you have few different templates to choose. You can use grid (columns) or list, with sidebar or without it.

Change global template

To set the same template for all categories, please go to the WP Admin › Appearance › Theme Options › Posts › Categories and choose the appropriate template.

Change template for a specific category

You can override global configuration by setting template for a specific category. To do this, please go to your category edition view (in the WP Admin › Posts › Categories) and choose your desired template.


Use the Load More button (Ajax)

The "Load More" button is really useful when you want to show just few posts at the start and load others dynamically. It works very similar to the traditional pagination but you stay all the time on the same page (new posts are appended at the end of the collection without reloading).

Why do I need it?

The "Load More" button allows your visitors to see as much posts as they want to "in place". This isn't so important for archive pages but becomes crucial on pages with more than one collection (which is rather standard for magazine sites).

How can I use it?

For post archive pages

Please follo these simple steps:

  1. Go to the WP Admin > Appearance > Theme Options > Posts > Archive
  2. Set the "load more button" for the "Pagination" option.

For post categories

Please follow these simple steps:

  1. In the WP Admin > Appearance > Theme Options > Posts > Categories, you can define the "load more button" for the "Pagination" option for all your categories.
  2. Then if you want to change it on some specific category, go to the WP Admin > Posts > Categories > YOUR CATEGORY and override the "Pagination" option.

For posts tag

Please follow these simple steps:

  1. In the WP Admin > Appearance > Theme Options > Posts > Tags, you can define the "load more button" for the "Pagination" option for all your tags.
  2. Then if you want to change it on some specific tag, go to the WP Admin > Posts > Tag > YOUR TAG and override the "Pagination" option.

For posts shortcode

The posts shortcode has built-in option for the "Load More" button. You need to remember that it works only for the standard view. For filterable and carousel views the "Load More" option doesn't make sense and cannot be used.

Design

Customizing the typography

Magazine themes like any others consist mainly of text, so the typography plays a vital role in the final impression. Luckily for you, the Chirps Theme provides the right tools to get the job done.

You can customize the typeface, font-size, letter-spacing and text transformation for various elements in the WP admin panel › Appearance › Design › Typography.

Body text and user interface elements

Here you can choose the basic font for all texts on your website and customize fonts used inside input, select & textarea fields

Primary headings

This set of headings is intended to use for post titles. Although it's not written in stone, we typically use narrower or condensed typefaces here, like Oswald or Roboto Condensed. The main reason for it is of course to save space.

Secondary headings

This set of headings is intended to use for section headings, archive titles.

Tertiary headings

This set of headings is intended to use for subheadings and subtitles.


Changing image sizes

The Chirps Theme makes use of many image sizes to render collections and single article pages.

Every image size comes with 4 variants:

  • landscape
  • square
  • portrait
  • fluid

You can customize the height of the landscape and the portrait variants in the: WP admin panel › Appearance › Style › Image sizes

Please remember to use the Force Regenerate Thumbnails plugin afterwards, to regenerate old thumbnails.


Removing the preheader

The Preheader theme area is mostly used for a secondary navigation or to add some other links. You can use it to put your Log In or Register link there.

How to turn it off?

To completely disable the preheader theme area, please follow these simple steps:

  1. Go to the WP Admin › Appearance › Theme Options › Design › Preheader
  2. Choose the big X (none) as the Composition value.

Enabling sticky preheader, header or menu

Sticky elements, header and menu in particular, can improve user interactions on your site. All necessary links are always available so user can easily "jump" from one page to another without scrolling back to the top.

Sticky preheader

To enable sticky preheader, please go to the WP Admin > Appearance > Theme Options > Design > Preheader and set the "Sticky position" to "on".

Sticky header

To enable sticky header, please go to the WP Admin > Appearance > Theme Options > Design > Header and set the "Sticky position" to "on".

Sticky menu

To enable sticky menu, please go to the WP Admin > Appearance > Menus > YOUR MENU.

Now, scroll down to the "More Than Menu Settings", select the Layout > Menu tab and set the "Sticky" to "on".

Caution

Please don't use sticky menu and sticky preheader/header option at the same time.

In most cases the sticky header will be a better choice than the standalone sticky menu.


More Than Menu

Menu items disappeared or menu location was reset after saving

Problem

Your server has defined how many items can handle in one request. This value varies between different servers, especially shared hostings. When you try to add more menu items and they exceeds the limit, any items beyond that limit will be truncated from the end of the menu. It can also manifests by reseting menu locations assignments.

Solution

1) php.ini

If you have access to php.ini, you can just add/change this line (or contact with your server admin to do that): max_input_vars = 3000;

2) .htaccess

Alternatively, you can try placing this in .htaccess: php_value max_input_vars 3000

First approach is more robust so you can try to use php.ini first.


How to hide menu items for logged out users?

When you have a site prepared for both anonymous and registered users, it's always useful to have a possibility to show some specific menu items only for one group of them.

How to restrict access to a menu item?

To restrict access to a menu item, please follow these simple steps:

  1. Go to the WP Admin Panel › Appearance › Menus and choose your target menu.
  2. Now find a menu item you want to change and expand it.
  3. Click the Conditional display option from the More Than Menu Settings section.
  4. When the popup opens, define who can see this menu item (by default all menu items are visible for all users).

How to use a different menu on a specific page?

Sometimes it's necessary to use a different menu for a specific page. Let's say you have a landing page and you want to show only few links in its menu. Probably you will also want to hide footer navigation on such a page. Our menu system allows you to do this.

Where can I change a menu for a specific page?

On each single page, in the right sidebar, you can find the Use other menu box. Using it you can choose different menu for your primary, secondary and footer navigation. Or disable all of them if you want.


How to change the font for menu items?

In most cases all your menu links will use the same font. But sometimes it's useful to highlight some special link or even an entire menu subtree. Our menu system allows you to override default font for any submenu and even for any individual menu item.

Global settings

To set default font for all menu items, please these simple steps:

  1. Go to the WP Admin Panel › Appearance › Menus and select your target menu.
  2. Below the menu structure, under the More Than Menu Settings section, select the Style tab. There are 3 sections for single menu items:
    • Menu items - first level menu items
    • Submenu items - second level menu items
    • Nested submenu items - all menu items on third level and below
  3. Choose your preferred font for each section or leave it untouched to inherit from default font setting.

Individual settings

For each single menu item you there are the same options available as we described in the Global settings section. Just go to a menu item, expand it and click the Layout option under the More Than Menu Settings section.


How to add an icon to a menu item?

To add an icon to a menu item, please follow these simple steps:

  1. Go to the WP Admin Panel › Appearance › Menus and choose your target menu.
  2. Now find a menu item you want to change and expand it.
  3. Click the Content option from the More Than Menu Settings section.
  4. When the popup opens, select that you want to Use the icon and choose one of available icons from the list.


How to use a shortcode/widget inside a menu item?

To add an extra content (shortcode, widget or just regular HTML) to a menu item please follow these simple steps:

  1. Go to the WP Admin Panel › Appearance › Menus and choose your target menu.
  2. Now find a menu item you want to change and expand it.
  3. Click the Content option from the More Than Menu Settings section.
  4. When the popup opens, use the option Display extra content to define where you want to show this content.
  5. After this, new field Text, HTML, shortcodes will show up. Place your content inside it.

How to configure phone/tablet optimized menu?

For today's modern websites mobile optimisation is a must. Sites have to be responsive to allow users to navigate through them easily. On smaller devices, like phones and tablets, menu is one of the most important part. We put a lot of attention to make our menu system as much user friendly as possible. You can define for which screen sizes you want to use default, desktop version of menu and when to switch to mobile menu.

Change menu for tablet

By default, your desktop menu will be switched to simple list (extended mobile version) on the 1024px width (iPad landscape view). To change this value, please follow these steps:

  1. Go to the WP Admin Panel › Appearance › Menus and select your target menu.
  2. Below the menu structure, under the More Than Menu Settings section, select the Layout and then Menu tab.
  3. You should see the section called Mobile Menu and the subsection Tablet Optimised. You can set there mobile menu switching point. It can be any custom width or one from predefined options. Decide also which type of mobile menu is most appropriate and if the Toggle button should be visible or not.

Change menu for phone

By default, we switch the desktop menu to select (simple mobile version) on the 667px width (iPhone landscape view). To change this value, please follow these steps:

  1. Go to the WP Admin Panel › Appearance › Menus and select your target menu.
  2. Below the menu structure, under the More Than Menu Settings section, select the Layout and then Menu tab.
  3. You should see the section called Mobile Menu and subsection Phone Optimised. You can set there mobile menu switching point. It can any custom width or one from predefined options. Decide also which type of mobile menu is most appropriate and if the Toggle button should be visible or not.

How to display the search form in a submenu?

Let's say you have a first level menu item called Search and yout to show a search form on hover. Actually it's very easy, just follow these steps:

  1. Add a regular menu item (let's say we called it Search Form) as a subitem of the Search menu item.
  2. Now you need to add the search form shortcode, as an extra content, to the Search Form. To do this, please click the Content option from the More Than Menu Settings section (if you can't find this option, please check this article first).
  3. When the popup opens, use the option Display extra content. Choose the Below title options and when new field Text, HTML, shortcodes shows up, place this content inside it:
    [g1_searchform]

In most cases all your menu links will have the same look (in default, highlight and hover state). But sometimes it's useful to highlight some special link or even an entire menu subtree. Our menu system allows you to override this default color schema for any submenu and even for any individual menu item.

Global settings

To set default hover color for all menu items, please follow these steps:

  1. Go to the WP Admin Panel › Appearance › Menus and select your target menu.
  2. Below the menu structure, under the More Than Menu Settings section, select the Style tab.
  3. There are 3 sections for single menu items:
    • Menu items - first level menu items
    • Submenu items - second level menu items
    • Nested submenu items - all menu items on third level and below
  4. Choose your preferred hover color for each section or leave it untouched to inherit from the default color setting.

Individual settings

For each single menu item there are the same options avialable as we described in the Global settings section. Just go to a menu item, expand it and click the Layout option under the More Than Menu Settings section.



How to open custom content in the off-canvas area?

To open some extra content (a shortcode, a widget or just some regular HTML) in the off-canvas area, first you need to decide which menu item will trigger this action. To do this, please follow the procedure:

  1. Go to the WP Admin Panel › Appearance › Menus and choose your target menu.
  2. Now find a menu item that will open the off-canvas area.
  3. Click the Content option from the More Than Menu Settings section.
  4. When the popup opens, for the option Display extra content, select the in left offcanvas or in right offcanvas. After this, new field Text, HTML, shortcodes will show up. Place your content inside it.

How to open a custom content in the popup?

To open an extra content (a shortcode, a widget or some regular HTML) in the popup, first you need to decide which menu item will trigger this action. To do this, please follow these simple steps:

  1. Go to the WP Admin Panel › Appearance › Menus and choose your target menu.
  2. Now find a menu item that will open the popup and expand it.
  3. Click the Content option from the More Than Menu Settings section.
  4. When the popup opens, for the Display extra content choose in lightbox option.
  5. After this, new field Text, HTML, shortcodes will show up. Place your content inside it.

How to create a menu divided into two parts?

You can split your menu into two separate parts. It's really useful if you have elements like search icon or follow links that shouldn't be combined with other, more important, business specific links. Divided menu makes a logical separation between items, giving your visitors better user experience.

How can I split a menu?

To split a menu, please follow these simple steps:

  1. Go to the WP Admin Panel › Appearance › Menus and choose your target menu.
  2. Scroll down to the More Than Menu Settings and select the LayoutMenu tab.
  3. From the available options, set the How to align menu items? to left right.
  4. The link "Move to the split point" will show up, click it. Now you can move the split point using drag and drop.

How to manage the menu in the preheader?

To add a menu to the preheader theme area, please follow these simple steps:

  1. Create it in the WP Admin Panel › WP Appearance › Menus › Edit Menus tab
  2. Select it as the Secondary Navigation in the WP Admin Panel › Appearance › Menus ›Manage Locations tab.

Post Formats

The Theme comes with a post formats support. We paid a lot of attention to each post format so all looks nicely and behaves as you might expect.

Default behaviour

Collection view

If you set the Featured Image for a post, it will be used to present post in a collection view. When a specific post format defines otherwise, it can use e.g. a slider what is true for a gallery post format.

If you don't set the Featured Image, a placeholder (symbolic representation) will be used instead (lightbox doesn't apply in this case). Both, featured image and placeholder, point to single view page.

Single view

In a single view if the Featured Image is set and it's enabled (via Single Page Options) it will be used. Each post format can use different type of presentation for its featured media. For example, if you set YouTube link for a video post format, a video player will be loaded instead of the Featured Image.

Specific behaviour

To read more about different post formats presentation types, please refer to below sections.


Audio post format

If you're not familiar with the post format concept, first please refer to the Post Formats Overview.

When to use the audio post format?

If an audio is the most important part of your post.

How to use it?

When you edit a post, in the right sidebar you should see the Format meta box. If you choose the audio post format, the Audio Url (oEmbed or mp3) or Embed Code field will show up above the content editor. Put your audio url or embed code there.

Examples:

SoundCloud audio url

https://soundcloud.com/usher-raymond-music/usher-i-dont-mind-feat-juicy-j

SoundCloud embed code

<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/url=https%3A//api.soundcloud.com
    /tracks/170339902&auto_play=false&hide_related=false&show_comments=true
    &show_user=true&show_reposts=false&visual=true"></iframe>

How it looks and behaves in a collection view?

If you set the Featured Image for this post type, it always be used to present post in a collection view. After clicking the image, the audio will be open in the lightbox popup. If you don't set the Featured Image, a placeholder (symbolic representation) will be used instead (lightbox doesn't apply in this case).

How it looks and behaves in a single view?

If you set an audio url or embed code, an audio will be loaded (using the built-in audio player) on top of your post content. In other case, the Featured Image will be used.

Don't forget to check if the Featured Media (in Single Post Options) is not set to hide.


Image post format

If you're not familiar with the post format concept, first please refer to the Post Formats Overview.

When to use the image post format?

If an image is the most important part of your post.

How to use it?

When you edit a post, in the right sidebar you should see the Format meta box. Choose the image post format and set the Featured Image.

How it looks and behaves in a collection view?

If you set the Featured Image for this post type, it always be used to present post in a collection view. After clicking the image, the large version will be open in the lighbox popup.

If you don't set the Featured Image, a placeholder (a symbolic representation) will be used instead (lightbox doesn't apply in this case).

How it looks and behaves in a single view?

If the Featured Image is set, it will be displayed on top of your post content. Don't forget to check if the Featured Media (in Single Post Options) is not set to hide.


Gallery post format

If you're not familiar with the post format concept, first please refer to the Post Formats Overview.

When to use the gallery post format?

If a set of images is the most important part of your post.

How to use it?

When you edit a post, in the right sidebar you should see the Format meta box. Choose the gallery option and upload some images to this post (you can use the Add Media button, above the content editor).

How it looks and behaves in a collection view?

If you set the Featured Image for this post type, it always be used to present post in a collection view. After clicking the image, the whole gallery will be open in the lighbox popup. If you don't set the Featured Image, a slider will be used.

How it looks and behaves in a single view?

If the Featured Image is set, it will be displayed on top of your post content.If there is no Featured Image but some images were uploaded to this post, a slider will be loaded.

Don't forget to check if the Featured Media (in Single Post Options) is not set to hide.


Video post format

If you're not familiar with the post format concept, first please refer to the Post Formats Overview.

When to use the video post format?

If a video is the most important part of your post.

How to use it?

When you edit a post, in the right sidebar you should see the Format meta box. If you choose the video post format, the Video Url (oEmbed) or Embed Code field will show up above the content editor. Put your video url or embed code there.

Examples

YouTube video url

http://youtu.be/Vpg9yizPP_g

YouTube embed code

<iframe width="560" height="315" src="//www.youtube.com/embed/Vpg9yizPP_g" frameborder="0" allowfullscreen></iframe>

How it looks and behaves in a collection view?

If you set the Featured Image for this post type, it always be used to present post in a collection view. After clicking the image, the video will be open in the lightbox popup. If you don't set the Featured Image, a placeholder (symbolic representation) will be used instead (lightbox doesn't apply in this case).

How it looks and behaves in a single view?

If you set a video url or embed code, a video will be loaded (using the built-in video player) on top of your post content. In other case, the Featured Image will be used. Don't forget to check if the Featured Media (in Single Post Options) is not set to hide.


Tips & Tricks

Securing your WordPress site

Security is the most neglected part of a Wordpress site life cycle. Many people recall about it when it is too late, when their sites are already hacked. You probably won't be one of them so please take it really seriously. It costs nothing (there are free plugins) to fully protect your site against attackers and their malware software.

Use the WordFence plugin

From many good plugins (both free and paid) available on the market, we recommend the Wordfence Security plugin. As a good starting point, please check the How to Configure Wordfence Security Plugin for WordPress tutorial.

Keep plugins up to date

We all know that Wordpress wouldn't exist without plugins. We all use them and thanks to them we can save a lot of time instead of building everything from scratch. All you need to do to keep your site safe is to remember about keeping all your plugins up to date. If you don't use a plugin anymore, just deactivate (or remove) it, but never leave it outdated. It's the easiest way to give any potential hacker access to your site.

Other good practices

The Wordfence Security plugin gives you almost ultimate protection. If this plugin detects any potential security issue you will be immediately notified about it. But it can't detect and solve all of them. Some are related to human natur, so we also strongly advise to stick to these rules:

  • Don't give the admin access to anyone
  • Make sure that users with access to your site have correct access level
  • Use strong passwords (Wordfence has an option to force your users to use strong passwords, use it!)

Translating the Theme

Translation mechanism

Wordpress uses the GNU gettext localization framework to provide localization infrastructure (.po/.mo files). You probably don't want to create .po/.mo files manually so that's all you need to know for now. Of course if you're a developer or just want to learn more, please visit the Translating WordPress documentation page.

Before you start

In order to localize your theme and plugins, create a directory named "languages" inside of "wp-content", if it does not already exist. Make sure that your web server has write permissions to this directory. If you're not familiar with this subject, please first read about Wordpress file permissions.

Tools

To prepare a translation, you can choose from different tools or plugins.

poEdit

If you decide to use a desktop program, we recommend to use the poEdit. It's free.

Loco Translate plugin

But, in our opinion, more efficient way to handle theme/plugins translations is to use the Loco Translate plugin. This is always good to have all necessary tools handy, without switching to external programs. The "Loco Translate" plugin has also its online alternative which makes it useful for editors (that have no access to your admin panel).

WPML plugin

The WPML is the most powerful plugin to translate Wordpress. It's not free (it costs about 79$) but it's worth its price. If you decide to use it, please read the String Translation section to learn how to translate theme/plugins phrases (anything that doesn’t fall inside posts, pages or taxonomy content).

Translate with the Loco Translate plugin (recommended)

  1. Install the Loco Translate plugin.
  2. Go to the WP Admin Panel › Loco Translate.
  3. Find on the list your target theme/plugin (screen 1, point 1)
  4. Click "New language" (screen 1, point 2).
  5. Select your language (let's say "Spanish", code "es_ES").
  6. Under the language code field you can see an option to decide where to store your translation. Choose the "create in global languages directory" option. If you don't see any option that's fine, translation will be stored in global directory. Click "Start translating".

Choose theme/plugin to translate

Translate all phrases (screen 2, point 1 and 2) and click "Save" (screen 2, point 3) to generate all necessary translation files.

Save translation

If everything goes well, you should find translation files under the directory:

For theme

wp-content/languages/themes/g1_theme-es_ES.po wp-content/languages/themes/g1_theme-es_ES.mo

For plugin (e.g. G1 Authors)

wp-content/languages/plugins/g1_authors-es_ES.po wp-content/languages/plugins/g1_authors-es_ES.mo

Keep translations safe after future updates

Because we don't use the theme/plugins related directories to store translations you have nothing to worry about. All custom translations are stored in the wp-content/languages directory so unless you reinstall the entire Wordpress installation, all is safe there. You can update the theme and each plugin without losing their translations. You don't even need to use the child theme.


Using the Child Theme

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme.

Read more about Child Themes in the WordPress Codex

Why should I use it?

You will probably want to modify this theme somehow. We strongly recommend to use the Child Theme then. That way, when the parent theme is updated, your modifications are preserved. You don't have to create your own child theme, just use the one from the zipped file downloaded from ThemeForest.

Where should I place my CSS modifications?

All your custom CSS rules should be added to the style.css file form the child theme. You can access it directly from the WP admin panel › Appearances › Editor.

Where should I place my JavaScript modifications?

All your custom JavaScript code should be added to the modifications.js file from the child theme. You can access it directly from the WP admin panel › Appearances › Editor.


Speeding up your WordPress site

Wordpress has to generate each page each time your visitor comes to it. This is always a costly operation, forcing your web server to waste its resources (mainly CPU and memory). You are probably aware of the fact that it is not necessary to do that. All visitors can (and should) see the same page version (for some defined period of time or at least until next modification). You should always cache your site and eliminate all additional components (e.g. plugins) that can slow down caching process (page will be generated only once but this also can take a while).

Use the WP Super Cache plugin

There are few good plugins for caching. We recommend the WP Super Cache plugin because it's good enough for most cases and relatively simple to configure. If you need more powerful solution, the W3 Total Cache plugin will be a better choice. It has much more options (e.g. CSS/JavaScript minifying) but it's also much more complicated.

If you are not familiar with the WP Super Cache plugin and you're looking for a quick start guide, please check the How to Install and Setup WP Super Cache for Beginners tutorial.

Uninstall unused plugins

Another good practice to provide best site performance is to use only the necessary plugins. Less plugins means less resources to process and faster site. Make sure that all your active plugins are really needed and if not please deactivate (or remove) them. Our theme is delivered with a lot of built in components so before you decide to use a 3rd party extension, please check if the theme doesn't provide it already.

Enable gzip compression

All modern browsers support and automatically negotiate gzip compression for all HTTP requests. Enabling gzip compression can reduce the size of the transferred response by up to 90%, which can significantly reduce the amount of time to download the resource, reduce data usage for the client, and improve the time to the first render of your page. See How to Optimize Your Site with GZIP Compression to learn more.


Plugins

G1 Reviews plugin

G1 Reviews is a plugin to show article rating based on defined criteria.

Installation

The plugin is built into the theme so after theme activation you will be asked to install it.

Setup

The plugin has no administration page. To set up a review please go to any of your articles and use available review boxes:

  1. Review - configure how your review will look like and where it will be displayed
  2. Review criteria - choose criteria your review is composed of

How to add new review criterion?

To add/remove a review criterion please go to the WP Admin Panel › G1 Reviews section.

Integration with the posts shortcode/widget

After activating this plugin, in the posts shortcode/widget, for the "type" field, you can select the "top rated" option. This will allow you to sort your posts based on their ratings.

How to Update?

To update the plugin, go to the WP Admin Panel › Appearance › ›Install plugins, find the "G1 Page Builder" plugin on the list and click "Update" right below it.

Notice

If you can't find the Install plugins link in the WP Admin Panel › Appearance section, all your plugins are up to date and you don't need to update anything.

Shortcode & Widget

The plugin is delivered with both shortcode and widget.

The widget can be found under the WP Admin Panel › Appearance › Widgets section.

The shortcode can be used via our shortcode generator or as a page builder component.

G1 Ads plugin

G1 Ads is a plugin that lets you embed advertisements on your site (Google Ads, image posters).

Installation

The plugin is built into the theme so after theme activation you will be asked to install it.

Setup

This plugin has no administration page. All you need to do is to add it to your page via shortcode or widget.

Where to find Google Ad Publisher Id and Slot Id?

On your Google AdSense account, find the ad you want to place on your site and using the "Get Code" button generate it. It should look like the below example (highlighted parts are the ones you are looking for).

<script type="text/javascript"><!--
    google_ad_client = "ca-pub-YOUR PUBLISHER ID NUMBER";
    /*YOUR AD TITLE HERE */
    google_ad_slot = "THIS IS YOUR AD SLOT ID";
    google_ad_width = 200;
    google_ad_height = 90;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>

Shortcode & Widget

The plugin is delivered with both shortcode and widget (G1 Ad and G1 Google Ad). The widgets can be found under the WP Admin Panel › Appearance › Widgets section. The shortcode can be used via our shortcode generator or as a page builder component.

How to Update?

To update the plugin, go to the WP Admin Panel › Appearance › Install plugins, find the plugin on the list and click "Update" right below it.

Notice

If you can't find the Install plugins link in the WP Admin Panel › Appearance section, all your plugins are up to date and you don't need to update anything.

G1 Quotes plugin

G1 Quotes is a plugin to show your quotes, testimonials or recent comments with different templates.

Installation

The plugin is built into the theme so after theme activation you will be asked to install it.

Setup

This plugin has no administration page. All you need to do is to add it to your page via shortcode or widget.

How to Update?

To update the plugin, go to the WP Admin Panel › Appearance › Install plugins, find the "G1 Page Builder" plugin on the list and click "Update" right below it.

Notice

If you can't find the Install plugins link in the WP Admin Panel › Appearance section, all your plugins are up to date and you don't need to update anything.

Shortcode & Widget

The plugin is delivered with both shortcode and widget. The widget can be found under the WP Admin Panel › Appearance › Widgets section. The shortcode can be used via our shortcode generator or as a page builder component.

G1 Users plugin

G1 Users is a plugin to list blog authors using different templates (list, gallery).

Installation

The plugin is built into the theme so after theme activation you will be asked to install it.

Setup

This plugin has no administration page. All you need to do is to add it to your page via shortcode or widget.

Add author summary

After activating the plugin the "Author summary" filed is added to each user profile edition page. An author can add an additional info about itself. This info will be displayed on author page, in author's quotes.

How to Update?

To update the plugin, go to the WP Admin Panel › Appearance › Install plugins, find the plugin on the list and click "Update" right below it.

Notice

If you can't find the Install plugins link in the WP Admin Panel › Appearance section, all your plugins are up to date and you don't need to update anything.

Shortcode & Widget

The plugin is delivered with both shortcode and widget. The widget can be found under the WP Admin Panel › Appearance › Widgets section. The shortcode can be used via our shortcode generator or as a page builder component.

G1 Socials plugin

G1 Socials is a simple plugin that lets your users follow you via your social channels.

Installation

The plugin is built into the theme so after theme activation you will be asked to install it.

Setup

After activating the plugin its configuration page will be accessible under the WP Admin Panel › Appearance › Theme Options › Socials.

How to add new icon?

To add new icon you need to use the "g1_socials_items" hook. We strongly recommend to add all new icons via our child theme. Below the child theme functions.php file showing how to use the hook to add/remove icon.

<?php>
    // Prevent direct script access
    if ( !defined( 'ABSPATH' ) )
    die ( 'No direct script access allowed' );
    <p>                    /**<br /><br />
    * Child Theme Setup<br /><br />
    *<br /><br />
    * Always use child theme if you want to make some custom modifications.<br /><br />
    * This way theme updates will be a lot easier.<br /><br />
    */<br /><br />
    function g1_childtheme_setup() {<br /><br />
    add_filter( 'g1_socials_items', 'add_remove_g1_socials_item' );<br /><br />
    }</p><br />
    <p>                    add_action( 'after_setup_theme', 'g1_childtheme_setup' );</p><br />
    <p>                    function add_remove_g1_socials_item ( $icons ) {<br /><br />
    $child_theme_dir = get_stylesheet_directory_uri();</p><br />
    <p>                    // remove 'Facebook' icon<br /><br />
    unset( $icons['facebook'] );</p><br />
    <p>                    // add new icon, let's call it 'myicon'<br /><br />
    // 'color' -  defines icon background color<br /><br />
    // 'icon_dir' - defines where the folder with icon is located<br /><br />
    $icons['myicon'] = array(<br /><br />
    'color' => '#ff0000',<br /><br />
    'icon_dir' => $child_theme_dir . '/social-icons/'<br /><br />
    );</p><br />
    <p>                    return $icons;<br /><br />
    }<br /><br />

Now, you need to add your icons to the folder you specified (via "icon_dir" parameter). You should add icons in all sizes: 16px, 24px, 32px and 48px. Icons should be in the png format.

Change Icons Order

The icon list interface is sortable. You can easily change an icon position just by dragging it (move mouse over a title) after/before other icon.

How to Update?

To update the plugin, go to the WP Admin Panel › Appearance › Install plugins, find the "G1 Socials" plugin on the list and click "Update" right below it.

Notice

If you can't find the Install plugins link in the WP Admin Panel › Appearance section, all your plugins are up to date and you don't need to update anything.

Shortcode & Widget

The plugin is delivered with both shortcode and widget. The widget can be found under the WP Admin Panel › Appearance › Widgets section. The shortcode can be used via our shortcode generator or as a page builder component.

G1 Twitter plugin

G1 Twitter is a plugin that lets you easily show your latest Tweets on your site.

Installation

The plugin is built into the theme so after theme activation you will be asked to install it.

Setup

After activating the plugin its configuration page will be accessible under the WP Admin Panel › Appearance › Theme Options › Twitter

Basic

First you need to set up some basic data like your username and decide if you want to use a regular list or rather a carousel. These options will be used as default options for all shortcodes invoked without attributes. This can be really useful if you want to embed your Tweets in few places but with the same configuration. Of course you can override each option, using shortcode attribute directly.

Cache

To prevent exceeding Twitter downloads limits, it's a good idea to define cache duration time. It's not necessary to fetch new Tweets for each new visitor on your site. Tweets should be kept in cache and revalidated after eg. each hour (3600 seconds).

Authorization

To send secure authorized requests to the Twitter API Twitter uses oAuth access to its API. More information how to properly configure the API can be found in the WP Admin Panel › Appearance › Theme Options › Twitter › oAuth Authentication section.

How to Update?

To update the plugin, go to the WP Admin Panel › Appearance › Install plugins, find the "G1 Twitter" plugin on the list and click "Update" right below it.

Notice

If you can't find the Install plugins link in the WP Admin › Appearance section, all your plugins are up to date and you don't need to update anything.

Shortcode & Widget

The plugin is delivered with both shortcode and widget. The widget can be found under the WP Admin Panel › Appearance › Widgets section. The shortcode can be used via our shortcode generator or as a page builder component.

G1 MailChimp plugin

G1 Mailchimp is a plugin that lets your visitors quickly subscribe to your newsletter.

Installation

The plugin is built into the theme so after theme activation you will be asked to install it.

Setup

After activating the plugin its configuration page will be accessible under the WP Admin Panel › Appearance › Theme Options › Mailchimp

You need to choose a mailing list but you can't do this without providing your Mailchimp API key. Please set it first and click "Save changes". After reloading the page you should see all available lists. If you don't see any list there, please check if you configured them properly on your Mailchimp account.

You can also decide if your users should subscribe just by adding their emails or you want to collect also their names.

How to Update?

To update the plugin, go to the WP Admin Panel › Appearance › Install plugins, find the "G1 Mailchimp" plugin on the list and click "Update" right below it.

Notice

If you can't find the Install plugins link in the WP Admin › Appearance section, all your plugins are up to date and you don't need to update anything.

Shortcode & widget

The plugin is delivered with both shortcode and widget. The widget can be found under the WP Admin Panel › Appearance › Widgets section. The shortcode can be used via our shortcode generator or as a page builder component.

Other

Sources and Credits

Images, Illustrations, Videos & Icons

JavaScripts

  • jQuery - JavaScript Framework
  • carouFredSel - A circular, responsive carousel plugin built using the jQuery
  • Countdown - A jQuery plugin that show a countdown to a given time
  • Easing - A jQuery plugin from GSGD to give advanced easing options
  • Easy Pie Chart - A jQuery plugin to render and animate pie charts with the HTML5 canvas element
  • enquire.js - Awesome Media Queries in JavaScript
  • Isotope - Filter & sort magical layouts
  • Magnific Popup - Light and responsive lightbox script with focus on performance
  • Modernizr - JavaScript library that detects HTML5 and CSS3 features in the user’s browser
  • Odometer - Smoothly transitions numbers with ease
  • Picturefill - A responsive image polyfill
  • Respond - A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8)
  • slick - A responsive carousel jQuery plugin
  • svg4everybody - Use external SVG spritemaps
  • TouchSwipe - A jQuery plugin to be used with jQuery on touch input devices
  • Waypoints - Waypoints is the easiest way to trigger a function when you scroll to an element.

Fonts

PSD files

Right now the download package includes fully layered, Adobe Photoshop .PSD file of the home page. We will successfully add new pages. All fonts used in the template are available from the Google Fonts Directory for free. Every file is well organized and contains grid helper lines for your convenience.

JavaScript files

The main power behind this theme is the famous javascript framework jQuery. All plugins and theme specific functionalities are based on it.

Except plugin files, the Theme uses:

  • g1-front.js - theme specific functions and plugins initializations (frontend side)
  • g1-admin.js - theme specific functions and plugins initializations (admin side)
  • g1-theme-options.js - theme options panel specific functions
  • g1-shortcodes.js - shortcodes configuration (for page builder and shortcode generator)

All used 3rd party scripts are listed on the Sources and Credits page.

CSS files

Reset Styles

The first rules in g1-screen.css file are generic reset rules. Many browser interpret the default behavior of html elements differently. By using a general reset styles, we can work round this.

General Styles

The main css file g1-screen.css is separated into sections:

  1. BASE
    1. Reset
    2. Tools
  2. DEFAULT STYLES
    1. Typography
    2. Images
    3. Tables
    4. Forms
  3. ELEMENTS
    1. Icons
    2. Lists
    3. Dropcaps
    4. Buttons
    5. Dividers
    6. Messages
    7. Quotes
    8. Leads
    9. Placeholders
    10. Duplicators
    11. Numbers
    12. Frames
    13. Audio Player
    14. Breadcrumbs
    15. Pagination
    16. Heading groups
    17. Boxes
    18. Tables
    19. Toggles
    20. Tabs
    21. Progress Bars
    22. Progress Circles
    23. Countdowns
    24. Before & After
    25. Carousel
    26. Simple Sliders
    27. Revolution Slider Customizations
    28. Twitter
    29. Google Maps
  4. MODULES
    1. Basic Entry
    2. Aside Post Format
    3. Audio Post Format
    4. Chat Post Format
    5. Image Post Format
    6. Gallery Post Format
    7. Link Post Format
    8. Status Post Format
    9. Quote Post Format
    10. Video Post Format
    11. Related Entries
    12. Gallery
    13. Galleria
    14. Collections
    15. Isotope
    16. Widgets
    17. Comments
    18. About Author
    19. Custom Fields
    20. Sidebars
    21. Side Navigation
    22. Mediaboxes
  5. GLOBAL LAYOUT
    1. Body
    2. Preheader
    3. Header
    4. Precontent
    5. Content
    6. Prefooter
    7. Footer
  6. PAGE SPECIFIC LAYOUT
    1. Home
    2. Pages
    3. Posts
    4. Works
    5. Search
    6. 404
    7. Extras
  7. Plugins
    1. WPML (the WordPress Multilingual Plugin
    2. Sociable Plugin

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited. Sections are marked as follows:

/* ------------------------------------------------------------------

1 . SAMPLE SECTION NAME

------------------------------------------------------------------- */

Theme Folder Structure

After unzipping the file downloaded from the ThemeForest you'll see the following folder structure:

  • changelog.txt - releases history
  • chirps - theme files - in case you want to upload the theme through the FTP
  • chirps.zip - zipped theme files - in case you want to upload the theme through the WordPress admin
  • chirps-child-theme - child theme files - in case you want to upload the child theme through the FTP
  • chirps-child-theme.zip - zipped child theme files - in case you want to upload the child theme through the WordPress admin
  • Documentation - an entry point to the online documentation. Online version it's always up to date.
  • License - licensing files
  • Licensing - licensing files
  • PSD - PSD files

Custom Widgets

The Theme comes with some custom widgets ready to use. All custom widgets names start with the G1 prefix.

All available widgets can be found in the WP Admin › Appearance › Widgets.