Nexus

v1.0.3
WordPress
Theme

July 5

2012

Thank you for purchasing my theme. This

documentation is meant to help with installing and using the Nexus WordPress
Theme. This first place to look for help
when you encounter issues using the
theme. If you have questions that are not
addressed by this document, please post
your issues to the dedicated support forum. Thanks so much!

A guide to using the

Nexus WordPress
Theme

Contents
Getting Started ........................................................................................................................................ 4
Installation .......................................................................................................................................... 4
Updating Nexus ................................................................................................................................... 5
Dummy Data ....................................................................................................................................... 5
Contact Page Configuration ................................................................................................................. 5
Creating A Portfolio ............................................................................................................................. 5
Creating Portfolio Items ................................................................................................................... 6
Creating a Flex Slider ........................................................................................................................... 6
Creating Flex Slides .......................................................................................................................... 6
Creating a Page Slider ...................................................................................................................... 6
Create a Shortcode Slider................................................................................................................. 6
Creating A CP Slider ............................................................................................................................. 6
Creating CP Slides ............................................................................................................................ 7
Creating a Page Slider ...................................................................................................................... 7
Create a Shortcode Slider................................................................................................................. 7
Creating a Content Slider ..................................................................................................................... 7
Creating Content Slides .................................................................................................................... 7
Creating a Page Slider ...................................................................................................................... 7
Create a Shortcode Slider................................................................................................................. 8
Creating Your Blog ............................................................................................................................... 8
Theme Features................................................................................................................................... 8
Responsive Design ............................................................................................................................... 8
Tablet Behavior................................................................................................................................ 8
Mobile Behavior .............................................................................................................................. 9
Theme Options .................................................................................................................................... 9
Unlimited Sidebars .............................................................................................................................. 9
Custom Widgets .................................................................................................................................. 9
Custom Shortcodes.............................................................................................................................. 9
Layout & Loading Shortcodes ......................................................................................................... 10
Custom Page Templates .................................................................................................................... 10
Custom Header Logo ......................................................................................................................... 10

Theme Menu Locations ..................................................................................................................... 11

Featured Image & Preview Images..................................................................................................... 11
Custom Backgrounds ......................................................................................................................... 11
Internationalization ........................................................................................................................... 11
Theme Files ........................................................................................................................................... 11
Cascading Style Sheets (CSS) .............................................................................................................. 11
JavaScript Files (JS) ............................................................................................................................ 11
Support Forum ...................................................................................................................................... 12
Third Party Plugins................................................................................................................................. 12
Using Nexus with WPML .................................................................................................................... 12
Sources & Credits .................................................................................................................................. 12

Getting Started
Installation
1. Download Nexus package
a. Navigate to your Account Dashboard.
b. Click on the Downloads tab.
c. Click the Download button associated with Nexus
d. Your browser should download a zip file containing the Nexus theme and its associated
documents.
2. Unzip the downloaded zip file
a. You should see the following in the extracted directory
i. Nexus the folder that contains the actual Nexus WordPress Theme
ii. resource additional resources provided with the theme. (Ex. PSD design Files)
iii. licensing the licenses that apply to the theme
iv. doc the documentation for the theme
3. Confirm that Nexus prerequisites are installed
a. WordPress Nexus requires WordPress 3.2 or greater.
i. PHP >5.2.4 WordPress 3.2 requires
ii. mod_rewrite Apache Module (if using Apache Web Server)
iii. For more information of installing WordPress, please refer to the WordPress
Codex Installation Guide.
b. GDLibrary for image resizing
4. Upload the Nexus folder from the unzipped package to your Web Host. The target directory of
your upload should be WORDPRESS_ROOT/wp-content/themes. You can use an FTP client to
upload the folder to your webhost. For more information on using FTP, please refer to the
WordPress Codex on FTP Clients.
a. Note: You dont need to upload the resource, licensing, doc, or demo folders to
your server. You just need the Nexus folder that contains the actual WordPress theme.
5. In the WP-Admin interface, navigate to Appearance > Themes and activate Nexus
6. Once Nexus has been activated, navigate to the Appearance > Theme Options panel. This is the
main configuration panel for Nexus Theme Options.
7. If you get the error message The package could not be installed. The theme is missing the
style.css stylesheet., then youve probably uploaded the entire download package from ThemeForest instead of just the theme. The folder structure of your downloaded zip file looks
something like this:
nexus-1.0.3
o doc
o licensing
o nexus
o resources

That nexus folder one level down is the actual theme. If you install it, everything should work
as expected.

Updating Nexus
The most recent version of Nexus is always available for you to download from Themeforest. In order to
upgrade to the latest version:
1. Backup your Database using a SQL dump. There shouldnt be any issues with the updating, but
if there are, this step will allow you to restore your site.
2. Backup your WordPress installation. Copy the WordPress files to another location so if anything
adverse occurs, you can revert your installation. As with the SQL dump, there shouldnt be any
issues with the updating, but if there are, this step will allow you to restore your site.
3. Download the latest version of the theme package from Themeforest
4. Unzip the package
5. Replace the WORDPRESS_ROOTS/wp-content/themes/Nexus that is currently on your server
with the Nexus folder from the new package.
6. Refresh a page in the WP-Admin interface
7. Your theme should now be updated

Dummy Data
Demo site for Nexus can be loaded into your site. It is important to remember that the Demo site data is
just there as a starting point for you to create your site, all theme options and post options should eventually be set to your own images and values. Another important point to understand is that the Demo
import will overwrite the Theme Options of your Nexus theme installation and import a number of new
posts, pages, custom post-types, and images.
To import demo content, navigate to Appearance > Theme Options > Demo Import and click the Import
Content & Options button. The import may take a while since it is having to download resources in order to construct your new demo site. Also, note that your PHP memory limit needs to be at least 64M
for this to work correctly.

Contact Page Configuration

The contact page on the Nexus preview site is configured using a custom sidebar and a Contact Form 7
shortcode. The contents of the widgets displayed in the preview sites Contact Page sidebar can be
found in the resources folder of the theme package (contact-page-business-hours-widget.txt and contact-page-contact-information-widget.txt). The syntax that can be used to define the Contact Form 7
form can be found in contact-form-7-syntax.txt. Once the syntax is provided to Contact Form 7, use the
shortcode that Contact form 7 provides in the content area of the Contact Page.

Creating A Portfolio
Create the Portfolio Page:
1. Create a WordPress Page (Ex. Portfolio Page)
2. Navigate to Appearance > Theme Options > Portfolio

3. Click the Add button associated with the Portfolios option

4. A new Portfolio will appear in the listing of Portfolios
5. Name the Portfolio something descriptive via its title field. Note that this field is only used in the
administrative interface for administrators to identify the portfolio.
6. Select a page from the Display Page field. This will be the page the Portfolio will appear on.
7. Select the Portfolio Categories that the Portfolio Items should be drawn from via the Categories
field.
8. Select the Filters that should appear in the Portfolios filter bar via the Filters field.
9. Click the Save All Changes button at the bottom of the page.
10. Now, the page specified in the Display Page field will display a portfolio populated with items
from the specified Portfolio Categories along with the specified Filters.
Creating Portfolio Items
Navigate to Portfolio Items > Add New which will allow you to add a new portfolio item and specify its
properties. Use the native WordPress taxonomy interfaces to specify the Filters and Portfolio Categories
that a given Portfolio Item is associated with.

Creating a Flex Slider

Creating Flex Slides
Navigate to Flex Slides > Add New which will allow you to add a new slide and specify its properties. Use
the native WordPress taxonomy interfaces to specify the Categories that a given slide is associated with.
Each slide should specify the Slide Image and Slide Height for each layout type (Desktop, Tablet, Mobile
Landscape, Mobile Portrait). The Slide will display the specified image depending on the viewing devices
layout. For more information on the options for the Flex Slide, please refer to the inline property descriptions in the Add/Edit Flex Slide edit page in WP-Admin.
Creating a Page Slider
A Flex Slider defined for display on any Page. To specify the Flex Slider for a page, for the following
1.
2.
3.
4.
5.
6.
7.

Navigate to the desired pages WP-Admin Edit Page interface.

Locate the Custom Settings metabox on the admin page.
Set the Slider Type option to Flex Slider
Select the Flex Slide Categories that you want the slides to be drawn from.
Set the other slider specific options you want.
Click the Update button to save the options.
Now when you navigate to the page, a Flex Slider will be displayed at the top of the page with
the specified slides and properties.

Create a Shortcode Slider

A Flex Slider can be created in any main content area of the site using the [flex_slider] Shortcode. Use
the Shortcode Generator to generate a Flex Slider with the desired slides and options.

Creating A CP Slider

Creating CP Slides
Navigate to CP Slides > Add New which will allow you to add a new slide and specify its properties. Use
the native WordPress taxonomy interfaces to specify the Categories that a given slide is associated with.
Each slide should specify the Slide Image and Slide Height for each layout type (Desktop, Tablet, Mobile
Landscape, Mobile Portrait). The Slide will display the specified image depending on the viewing devices
layout.
The CP Slides also have a Foreground Image option for each layout that specifies a foreground image
that will be animated in with each slide if the layout is active.
For more information on the options for the CP Slide, please refer to the inline property descriptions in
the Add/Edit CP Slide edit page in WP-Admin.
Note: The content for CP and Content slides only allow CSS absolute positioning of top and bottom.
Creating a Page Slider
A CP Slider defined for display on any Page. To specify the CP Slider for a page, for the following
1.
2.
3.
4.
5.
6.
7.

Navigate to the desired pages WP-Admin Edit Page interface.

Locate the Custom Settings metabox on the admin page.
Set the Slider Type option to CP Slider
Select the CP Slide Categories that you want the slides to be drawn from.
Set the other slider specific options you want.
Click the Update button to save the options.
Now when you navigate to the page, a CP Slider will be displayed at the top of the page with the
specified slides and properties.

Create a Shortcode Slider

A CP Slider can be created in any main content area of the site using the [cp_slider] Shortcode. Use the
Shortcode Generator to generate a CP Slider with the desired slides and options.

Creating a Content Slider

Creating Content Slides
Navigate to Content Slides > Add New which will allow you to add a new slide and specify its properties.
Use the native WordPress taxonomy interfaces to specify the Categories that a given slide is associated
with. Each slide should specify the Slide Image and Slide Height for each layout type (Desktop, Tablet,
Mobile Landscape, Mobile Portrait). The Slide will display the specified image depending on the viewing
devices layout. For more information on the options for the Content Slide, please refer to the inline
property descriptions in the Add/Edit Content Slide edit page in WP-Admin.
Note: The content for CP and Content slides only allow CSS absolute positioning of top and bottom.
Creating a Page Slider

A Content Slider defined for display on any Page. To specify the Content Slider for a page, for the following
1.
2.
3.
4.
5.
6.
7.

Navigate to the desired pages WP-Admin Edit Page interface.

Locate the Custom Settings metabox on the admin page.
Set the Slider Type option to Content Slider
Select the Content Slide Categories that you want the slides to be drawn from.
Set the other slider specific options you want.
Click the Update button to save the options.
Now when you navigate to the page, a Content Slider will be displayed at the top of the page
with the specified slides and properties.

Create a Shortcode Slider

A Content Slider can be created in any main content area of the site using the [content_slider] Shortcode. Use the Shortcode Generator to generate a Content Slider with the desired slides and options.

Creating Your Blog

Creating a Blog Page:
1. Create a WordPress Page (Ex. My Blog Page)
2. Navigate to Settings > Reading in the WP-Admin interface
3. Configure the Front page displays setting
a. The Your Latest Posts option will make the homepage display a Blog
b. If you select A static page
i. Front page determines the WordPress page that should be displayed as the
front page.
ii. Posts page determines the WordPress page which will display the Blog. You
could for example select My Blog Page which you created in the first step.
4. Depending on how you configured Front page displays you either will now have a blog on your
homepage or on the page that you specified as the Posts page.

Theme Features
This section of the document describes how to use the features of Nexus that let you modify the layout
and behavior of WordPress.

Responsive Design
Nexus is a Responsive WordPress theme that uses CSS3 media queries, flexible grids, and JS to automatically support well formatted display of content across resolution sizes from mobile to desktop. In addition to the responsive layout, Nexus automatically supports touch behaviors for touch devices.
Tablet Behavior

When displaying on a tablet, Nexus will shrink the sizes of columns so that the page can be displayed in
the tablet viewport. Additionally, touch gestures are supported throughout the theme.
Mobile Behavior
In mobile resolutions, Nexus displays content in a full width single column so that the site can be displayed in the mobile device viewport.

Theme Options
Nexus comes with an easy to use Options Panel that can be accessed by navigating to Appearance >
Theme Options. The options are organized into tabs that each relating to a different section of the
theme.

Unlimited Sidebars
Nexus supports the definition of unlimited, custom sidebars. To create a custom sidebar:
1. Navigate to Appearance > Theme Options > Custom Sidebars.
2. Click the Add button. A new sidebar should appear in the administrative interface.
3. Define the Sidebar Title and Description. These values will be used to define a WordPress Widget Area.
4. Select the Pages, Post Categories, and Portfolio Categories for which you want the newly defined custom sidebar to appear on.
5. If you have multiple custom sidebars applied to a given post, page, or portfolio-item, they will
appear in the order that the custom sidebars are defined in Appearance > Theme Options > Custom Sidebars. The order of the sidebars can be modified by clicking and dragging the sidebars in
Appearance > Theme Options > Custom Sidebars.
6. Click the Save All Changes button.
7. Navigate to Appearance > Widgets and define the widgets you want to appear in your new Widget Area using the WordPress widget administrative dashboard.
8. The new custom sidebar and its defined widgets should now display on the defined posts, pages,
and portfolio-items.

Custom Widgets
Nexus provides the following widgets for your convenience:
1. Embed a widget that embeds the specified URL using WordPress oEmbed support.
2. Popular Posts a popular posts feed
3. Twitter a Twitter Feed of the Twitter user specified in Theme Options

Custom Shortcodes
Nexus comes with a number of shortcodes. All these shortcodes can be accessed through the Shortcode
Generator. The Shortcode Generator can be accessed through the TinyMCE editors toolbar. Click on the
the button with a picture of square brackets on it in order to see a listing of the Shortcodes that can be
configured and generated.

Note: The when using a button shortcode inside a tabs shortcode, the button should be specified with
raw=false. This will prevent excess *raw] tags from being displayed.
Layout & Loading Shortcodes
Nexus comes with a number of shortcodes to aid in the creation of fully responsive content that serves
all devices and loads quickly.
[image]
o The image shortcode can be used to dynamically resize images and enable lightbox display of the image. For more information on the [image] shortcode, please use the
Shortcode Generator.
[responsive_image]
o The responsive image shortcode allows you to specify separate images to be displayed
for each layout type which will be loaded on-demand via AJAX. For more information on
the [responsive_image] shortcode, please use the Shortcode Generator.
Display Shortcodes
o [display_desktop]
Displays its content only in the desktop layout
o [display_tablet]
Displays its content only in the tablet layout
o [display_mobile_landscape]
Displays its content only in the mobile landscape layout
o [display_mobile_portrait]
Displays its content only in the mobile portrait layout
[animate]
o The animate shortcode applies CSS Transitions to its content. For more information on
the [animate] shortcode, please use the Shortcode Generator.

Custom Page Templates

Nexus provides the following templates for your convenience:
1.
2.
3.
4.

Default Template a page with a right sidebar

Archives displays the listing of posts on the site and a sidebar
Full Width a full width page template with no sidebar
Page w/ Left Sidebar a page with a left sidebar

Custom Header Logo

To set a custom header logo navigate to Appearance > Theme Options > Logo:
1. Set the "Header Logo" value, along with the "Header Logo (Hi-Res)" theme options with URLs to
their respective images.
2. Set the "Header Logo Width" and "Header Logo Height" with the pixel width and height of the
logo.

Theme Menu Locations

Nexus supports 4 hierarchical theme locations:
1.
2.
3.
4.

Header Menu (Desktop)

Header Menu (Tablet Portrait)
Header Menu (Tablet Landscape)
Header Menu (Mobile)

Each of the menus exists to service a different responsive layout. The menus associated with the menu
locations can be defined and assigned through the Appearance > Menus.
NOTE: Parent menu items in menus used by Tablet Portrait and Tablet Landscape should have their URL
values set to # to accommodate table touch behaviors for hierarchical menus.

Featured Image & Preview Images

Posts and Portfolio Items have both Featured Image and Preview Image fields. Preview images are used
for listing items. For example, in the blog and portfolio the preview images specified for posts and portfolio items respectively are displayed. The Featured Image is displayed on the details page of the
post/portfolio-item. The images will be resized using native WordPress resizing depending on where the
image is being displayed.

Custom Backgrounds
The default site background can be specified in the Theme Options Panels General Tab using the Default Background field. The default background can be overridden on a page/post/portfolio-item basis
using the Background field in the Nexus Custom Settings Metabox.

Internationalization
Nexus comes internationalization ready. All frontend strings are wrapped in gettext calls and a default.po file is included with the theme for those who wish to create translations. The default.po file is
located in the Nexus/lang folder. Nexus will look for translation files in the `Nexus/lang` folder. For more
information on WordPress i18n, please refer to the Translating WordPress Codex entry.

Theme Files
This section describes the files used in the theme from a high level perspective.

Cascading Style Sheets (CSS)

The CSS for the theme is contained in Nexus/css. The main CSS entry point in Nexus/css/styles.css. All
skins are defined in files with the naming convention: Nexus/css/skin-*.css.

JavaScript Files (JS)

The JS for the theme is contained in Nexus/js. The file Nexus/js/plugins.js contains the third party libraries that are integrated into Nexus. The file Nexus/js/script.js is the main execution point for JS in Nexus.

Support Forum
We're now doing all our support via our Support Forum. Go Here to register. Feel free to ask questions
about any issue you have that isnt addressed by this document. Be sure to search the forums for an answer before creating a new thread with your question or issue.

Third Party Plugins

Nexus's styling accommodates Contact Form 7. Contact Form 7 forms will automatically be styled to
match the rest of the theme. The code for the Form as it appears on the Nexus Preview Site can be
found in demo/contact-form.txt.
Nexus relies on the WordPress SEO by Yoast plugin for its breadcrumb support. Nexus is tested against
the plugin which provides a lot of good SEO enhancements for your site.

Using Nexus with WPML

WPML needs to be told to translate the Custom Post Types associated with the sliders and portfolio (see
this related WPML Forum Entry). To get WPML working correctly with Nexus:
In WP-Admin, navigate to WPML > Translation options.
Locate the Custom posts metabox on the page.
Set Portfolio Items, Flex Slides, Content Slides, and CP Slides to Translate and save the changes
Once WPML has been configured to translate the Custom Post Types, the sliders and portfolios
should populate correctly.

Sources & Credits

Weve used the following images, icons or other files as listed.
Roots - retlehs
OptionTree - valendesigns

JavaScript Libraries
o Isotope - desandro
o Twitter Bootstrap - Twitter
o jQuery Easing - GSGD
o jPlayer - Happyworm
o Tweet.js - Sea of Clouds
o YUI Scrollview - YUI Team
o FlexSlider - Tyler Smith
o Superfish - Joel Birch
Graphic Resources
Mini Icons Vol.1 - Facundo Gonzalez

Awesome Font Dave Gandy

Entypo Daniel Bruce