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 Samba WordPress Theme!

Installation

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

After theme activation, you are advised to install 2 plugins that are bundled with the theme: Samba Framework and the WPBakery Page Builder Plugin (tweaked for this theme). 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 viewing this video you can check it online here https://www.youtube.com/watch?v=nlSJUrW0-n0.

One-click install demo content

The easiest and fastest way to generate sample posts, portfolio items, team members, 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=4BlUe28GQbs.

Theme Options

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=MLiLS8VjDT8.

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) Minimum content width is important to decide when the menu collapses on the left side. If you want it always collapsed set this value to a big number (ex: 5000). The minimum acceptable value is 768;

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

iii) Ajax Calls: If on the theme will attempt to load all content using Ajax calls. This will speed up the website page loading process and allow some elements to have smoother transitions.

b) Background - From top to bottom the theme searches a pattern and only after that the solid color;

c) Fonts - There's a large number of google fonts available. The theme uses 2 types of fonts that can be selected here. If you need to add fonts that aren't bundled with the theme, you can use the method show here to add extra fonts: http://www.munto.net/blog/2013/08/27/extra-fonts-plugin-by-pirenko/. There's also an option to make the theme uppercase some titles by default;

d) Color Scheme - The theme can use a large number of colors and change them specifically on some pages. You can turn this option on/off here. With this option on you can assign special colors to 4 element types:

i) Pages linked from the menu buttons: to set their color go to Appearance>Menus and when you click on the options for each button on the right side you have a Color Option. Place your hexadecimal color there;

i) Blog posts: their custom color is set on the options panel located under the post content;

ii) Portfolio posts: their custom color is set on the options panel located under the post content;

iii) Team members: their custom color is set on the options panel located under the post content;

If you prefer you can watch this video tutorial:

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

e) Borders and Lines - Set lines and shadows color and their opacity here. Set the opacity to 0 if you don't need any shadowing effect;

f) Buttons - Set their default/up color here. You have different option for the button located on the page content and for the buttons that appear inside the theme sliders;

g) Sidebars - Just decide if you want to use the 2 sidebars that are available;

Branding

Not much to say here... Just upload your own images and they will be used across all the theme pages. You may also upload special images for high resolution screens. Depending on your logo configuration you might want to adjust the menu vertical placement and you can do this by adjusting the menu vertical displacement value;

Menu Bar

Customize here the looks of the left bar where the menu and lower sidebar is displayed. Besides the color scheme you can also decide if you want the theme to attempt to display a 3D like animation when the left bar switches visibility on collapsed mode.

With this option off or if the browser does not allow these effects the theme will use a regular slide in/out animation;

Left Footer

Once again you can fully tweak the footer text color scheme and also set up a copyright text.

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) Force images to have the same height - Decide if the images should be cropped to have the same size on parent blog pages (only for Classic Blog layout);

c) 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

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

b) Number of posts to load on each event - Set how may items are loaded when the load more posts button is pressed;

c) Default Single Posts Layout - Wide or half. This option can be overridden on each single post on it's respective options panel;

c) Enable lightbox on single post pages - If yes a small enlarge icon will be shown on single post pages;

e) Show Related Posts - Decide if 3 related entries should be displayed under the single portfolio entry;

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

Contact

All information on this tab is self explanatory. Anyway, here are some notes:

a) The Contact page content will be displayed on top of the contact form. This content is optional;

b) If needed, you can your own contact form by adding a shortcode under the option Contact Form Shortcode. In this case the theme default form will not be used. Because it's the more widely used, the theme will style properly fields from the Contact Form 7 plugin;

c) If you want to use an image instead of a map from Google Maps just add the image HTML code instead (ex. <img src="https://www.yourwebsite.com/yourimage.jpg" />

Translations

There are 2 methods to translate the theme: using the Samba Options and using .mo/.po files. 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;

WooCommerce

If WooCommerce plugin is installed some extra options can be set up here. One quick note to inform that if the sidebar is shown by default and on a specific page it should be hidden, this can be done by adding ?sidebar=n to the URL and vice-versa;

Advanced

Change some of the theme custom post types slugs that will be show on the URL browser address bar. Do not use any special characters here;

Configuration

Content Management

Blog/Posts

Recommended dimensions for the image to use on this page are 1200px. Once again this value can be lower if your Maximum Content Width in pixels is much lower than this. 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 Features image on Lightbox and Slideshow" inside the Samba Custom Post 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 10 images/videos for each news entry inside the same window;

c) Here's a sample code to embed a Vimeo Video:

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

d) 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. The Classic Template type shows an image on top with descriptions under, while the Grid Template shows them with a "boxy" style;

Here's a video tutorial if something is not entirely clear:

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

Portfolio/Portfolio Items

Recommended width for the images to use on these pages is 1200px (height is variable). This value can be lower if your Maximum Content Width in pixels is much lower than this. 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 the portfolio categories to filter the 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 Features image on Lightbox and Slideshow" inside the Samba Portfolio Custom 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 10 images/videos for each news entry inside the same window;

d) Here's a sample code to embed a Vimeo Video:

<iframe src="http://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. If you want the Portfolio items always visible you can use also the Titled Portfolio template. As an alternative you can use the Grid template on which you can also mark the post thumbnails as Featured and this will make the thumb have the double height of the normal thumbs. You have also the Masonry Template if you don't want the theme to crop the thumbnails;

f) To set up multiple portfolios you need to use the Samba Portfolio Template Custom Options. This window will show after you save a page with the template "Portfolio Page" and there you can decide what categories you want to use. It's here where you decide too if you want the images to link to a single page or open a lightbox (enlarged image);

g) For each Portfolio Page you can use the Ajax loading option (this will make the single post show without reloading the page).

Here's a video tutorial if something is not entirely clear:

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

Theme Sliders/Slides

Recommended width for the images to use on these pages is 1200px (height is variable). Just like before value can be lower if your Maximum Content Width in pixels is much lower than this. 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 Samba Slides Custom 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) and assigning some slides to this entity, you have 2 ways to use that group of slider:

d) The theme has a special page template to show a fullscreen slider. In this case you must create a page, select the template Page - Fullscreen Slider and, after saving it, select the necessary options displayed under the page content;

e) You can also show those theme sliders using the WPBakery Page Builder Plugin and selecting the Theme Slider button;

Important: When using the WPBakery Page Builder the slides group must be the Group Slug (not the Group Name);

Here's a video tutorial if something is not entirely clear:

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

Teams/Team Members

Members are managed in a similar way to portfolios or slides. You can organize them into categories (teams) and you can show teams using shortcodes. Each member has a single page that you can add to the menu or to whatever section you want.

Under each Team Member page content you have some options under the page content. Just on note to let you know that if you don't want to link the thumbs to team member single pages you can do this by selecting the respective option on this very same options panel;

Teams can be added to pages using the WPBakery Page Builder by selecting the options Team Members.

Here's a video tutorial if something is not entirely clear:

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

Page Templates & 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) There are 2 types of pages: Classic Layout and With Sections. The difference between these two pages types has to do with the maximum width of the content background. If you don't need any section to fill the whole width of the screen use the Classic Layout Template. On the other hand, if you are going to need zones that fill the whole screen horizontally you must use a Page with Sections;

b) If you want to create a full width section 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;

c) If you want to add some extra vertical spacing between elements simply add an empty row between them;

d) Under the page content you'll find more options such as the title text, title color, featured slider and sidebar display;

e) 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:

  • regular_load - will force a link (or child links) to reload the whole page even if Ajax load is ON
  • smooth_anchor - useful to create smooth anchor to move up and down on each page
  • 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 tutorial if something is not entirely clear:

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

WooCommerce

If the theme should be extended with WooCommerce nothing special needs to be done after activating the plugin. I would just add these notes:

a) Thumbnails and product images will look blurry with the default dimensions. To avoid this situation. I suggest going to WooCommerce>Settings>Catalog>Image Options and adjusting the values (for reference on the preview they are 600×600,800×800 and 150×150);

b) The color scheme is set up under WooCommerce>Settings>General>Styles and Scripts;

c) The theme provides some extra options under Samba Options>Woocommerce tab;

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="samba_chimp"> Subscribe and stay updated with the latest news from us. We never spam! </div>
<div class="samba_chimp">
<div class="samba_chimp_label">First Name:</div>
<input type="text" name="FNAME" class="pirenko_highlighted">
</div>
<div class="samba_chimp">
<div class="samba_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 css folder you'll find the 5 CSS files used all over the theme. Their names explain where they are used and other.css contains all styles related with plugins and widgets
  • PHP - functions.php controls most of the frontend content
  • PHP - theme_options.php controls most of the backend custom 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 - admin_scripts.js has to do with functions used on the backend

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: