Cascade - Personal vCard WordPress Theme

Cascade is a minimalist personal vCard WordPress theme based on vertical menu tabs. Tabs are presenting pages content. Each page is one Cascade tab.

  • jQuery Powered
  • Dark and Light skin
  • Unlimited number of tabs
  • 8 tab colors
  • 10 tab icons
  • Custom tab backgrounds
  • 20 predefined page backgrounds
  • 10 predefined social icons
  • Fully customizable
  • Build-in portfolio with Lightbox
  • Build-in Google Map shortcode
  • Working Contact Form with configuration page under Settings submenu
  • Latest Tweets
  • Font Face Fonts
  • Full width template
  • Valid XHTML Code
  • Documentation Included

On this video you can see how to activate theme and import dummy-content to it (included - cascade-content.xml file).

To see how to add new tab/page please watch this video.

CSS Styles

The project uses the following cascade of template styles (in order):

  • style/jquerynivo-slider.css - default styles for slider,
  • style/jquery.qtip.css - default styles for tooltips (overwritten in base.css),
  • style/jquery.captify.css - default styles for label of images (overwritten in base.css),
  • style/jquery.jScrollPane.css - default styles for scrollbars (overwritten in base.css),
  • style/fancybox/jquery.fancybox.css - default styles for fancybox,
  • style.css - base styles for whole project.

Theme Structure

Project is divided by four main files: index.php, header.php, footer.php and functions.php


index.php

It's main project file which calls other. It contains get_header and get_footer calls. There is also call of the cascade_get function, which generate the tabs.


header.php

The file contains head section of the html tree structure and also head section of the page such as header logo area and header icons area (configurable via Theme Options page). You can find here also wp_head call.


footer.php

The file contains bottom part of the page, including Twitter notes and social icons (configurable via Theme Options page). You can find here also wp_footer call.


functions.php

The file contains definition of the functions of:

  • contact form, map, portfolio shortcodes,
  • ajax calls,
  • load javascript and css files,
  • base configuration,
  • cascade tab generation,
  • custom meta box and options pages.

Javascript Files

Plugins and library


Other files

  • script.js - script contains a few simple functions used in this project,
  • main.js - script contains a call jquery plugins which are used in main page,
  • cascade.js - script contains a call jquery plugins which are used in pages.

Plugins & Shortcodes

Slider

Theme supports Nivo Slider. You can use it by defining html code structure like below (div with slider id and images inside): 

<div class="slider">
	<img src="https://yourdomain.com/wp-content/uploads/2012/01/slider_img1.jpg" alt="" title="" width="290" height="320" class="alignnone size-full wp-image-740" />
	<img src="https://yourdomain.com/wp-content/uploads/2012/01/slider_img2.jpg" alt="" title="" width="290" height="320" class="alignnone size-full wp-image-737" />
	<img src="https://yourdomain.com/wp-content/uploads/2012/01/slider_img3.jpg" alt="" title="" width="290" height="320" class="alignnone size-full wp-image-738" />
</div>

Watch this sample implementation video for more.


Portfolio

Cascade have custom post type for portfolio. You can manage portfolio items in your admin area under Portfolio submenu.
Watch this sample implementation video for more.
Basically to put portfolio on your page, just use below shortcode: 

[cascade_portfolio]

There is two types of portfolio item available: image and video. To use video item, you need to set its url in Video URL (optional) textfield.

You can also display portfolio items from certain caregories. Examples: 

[cascade_portfolio category='image']
[cascade_portfolio category='video']
[cascade_portfolio category='image,video']

You can also turn filtering menu on/off with filtering attribute, acceptable values: 0/1. By default it's set to 1 and displays filtering options. Examples:

[cascade_portfolio filtering='1']
[cascade_portfolio filtering='0']

Contact form

This project includes a contact form ready for use.
All you need is to configure some constants located under Settings submenu (Cascade Contact Form Options position). Then you can use in page content below shortcode: 

[cascade_contact_form]

Google Map

Cascade includes also Google Map shortcode.
It can be added to the page with [cascade_map] shortcode. Example: 

[cascade_map width="298" height="175" lat="29.760193" lng="-95.36939" marker_lat="29.760193" marker_lng="-95.36939"]

Available shortcode parameters:

Parameter Default value Description
id map Specifies the identifier of the map. Should be unique for each map, if they are displayed in the same page.
width 298 Specifies the width of the map in pixels.
height 150 Specifies the height of the map in pixels.
lat 29.760193 Specifies the latitude coordinate of the map center point.
lng -95.36939 Specifies the longitude coordinate of the map center point.
marker_lat 29.760193 Specifies the latitude coordinate of the map marker.
marker_lng -95.36939 Specifies the longitude coordinate of the map marker.
zoom 10 Specifies the zoom value for the map.

Social icons

There is shortcode which help to create social icon or social icons list with links to social profiles.
To add for example Twitter icon, please use: 

[cascade_social_list]
	[cascade_social_icon type='twitter' url='https://twitter.com/anna.brown']Twitter Profile[/cascade_social_icon]
[/cascade_social_list]

You can add more icons on one list: 

[cascade_social_list]
	[cascade_social_icon type='twitter' url='https://twitter.com/anna.brown']Twitter Profile[/cascade_social_icon]
	[cascade_social_icon type='facebook' url='https://facebook.com/anna.brown']Facebook Profile[/cascade_social_icon]
[/cascade_social_list]

Available cascade_social_icon shortcode parameters:

Parameter Default value Possible values Description
type twitter facebook
flickr
google
linkedin
rss
skype
soundcloud
twitter
wordpress
xing 		Specifies the type of the icon.
url - - Specifies the url which will be displayed next to the icon.

Career

There is shortcode which help to create career list.
Example: 

[cascade_career_list header='Education']
	[cascade_career_list_item header='Oxford Univeristy']
		Period: 2001 - 2006
		Qualification: Bachelor of Eductaion (Arts)
	[/cascade_career_list_item]
	[cascade_career_list_item header='North Hill High School']
		Period: 1997 - 2001
		Qualification: A Level
	[/cascade_career_list_item]
[/cascade_career_list]

For cascade_career_list and cascade_career_list_item shortcodes you can define header text using header parameter.


Skill list

There is shortcode which help to create skill list.
Example: 

[cascade_skill_list header='Photography']
	[cascade_skill_list_item header='Photography' stars='4']5 years experience[/cascade_skill_list_item]
[/cascade_skill_list]

For cascade_skill_list and cascade_skill_list_item shortcodes you can define header text using header parameter.

For cascade_skill_list_item you can additionaly define stars parameter which will sets the number of stars under skill item (can be between 0 and 5).

Available cascade_skill_list_item shortcode parameters:

Parameter Default value Possible values Description
header - - Specifies the header text of the skill list item.
stars 5 0
1
2
3
4
5 		Specifies the the number of stars under skill item.

Code snippets

Contact page - contact details

<h3>Anna Brown Studio</h3>
<p>
	1370 Northwood, 15<br/>
	Houston, TX72150, United States Of America
</p>
<ul class="no-list contact-list">
	<li class="contact-list-phone"><span>Phone:</span> 1.800.353.252</li>
	<li class="contact-list-fax"><span>Fax:</span> 1.800.353.253</li>
	<li class="contact-list-mail"><span>Mail:</span> [email protected]</li>
</ul>

Languages

Theme supports translations. To create your language translation, please download this usefull tool Poedit. Then find in languages directory default.po file and open it in Poedit. Translate appropriate texts and save the file giving it appropriate name (check here for more). For example French: fr_FR, German: de_DE, etc.
The last step is setting the language in wp-config.php file. Please open it and find (or add if it doesn't exists) below line: 

define ('WPLANG', '');
Then set your language, for example French: 
define ('WPLANG', 'fr_FR');
That's all.

Credits

Fonts used


Icons

All icons by QuanticaLabs. Icons are an integral part of this template, please do not use it separately for other purposes.


Images

All images under Creative Commons Attribution 2.0 Generic for commercial use.
No Derivative Works or Share-Alike conditions waived by permission of copyright holders.

Version history

20.08.2021, ver. 8.2

  • New 'Send From' option added under email config.
  • Minor code improvements.
cascade-content.xml
comments.php
comments-functions.php
contact-form-options.php
form-functions.php
functions.php
header.php
shortcodes.php
style.css
js/cascade.js
js/main.js
languages/default.mo
languages/default.po

31.12.2020, ver. 8.1

  • Fix for animations easing issue.
  • Minor code improvements.
header.php
js/jquery.easing.js
js/jquery.fancybox.js
languages/default.mo
languages/default.po

18.08.2020, ver. 8.0

  • Compatibility with WordPress 5.5 added.
  • Minor code improvements.
functions.php
plugins_activator.php
style.css
admin/js/cascade_admin.js
admin/style/style.css
js/cascade.js
js/jquery.ba-bbq.min.js
js/jquery.blockUI.js
js/jquery.captify.js
js/jquery.fancybox.js
js/jquery.nivo.slider.js
js/jquery.qtip.min.js
js/main.js
languages/default.mo
languages/default.po
plugins/cascade_portfolio.zip
plugins/cascade_shortcodes.zip
plugins/cascade_twitter.zip
style/jquery.qtip.css
--- new files ---
js/jquery.isotope-packed.js
--- removed files ---
js/jquery.isotope.min.js

28.05.2019, ver. 7.9

  • Styling improvements for Gutenberg blocks.
  • Security improvements.
  • Custom post types functionality now included as plugins.
  • Prefixes added to function names.
  • Translation improvements.
blog-full.php
blog-widget.php
cascade-blog-category-walker.php
cascade-content.xml
comments.php
comments-form.php
comments-functions.php
contact-form-options.php
form-functions.php
functions.php
header.php
index.php
meta-box.php
pagination.php
shortcodes.php
sidebar-footer.php
single-blog-full.php
single-blog-widget.php
style.css
template-full-width.php
theme-options.php
admin/js/cascade_admin.js
admin/style/style.css
js/cascade.js
js/cascade_comment_form.js
js/cascade_contact_form.js
js/main.js
js/script.js
languages/default.mo
languages/default.po
--- new files ---
class-tgm-plugin-activation.php
plugins-activator.php
--- removed files ---
portfolio.php
--- new directories ---
plugins/
--- removed directories ---
libraries/

04.01.2019, ver. 7.8

  • Minor code fixes.
form-functions.php
functions.php
style.css
admin/functions.php
languages/default.mo
languages/default.po

21.07.2016, ver. 7.7

  • Fix for Google Maps component – Google API key is now required.
  • Email send function changed to wp_mail().
  • Minor code fixes.
blog-full.php
blog-widget.php
cascade-ajax.php
cascade-blog-category-walker.php
comments.php
comments-functions.php
contact-form-options.php
form-functions.php
functions.php
header.php
meta-box.php
pagination.php
portfolio.php
shortcodes.php
theme-options.php
js/cascade_contact_form.js
languages/default.mo
languages/default.po
--- removed files ---
phpMailer directory

24.05.2016, ver. 7.6

  • Fix for portfolio images issue on Firefox.
  • Minor code and style fixes.
functions.php
shortcodes.php
style.css

24.02.2015, ver. 7.5

  • Fix for comments pagination
js/cascade_comments_form.js

22.05.2014, ver. 7.4

  • Fix for displaying single posts, when the AJAX option is disabled
index.php

21.02.2014, ver. 7.3

  • Fix for email template option in Cascade Contact Form Options panel
  • Update of jQuery blockUI plugin
contact-form-options.php
functions.php
js/jquery.blockUI.js
js/jquery.mousewheel.js

14.06.2013, ver. 7.2

  • Added filtering to portfolio (based on isotope jQuery plugin)
  • Twitter widget update (API 1.1 compatibility)
portfolio.php
functions.php
sidebar-footer.php
theme-options.php
style.css
js/cascade.js
js/main.js
js/jquery.isotope.min.js

08.05.2013, ver. 7.1

  • Fix for CSS image alignment and the text wrapping around images
  • Small fix for contact form SMTP settings
style.css
shortcodes.php
js/cascade.js

13.02.2013, ver. 7.0

  • Fix for home page setting issue
js/theme.js

29.01.2013, ver. 6.9

  • Support for YouTube and Vimeo videos in portfolio on iPhone and iPad

12.10.2012, ver. 6.8

  • Fix for Twitter feed issue

02.10.2012, ver. 6.7

  • Update for blog and full width templates (was loaded without header and footer when permalinks was set to 'postname')
  • Fix for 'Not found' title issue

31.08.2012, ver. 6.6

  • Comments settings improvements

30.08.2012, ver. 6.5

  • Fix for not working external urls in top menu

29.08.2012, ver. 6.4

  • Fix for not working social footer icons

24.08.2012, ver. 6.3

  • Support for internal links

23.08.2012, ver. 6.2

  • .htaccess file for non-WPMU sites - fix 404 error issue (included in documentation directory)

21.08.2012, ver. 6.1

  • Update for dummy-content xml file and small issues fixes

20.08.2012, ver. 6.0

  • Full width template for pages
  • No-ajax version IE bug fix

13.08.2012, ver. 5.2

  • Fix for links in menu
  • Portfolio issue fix (descriptions won't be displayed)

11.08.2012, ver. 5.1

  • Background map (uMapper) issue fix

08.08.2012, ver. 5.0

  • Url structure improvements
  • SEO improvements
  • Possibility to disable ajax (doesn't work for blog template yet)
  • Custom background bug fix

01.08.2012, ver. 4.2

  • The newest Contact Form 7 plugin compatibility
  • Support for uMapper map background
  • Few js and css improvements

21.06.2012, ver. 4.1

  • Highlight for selected menu position added

17.05.2012, ver. 4.0

  • Comments feature for blog

16.05.2012, ver. 3.8

  • Blog page issue fix (post won't load when Contact Form 7 plugin is activated)

15.05.2012, ver. 3.7

  • Small js improvements

07.05.2012, ver. 3.6

  • Lost home page setting while saving/updating page issue fix

04.05.2012, ver. 3.5

  • Ability to set one of the pages as home

27.04.2012, ver. 3.4

  • Not opening tab issue fix

16.04.2012, ver. 3.3

  • Contact Form 7 compatibility improvement
  • Small issue fixes

04.04.2012, ver. 3.2

  • New feature - Leave hover state on open
  • Menu items aren't imported bug fix

03.04.2012, ver. 3.1

  • Bug fix - wrong category count in "Blog & widget area" template

02 April 2012, ver. 3.0

  • Blog added,
  • 2 Blog templates: full width and with widget area,
  • New shortcodes: Social icons, Career, Skill list,
  • 2 Menus added (Header Menu Top & Header Menu Bottom),
  • 2 Widget areas added (Blog & Footer),
  • Support for language translations added,
  • Support for iframes in portfolio added,
  • Options to set SMTP port and SMTP secure in Contact Form settings,
  • Ability to set Twitts number in footer added,
  • Ability to disable top bar added,
  • CSS styles improvements

22 March 2012, ver. 2.2

  • Contact Form 7 support

21 March 2012, ver. 2.1

  • Paging fix (pages won't load when there was pagination page with number the same as page id)

13 March 2012, ver. 2.0

  • Light skin added,
  • 12 page backgrounds added,
  • External URL, External URL taret options for portfolio item added,
  • Custom tab image URL, Custom tab image hover URL options for pages added,
  • Support for vimeo videos in portfolio added,
  • jquery.ba-bqq.min.js plugin added,
  • Added 5 new small social icons (10 icons of this type included on the project),
  • Added 8 new big social icons (10 icons of this type included on the project).

06 March 2012, ver. 1.0

  • First release

FAQ

Question:
I’m getting 404 error when entering url in browser address bar but when I’m clicking on the one of cascade tabs, theme works good. What could be wrong?

Answer:
Probably you’re not using WordPress multisite feature (WPMU). Please open documentation directory (you’ll find it in downloaded from ThemeForest zip archive) and find inside file named htaccess. Please rename it to .htaccess and upload that file into your home WordPress directory (at the same level, on which you have wp-admin, wp-content, wp-includes directories).

If you already have .htaccess file on your server, please put below code into it:

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]

# add a trailing slash to /wp-admin
RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule  ^[_0-9a-zA-Z-]+/(wp-(content|admin|includes).*) $1 [L]
RewriteRule  ^[_0-9a-zA-Z-]+/(.*\.php)$ $1 [L]
RewriteRule . index.php [L]

Question:
How can I use internal link? For example I would like to have a link to 3rd tab in the content of 1st tab.

Answer:
Please create the link as always but add #! before page name:

<a href='#!/resume'>Resume Tab</a>
Then you'll need to add appropriate class named link:
<a class='link' href='#!/resume'>Resume Tab</a>
That's all - now your link will open tab without page reload. You can of course use also full url with domain:
<a class='link' href='https://yourdomain.com/#!/resume'>Resume Tab</a>

Support

Support for all our items is conducted through our Support Forum.
Please register an account and search the forum or create a new topic, we'll answer as soon as possible.

We're in GMT +1 and we aim to answer all questions within 24 hours (Monday – Friday). In some cases the waiting time can be extended to 48 hours.
Support requests sent during weekends or public holidays will be processed on next Monday or the next business day.


Need HTML (non - WordPress) version?

There is also HTML version of this theme available. You can find it here: Cascade - Personal vCard Template

© 2021 QuanticaLabs