Cards WordPress Theme

This is Cards WordPress Theme documentation v.1 by Template Path team.

Introduction - #back to top


Cards is a Wordpress theme to create a website for any type of portfolio based website. Cards is a clean responsive wordpress theme comes with Multi functionality theme options its allows you to show your professional skills, experties and work attitude. The theme comes with the option of contact form to allow users to contact you.

Cards is fully compatible with latest version of wordpress.

Upload and Activation - #back to top




1. Navigate to Appearance → Themes in your WordPress admin dashboard.

2. Click the Add New button at the top of the page then go for the Theme Upload option.

3. For the file upload, pick Theme Files / cards.zip in the theme package downloaded from ThemeForest and click Install Now.

4. Click Activate once the upload has finished and you're ready for the next step: Installing the Plugins.

Installing the Plugins - #back to top


Right after the theme was activated, a notification at the top of the screen will suggest to continue with the installation of the plugins recommended for getting the best our of your theme.

1. Click 'Begin installing plugins' and select all the plugins in the list.

2. Activate the Plugins you just installed.

Dummy Content Import - #back to top


Cards comes with one click demo installation exactly like the original demo. Just click on Import button and your demo site is ready.

1. In your Wordpress admin dashboard, navigate to Appearance → Theme Options → Utility.

2. From the page you can see the available options, click Import Demo Settings

3. Wait until you see the message Have Fun

Homepage & Blog — Setup - #back to top


To setup the blog page, in your WordPress admin panel, navigate to Settings → Reading.

Assuming you already have a page named "Home", for the Front page display, select "Home" and choose your "News" page as the Posts page. This is what you should be seeing on your screen from left side.

Shorcodes and Settings - #back to top


To insert the shortcode in any page you will click the visual tab in the wordpress editor.

In editor at the top with tinymc icons you would see [ ] icon please click on it to see all shortcode visual editor.

Complete List of Shortcodes - #back to top


You can create section by inserting the following shortcode into page editor
[section container="false" classes="section-page" id="page-contact"][/section]

section shortcode is for each section except home page. you would place other shortcodes inside this means among the start and ending of the section shortcode.

For section shortcode you could set container, extra class, and anchor for book marking.

Below is the shortcode for Heading.

[heading title="Blog"]

For Heading Shortcode you have to give title and extra class if any.

The About shortcode is for showing you personal data. Like profile image, title, text summry and social links.

The generated shortcoe would seems like as under

[bunch_about profile_img1="http://wp1.themexlab.com/wp/cards/wp-content/uploads/2015/12/profile2.jpg" profile_img2="http://wp1.themexlab.com/wp/cards/wp-content/uploads/2015/12/profile.jpg" title_part_1="Hi, i'm " title_part_2="John Rex!" designation="Web Designer & Developer" summry="Rm91bmRlciUyMG9mJTIwRG90UmV4LiUyMFByb2Zlc3Npb25hbCUyMFVJJTJGVVglMjBkZXNpZ25lciUyMGFuZCUyMHdlYiUyMGRldmVsb3BlciUyMGJhc2VkJTIwb24lMjBMb25kb24uJTIwU29tZXRpbWVzJTIwd29ya3MlMjBhcyUyMGElMjBmcmVlbGFuY2VyLg==" email=" john@dotrex.co" phone="+123 456 789 111" show_icons="true"]

visual shortcode would be like below

The Resume buttons would show buttons for resume.

The generated shortcoe would seems like as under

[bunch_resume_buttons btn1_link="#" btn1_text="Download my resume" btn2_link="#page-contact" btn2_text="Get in Touch"]

Shortcode visual part looks like this.

The Education shortcode is for displaying the education. you could enter the education data from theme option. And could show by displaying this shortcode.

[bunch_education title="Education"]

The visual part looks like below

The Work shortcode is for displaying the Work experience. you could enter work experience from themeoptions.

[bunch_work title="Work Experience"]

Visual part looks like below

The shortcode is for displaying the testimonials.

[bunch_testimonial testimonial_icon="fa fa-comments" testimonial_title="Testimonials" num="3" text_limit="38" cat="home-testimonial" sort="date" order="ASC"]

The visual part will be like below.

The Resume Footer shortcode is for displaying resume footer.

[bunch_resume_footer btn1_link="#" btn1_text="Download my resume" btn2_link="#" btn2_text="Get in Touch" quote="'The best way to predict the future is to create it' Peter Drucker"]

The visual part will be like below.

The shortcode is for displaying the skills. which is comming from a custome post type.

[bunch_skills num="3" sort="date" order="ASC"]

the visual part will be like below.

The shortcode is for displaying the portfolio which are comming from portfolio custom post type.

[bunch_portfolio num="9" cat="home-portfolio" sort="date" order="DESC"]

The visual part will look like below.

The Blog shortcode is for displaying the blog posts with pagination.

[bunch_blog num="4" sort="date" order="DESC"]

The visual part of shortcode will look like below.

The Google map shortcode is for embedding google map. you could embed the iframe by inserting the iframe code of map.

[bunch_google_map embed_iframe="JTNDaWZyYW1lJTIwc3JjJTNEJTIyaHR0cHMlM0ElMkYlMkZ3d3cuZ29vZ2xlLmNvbSUyRm1hcHMlMkZlbWJlZCUzRnBiJTNEITFtMTghMW0xMiExbTMhMWQ4MzUyLjk4NTU2ODY1MTkxNSEyZC0wLjEyOTA1OTk0Nzk3MjIyODkyITNkNTEuNTA2NjU3NTM3OTA4MTIhMm0zITFmMCEyZjAhM2YwITNtMiExaTEwMjQhMmk3NjghNGYxMy4xITNtMyExbTIhMXMweDQ3ZDhhMDBiYWYyMWRlNzUlMjUzQTB4NTI5NjNhNWFkZGQ1MmE5OSEyc0xvbmRvbiUyNTJDJTJCVUshNWUwITNtMiExc3B0LUJSITJzYnIhNHYxNDQzMTI4MTgxOTUzJTIyJTIwaGVpZ2h0JTNEJTIyMjUwJTIyJTIwc3R5bGUlM0QlMjJib3JkZXIlM0EwJTIyJTIwYWxsb3dmdWxsc2NyZWVuJTNFJTNDJTJGaWZyYW1lJTNF"]

The visual part of shortcode will look like below.

The contact info shortcode is for displaying the contact info. you could show address, phone and email by this shortcode.

[bunch_contact_info address="NDUxJTIwTG9yZW0lMjBJcHN1bSUyQyUyMExvbmRvbiUyMC0lMjBVaw==" fone="+61 3 8376 6284" email="john.Rex@dotrex.com"]

The visual part of shortcode will look like below.

For contact form we use contact form 7 plugin s shortcode

[contact-form-7 id="98" title="Cards Contact Form"]

The visual part of shortcode will look like below.

Complete code Page wise - #back to top


Below is the complete code of home page
[bunch_about profile_img1="http://wp1.themexlab.com/wp/cards/wp-content/uploads/2015/12/profile2.jpg" profile_img2="http://wp1.themexlab.com/wp/cards/wp-content/uploads/2015/12/profile.jpg" title_part_1="Hi, i'm " title_part_2="John Rex!" designation="Web Designer & Developer" summry="Rm91bmRlciUyMG9mJTIwRG90UmV4LiUyMFByb2Zlc3Npb25hbCUyMFVJJTJGVVglMjBkZXNpZ25lciUyMGFuZCUyMHdlYiUyMGRldmVsb3BlciUyMGJhc2VkJTIwb24lMjBMb25kb24uJTIwU29tZXRpbWVzJTIwd29ya3MlMjBhcyUyMGElMjBmcmVlbGFuY2VyLg==" email=" john@dotrex.co" phone="+123 456 789 111" show_icons="true"]

Below is the Complete code for resume page.

[section container="false" classes="section-page" id="page-resume"][heading title="Resume"][bunch_resume_buttons btn1_link="#" btn1_text="Download my resume" btn2_link="#page-contact" btn2_text="Get in Touch"][bunch_education title="Education"][bunch_work title="Work Experience"][bunch_testimonial testimonial_icon="fa fa-comments" testimonial_title="Testimonials" num="3" text_limit="38" cat="home-testimonial" sort="date" order="ASC"][bunch_resume_footer btn1_link="#" btn1_text="Download my resume" btn2_link="#" btn2_text="Get in Touch" quote="'The best way to predict the future is to create it' Peter Drucker"][/section]

Below is the fullcode of skill page

[section container="false" classes="section-page" id="page-skills"][heading title="SKILLS"][bunch_skills num="3" sort="date" order="ASC"][/section]

Below is the full code of Portfolio page.

[section container="false" classes="section-page" id="page-portfolio"][heading title="Portfolio"][bunch_portfolio num="9" cat="home-portfolio" sort="date" order="DESC"][/section]

Below is the full code of Blog page.

[section container="false" classes="section-page" id="page-blog"][heading title="Blog"][bunch_blog num="4" sort="date" order="DESC"][/section]

Below is the complete code of contact page.

