Fluxus

Start by creating a new page which will serve as your homepage. Go to _{Pages > Add New}, set the title and click _Publish. Now navigate to _{Settings > Reading} and choose _{A static page} next to the _{Front page displays} option. From the _{Front page} select box choose the page that you have just created. Save the changes.

Now the page you have just created will act as your homepage. Next thing is to customize it. Fluxus theme suggests 3 options for a homepage: Full Page Slider, Page with Background and Grid Portfolio. Pick one that you prefer and goto according section of this documentation to find out how to setup it.

Crate a new page by going to _{Pages > Add New}, specify page name and click _Publish. Now navigate to _{Settings > Reading} and from the _{Posts page} select box choose the page you have just created. Save changes. Now if you visit the page, you should see a list of your blog posts (probably not many at the time).

Create a new page by going to _{Pages > Add New}, specify the name and locate _Template select box. Select the template according to the type of Portfolio you would like to use (Horizontal Portfolio or Grid Portfolio). You can change it anytime. Publish the page and head to _Portfolio section of this documentation to find out how to add portfolio items.

Fluxus theme offers three areas for navigation menus.

1. Header Primary Menu
   Main navigation menu.
2. Header Secondary Menu
   Displayed to the right of main menu. It’s purpose is to display links that are of less importance.
3. Footer Primary Menu
   Displayed on the right side of the footer.

Go to _{Appearance > Menus} and add previously created Homepage, Portfolio and Blog pages to the main navigation menu.

To add portfolio item go to _{Portfolio > Add New}. Specify the name of your project and click _{Save Draft}. After saving you will be able to see additional area named _{Project Options}, use it to specify extra information about your project.

Adding Images

To add images find the _{Project Media} box on the bottom of the project edit page. Click _{Add Image} button. Media browser will open where you can select an existing images or upload a new ones. Choose an image and click _{Add Image(s)} button.

The image will be added to Project Media list. There you can further edit the image by entering image description which will get displayed on top of the image. Also you can specify the image to be featured. This means that the selected image should represent your project and it will get shown on horizontal and grid portfolios.

You can reorder the images and videos by simply dragging them in Project Media area.

Adding Videos

To add videos find the _{Project Media} box on the bottom of the project edit page. Click _{Add Video} button. An empty video item will be added to your Project Media list. Fill the _{Video Embed Code} setting with embed code taken from YouTube or Vimeo and click _Save. After saving Fluxus theme will try to recognize the embed code and show corresponding icon in the screenshot area. If that does not happen, check your embed code and make sure it looks like _{<iframe …></iframe>}.

Project Options

_{Project Subtitle} is displayed on top of project title. It can be useful for adding extra information to your project titles (e.g. Photography Series).

_{Project External Link} is used to provide external link for your project (e.g. link to a magazine where this project is featured).

_{Project Information} enables to add any amount of extra information related to the project. For example you can use it to give credits for calibration.

Feature Project Media Item

To feature an image or video, find it in Project Media list and click edit. Check the _Featured checkbox and click _Save. Only one featured item per project is possible, so featuring an item will “un-feature” any other media items in that particular project.

Setting a video item as featured will require you to upload additional screenshot, which will be used on Horizontal and Grid portfolios instead of the video.

Note that if no item is selected as featured, then the first one will be used.

Project Media Order

To reorder your project images and videos simply drag them around in Project Media list.

Project types are used to filter your portfolio projects. They act like categories. To create a project type go to _{Portfolio > Project Types}.

You can assign project types to your project on a project edit screen. Go to _Portfolio, choose the project you wish to edit or create a new one. On the right hand side there is _{Project Types} widget, where you can choose relevant project types.

Fluxus theme allows to have multiple main menu links that show different projects (and project types) to the user.

Let’s say you want to group your projects into a following structure:

• Personal
  • Travels
  • Experiments
• Commercial
  • Fashion
  • Weddings

You also want to place Personal and Commercial links in your main menu, so that users who click on them can see projects from those categories.

This can be done using hierarchical project types. Go to _{Portfolio > Project Types} and create 2 project types named Personal and Commercial.  Next create 4 more project types Travels, Experiments, Fashion and Weddings and make sure you assign their parent setting to either Personal or Commercial project type.

Now go to _{Appearance > Menus} and find _{Project Types} meta box. Use it to add Personal and Commercial project types to your main menu. Go to your website to see the changes. Clicking on “Personal” in main menu should show you all the projects that are tagged with Personal or any children tags (Travels, Experiments). It should also show only those Project Types that are the childs of Personal (in our case Travels and Experiments).

Note that you currently cannot use Grid and Horizontal portfolio layouts at the same time. That means there is no way to show one project type using Grid layout and another using Horizontal layout.

Fluxus theme offers 5 post formats: standard, aside, link, quote and video. To change post format locate a _{Post Format} widget on a post editing page. Changing the post format reveals additional options that are associated with chosen post format.

Standard post format has no options except for featured image. Setting featured image will get it displayed in blog index and on the post page itself. Make sure you use image that has 16:9 aspect ratio.

Aside post format is used when you need to make a short note. No title will be displayed, only the contents of a post. The excerpt of aside post in blog index page is increased to 100 words.

Link post format shows a link in the featured image area.

Link Post Options

• _{Link URL} – website address of the link button
• _Title – link button title
• _Description – short text displayed under the button

Quote post format displays a quote in the featured image area. If you set the featured image, then the quote will be overlaid on top of the image.

Quote Post Format Options

• _Quote – the quote
• _{Text Color} – the color of the quote text. If you are using featured image, then make sure it stays readable.
• _{Quote Author} – quote author displayed under the quote in smaller font.

Video post format allows you to embed video from video service websites such as YouTube and Vimeo. Other websites should also work, but have not been tested. To embed a video simply paste the video embed code into video post format Embed Code area. Embedded videos will be visible in place of featured images on blog index page and on the post page. The player will be automatically resized to fit the available space.

YouTube embedding

Go to youtube.com and find the video you want to embed. Locate the _Share button, click it and choose _Embed. Then you will be provided with embed code which looks like this:

<iframe width="560" height="315" src="http://www.youtube.com/embed/-rvlaTg3vPg" frameborder="0" allowfullscreen></iframe>

Copy the code and paste it into video post _{Embed Code} area.

Vimeo Embedding

Go to vimeo.com and find any video you wish to embed. Hover the video player and you should see _Share button on the right. Click it and paste the provided embed into video post _{Embed Code} area.

Accordion shortcode example:

[accordion]  [panel title="Page #1"]Nulla malesuada...[/panel]  [panel title="Page #2"]Pellentesque mattis...[/panel]  [panel title="Page #3"]Sed a sapien erat...[/panel]  [/accordion]

Alert shortcode example:

[alert]  Lorem ipsum dolor sit amet, consectetur adipiscing elit.  [/alert]

[alert type="note"]  Lorem ipsum dolor sit amet, consectetur adipiscing elit.  [/alert]

[alert type="success"]  Lorem ipsum dolor sit amet, consectetur adipiscing elit.  [/alert]

[alert type="warning"]  Lorem ipsum dolor sit amet, consectetur adipiscing elit.  [/alert]

Button shortcode supports thsee parameters:

• _URL – the link that button points to.
• _Style – button color, possible values are: yellow, blue, red, green, black.
• _Size – if set to “big”, then the button will become bigger than the normal one.

Button shortcode examples

Normal buttons

[button url="#"]Button #1[/button]    [button url="#" style="yellow"]Button #2[/button]    [button url="#" style="blue"]Button #3[/button]    [button url="#" style="red"]Button #4[/button]    [button url="#" style="green"]Button #5[/button]     [button url="#" style="black"]Button #6[/button]

Big buttons

[button url="#" size="big"]Button #1[/button]    [button url="#" style="yellow" size="big"]Button #2[/button]    [button url="#" style="blue" size="big"]Button #3[/button]    [button url="#" style="red" size="big"]Button #4[/button]    [button url="#" style="green" size="big"]Button #5[/button]    [button url="#" style="black" size="big"]Button #6[/button]

Columns shortcode allows to split text content into multiple columns. Imagine that the content area is divided into 12 equal parts. By using columns shortcode you can specify how many parts should a column take.

For example, if you want to have two equal sized columns, then you need to use two columns with a size of 6. The code would be:

[columns]  [column6]  Content of the first column.  [/column6]  [column6]  Content of the second column.  [/column6]  [/columns]

If you want to have three columns of equal size, then you should use three columns with a size of 4.

[columns]    [column4]  Content of leftmost column.  [/column4]    [column4]  Content fo middle column.  [/column4]    [column4]  Content of rightmost column.  [/column4]    [/columns]

Troubleshooting issues

First make sure that the sum of column sizes is no more than 12. If the layout still seems broken, then try to delete space between column tags, for example if you have the following

[columns]    [column6]  Content of the first column.  [/column6]    [column6]  Content of the second column.  [/column6]  [/columns]

Change it into this:

[columns][column6]Content of the first column.[/column6]  [column6]Content of the second column.[/column6][/columns]

This theme uses standard WordPress gallery shortcode. Easiest way to include a gallery into the content is using WordPress interface. Click _{Add Media} (_{Insert/Upload} on older WordPress versions) button, which will open Media Manager. Then select the _{Create Gallery} tab and upload or select existing images and click _{Create a New Gallery} button.

Use services shortcode to create a nice looking layout accompanied with round pictures. The service shortcode looks best when used on a page with _{Full Width} template.

Service shortcode parameters

• _Title – title displayed above the image.
• _Icon – the name of the icon that is going to be displayed on top of the image. There are 280 icons. To find out how they look and what are their names visit fontello.com the section called Entypo is included with Fluxus theme. Hover any icon to see the name of the icon and use it with service shortcode.
• _Image – URL pointing to an image. Usually you will upload an image using WordPress Media and get it’s URL from there.

Services shortcode example:

[services]    [service title="We Shoot" icon="camera" image="./camera.jpg"]  Pellentesque...  [button style="yellow"]More[/button]  [/service]    [service title="We Write" icon="pencil" image="./write.jpg"]  Pellentesque...  [button style="yellow"]More[/button]  [/service]    [service title="We Think" icon="lamp" image="./think.jpg"]  Pellentesque...  [button style="yellow"]More[/button]  [/service]    [service title="We Grow" icon="chart-line" image="./grow.jpg"]  Pellentesque...  [button style="yellow"]More[/button]  [/service]    [/services]

Use social icon shortcode to embed little links to social networks.

Supported Parameters

• _URL – link to your social network profile.
• _Icon – icon name.

Supported Icon Names

Social Icon example code:

[social icon="github" url="#" /]  [social icon="flickr" url="#" /]  [social icon="vimeo" url="#" /]  [social icon="twitter" url="#" /]  [social icon="facebook" url="#" /]  [social icon="facebook-squared" url="#" /]  [social icon="gplus" url="#" /]  [social icon="pinterest" url="#" /]  [social icon="tumblr" url="#" /]  [social icon="linkedin" url="#" /]  [social icon="dribbble" url="#" /]  [social icon="stumbleupon" url="#" /]  [social icon="lastfm" url="#" /]  [social icon="rdio" url="#" /]  [social icon="spotify" url="#" /]  [social icon="qq" url="#" /]  [social icon="instagram" url="#" /]  [social icon="dropbox" url="#" /]  [social icon="evernote" url="#" /]  [social icon="flattr" url="#" /]  [social icon="skype" url="#" /]  [social icon="renren" url="#" /]  [social icon="sina-weibo" url="#" /]  [social icon="paypal" url="#" /]  [social icon="picasa" url="#" /]  [social icon="soundcloud" url="#" /]  [social icon="mixi" url="#" /]  [social icon="behance" url="#" /]  [social icon="google-circles" url="#" /]  [social icon="vkontakte" url="#" /]    Icons in Circles    [social icon="github-circled" url="#" /]  [social icon="flickr-circled" url="#" /]  [social icon="vimeo-circled" url="#" /]  [social icon="twitter-circled" url="#" /]  [social icon="facebook-circled" url="#" /]  [social icon="gplus-circled" url="#" /]  [social icon="pinterest-circled" url="#" /]  [social icon="tumblr-circled" url="#" /]  [social icon="linkedin-circled" url="#" /]  [social icon="dribbble-circled" url="#" /]  [social icon="stumbleupon-circled" url="#" /]  [social icon="lastfm-circled" url="#" /]  [social icon="rdio-circled" url="#" /]  [social icon="spotify-circled" url="#" /]  [social icon="skype-circled" url="#" /]

Tab shortcode example:

[tabs]    [tab title="First Tab"]  Aenean...  [/tab]    [tab title="Second Tab"]  Lorem ipsum...  [/tab]    [tab title="Third Tab"]  Ut vehicula  [/tab]    [/tabs]

Standfirst shortcode simply increases the font size of the wrapped text. Example usage:

[standfirst]  Increase the paragraph's font size with standfirst shortcode.  [/standfirst]

Use brake shortcode to insert a tiny horizontal line. It can be used for separating content. Shortcode example:

Content before separator.  [break]  Content after separator.

First you will need to acquire Google Maps API key. Go to this link and follow instructions to find out how. Enter the API key into _{Google Maps API} box.

To set the map position you will need to get the coordinates. It is easy. Visit itouchmap.com and enter the address you wish to get coordinates for. You will be given two numbers that look like this: _{37.813582,-122.47813}. First number is the latitude, the second is longitude. Enter each of them into the corresponding boxes. Save the page and you should see the the map in the background of your contacts page.

You can customize the default Google Maps marker by providing your own one. Enter an URL that points to an image in the _{Icon Image URL} box. Specifying _{Icon Latitude} and _{Icon Longitude} will set the position of the marker. Normally it is OK to make them the same as map center latitude and longitude. Although if you are picky, you might want to set the center position a little bit to the side of your marker. This way the marker will displayed on the side of the page and will not be covered by the content that is placed in the center.

Fluxus theme is compatible with Contact Form 7 plugin. Contact Form 7 is a very well made plugin that enables the creation of custom contact forms. To use it with the theme you have to install it and create at a single contact form. You will be give a shortcode that looks something like this:

[contact-form-7 id="25" title="General Contact"]

Paste it anywhere into your contacts page content and visit the page. On the bottom of the content you will see _{Send Message} button, clicking it  will open the form you have created with Contact Form 7.

Major Modifications

Create a new CSS file under _/css/skins/, place your modifications in that file. Then go to _{Appearance > Theme Options}, navigate to _Style tab and select your created file in the _Stylesheet select box. This way you will be able to switch between your modifications and original files in case you need to debug something. Also if you are changing the colors, you might consider copying _dark.css file and working on top of it.

Medium Modifications

Place all your modifications in _{/css/user.css}

Quick Modifications

Go to _{Appearance > Theme Options}, select _Style tab and place your CSS code in the _{Custom CSS} textarea. This method should used as temporary, as it is not best practice.

• _global.css – contains reset file and default styles for tags.
• _style.css – contains all the theme styles.
• _{/css/fontello.css} – contains definitions of icon font generated using fontello.com. The icon set embedded is called Entypo.
• _{/css/grid.css} – contains Bootstrap fluid grid. You can change the grid size by generating a new grid using the css/less/grid.less file.
• _{/css/responsive.css} – contains all the rules for website responsiveness.
• _{/css/user.css} – contains user modifications.
• _/css/skins/ – skins folder.
• _{/css/wp-admin/} – folder that contains all CSS files used in WordPress admin UI.

