Getting Started

About the Theme

Author: Pirenko

Author Website: www.pirenko.com

Twitter: @Pirenko

Facebook: Pirenko

Youtube: PirenkoThemes

If you have any questions that weren't clearly answered on this help file please feel free to email via my user page contact form at Themeforest. If you have time don't forget also to rate the theme on your downloads section.

Thank you for purchasing the Seven WordPress Theme!

Installation

This theme is installed like any other WordPress Theme. Simply upload the seven.zip folder using the WordPress Dashboard or upload via FTP the seven folder into wp-content/themes folder.

After theme activation, you are advised to install some plugins that is bundled with the theme: Seven Framework and Envato WordPress Toolkit (for easy updates). To take full advantage of all this theme has to offer, it's strongly recommended that you install these plugins.

Here's a step by step video tutorial:

If you have any trouble opening this video you can view it online here https://www.youtube.com/watch?v=OZcjgzT4Q-I.

One-click install demo content

The easiest and fastest way to generate sample posts, portfolio items, slides and custom pages is using the feature One-click install demo content.

Here's a video tutorial showing how to do this:

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=jlC1JAHRsjU.

Theme Options

General Tab

a) Main Theme Options - Decide here if you want your theme to adjust to smaller screens. There are also some important options related with the content width:

i) Set the maximum width that the content area scales to (this is useful for really wide screens so that the content doesn't stretch too much);

b) Fonts - There's a large number of google fonts available. The theme uses 2 types of fonts that can be selected here. You can also add an extra custom font that will be applied on elements as you wish. In this case simply add the class custom_font to those elements.
If you need to add fonts that aren't bundled with the theme, you can use the method show here to add extra fonts: https://www.munto.net/blog/2013/08/27/extra-fonts-plugin-by-pirenko/.

c) Colors: General - Set the generic color scheme and style with these options. These colors will apply on multiple parts of the theme. You can also set up some background patterns here. If you need to add your own simply place your images inside the images/patterns/ folder that the theme will detect and make them ready for use;

d) Colors: Lines and borders - These values will apply to lines, borders and textfields. Some buttons will also receive a similar style (example: submit comment button). There's also the possibility to use shadows on some elements... Set the opacity to zero if you don't need any shadowing effect;

e) Colors: Buttons and Other - These specific colors will apply specifically to the elements that are described near each color picker;

f) Sidebars - Just decide if you want to show the right sidebar on pages and posts by default. This option can be overriden on certain page and post types too;

Branding

Not much to say here... Simply upload your own brand images and they will be used across all the theme pages. It is also here where you can set your website favicon that will be used on browsers that support it.

Menu Bar

Customize here the looks of the bar where the menu is displayed. Besides the menu bar position, size and alignment, you can also customize entirely the color scheme.

On this same section edit also how the 2 sidebar that can be used inside the menu bar will look like.

Footer

Once again you can fully tweak the color scheme for this specific area. This element will stick to the lower part of the screen and you can also display some extra information under the widgetized area.

Blog

Besides other options whose name describes exactly what they do here are some notes:

a) Blog Categories Page Template - Decide the layout for the blog archives page;

b) Show author info under post - Decide if the information about the post author should be displayed. This info is set up under Users>Profile;

d) Social Sharing - Show/hide/select the social network sharing buttons;

Portfolio

Once again besides other options whose name describes exactly what they do here are some notes:

a) Skills Page Template - Decide the layout for the portfolio archives page;

b) Default Single Posts Layout - Half, Wide or fullscreen. This option can be overriden on each single post on it's respective options panel;

c) Social Sharing - Show/hide/select the social network sharing buttons;

Translations

There are 2 methods to translate the theme: using the Seven Options and using .mo/.po files that can be combined with WPML. You have the option to decide that on this translation tab. If you only need one language I would say that using the theme options is easier and faster, but if you need more than one language you need to use the .mo/.po files method.

If you decide to use the .mo/.po solution the language files are located inside the lang folder. With this method you can also use the plugin WPML, because the theme is fully compatible.

Custom Scripts

a) If you are using Google Analytics you can place the tracking code here;

b) The Custom CSS textfield is extremely important to make adjustments to the theme styling;

c) You may also add some Javacript code on the Custom Javascript textfield;

Advanced

Change some of the theme Custom Post Types slugs that will be show on the URL browser address bar. To avoid 404 Errors and other similar link related mess, do not use any special characters here and make sure also that their slug is different from all pages and any other Custom Post Types.

Here's another video tutorial showing the complete theme options panel:

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=fCsp0sp29Gc.

Configuration

Content Management

Blog/Posts

Recommended dimensions for the image to use on this page are 1600px. If you have high resolution images for retina displays upload bigger images to WordPress install and the theme will resize them properly for smaller screens. Here are some additional notes:

a) If you want to use a specific color for this post just set it up on the Featured Color option field;

b) Blog entries are Posts that you create on your Dashboard. You may use categories and tags to organize your content;

c) The featured image will be the thumbnail and the first image of the slider. If you only want this image to be the thumbnail you should select the default option to "Skip Featured image on Lightbox and Slideshow" inside the Theme Post Options panel. In this case the theme will fetch the second image/media to the lightbox and it will be the first image of the single page slider. You can set up to 10 images/videos for each news entry inside the same window;

d) If you want to use videos or music hosted elsewhere you should use iframes to display the content. This code is obtained by clicking on the Embed/Share button when you are viewing the media on the original website. Here's a sample code to embed a Vimeo Video:

<iframe src="https://player.vimeo.com/video/40540343?color=ffffff&amp;autoplay=1" width="700" height="420" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

e) After adding some blog entries probably you want a page to show these items. You should go to Pages>Add New and set the Template (on the right side menu) to Blog Page. After this an options panel will be activated under the page content and will see multiple options for your blog page;

f) To set up multiple blogs you need to use the Theme Blog Options panel where you can decide what categories you want to use on this specific page;

g) You can also show those portfolio entries using the WPBakery Page Builder Plugin. For this select the element Latest Posts;

Here's a video tutorial shwowing how to manage the blog content:

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=CpRoVy9xwt8.

Portfolio/Portfolio Items

Recommended width for the images to use on these pages is 1600px (height is variable). If you have high resolution images for retina displays upload bigger images to WordPress install and the theme will resize them properly for smaller screens. Here are some additional notes:

a) If you want to use a specific color for this post just set it up on the Featured Color option field;

b) You may use portfolio skills to organize your entries. You may also add some tags to these items;

c) The featured image will be the thumbnail and the first image of the slider. If you only want this image to be the thumbnail you should select the default option to "Skip Featured image on Lightbox and Slideshow" inside the Theme Portfolio Options panel. In this case the theme will fetch the second image/video to the lightbox and it will be the first image of the slider. You can set up to 20 images/videos for each news entry inside the same window, but if you are only using images the entries number is not limited (simply use the option bulk upload);

d) If you want to use videos or music hosted elsewhere you should use iframes to display the content. This code is obtained by clicking on the Embed/Share button when you are viewing the media on the original website. Here's a sample code to embed a Vimeo Video:

<iframe src="https://player.vimeo.com/video/40540343?color=ffffff&amp;autoplay=1" width="700" height="420" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

e) After adding some portfolio items probably you want a page to show these items. You should go to Pages>Add New and set the Template (on the right side menu) to Portfolio Page. Just like with the blog, after this an options panel will be activated under the page content and will see multiple options for your portfolio parent page

f) To set up multiple portfolios you need to use the Theme Portfolio Options panel where you can decide what skills you want to use on this specific page;

g) You can also show those portfolio entries using the WPBakery Page Builder Plugin. For this select the element Latest Portfolio;

Here's a video tutorial shwowing how to manage the portfolio content:

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=yPvOf6SW79k.

Theme Sliders/Slides

Recommended width for the images to use on these pages is 1600px (height is variable). If you have high resolution images for retina displays upload bigger images to WordPress install and the theme will resize them properly for smaller screens. Here are some additional notes:

a) When you create a slider if you want to use an image use the Featured image panel. If you want to use a video use the same code as for the portfolio section and place it on the Video HTML code textfield;

b) You can set the slides to link to other pages or external links. In this case fill the URL textfield inside the Theme Slide Options. You may also change the text color and the position where that text is displayed;

c) You can organize your slides using Groups. This is the way to create different sliders across the website. After creating a Group (ex: first_group) you can select it when you are adding a slider to a page;

d) If you want your slider to fill the whole screen vertically make sure that you select the option "Make slider fill the window height". This option is shown on the panel located undeer the content when you are editing a Theme Page;

e) You can also show those theme sliders using the WPBakery Page Builder Plugin. For this select the element Theme Slider;

Here's a video tutorial shwowing how to manage slides and sliders:

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=vsnmmvLetQg.

Testimonials

Testimonials are a great way of showing some sort of feedback that you need to display. They are managed like any other custom post type. You can organize them into categories (sets) and you can inser them into pages using the Page Builder. The elemnt to use in this case is Testimonials and you have multiple options to customize the frontend display.

Here's a video tutorial shwowing how to manage testimonials:

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=gj5cO8FG8sc.

Managing pages & WPBakery Page Builder

This theme was developed to work combined with the WPBakery Page Builder Plugin. You'll find all the necessary elements to create all sorts of content across all your pages. Here are some notes:

a) If you want to create a full width section (fills the screen horizontally) click on the edit button on the row and you'll find that option there. It's also here that you can set up you background and margins. You can also set up some background patterns here. If you need to add your own simply place your images inside the wp-content/themes/seven/images/patterns/ folder that the theme will detect and make them ready for use;

b) If you want to add some extra vertical spacing between elements simply add an element called Vertical Spacer. The you set up the offset value in pixels for a margin (positive or negative);

c) Under each page content you'll find more options such as the title text, title color, featured slider and sidebar display. The featured slider allows you to display a full width slider on top of a page;

d) The theme comes with 2 sets of font icons that you can use anywhere. To see their graphics and the respective classes open this page and/or this PDF document (each link has different icons);

g) Most of the composer elements that you add have the option to add some custom CSS classes. This is extremelly important if you want to style some elements in a different way. Here are some custom CSS classes that are really useful:

  • simple_fade - the element will perform an opacity reduction on rollover
  • simple_scale - the element will perform a scale reduction on rollover
  • hide_later - the element will be hidden only on screens that are smaller that 768px
  • show_later - the element will be shown only on screens that are smaller that 768px
  • hide_much_later - the element will be hidden only on screens that are smaller that 480px
  • show_much_later - the element will be shown only on screens that are smaller that 480px
  • delay-300 - the element will be animated by CSS only 300 miliseconds after the show even is triggered. You can replace the valu 300 for any other that suits you

Here's a video showing how to build pages using the WP Dashboard page builder:

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=9pqmXQ17LIM.

Using WPML for multi-language sites

If you need to use multiple languages with this theme, I strongly recommend using the WPML plugin. Yes it is paid, but it is worth every penny.

Here's a quick list of things that can be useful during this process:

Mailchimp Integration

If you use Mailchimp for nwesletter subscriptions, I strongly recommend using the Mailchimp for WP plugin by ibericode. Here's an example of a form that you can copy/paste:

<div class="seven_chimp"> Subscribe and stay updated with the latest news from us. We never spam! </div>
<div class="seven_chimp">
<div class="seven_chimp_label">First Name:</div>
<input type="text" name="FNAME" class="pirenko_highlighted">
</div>
<div class="seven_chimp">
<div class="seven_chimp_label">Email:</div>
<input type="email" id="mc4wp_email" name="EMAIL" required class="pirenko_highlighted" />
</div>
<div class="theme_button">
<input type="submit" value="Ok, Sign Me Up" />
</div>

Theme Update

The theme will be updated whenever new features are added or bugs appear. If you have the recommended Envato WordPress Toolkit Active the process is automated as long as you already have placed the necessary information on the plugin settings.

If you prefere to do it manually the video below shows how to update your theme (the video shows another theme, but the update process is always the same on my themes):

If you have any trouble viewing this video you can check it online here https://www.youtube.com/watch?v=hjBLV58VhYw.

Final Notes

Customization Tips

If you need to dig into the code to make some sort of adjustments the most important files are located at the inc and js folders. Here are some notes:

  • CSS - inside the scss folder you'll find the 5 SCSS files used all over the theme. These .scss files are compressed into a single file called main.css that is located on the css folder. You can learn more about scss files here https://sass-lang.com/
  • PHP - functions.php and inc/helper.php controls most of the frontend content
  • jQuery - main.js has to do with functions used on the frontend (all .js files located in the js folder)
  • jQuery - other.js has to do with functions used on the frontend related with plugins and widgets
  • jQuery - js_composer_front.js has to do with functions used on the frontend related with the WPBakery Page Builder Plugin

Send me an email via Themeforest if you need any further help

Rating the theme

You are more than welcome to rate this theme. It will help me to move forward and eventually implement improvements on future updates. Here's an image showing how to do it from themeforest.net: