Activate the Wise Guys theme

Go to WP-admin -> Appearance -> Themes as seen on the screenshot and click the "Activate" button.

You will now be walked through the One Click Installation process. Just keep pressing Next Step button and then Finish it.

In the next step you can have a look at your site.

Ta-daa!

If you now open your site on the front end, you can see the barebones Wise Guys theme. For your convinience we have already filled it with some content, but you should learn how to add the rest of the content later in this Documentation.

Creating your Top Navigation

As you can see in the screenshot we need to create your Top Navigation

Create a Top Navigation Menu

(1) Open Appearance -> Menus

(2) Enter your desired name for the Top Navigation

(3) Save it

Assign Your Navigation to Navigation

Now we have created a navigation called Top Navigation and we need to assign it under the Navigation select.

We have also added some Menu Items (Sample Page, Uncategorized) from the left side, please do so as well.

Ta-daa!

Done. As you can see you now have your Top Navigation ready.

What is a Lower Description Bar

This bar appears throughout the site on all pages, categories, home page, etc.

Change your Lower Description Bar

Go to Site Preferences and select a category/section where you want your Lower Describtion Bar changed. In this example we will change it on Home Page.

Ta-daa!

As you can see, the text has changed.

In this lesson we will show you where you can change your Page Template to Page with Sidebar or Fullwidth Page, etc.

Select "Page Contact" as your Page Template

Customize the Contact Page Settings

Scroll down on the Edit Page screen and you should see the "Contact Page Settings" panel.

There are several options in your Contact Page Settings that you can customize.

In the above screenshot, we have turned on the Map and added some social links.

NOTE: We will cover the customization of the actual contact form later in this lesson.

After you are done changing, please save the page and let's have a look at the front end how it looks now.

The Result

As you can see, we now have a map at the top of the page and at the bottom are our social links and contact form.

Now let's have a look on how to customize the actual contact form.

Open Contact form 1 in the Contact section

Go to the Contact (1) section and select the already created "Contact form 1" contact form (2). Or create a new one.

Contact Form Customization

Contact Form 7 plugin has it's own documentation so now please continue by clicking on the "Docs" button in the upper right corner.

Enable and Select your Slider

To add a slider to your page, simply enable this option in the "Slider Page Settings" on the Page Edit screen.

If you installed our demo content then you should already have a Default slider ready. If not or you just want to make your own then please refer to another lessons about making your own slider. In this lesson we only attach an already made slider to a Page.

How to change Sidebar orientation in Pages

How to change Sidebar orientation in Categories

Go to Site Preferences (1)

Select a category or section from the left panel (2)

Change the Sidebar Orientation (3)

Save it (4)

How to change Sidebar orientation in Posts

Unlike other sections like categories and pages, our posts have a special option for Sidebar Orientation called "Default". What that does is instead of specifying Sidebar Orientation post by post separately, the Sidebar Orientation settings are simply taken from the Site Preferences under that particular category. Think of it as a cascade. If you want all your posts in one category have the same Sidebar Orientation then simply specify it in Site Preferences only. But in case you need to have different Sidebar Orientation for each post separately, then please use the instructions in the above screenshot to have that extra layer of customization.

Old settings

Old Look

New Settings

New Look

Create Blog Post

Add new post, select Standard Image type and then click "Featured Image" button

Set Featured Image

Set wished featured image and click the button

Publish Post

Publish post and then click View Post button

Check the result

Create a Post

Create Gallery

Click to the Create Gallery link, choose your images and then click create new gallery button

Check the result

Create Post

Find video on youtube / vimeo and copy link to wished video here.

Check the result

Create a Portfolio category

Create New Portfolio Post

Create new portfolio post, set featured image

Adjust Category Settings in Site Preferences

Check the result

Project Details in Post Edit screen

See the changes

1. Slider with images from gallery
2. Project detauls from portfolio writepanels

See changes in category

Add tags to your Portfolio Posts

See the Results

Open "Theme Options -> Custom Code"

If you want to add a quick custom code to the theme, you can do it in Theme Options -> Custom Code

For example your Google Analytics code can be pasted into the "Custom Tracking/Analytics" field.

Open these 3 tabs in your web browser

(1) Open: Theme Options -> Template Builder
(2) Open: Pages -> Add New Page. Create a new Page and save it, then open it in Step (3)
(3) Open the Page you have just created

Add New Template

(1) Click the "Add New" button

Enter a name for your new Template

(1) Enter a name for your new Template
(2) Save it

Template Selection

(1) Your new Template has now been added to the Template Selection

You can of course create as many Templates as you want. You can even duplicate them if necessary.

Insert your first Module

On the left-hand side you can see the list of available Modules. You can hover over them for preview.

Now use your mouse to drag and drop one of the Modules (1) into the Canvas (2) on the right-hand side.

 

Save your Template

(1) Click the "Save Changes" button.

Each module has already some demo content inside it so we will have a look at it in the next Step.

Inserting the Template into your Page

We are using shortcodes to insert a Template Builder's Template. You can insert such shortcode into any of your posts or pages. You can either memorize the shortcode or you can use our Shortcode Generator (2)

(1) Start by refreshing to page so the Shortcode Generator gets updated with your newly created Template Builder's Template
(2) Click on the Shortcode Generator icon and select your newly created Template (3) from the Template Builder selection

You can also rearrange the position of the Template Builder's shortcode inside your Page, you can have content above it or below it, you can have more Templates on one page, etc. It is quite flexible so just play around with it.

Save the Page

Before you can see the result of your work, you need to save the Page by clicking the "Save Changes" button (1)

Show me the results!

Switch to your 3rd tab in your web browser (1) which we opened in the first Step of this lesson and refresh the page (2)

Getting some Modules

Let's start by dragging and dropping some of the Modules onto the Canvas.

(1) Twitter
(2) Accordeon
(3) Heading
(4) Alert Box

When you are done click the Save Changes button (5)

Preview

After clicking the Save Changes button, let's have a look on your page to see the default content of those Modules.

(1) Twitter
(2) Accordeon
(3) Heading
(4) Alert Box

Editing a Module

To edit a module click on it or click directly on the little arrow

Edit Module screen

Now simply change the Module options to your liking (1)
Click the OK button to save the changes on this screen (2)
But don't forget you still need to save the whole Template by clicking the Save Changes button (3). If you wouldn't save it in step (3) then you would lose your changes if you left.

View Your Changes

Now let's have a look at the changes we have made. As you can see, the Heading Module has indeed changed.

Click the Add New Row button at the top of the Canvas

As you can see, there are 2 buttons in the middle of the canvas. These are used to add new Rows. Click the button at the top.

See the result & Click the Add New Row button at the bottom of the Canvas

We have now successfully added a new Row at the top of the canvas.

Now click the Add New Row button at the bottom of the canvas. Notice how the green lines suggest you where the new Row will be created.

See the Result

Great! We have just created 2 new Rows, one at the total top and one at the total bottom.

If you want to create new Rows rather in the middle of the canvas, there are now buttons for it as well (1)

Add Second Column

The buttons on the left and right side of the Canvas are used for adding new Columns.

Notice how the green lines suggest you where the new Column will be created.

(1) Click the Add New Column button

See the Result and Add one more Column

As you can see, the Column has been edit and all the Columns in that row has been automatically re-sized to be balanced and visible. If needed, please simply re-adjust the size of your columns.

(1) Click the Add New Column button again to add one more Column

See the Result

Now we have 3 Columns in our top Row, all perfectly balanced and visible. If needed, please simply re-adjust the size of your columns.

Different ways of re-sizing your Column

There are a few ways how you can change the width of your Column:

1) Click on the input field (says 50% in the screenshot above) and select the desired size or width from the drop down menu

2) Select the "50%" text with your mouse and simply re-write it using your keyboard. You do not have to write % at the end, the system will add it for you. Also if you just write for example "33", the system will help you by changing it to the "33.33%" after you save it. So now press ENTER to save it or TAB to save and jump on to the next Column size.

How to Delete a Module

To delete a Module in Template Builder, simply drag it out of the Canvas. You will then be prompted with the "are you sure" window to avoid any unfortunate situations.

How to Delete a Column

To delete a Column in Template Builder, simply hover your mouse over that Column and you will see a Close button in the upper right corner. Notice how the red border suggests you what exactly will be deleted. If the Column you are trying to delete will have some Modules inside, then you will be prompted with the "are you sure" window to avoid any unfortunate situations.

How to Delete a Row

In order to delete the whole Row, you need to delete all Columns inside that particular Row. Please refer to the "How to Delete a Column" step above and simply delete all the Columns in the Row you wish do delete.

What is what

Here is a rough guide of what is what in case you find yourself confused with the names and labels.

In the above screenshot we have opened the "Blog Large" category and we will edit it in the next steps. Let's do it!

Open a category in Site Preferences

(1) Open Site Preferences
(2) Select a category you would like to edit, in our case it's a category called "Blog Large"
(3) Change some of the preferences to your liking, just pay close attention to what we change in our screenshots
(4) Save changes

See the Results

The above screenshot pretty much sums up what has changed.

Revolution Slider Basics

After pressing the "Create New Slider" button you will reach a form where you are asked to enter a Slider Title (used for the Slider overview in this backend) and a Slider Alias (a slug that is used to implement the Slider in your WP later, so keep it simple with no spaces and special chars).

 

 

You are also prompted to enter the Sliders Basic Settings, a Slider Title (for you to remember the Slider by) and a Slider Alias (please do not use special characters or spaces here, this defines the shortcode for you to use in your content).

The options in the boxes on the right side (General Settings, Position, Appearance, Navigation, Thumbnails) have helping Tooltips on mouseover so they are not explained here.

