Theme installation

After you purchased the theme, go to “Downloads” section in your Themeforest account and download theme package to your computer.

d-theme-install1

 

Unzip it it and find installable “jollyness.zip” in “THEME IN THAT FOLDER !” folder.

Log in your domain, where you have previously installed WordPress.

Go to Appearance>Themes>Add new>Upload theme and upload installable jollyness.zip archive.

d-theme-install3

 

j-install1

Activate the theme and begin installing required plugins.

j-install2

j-install3

 

Return to Required plugins installer.

u-install3

And activate installed plugins.

 

j-install4

 

If you want to import demo data, go to Appearance>Import Demo Data section.

u-install5

 

Read carefully instructions on the demo import and click “Import Demo Data” Button.

u-install6

u-install7

The import is started. It may take several minutes, so, please, simply wait till you see 100% in the progress bar.

u-install8

 

IMPORTANT NOTE! If you are going to customize theme files, we strongly recommend to install child theme at once. Child theme is located in “Child Theme” folder of theme archive. More information about child theme you can find in section Child theme of this docimentation.

Child theme

It is very important to install child theme in case you are going to modify theme files according to your needs.

The greatest advantage of the child theme is that you can store the modified theme files in it and they will never be lost after you update the parent theme.

Why?

Because child theme doesn’t require updates.

How to get started with the child theme?

First of all you have to install the parent theme, as described in section “Theme installation” .

Find “jollyness-child.zip” file in theme package.

Install it the same way as the parent theme over Appearance>Themes>Add new. And activate it.

How to upload modified files to the child theme?

Child theme fully inherits functionality of the parent theme. If you want to make some changes in theme files, you have to copy the target files to your computer, edit them, and upload to the child theme. Please, note, regardless of the file you wish to edit, it must be loaded in the child theme into the same folder, where the original file of the parent theme is located. In other words, it must have the same path, as the file in the parent theme.

For example, you need to edit file news-page.php that is stored in “page-templates” folder.

After you have modified that file, you have to upload it to the child theme in the same folder, as in the parent theme. Example “page-templates/news-page.php”.

 

j-child1

 

How to add my custom CSS to the child theme?

You can insert your custom CSS codes directly to the style.css file, that is stored in child theme folder by default or to Theme Options>Advanced Options>Custom CSS Code section. Both ways are correct.

j-child2

 

Google map activation

In order to make Google Map work on your site, it is required to activate your Google Map API Key in theme options of the theme.

Please, follow the next steps:

  1. Generate your Google Map API Key by following instructions in this tutorial.
  2. Go to Appearance > Theme Options > Advanced options section and find Map api key field there.
  3. Insert your API key and save settings.
    google-map-api-jollyness
  4. When you are ready, you can add map on your pages via Visual Composer editor.

Theme updates

We wanted to make update process easier and faster for our customers, that’s why added auto update option to all other themes.

From now on, if you insert your item purchase code into Theme options>Main Options>Item purchase code, you will receive update notification in admin dashboard and will be able to update the theme directly from there.

update-6

After you have inserted purchase code to Theme Options>Main Options>Item purchase code, you will get update notifications in ‘Updates’ section of the admin dashboard.

update-3

Visit it and update the theme directly from there.

 

When the theme is updated, go to section Appearance>Install Plugins and update the required plugins. If Install Plugins section didn’t appear in Appearance section after updating, it means there are no new versions for plugins and all of them are up-to-date. 

update-5

That are all required steps for updating!

 

How to find your item purchase code:

– log in your Themeforest account;
– visit section ‘Downloads’;

d-theme-install1

 

– open profile page of the theme you bought;
– switch to ‘Support’ tab;

 

update-2

– go down the page and find subsection ‘Purchase Codes’ , where you will see your item purchase code.

Theme localization

There is a list of words and phrases in the theme that can be translated into different languages.

You can translate them in two ways:

WPML String Translation – this is a paid plugin with its own documentation http://wpml.org/

POedit software – free translation editor.