• _/js/main.js – main JavaScript file.
• _/js/size.js – contains methods that occur on browser resize.
• _/js/utils.js – contains small jQuery plugins and other snippets.
• _/js/html5.js – HTML5 enabling script for IE.
• _{/js/jquery.fluxus-grid.js} – jQuery plugin used for Grid Portfolio.
• _{/js/jquery.fluxus-lightbox.js} – jQuery lightbox.
• _{/js/jquery.fluxus-slider.js} – jQuery plugin used for Full Page Slider.
• _{/js/jquery.transit.js} – jQuery plugin for CSS3 transitions.
• _{/js/jquery.tinyscrollbar.js} – jQuery plugin that enables content scrollbars.
• _{/js/jquery.sharrre-1.3.4.js} – jQuery plugin that concatenates social networks share count.
• _{/js/jquery.reveal.js} – jQuery plugin that enables modal boxes.
• _/js/user.js – contains user modifications.

Place your modifications in _/js/user.js file. This file will be loaded after all the other Fluxus scripts. jQuery and plugins included in _utils.js file are accesible in this file.

Adding JavaScript Snippets

Go to _{Appearance > Theme Options}, locate a setting called _{Tracking Code}. Paste your JavaScripts in that field, they will be placed in the footer of every page. Note: you do not need include <script> tags.

Place your modifications inside the _{/inc/user.php} file. This file is included at the very end of _{functions.php} file.

All Photoshop files required for further styling can be found in the _/psd folder of the theme Zip package.

Step 1: Download the updated version from ThemeForest

Login to ThemeForest and go to your account’s downloads section. Download Fluxus Theme again, which will get you the latest version.

Step 2: Upload new version via FTP

Connect to your website using FTP client. Navigate to _{wp-content/themes} folder. There you should see _fluxus folder. It contains Fluxus theme files. Rename that _fluxus folder to something like _{fluxus_old}. This will allow you to have a backup copy just in case if there are issues with the new version.

Now it is time to upload new files. Extract the downloaded archive. You should get the following folders: _{documentation}, _fluxus, _licensing, _psd. Upload only the _fluxus folder to _{wp-content/themes}.

Step 3: Check if the theme has been updated

Login to your website and go to Appearance > Themes. Next to your current theme you shall see version number. Check if it the same as the one on ThemeForest page. Also you can find change log on the bottom of that page, which describes the changes made in the new version.

Troubleshooting: Going back to previous version

Just in case something goes wrong you can always go back to the previous version if you did Step 2 properly. Connect to your website using FTP, go to _{wp-content/themes}. Make sure that in Step 2 you have renamed the old version to _{fluxus_old} or something similar and it still exists. Delete _fluxus folder, where the current version is and rename _{fluxus_old} back to _fluxus. This will bring back the old version.

This theme uses two fonts available from Google Fonts - Merriweather and Lato. It is possible to change them by editing _style.css and _header.php

1. Go to Google Fonts and find a font that you would like to use.
2. Click “Quick Use” next to the font.
3. In the opened page choose the font weights. Merriweather is being used for content text, so you might want to include Normal and Bold variations. Lato is used in 3 weights: Light, Normal and Bold. If you are substituting Lato font, then for the best results you should use a substitute that also has those 3 weights. Note that choosing all available variations will slow you website, so pick as few as possible.
4. On the same page find a line which says - Add this code to your site. Copy the provided code and paste it into your _header.php file. You should paste it next to the existing font declarations, which looks like this:
   _{<link href=”http://fonts.googleapis.com/css?family=Merriweather” rel=”stylesheet” type=”text/css”>
   <link href=”http://fonts.googleapis.com/css?family=Lato:300,400,700″ rel=”stylesheet” type=”text/css”>}
   
5. Remove existing font declarations for Merriweather and Lato fonts from your _header.php file.
6. Save the file and upload it to your server.
7. Open style.css and replace every occurrence of ‘Merriweather’ to your new font name that is going to be used for content. Replace every occurrence of ‘Lato’ to your new font name that you want to be used for headlines. Do not strip out single quotes.
8. Save the file and upload it to your server. You should now see your font in action.