[section container="false" classes="section-page" id="page-contact"][heading title="Contact"][bunch_google_map embed_iframe="JTNDaWZyYW1lJTIwc3JjJTNEJTIyaHR0cHMlM0ElMkYlMkZ3d3cuZ29vZ2xlLmNvbSUyRm1hcHMlMkZlbWJlZCUzRnBiJTNEITFtMTghMW0xMiExbTMhMWQ4MzUyLjk4NTU2ODY1MTkxNSEyZC0wLjEyOTA1OTk0Nzk3MjIyODkyITNkNTEuNTA2NjU3NTM3OTA4MTIhMm0zITFmMCEyZjAhM2YwITNtMiExaTEwMjQhMmk3NjghNGYxMy4xITNtMyExbTIhMXMweDQ3ZDhhMDBiYWYyMWRlNzUlMjUzQTB4NTI5NjNhNWFkZGQ1MmE5OSEyc0xvbmRvbiUyNTJDJTJCVUshNWUwITNtMiExc3B0LUJSITJzYnIhNHYxNDQzMTI4MTgxOTUzJTIyJTIwaGVpZ2h0JTNEJTIyMjUwJTIyJTIwc3R5bGUlM0QlMjJib3JkZXIlM0EwJTIyJTIwYWxsb3dmdWxsc2NyZWVuJTNFJTNDJTJGaWZyYW1lJTNF"][bunch_contact_info address="NDUxJTIwTG9yZW0lMjBJcHN1bSUyQyUyMExvbmRvbiUyMC0lMjBVaw==" fone="+61 3 8376 6284" email="john.Rex@dotrex.com"][contact-form-7 id="98" title="Cards Contact Form"][/section]

Blog — Writing New Posts - #back to top


To start adding posts to your blog, navigate to Posts → Add New.

1. Start filling in the blanks: enter your post title, write your actual body content in the main post editing box below it.

2. As needed, select a category, add tags, and make other selections from the sections below the post. 3. When your post is ready, click Publish.

Deep Diving: Since creating and editing pages requires basic WordPress knowledge, we won't cover it in detail. If you're new to WordPress, you may find the following resources valuable: How to Create a new Post How to Edit and Existing Post Using Categories and Tags

Custome Post - types #back to top


Below are the cutome post types which you could add data in theme.

Add portfolio data in portfolio custome post type.



Add Skill s data in skill custome post type.



Add Testimonial s data in Testimonial custome post type.



Theme Options - #back to top


We listed below all our theme options. You can learn how we used Cards WordPress theme options in below;

In General Settings Panel; In general settings you could choose the show/hide preloader and name and designation for preloader. And last you could list out the order of your pages for menu.
In Header Settings Panel; Favicon option, and header css could be set in the pannel.
In SEO Settings Panel; Add your site meta tags for example; title, desc and tags. Also you can control archives pages.
In Education Settings Panel;In education Settings pannel you could add and edit the education data.
In Work Settings Panel;In Work Settings pannel you could add and edit the Work Experience data.
In Page Settings Panel; Page settings is for control or blog pages like Search page, Autor page and archive page.
In Sidebar Settings Panel; Add unlimited widgets area to the your theme.
In Social Media Settings Panel; Add your social media profiles and select your social media icons.
In Font Settings Panel; Control your own typograhy elements for example; body fonts, heading fonts and font sizes.
In Utility Settings Panel; Import export and demo import options here.

Files & Sources - #back to top


Included JavaScript

These are the various attribution inks to the Javascript files included or modified to work with in this theme.

Support Help - #back to top


Please remember you have purchased a very affordable theme and you have not paid for a full-time web design agency. Occasionally we will help with small tweaks, but these requests will be put on a lower priority due to their nature. Support is also 100% optional and we provide it for your connivence, so please be patient, polite and respectful.

Please visit our support forum or ask question muhibbur@gmail.com

Support for my items includes:
  • * Responding to questions or problems regarding the item and its features
  • * Fixing bugs and reported issues
  • * Providing updates to ensure compatibility with new software versions
Item support does not include:
  • * Customization and installation services
  • * Support for third party software and plug-ins
Before seeking support, please...
  • * Make sure your question is a valid Theme Issue and not a customization request.
  • * Make sure you have read through the documentation and any related video guides before asking support on how to accomplish a task.
  • * Make sure to double check the theme FAQs.
  • * Try disabling any active plugins to make sure there isn't a conflict with a plugin. And if there is this way you can let us know.
  • * If you have customized your theme and now have an issue, back-track to make sure you didn't make a mistake. If you have made changes and can't find the issue, please provide us with your changelog.
  • * Almost 80% of the time we find that the solution to people's issues can be solved with a simple "Google Search". You might want to try that before seeking support. You might be able to fix the issue yourself much quicker than we can respond to your request.
  • * Make sure to state the name of the theme you are having issues with when requesting support via ThemeForest.

Version History - #back to top


You can find the version history (changelog.txt) file on Cards-full.zip folder or you can check changelog on theme sale page.

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 ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.