All Crumina themes are fully translated into two languages – Russian and German. Translation file for Russian and German and default translation file are located in “translation” folder of the theme.

 

How to translate with POedit into a different language?

1. Install POedit on your computer http://poedit.net/ .

2. Open crum.pot file in it.

 

3. Begin translating all/some phrases into your language.

d-localization1

 

4. When all phrases are translated, save the file in .po format. Example: nl_NL.po, fr_FR.po, he_IL.po etc.

 

5. After the .po file is saved, a .mo file is created automatically too.

d-localization2

 

6. Upload both files , .po and .mo, via your FTP account to “translation” folder. Translation will be applied automatically, if you have installed WordPress in corresponding language.

Pages. Visual Composer as main page builder

Adding a new page

To create a custom page go to Pages section, click Add new tab, give it a title and start adding content to it.

You can add the content either using a default WordPress editor or with help of Visual Composer, that comes with the theme as the main page builder.

Visual Composer

We tried to keep all standard Visual Composer options. What we changed is styling of the existing modules and added a number of new modules. The rest of options are left unchanged.

The detailed documentation on how to use Visual Composer is added to the theme package. However, there is a lot of other useful information and video tutorials provided at the official VC website and its youtube channel, that you can view following the links below.

https://www.youtube.com/channel/UC8VqUAlmHoMs85jalFRv_mQ

http://vc.wpbakery.com/

https://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress

 

Despite of the existing official Visual Composer documentation, we will review the basic features of this builder in this article.

If you are going to add content using Visual Composer, make sure that you have installed and activated it while installing the theme.

Create a new page, enter a title and click “Backend editor” button.

d-page1

Start adding elements by clicking “Add element” button or select any of the predefined layouts, if needed.

d-page2

After you have clicked “Add element” button, there appears a window with all available modules, that can be used on your page. Add needed modules and adjust their settings using the options inside each module.

j-page1

 

After you have added the first module, you have possibility to edit the row by splitting it into columns. For this you just have to hover the row icon, there will appear more icons with all predefined column variants, and select the needed one.

d-page4

Visual Composer also allows you to edit the row settings, that you can edit by clicking the pencil icon.

d-page5

j-page2

Page options

You can adjust custom page settings for your page. They are located in Page options section and include settings for:

– header;
– stunning header;
– page layout;
– footer.

Header options

These settings allow you to change header look on the particular page. Here you can:

– upload a different logo for normal and Retina screens;
– enable/disable top bar;
– select a different header type: logo on left, logo on center or logo on center with text;
– enable/disable sticky header;
– select custom menu, e.g. if you need some to show on a particular page.

j-post7

 

Stunning header options

This section allows you to configure the following settings on individual pages:

– Enable/disable stunning header;
– Breadcrumbs – you can enable or disable breadcrumbs
– Title typography – change font family, size and color of the stunning header title.;
– Background – it is possible to change background color of the stunning header or upload a background image;
– Page header height- you can adjust the height of the stunninge header section.

j-post8

 

Page layout

Here you can select layout of your page and adjust settings for it. You can choose layout with left or right sidebar or without sidebars.

You can also enable boxed layout if needed.

j-post9

Footer options

In this section you can configure custom settings for the single page.

u-layout4

– Enable/disable back-to-top button;
– change padding before and after footer content;
– change background color or upload background image;
– change font color of of the footer text;
– Customize footer widgets – if enabled, you can change the widgets shown in the footer of the particular page.

 

Single portfolio

Portfolio is a custom post type for displaying your portfolio items.

To create a portfolio, you have to:

1. log in your admin dashboard;

2. go to “Portfolio” section, that is located in the left side of the admin dashboard;

3. click “Add new” tab and begin filling in the blanks:

– enter title in the upper field,
– the content to the main body content box and to “Item Short description” field, if needed,
– assign your portfolio to existing categories and tags, if needed, or create the new ones directly from the portfolio edit page;

4. add an image in the Featured Image section, that is located in the bottom right corner of the edit page. It will be displayed on the main portfolio page.

Portfolio content settings

Portfolio content section is subdivided into:

1. Item layout options. Here you select custom layout for your portfolio. There are 4 options available:

– Image left aligned – this layout enables you to set a short description on the right of the image by filling the “Item Short description” field and text below the image by filling in the upper editor field.

– Image right aligned – this layout enables you to set a short description on the left of the image by filling the “Item Short description” field and text below the image by filling in the upper editor field.

– Image centered with the text below;
– Simple text without image.

j-portfolio1

 

2. Item media options. This option enables you to add different media formats to your single portfolio item. They are:

– Simple featured image;
– Images slider – allows you to add images slider to your portfolio item. Simply click “Add” button and select images from Media library.

j-portfolio2

 

– Video – you can add any video format to your portfolio item.

u-portfolio4

– Audio – you can add embed audio link or upload your own audio file.

u-portfolio5

3. Item additional information. Here you can add:

  • subtitle for your portfolio item;
  • short description of your portfolio item, that we mentioned before;

j-portfolio3

  • custom fields in “Info boxes” section. It can be just a small info, for example, about the author of the product.

j-portfolio4

  • project button – you can add link to another page if you need to show more information about the product.

j-portfolio5

 

 

 

Featured image size

There is an option to select the size of the featured image: small, normal, large. It enables you to have images of the different sizes on the masonry portfolio layout.

 

j-portfolio6

Related items

Another option present on single portfolio page is “Related items options”. It allows you to display related items below the main content of your single portfolio. You can choose, whether the related items belong to the current category or to other categories. For this switch the toggle to “On” or “Off”.

u-portfolio8

If the toggle is set to “Off” select from the list categories that will be displayed as related items. You are allowed to select more than one category.

One important note – the selected categories can be included as well as excluded from display. For this switch the toggle “Exclude categories” to the proper position.

If the toggle is “On”, the selected categories won’t be displayed on page, if “Off”, only selected categories will be displayed there.

u-portfolio9

 

Stunning header options

This options allows to modify existing stunning header settings (typography and background settings of the page title section).

You can leave general settings by setting “Default” option. Or you can change the settings for individual portfolio item, if you select “Enabled” option. Otherwise, you can remove stunning header section from your portfolio by choosing “Disabled” option.

u-portfolio10

General options

There are general options, that can be configured for all portfolio items. They are located in Theme options>Portfolio options and are the following:

– Custom slug for portfolio items – you can change default slug for portfolio to your custom one.
– Show share social icons – enable or disabled social share buttons for the single portfolio page.
– Show related posts – if enabled, related posts will be displayed on the single portfolio page.
– Block title – here you can enter the title of the related items block.
– Block subtitle – here you can add the subtitle of the related items block.
– Number of posts – you can put the number of related posts displayed in the related items block.

j-portfolio7

 

 

 

 

Custom slug for portfolio

The default slug for portfolio items is “portfolio”.

However you can change it to your custom slug. For this go to Theme options>Portfolio options and enter your custom slug to Custom slug for portfolio items field.

u-customslug

 

After you have made changes, go to Settings>Permalinks and resave settings for proper work of permalinks.

Portfolio page

Creating a portfolio page

To create a portfolio page, where all your portfolio items will be shown, you need to:

1. go to Pages section;
2. click “Add new” tab;
3. fill in title field;
4. and select “Portfolio” template from section Page Attributes.

d-portfolio7

Portfolio template options

Here you can select the template for your portfolio page and adjust settings, that are different for each portfolio template.

 

j-portfolio8

Shortly about each portfolio template:

– Default – thse settings are adjusted in Theme options>Portfolio options section and are applied for all portfolio pages by default.
– Classic style – this style of portfolio allows you to show your portfolio items in 1,2,3, or 4 columns. The distinctive feature of this style is the portfolio title shown under the portfolio thumbnail.
– Grid style – allows to display portfolio items in 2,3 or 4 columns. It has no title under the thumbbnails that makes the only difference form the classic style.
– Masonry grid – the thumbnail sizes can be different depending on the settings configured in the single portfolio option called “Size on panel grid”.

j-portfolio6

 

General settings

Apart from the settings available in Portfolio page editor, there are general settings for portfolio page in Theme Options>Portfolio Options.

Most of the options there are the same as in portfolio page editor. But if you are going to build more that one portfolio pages and want to keep the same setting for each of them, the easiest way is to set up settings from Theme options>Portfolio options.

j-portfolio9

 

 

Page options

You can adjust custom page settings for your portfolio page. They are located in Page options section and include settings for:

– header;
– stunning header;
– page layout;
– footer.

Header options

These settings allow you to change header look on the particular page. Here you can:

– upload a different logo for normal and Retina screens;
– enable/disable top bar;
– select a different header type: logo on left, logo on center or logo on center with text;
– enable/disable sticky header;
– select custom menu, e.g. if you need some to show on a particular page.

j-post7

 

Stunning header options

This section allows you to configure the following settings on individual pages:

– Enable/disable stunning header;
– Breadcrumbs – you can enable or disable breadcrumbs
– Title typography – change font family, size and color of the stunning header title.;
– Background – it is possible to change background color of the stunning header or upload a background image;
– Page header height- you can adjust the height of the stunninge header section.

j-post8

 

Page layout

Here you can select layout of your page and adjust settings for it. You can choose layout with left or right sidebar or without sidebars.

You can also enable boxed layout if needed.

j-post9

Footer options

In this section you can configure custom settings for the single page.

u-layout4

– Enable/disable back-to-top button;
– change padding before and after footer content;
– change background color or upload background image;
– change font color of of the footer text;
– Customize footer widgets – if enabled, you can change the widgets shown in the footer of the particular page.

 

Single post. Post formats

Simple post

What is the post and its default features you may already know from the WordPress Codex.

To create a simple post you have to:

1. Log in your WordPress admin dashboard;

2. Go to “Posts” section in the left of your admin dashboard.

3. Click “Add new” tab and start filling in the blanks: enter your post title in the upper field,  enter your post content field in the main editing box below.

4. If needed link your post to existing categories and tabs, or create new ones directy from the post.

5. Add a featured image to your post, that will be displayed on your blog pages and post slider.

Post formats

Jollyness theme support most of standard Wordpress post formats: gallery, image, quote, video, audio. The definition of each format is detailed described in WordPress Codex. The list of all post formats is represented as radio-button list  in “Formats” sub-section in the right side of the post edit page.

To create a post with the desired post format,  select this format from the radio-button list, and start adding the content.

Gallery post format

To create a gallery post, you have to:

1. add new post, fill in Title field;

2. select Gallery post format from the Formats radio-button list;

3. in the appeared metabox field “Post features media” click “Add Gallery” button;

j-post1

 

4. begin adding images from Media library or upload them directly from your computer;

5. when all images are added, click “Create a new gallery” button;

j-post2

 

6. select needed parameters in “Gallery settings” section. You can attach your image to media file as well as to attachement page, select number of columns for your gallery, choose size of images and type of gallery.

7. When you are ready, click “Insert Gallery” button.

j-post3

Video, audio and quote post formats

To create a video, audio or quote post, check the corresponding post format in the Format radio-button list and fill in the meta box fields in “Post featured media” section.

j-post4

 

Single post layout

You can select layout for your single post in “Single post layout” section. There are 4 options available:

– Default – this is the layout set in Theme Options>Sidebar Options>Single Post Layout section.
– Without sidebars;
– Sidebar on left;
– Sidebar on right.

If you chose layout with the sidebar, you can also select the width of the sidebar:

– Default – this width type is set in Theme Options>Sidebar Options>Single Post Layout section.
– Small;
– Normal;
– Large;
– Extra large.

u-post4

Additional post settings

There are general settings for single posts that you can set for all posts at once, that are located in Theme Options>Single post section. There you can enable or disable featured image and post meta data on single post.

Also you can add Adsense code to “Adsense code” field, that will be displayed on each post on your site.

u-post5

Blog page

Creating a blog page

To create a blog page, where all your post will be shown, you need to:

