- About
- CSS Styles
- Structure
- JS Files
- Shortcodes
- Code snippets
- Languages
- Credits
- Changelog
- FAQ
- Support
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
- jQuery Easing v1.4.1 - https://gsgd.co.uk/sandbox/jquery/easing/,
- jQuery blockUI v2.70 - https://malsup.com/jquery/block/,
- jQuery bxSlider v3.0 - https://bxslider.com/,
- qTip2 - Pretty powerful tooltips, https://craigsworks.com/projects/qtip2/,
- jQuery FancyBox v1.3.4 - Simple and fancy lightbox alternative, http://fancybox.net/,
- jScrollPane v2.0.0 (minified) - http://jscrollpane.kelvinluck.com/,
- jQuery Nivo Slider v2.6 - http://nivo.dev7studios.com/.
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 |
facebook flickr rss skype soundcloud wordpress |
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
- Open Sans By Steve Matteson, Apache License, version 2.0
https://www.google.com/webfonts/specimen/Open+Sans, - Arial - default system font.
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.
- Sample Image: Rhiannon By apdk
https://www.flickr.com/photos/62337512@N00/3399346389/in/photostream/, - Sample Image: Rhiannon By apdk
https://www.flickr.com/photos/62337512@N00/3400158730/in/photostream/, - Sample Image: Rhiannon By apdk
https://www.flickr.com/photos/62337512@N00/3399355423/sizes/m/in/photostream/, - Sample Image: Small things, Big things By Shermeee
https://www.flickr.com/photos/smanography/2954872088/, - Sample Image: Image-18/11/2009 By Aih
https://www.flickr.com/photos/zenat_el3ain/4113932427/, - Sample Image: Daisies and other flowers By Tambako the Jaguar
https://www.flickr.com/photos/tambako/5821304111/, - Sample Image: Weymouth Front By alexbrn
https://www.flickr.com/photos/alexbrn/5638046946/, - Webtreats 8 Fabulous Dark Wood Texture Patterns 1 By webtreats
https://www.flickr.com/photos/webtreatsetc/4420862666/in/photostream/, - Sample Image: Lavender By Vincent van der Pas
https://www.flickr.com/photos/archetypefotografie/4958711873/in/photostream/, - Sample Image: Halle Kearney EXPLORE By Robby Mueller
https://www.flickr.com/photos/ro2b3yface/5623260278/in/photostream/, - Sample Image: plainsong By Robb North
https://www.flickr.com/photos/robbn1/3405147407/in/photostream/, - Sample Image: Falcon on Rue Drolet By Flat-Black 66
https://www.flickr.com/photos/flatblack66/4733463620/, - Sample Image: Bekohlicious! By 55Laney69
https://www.flickr.com/photos/hansel5569/6001781706/in/photostream/, - Sample Image: New kitchen radio By Johan Larsson
https://www.flickr.com/photos/johanl/6125230384/in/photostream/.
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