Twitter or Follow us on ThemeForest

Thank You for purchasing


Wordpress portfolio theme for photographers

Version 1.1

01 Overview Top

Fluxus is a magazine inspired portfolio theme for photographers. It features a horizontal layout, which allows to showcase your art side by side, just like we are used to see it in print. Photographers are very picture oriented, and so is Fluxus. Pay attention to the pictures you are using on this theme and you will be able set up a great portfolio.

This documentation explains the theme features, how they work and how to properly use them. If you already know the basis of WordPress based website administration, then everything should be straightforward. Otherwise it is advisable to take a look at some introductory tutorials.

02 Getting Started Top

First thing to consider is your website structure. Visit the demo page to see what options are possible and decide what you are about to use. Let’s start by setting up the homepage, blog and portfolio.


In this documentation it is considered that you have installed the theme in a fresh WordPress 3.5 installation. If that is not the case, then some of the walkthroughs and images may be different. Although you should still be able to do everything suggested.

Setting Up Homepage

Screen shot 2013-01-13 at 4.03.48 PMStart 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.

Setting Up Blog

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

Setting Up Portfolio

Screen shot 2013-01-15 at 2.19.34 AMCreate 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.

03 Portfolio Top

Fluxus theme offers two layout options for portfolio: Horizontal Portfolio and Grid Portfolio. You can switch between them by changing your portfolio page template.

Horizontal Portfolio

Displays your projects horizontally, scaling the images so that they fit in the viewers browser window.

Grid Portfolio

Screen shot 2013-01-13 at 5.29.12 PMArranges your projects in a predefined grid. If you have less projects than 12, you might want to use a bigger grid. You can change the grid size by going to Pages and editing the page which has Grid Portfolio set as it’s template. On the bottom of the page there is Grid Options box, which lets you to specify custom grid size.

If grid portfolio is viewed on small screen, the grid may change it’s the size in order to preserve nice layout.

Adding Portfolio Items

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

add-imageTo 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

featureTo 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.

Adding Project Types

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

Screen shot 2013-01-14 at 3.06.22 PMYou 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.

Multiple Portfolios

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.

parentThis 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).


If you can’t see Project Types meta box on the Menus page, then it is probably hidden. Click Screen Options on the top of the Menus page and select Project Types.

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.


04 Full Page Slider Top

Full Page Slider will use the whole screen to display images in a slideshow manner. To create one go to Pages > Add New and specify Full Page Slider as page template.

Adding Images to Full Page Slider


Make sure images are at least 1500×1000 and for best results use images that are in landscape orientation.

First you have to upload some images to the page. It is not possible to use existing images from Media Library, so click Add Media button (or Insert/Upload on older WordPress versions) and upload a few images from your computer.

After uploading some images, go to Slider tab. There you will see all your uploaded images. Click Show Details to add some extra information, check Published and click Save Changes. Your published images are now visible.

Slide Options

  • Title - the title displayed in big font.
  • Subtitle – subtitle displayed in smaller font above the title.
  • Description – short description of the slide. If the slide is used to represent a project, then you might include short description of your project.
  • Custom link – the link of the button on the slide. If you are linking the slide to your portfolio project then use Link to portfolio option.
  • Link to portfolio - enables you to link your slide with a portfolio project.
  • Link title – specify the title of the link button. In none is provided, the default one will be used.
  • Text color – color of the text that is displayed on top of the slider image.
  • Info box position – by default the text on top of the slider will be positioned in the center, by choosing Custom and clicking Set custom position you will be able to drag the info box anywhere on the page.
  • Image scaling – when viewing the slide it is probable that the viewers screen aspect ratio will be different than the image aspect ratio. This means that the image can’t get fully displayed. Use this setting to choose how image should be scaled. Choose Crop Bottom, if you want the top of the image to be always visible. Choose Crop Top and Bottom to always display the vertical center of the image. Choose Crop Top to display the bottom part of the image and crop the top. You can also choose Fit Image which will show the whole image but it will also add padding around it.
  • Dim background – sometimes it will be not possible to place text on top of the slider so that it stays readable. Use this option to provide a solid color background for your text.
  • Published – the slide will not be visible publicly until the Published checkbox is checked.

Changing Slide Order

To change slide order drag your slides using the drag icon and click Save ordering changes, which is on the bottom of the Slider tab.

Custom Info Box Positioning

Custom position of the overlaying slide text is calculated using the top and left distance expressed in percentage. This makes it less accurate, but more flexible on different sized screens. On very small screens (e.g. handheld devices) custom position is ignored and the box is placed in the center. To avoid bad readability background becomes always dimmed.

05 Blog Top

Fluxus blog supports and encourages the use of featured images. To get the best of it make sure you use images with 16:9 aspect ratio. The excerpt is displayed on the blog index page and is limited to 50 words.

Post Formats

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.

Post Format: Standard

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.

Post Format: Aside

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.

Post Format: Quote

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 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="" frameborder="0" allowfullscreen></iframe>

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

Vimeo Embedding


YouTube and Vimeo websites are constantly changing so these instructions might go out of date.

Go to 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.

06 Shortcodes Top

Fluxus theme comes with a handfull set of shortcodes. Use them in your posts and pages to embed extra functionality. The demo of all the shortcodes and their codes can be found on Fluxus Demo page.

Shortcode: Accordion

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]

Shortcode: Alert

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]

Shortcode: Buttons

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]

Shortcode: Columns

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]

Shortcode: Services

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 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]

Shortcode: Social Icon

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="#" /]


Shortcode: Tabs

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]

Shortcode: Standfirst

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

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

Shortcode: Break

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.

07 Contacts Top

Fluxus theme has a page template that is specially designed for providing contacts information. It supports Google Maps and is compatible with Contacts Form 7 plugin which allows to create custom contact forms.

To set up contacts page create a new page and assign a Contacts template to it. After saving the page you will be able to see Contacts Page configuration box. Use it to integrate Google Maps into your contacts page.

If you set featured image for your contacts page, it will get displayed in the background of your contacts form.

Contacts Page Configuration

  • Google Maps API – in order to use Google Maps, you have to provide your personal Google Maps API.
  • Map Center Position - latitude and longitude of the point that will be in the center of the map.
  • Map Icon – latitude and longitude of the marker.
  • Icon Image URL – provide an URL to the image which will be used instead of default Google Maps marker.
  • Contacts Information – can be used to add extra information such as email, phone number and address. This information will be displayed nicely on the right side of the content.


Setting Up Google Maps

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

Contact Form

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.

08 Theme Options Top

Theme options contains general settings for Fluxus theme. They can be accessed by going to Appearance > Theme Options.

09 Theme Templates Top

This theme comes with 7 templates that you can assign to every page. Assigning any of these templates to a page will change it’s looks or functionality.

Available templates

Contacts - allows to set up Google Maps to be used on the page.

Full Page Slider - displays full page slider instead of content. See Section 4 for more info.

Full Width - page is displayed without a sidebar.

Full Width with Sidebar - page content area is usually limited to specific size of available space. Using this template will make the page content take all the available space.

Grid Portfolio - displays portfolio items in a grid layout.

Horizontal Portfolio - displays portfolio items in a horizontal layout.

Page with Background – featured image is displayed in the background of the content.

10 Theme Files Top

If you are willing to modify theme files you will find many helpful comments in every file. Modifying the files will impact the ability to update this theme in future. To prevent this be sure that you place your modifications in special files.

Modifying CSS

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.

CSS Files

  • 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 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.

JavaScript Files

  • /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.

Modifying JavaScript

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.

Modifying PHP Files

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

Photoshop Files

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

11 FAQ Top

How to update theme?

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.

How to change fonts?

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=”” rel=”stylesheet” type=”text/css”>
    <link href=”,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.


12 Further Help Top

For further help please contact inTheme using ThemeForest contact form.

Thank You.