1. go to Pages section;
2. click “Add new” tab;
3. fill in title field;
4. and select “News page” template from the “Page Attributes” section.

 

d-blog1

Blog page options

These settings allow you to:

– select template for your blog page,
– select number of columns for grid templates,
– exclude or include categories to display;
– set number of items shown on one page.

j-post5

 

General options

General options for blog page can be set up in Theme options>Blog options section. There you can select blog template for all blog pages, enter custom “Read more” text, and set excerpt length.

j-post6

 

Page options

You can adjust custom page settings for your blog page. They are located in Page options section and include settings for:

– header;
– stunning header;
– page layout;
– footer.

Header options

These settings allow you to change header look on the particular page. Here you can:

– upload a different logo for normal and Retina screens;
– enable/disable top bar;
– select a different header type: logo on left, logo on center or logo on center with text;
– enable/disable sticky header;
– select custom menu, e.g. if you need some to show on a particular page.

j-post7

 

Stunning header options

This section allows you to configure the following settings on individual pages:

– Enable/disable stunning header;
– Breadcrumbs – you can enable or disable breadcrumbs
– Title typography – change font family, size and color of the stunning header title.;
– Background – it is possible to change background color of the stunning header or upload a background image;
– Page header height- you can adjust the height of the stunninge header section.

j-post8

 

Page layout

Here you can select layout of your page and adjust settings for it. You can choose layout with left or right sidebar or without sidebars.

You can also enable boxed layout if needed.

j-post9

Footer options

In this section you can configure custom settings for the single page.

u-layout4

– Enable/disable back-to-top button;
– change padding before and after footer content;
– change background color or upload background image;
– change font color of of the footer text;
– Customize footer widgets – if enabled, you can change the widgets shown in the footer of the particular page.

 

General settings

General settings of the theme are located in Theme options>Main options section.

There you can enable such options like:

Auto update function – enter your Themeforest item purchase code to “Item purchase code” field;
Preloader – enable preloader to be visible while your page is loading;
Back to top button – you can enable a Back to top button that will be displayed in the footer of your site;
Boxed layout – you can enable a boxed layout for all pages on your site;
– Background settings – if boxed layout is enabled, you can select background color or upload background image, that will be displayed outside the content section.

j-general1

Header options

Header options control the look of the top section of your site, including top bar, logo and menu sections. Header options are located in Theme options>Header options section and are divided into two tabs:

1. Top bar options

2. Header options.

u-header2

 

Top bar options

Top bar options control the look of the narrow bar located above the menu and the logo. There you can configure:

  • styling options – font and background colors of the top bar;

j-header1

  • and the content displayed in it. You will see two subsections called “Left panel settings” and “Right panel settings”, where you can select type of content to display in the top bar, in left and right sides of it accordingly.

j-header2

The content available to display is:

  • Text – add some short information to your top bar;
  • Text2 – add some more text to the second row, if needed;
  • Cart – if you installed Woocommerce, you can display cart in the top bar;
  • Language switcher – if you installed WPML plugin, you can display the language switcher in the top bar;
  • Social buttons – you can select from the list any social buttons you like and show them in the top bar.

All widgets available to display in top bar are represented in two columns Active elements and Disabled elements. In order to show some widget in the top bar, you need to drag the widget from the Disabled elements column to the Active elements column.

j-header3

 

Header options

Header options provide options to configure the following:

  • Upload site logo for desctops and retina devices;
  • Enable/disable sticky menu;
  • Select header type among 3 available: Logo on left, Logo on center with text, Logo on center;
  • Enable/disable highlighting of the menu on hover;
  • Enable/disable search field in header;
  • Select background and font color of the header section.

j-header4

 

 

 

 

Stunning header (page title) section

Stunning header is a page title section of a page/post or portfolio, that consists of:

  • the page title itself;
  • breadcrumbs;
  • and the background stripe, on which the title is located.