The Slider Type can be fixed (not responsive, fix dimensions), responsive (changes depending on the size of its max. sizes given later in relation to the screen size) or fullwidth (always 100% in width of the screen size, but height keeping the aspect ratio).

The Sizes section is needed to fit the slider in all screen sizes needed. The height of the slider will always be calculated to keep the aspect ratio from the max width and height given in the Slider Size line.

Revolution Slides

The next step is creating/editing slides. You get there by just clicking on "Edit Slides" in the Slider Form window.

Just press "New Slide" and the native WP Media Upload dialog window will appear. Choose or Upload the slide's background image, choose "Full Size" and then "Insert Into Post" (all like you are used to it in your WP editor). You can always click on the pic to change it.

Use the arrow handles on the right side to change the slides position in the slider (top to bottom = first to last slide to be shown) or delete it with the "Delete" button.

The "Edit Slide" leads you to the next chapter "Slide".

Edit Slide

In the "Edit Slide" view you see the heart of our plugin. The drag&drop Caption editor.

But first please note that you have another chance here to change the background image with the "Change Image" button.

To create a Layer (Caption, Image or Video) press the button "Add Layer" or "Add Layer: Image". In case of a text layer a basic layer will be created you can use the "Text" field in the Layer Params to change the caption on it. The "Style" selectbox shows some basic styles (CSS classes) you can use to style the caption (you can always add own CSS classes to this field or edit the existing ones via the "Edit CSS File").

In case of an Image Layer you will see the native WP Media Uploader again. In case of a Video Layer you will prompted to a custom Video selection wizard.

You now can move the Layers around via drag&drop or type in the x and y coordinate in the corresponding fields.

The "Layers Sorting" drag&drop list determines the Layers' z-index. This list specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Video Wizard

Find and Replace

In the same folder as this help file, we have included a css_color_template.css file, open this file in your favourite text editor such as Dreamweaver or Notepad++.

a) Using your keyboard, press ctrl+F (cmd+F on Mac) to open the Find and Replace dialog box. In the Find field, type FF0000 which is the default color, in the Replace field, type in the color you wish to use and click on the Replace all button, see below image for detail.

Hex to RGB Conversion

b) In the same file, go down to line 181 and locate the following css rule:

.textWidget ul li .borderHover{
border: 5px solid rgba(255, 0, 0, 0);
}

Go to the following site: http://www.javascripter.net/faq/hextorgb.htm and follow the steps highlighted in image above.

Custom Code Panel

c) In your theme dashbord, go to Theme Options -> Custom Code, copy the whole updated css you just created and paste it in the Custom CSS field as shown in below image:

Select Skin

Let's start by deciding which color skin you will be customizing, in this tutorial we will be changing the blue skin.

Open the blue skin's icons folder

In your file manager, unpack the package you have downloaded from themeforest (not the theme folder, but the whole package) and open this folder:

psd_small/images/icons/

Copy all the psd files from this icons folder to the actual theme folder which you will later upload via FTP:

wiseguys/images/icons/

Just a note, we did not include the psd files into the theme folder because most people won't need them and they take up a lot of space.

Once done, you can see in the above screenshot that every png, jpg, etc image has a psd source file right next to it. That means you can just edit the psd file using Photoshop and then simply save it with the same file name, but with the appropriate extension such as png in this case.

Open the image

a) In photoshop open the arrowDown.psd file, in the Layers panel, right click the Arrow layer and choose Blending options as shown in below image.

Blending Options

b) In the Blending options panel, select the Color Overlay option, click on the color icon and in the color palette type in your new hexadecimal value and click OK, as shown in image below:

Save for Web

c) In the photoshop option bar top-left, select Files -> Save for Web and Devices, in the dialog box that opens, select PNG-24 as your output format, click Save and overwrite the existing arrowDown.png file located in the same folder as the psd file you just opened and edited.

d) Repeat steps a, b and c for the remaining icons in layered_color_icons folder.

e) You now need to upload your new icons on your server. Using your favourite FTP software such as Filezilla, go to the root of your theme on your server where you will find the wp-content folder, inside wp-content folder, go to themes -> wiseguys -> images -> icons -> blue, once this blue folder is open, overwrite all the icons in it with the new ones you just created.

- Keep the above changes somewhere safe. The Custom CSS changes should not be affected if you were to update the theme, however the icons in the blue folder will be back to their default when you update the theme. After each update, simply reupload your custom icons to the relevant folder.

- For the custom icons, we used the Blue folder as an example, if you were to try different color variations, such as a different shade of red, fell free to use the Red icon folder on your server, just make sure to set the correct Theme Skin color in your dashboard..

Please always backup your files and database before updating.

You have 2 ways to update:

A) Replace the old theme folder with the new one, navigate to "Appearance -> Themes" and re-activate the theme.

B) Replace only the changed files as per our changelog: http://demo.freshface.net/file/wgc/wp/wp-content/themes/wiseguys/changelog.txt When done, navigate to "Appearance -> Themes" and re-activate the theme.

Insert your code here: