ThemeBlvd

### “Complexity WordPress Theme” Documentation by “Theme Blvd”

# “Complexity WordPress Theme”

Created: March 6, 2011
By: Jason Bobich
My Blog: JasonBobich.com
Follow Me: Twitter.com/jasonbobich

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. And if you like the theme, please go to your Theme Forest downloads page and give this product a 5 star rating :-) Thanks so much!

## Table of Contents

1. Getting Started
   - Installation - (video)
   - Installation - Classic Method - (video)
   - Important Installation Notice
   - Configuring Theme Fonts - (video)
2. Theme Overview
   - Default Homepage Video Walk-through - (video)
   - Default Homepage Written Overview
     - 1) Logo
     - 2) Header Widget Area
     - 3) Primary Navigation
     - 4) Search (optional)
     - 5) Homepage Slideshow
     - 6) Homepage Content (optional)
     - 7) Homepage Slogan (optional)
     - 8) Homepage Widget Columns (optional)
     - 9) Homepage Portfolio (optional)
     - 10) Homepage Blog (optional)
     - 11) Footer Widget Columns
     - 12) Copyright Text
3. Standard WordPress Elements
   - Navigation Menus - (video)
   - Widgets & Widget Areas
4. Writing Pages and Posts
   - Shortcodes
   - Linking to a lightbox popup - (video)
   - Creating a Gallery of images - (video)
5. Page Templates
   - Archives & Sitemap - (video)
   - Blog Roll
   - Contact Page - (video)
   - Full Width Page - (video)
   - Sidebar Left
   - Sidebar Right
   - Redirect - (video)
6. Slideshows
   - Create your first slideshow - (video)
   - Using the [slideshow] shortcode - (video)
   - Example Content Slides
7. Portfolios
   - Create your first portfolio - (video)
8. Search Engine Optimization
   - SEO Plugin Overview - (video)
9. Compatible Plugins
   - WP-PageNavi (pagination)
   - Breadcrumb NavXT
10. Customization Tips
    - Using a Child Theme - (video)
    - How to filter a Blog Page - (video)
    - How to use this theme as a classic blogging theme - (video)
    - How to show widgets on certain pages only - (video)
    - How to hide theme options pages from your client - (video)
11. Sources and Credits

## Getting Started

### Installation (video) - top

This video explains the simplest way of installing a ThemBlvd WordPress theme. However, this method does not work for everyone on all servers. So, if this way doesn't work, follow the instructions in the next video.

### Installation - Classic Method (video) - top

This video shows you the classic way of installing a WordPress theme.

### Important Installation Notice - top

Please note there is an important first step after installing this theme. You need to navigate to Settings > Permalinks and click on the "Save Changes" button, even if you haven't made any changes. This is to register the custom post types used in the theme.

### Configuring Theme Fonts (video) - top

This theme gives you control over your body and header fonts from your theme options page. This videos shows you how and explains what it all means.

## Theme Overview

### Default Homepage Video Walk-through (video) - top

This video will walk you through how this theme's default homepage works.

### Default Homepage Overview - top

The default homepage with this theme is quite flexible. There many layouts you can achieve with just a few options that you may not have realized from just viewing the theme's live demo before purchasing. So, make sure and take a moment and really look over this section to understand the true flexibility of the homepage.

Complexity > Theme Options > Homepage

In this theme, by "default homepage" we are referring to the homepage you see when you go to Settings > Reading, and select "your latest posts."

You can use the numbers in the screenshot to locate corresponding descriptions below.

Note: If you've just installed the theme, your site won't be looking quite like the screenshot you see above because you haven't put in any of your content yet. If you're feeling lost at this point, make sure and watch some of the getting started videos.

#### 1) Logo

You can put in a URL to your own logo image on your theme options page. You can also specify just to just show text, if you like. If you choose to show your site title and not a logo image, you can set your Title under Settings > General.

Complexity > Theme Options > Header

#### 2) Header Widget Area

This is an optional widget area you can choose to utilize or not. Keep in mind this area is pretty restrictive. Not all widgets that come with this theme are styled to fit in the header. This is more meant for a simple HTML snippet or a horizontal banner, for example.

Appearance > Widgets

#### 3) Primary Navigation

When you first install the theme, you will see Home button and a listing of your WordPress pages by default because you haven't created a menu yet. So, you'll need to navigate to Appearance > Menus, create a menu, and assign it to the primary navigation location. If you're unfamiliar with creating menus in WordPress, you should check out this video tutorial.

Appearance > Menus

#### 4) Search (optional)

The search bar you see in the main menu can easily be shown or hidden.

Complexity > Theme Options > Header

#### 5) Homepage Slideshow

This theme use a custom post type called "Slides" which you organize into a custom taxonomy called "Slideshows". These Slideshows can then be shown throughout your website, as well as assigning specifically to the homepage. See the slideshow section of the documentation for more details on that.

Complexity > Theme Options > Homepage

#### 6) Homepage Content (optional)

This may not have been something that was apparent on the demo, however in a addition to showing a slideshow, slogan, and widget columns, you can also show the content from a page that you choose. With this page you could potentially use whatever shortcodes, HTML code, or content you want. Combining this with the fact that the slideshow, slogan, and widget columns can all be hidden individually, you can see the true flexibility of the homepage. So, get creative!

Complexity > Theme Options > Homepage

Wondering how that sweet homepage content of the demo was created?

Well, it's quite simple. What you see there is a result of some simple HTML and shortcodes being utilized within the page's content.

...And even more specifically, here's the exact code used there:

#### 7) Homepage Slogan (optional)

You can put in a homepage slogan on your theme options page. If you're looking for something fancier, with maybe some more detailed HTML, you can use the Page Content block instead (item #6 above).

Complexity > Theme Options > Homepage

#### 8) Homepage Widget Columns (optional)

Here are columns of widget areas. You can put widgets here under Appearance > Widgets. Also, you can specify on your theme options page how many columns you'd like to display, or if you'd like to hide the section all together.

Complexity > Theme Options > Homepage

Also, you can see in the screenshot below which widgets were actually used in the theme's live demo.

#### 9) Homepage Portfolio (optional)

Here you can choose to have portfolio items feed onto your homepage. This theme uses a custom post type called portfolio items that then get customized into a custom taxonomy called portfolios. You can learn more about that by watching the video on creating portfolios.

You can configure the basic options for the homepage as shown in the screenshot below. Additionally, you can set your sitewide portfolio options under Complexity > Theme Options > Portfolios, and these options will effect the homepage portfolio feed, as well.

Complexity > Theme Options > Homepage

#### 10) Homepage Blog (optional)

If you have a blog set to show on your homepage, here is where you can configure some basic settings for it. This blog will function as a typical WordPress theme homepage blog. So, if you'd like to set basic settings like limit the number of posts, you can do this from Settings > Reading, as you would normally do.

Complexity > Theme Options > Homepage

#### 11) Footer Widget Columns

The section in the footer of the theme is a single widget area. Widgets cannnot be stacked here, as the design calls for a single row of widgets, and each widget must have a title in order to maintain that nice, clean effect.

You can, however, choose the nubmer of widgets you'd like to display across in that area.

Complexity > Theme Options > General Options

Also, you can see in the screenshot below which widgets were actually used in the theme's live demo.

#### 12) Copyright Text

In the default theme options, I've included a design credit and a sample copyright text. It's always nice to leave some credit to the theme author in there, however you are, of course, allowed to change it to say whatever you like. This copyright text can be altered under Theme Options > General Options.

## Standard WordPress Elements

### Navigation Menus (video) - top

This is a general video tutorial that will show you how the WordPress 3+ menu builder works.

### Widgets and Widget Areas - top

Here's a quick visual overview of your Appearance > Widgets page after installing this theme.

## Writing Pages and Posts

### Shortcodes - top

For examples of all the theme's shortcodes, visit the Shortcode section of the theme's live demo here:

http://www.themeblvd.com/demo/complexity-v2/features/shortcodes/

You can also easily insert all available shortcodes when writing your pages and posts with the simple click of a button.

### Linking to a Lightbox Popup (video) - top

This video will show you how to link an image or text link to a lightbox popup while using this theme.

Sample Code Reference:

    <a href="URL TO FILE" rel="lightbox">Link Text</a>

### Creating a Gallery of Images (video) - top

This video will show you how to quickly create a gallery of images and show how they will utilize built-in lightbox integration with this theme.

Sample Code Reference:

    [gallery link="file"]

## Page Templates

### Archives & Sitemap (video) - top

This video will show you how to setup your Archive and Sitemap pages. It also explains the benefit of why you would want to use these pages for SEO reasons. Google likes links!

### Blog Roll - top

This page template will show all of your blog posts. Additionally the blog posts can be filtered, if you wish.

### Contact Page (video) - top

This video will show you how to setup your contact page with the provided template. If you're looking for something with more features, check out the Contact Form 7 WordPress plugin. Also, note that this video was made for the Stealth WordPress Theme, but implementing it is exactly the same in this theme.

### Full Width Page (video) - top

This is a simple page template you can use in order to have a full width page that doesn't include the theme's sidebar.

This video will show how to setup a full-width page.

### Sidebar Left - top

You can use this page template to place the sidebar appear on the left side of the page no matter how you've configured the location of your sidebar on your theme options page.

### Sidebar Right - top

You can use this page template to place the sidebar appear on the right side of the page no matter how you've configured the location of your sidebar on your theme options page.

### Redirect (video) - top

You may have noticed that weird Redirect page template, and may be wondering what it is and how it works? This video explains how this page template and works and why you'd want to use it for practical and SEO reasons.

## Slideshows

### Create Your First Slideshow (video) - top

This theme uses a custom post type "Slides" that you can then organize into "Slideshows" in order to accomplish an unlimited amount of slideshows throughout your website. This video will show you how it all works.

### Using the [slideshow] Shortcode (video) - top

The last video showed you how to create slideshows. Next, this video will show you how to put those slideshows into any page or post with a simple shortcode.

Sample Shortcode Usage:

    [slideshow category="your-slideshow-slug"]

See the Shortcodes section of the demo for a full overview of options.

### Example Content Slides - top

When you're creatine Slides for your slideshows, you can designate a slide as a "Content Slide" and then the slide will be comprised of whatever you put into the content area. Below are some example HTML snippets for creating slides similar to this theme's demo.

#### Right Content

    <div class="staged">

    	[frame_left]<img src="URL TO IMAGE" />[/frame_left]

    	<h1>Right Content</h1>

    	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec pharetra purus. Aliquam erat volutpat. Donec nulla libero, pharetra ut hendrerit eget, hendrerit vitae risus.

    	[button text="Learn More" link="http://www.google.com"]

    	[clear]

    </div><!-- .staged (end) -->

#### Left Content

    <div class="pad">

    	[frame_right]<img src="URL TO IMAGE" />[/frame_right]

    	<h1>Left Content</h1>

    	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec pharetra purus. Aliquam erat volutpat. Donec nulla libero, pharetra ut hendrerit eget, hendrerit vitae risus.

    	[button text="Learn More" link="http://www.google.com"]

    	[clear]

    </div><!-- .pad (end) -->

#### Full-Size Vimeo/YouTube Video

    [video file="http://vimeo.com/11178250" width="960" height=300"]

#### Staged Vimeo/YouTube Video

    <div class="pad">

    	<div class="alignleft">
    		[video file="http://vimeo.com/11178250" width="444" height="250"]
    	</div>

    	<h1>Staged Video</h1>

    	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec pharetra purus. Aliquam erat volutpat. Donec nulla libero, pharetra ut hendrerit eget, hendrerit vitae risus.

    	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec pharetra purus. Aliquam erat volutpat. Donec nulla libero, pharetra ut hendrerit eget, hendrerit vitae risus.

    	[button text="Learn More" link="http://www.google.com"]

    	[clear]

    </div><!-- .pad (end) -->

## Portfolios

### Create Your First Portfolio (video) - top

This video will take you through how portfolio items and portfolios work with this theme.

## Search Engine Optimization

### SEO Plugin Overview (video) - top

This theme comes with a built-in SEO plugin for controlling your titles and meta information. This plugin is optional, as it can be activated and deactivated from your theme options panel. This video will run you through what the plugin does, how it works, and give you some basic SEO information.

## Compatible Plugins

### WP-PageNavi - top

This theme is compatible with the WP-PageNavi plugin, which allows for nice looking page numbered buttons to appear at the bottom of your blog or portfolios. The plugin must be installed separately in order to achieve the same look show in this theme's live demo.

All you need to do is download the plugin, upload it, and activate it. You don't need to adjust any settings. It will just work.

You can download the official WP-PageNavi plugin here: WP-PageNavi

### Breadcrumb NavXT - top

This theme is compatible with the Breadcrumb NavXT plugin, which allows for breadcrumbs to be displayed throughout your site. The plugin must be installed separately in order to achieve the same look show in this theme's live demo.

All you need to do is download the plugin, upload it, and activate it. You can then configure it however you want on the plugin's settings page.

You can download the official WP-PageNavi plugin here: Breadcrumb NavXT

## Customization tips

### Using a Child Theme (video) - top

If you're wanting to customize your WordPress theme as WordPress intended, you should really look into using a child theme. This will make future updates to the theme much easier, and you can feel more safe that you're not actually editing any of the theme's core files.

This tutorial will show you how a child theme works.

### How to filter a Blog Page (video) - top

This tutorial will show you how to specify certain categories to be used or not used on your blog pages.

### How to use this theme as a classic blogging theme (video) - top

This tutorial will take you through how to use the blog page template as your homepage.

Keep in mind that this theme gives you the option to apply a blog to your homepage in conjunction with the other homepage elements. So, that would be a completely different approach form the method outlined in this video.

### How to show widgets on certain pages only (video) - top

Utilizing the Widget Logic WordPress plugin, you can make use of WordPress conditional tags in order to specify where widgets on your site will or won't show up at.

This video will show you how the Widget Logic plugin works.

### How to hide theme options pages from your client (video) - top

It can sometimes be confusing for your clients to see author-branded theme options pages in the WordPress admin panel. Fortunately, with the ThemeBlvd WordPress theme framework, it's extremely easy.

This video will show you how to hide the theme options panels for a ThemeBlvd theme.

### Sources and Credits

I would like to thank the following providers. This theme wouldn't have been possible without the hard work and dedication of all of them.

- jQuery
- Cycle
- jQuery validation
- Superfish
- prettyPhoto
- Nivo Slider

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on Theme Forest, you might consider visiting the forums and asking your question in the "Item Discussion" section. And if you like the theme, please go to your Theme Forest downloads page and give this product a 5 star rating :-) Thanks so much!

Jason Bobich and Theme Blvd

Go To Table of Contents