Stunning header settings can be controlled under Theme options>Stunning header option section. There you will find such options like:

  • Enable/disable breadcrumbs;
  • Title typography – choose font-family, font size,line height and color of the page title font;
  • Background – you can change the color of the page title background or upload your own background image;
  • Page header height – you can change height of the page title section to youe custom value.

j-header5

Colors and typography

Colors and typography can be controlled in Theme options>Colors and typography section.

Color options include settings for primary, secondary and links colors. Simply select the needed colors using the colorpickers.

j-color1

 

Typography options allow you to change font family, size, color and line-height for each text type – h1-h6 and body text.

j-color2

 

Advanced options (custom CSS, custom JS, tracking code)

If you have coder skills and want to customize your site beyond the theme options, go to Theme options>Advanced options section.

There you can fill in:

Counter field – add a tracking code generated by Google Analytics or other services to track and analyse number of visits of your site;
Custom JS – add your custom JS codes to this field;
Custom CSS – here you can add your custom CSS codes to change look of particular theme elements, if there are no options to do this.

u-advanced1

Widgets

Adding widgets

Widgets are the blocks that can be added in the sidebars of your pages and implement the task of additional information.

To add widgets to the sidebars, go to Appearance>Widgets section.

Choose a widget you want to add, click it, select from the list the destination sidebar and click “Add widget” button.

j-widgets1

 

Default sidebars

By default there are 2 sidebars in the theme: Primary sidebar and Footer Sidebar.

1. Primary sidebar – this is a sidebar that is displayed on the side of your posts/portfolio/pages. Depending on the layout you choose in Theme Options>Sidebar Options, this sidebar appears on your site.

2. Footer Sidebar – this is a sidebar that will be displayed in the footer of your site.  Please, note if this sidebar is not visible in Appearance>Widgets, you have to enable it by dragging it to Active Widgets column in Theme Options>Footer options section. 

j-widgets2

 

Columns in footer

To make several columns in the footer section, for example 3, you just need to add 3 widgets to Footer sidebar. They will be automatically displayed as columns.

j-widgets3

Custom sidebars

You can also create custom sidebars and add widgets to them. More about custom sidebars you will find in Custom sidebars article.

 

 

Custom sidebars

Custom sidebars are created with help of Easy Custom Sidebars plugin, that is integrated in the theme.

Go to “Appearance>Theme sidebars” section and create new custom sidebar

custom-sidebar1

 

Start adding pages/other post types, on which standard sidebar will be replaced by your custom one.

custom-sidebar2

 

In “Sidebar properties” section select which sidebar will be replaced by your custom one.

custom-sidebar3

 

Click “Save sidebar”. After that go to “Appearance>Widgets” section and add widgets to your custom sidebar

custom-sidebar4

 

Twitter settings

Twitter is a very popular social network and you might want to use your Twitter account on your website.

But for this you have to set it up using your Twitter API data.  If you don’t know, where to get your Twitter API, you can refer to this article for help.

When you get your Twitter API, go to Theme Options>Advanced Options and fill in all blanks for Twitter API keys section.

d-twitter

Icon manager

Apart from icons available in the theme by default, you can use your own icon packs.

Go to “Appearance>Icon Manager” section. Click “Upload new icons” button and upload your icon packs.

icon-manager1

Generate custom icon font

Additional icon packs can be generate from your svg files by using Icomoon service.

You can select free icons suggested in the app.

icon-manager2

 

icon-manager3

Or import your custom icon pack to IcoMoon service. The imported icons must be in SVG format.

icon-manager4

icon-manager5

icon-manager6

Under Preferences enter name of your custom icon pack and class prefix. They must be the same.

Under CSS Selector choose ‘Use attribute selectors’ option.

 

When you are done, download your icon pack .

icon-manager8

 

Upload your icon pack via Appearance>Icon Manager and wait until the page is refreshed automatically. The icon pack will appear in Icon Manager section.

icon-manager9

icon-manager10

 

 

 

Woocommerce

Jollyness theme is fully compatible with Woocommerce plugin and supports all its core functions. To build a Woocommerce shop, simply follow steps described in official Woocommerce documentation.

Suggest Edit