“FreshIdeas Wordpress & Facebook Wordpress mini-website”v1.0
“FreshIdeas Wordpress & Facebook Wp mini-website”
Created: 11/08/2011
By: web-gab.com&DZS
Email: contact@web-gab.com&contact@DZS
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. Thanks so much!
Please note - In the final package you'll find two folders:
- freshIdeas - Normal WP Theme
- fb-freshIdeas - Facebook WP theme
Table of Contents
- Intro
- Installation
- Customising the theme to look like in the preview
- Special features - templates, shortcodes
- Facebook mini-website set-up
- PSD Files
- Sources and Credits
- FAQ
- Other notes
A) Intro - top
FreshIdeas - Premium WordPress Theme - next generation WordPress theme. Developed under WordPress 3.1 . Works with 3.2.
B) Installation - top
download & unpack the .zip from your Downloads tab.
-
there are 2 methods of installing the theme in your WordPress site -
- Upload via WordPress
- access your wp-admin, go to Appearence > Themes > Install Themes > Upload
- select the freshIdeas.zip or the fb-freshIdeas.zip (for Facebook theme) from the theme folder ( from the unpacking of the main zip )
- activate
- done!
- Upload via FTP
- unpack the freshIdeas.zip or the fb-freshIdeas.zip (for Facebook theme) from the theme folder ( from the unpacking of the main zip )
- access your ftp, go to your wordpress installation / wp-content / themes and copy the extracted folder over there
- access your wp-admin, go to Appearence > Themes
- activate the FreshIdeas theme
- done!
- Upload via WordPress
A video of the installation process:
C) Customising the theme to look like in the preview - top
For best results, switch to the HTML editor.
Videos
Customize footer and the sidebar
Import Pages and Create Menu:
Creating Sliders:
Creating Pricelist Table:
Creating Portfolio:
D) Special Features - shortcodes, templates, widgets- top
How to add a slider into page?
- In the right menu of the page you have FreshIdeas Settings: width Fresh 3d carousel and Fresh Content slider. Create your desired slider.
- Go to your page and look for "Custom Fields" (see how to add Custom Fields in your page)
- Select freshIdeas_slider_3d , freshIdeas_slider_content or freshIdeas_phoenix
- in the Value section add the unique ID of the slider
- Press "Add Custom Field"
How to add page title in the top of the page?
- Go to your page and look for "Custom Fields" (see how to add Custom Fields in your page)
- Select freshIdeas_headline
- in the Value section type "yes" or any other message
- Press "Add Custom Field"
Shortcodes
1.Go to Page Editor swich to "Visual Editor", click where you want to add the shortcode and then look for this button:
2.This should appear when you click that button:
3.Now select your shortcode
4.This is an example of layout shortcode:
Layouts
| Shortcode Name | Example |
|---|---|
| [one_half] | [one_half]<p><strong>This is one-half of a row.</strong><br />Proin mattis vehicula..........</p>[/one_half] |
| [one_half_last] | [one_half_last]<p><strong>This is one-half of a row (last).</strong><br />Proin mattis .....</p>[/one_half_last] |
| [one_third] | [one_third]<p><strong> This is one-third of a row. </strong><br />Proin mattis vehicula .....</p>[/one_third] |
| [one_third_last] | [one_third_last]<p><strong>This is one-third of a row(last).</strong><br />Proin mattis ....</p>[/one_third_last] |
| [two_third] | [two_third]<p><strong>This is two-third of a row.</strong><br />Proin mattis vehicula .........</p>[/two_third] |
| [two_third_last] | [two_third_last]<p><strong>This is two-third last of a row.</strong><br />Proin mattis ...</p>[/two_third_last] |
| [one_fourth] | [one_fourth]<p><strong>This is one_fourth of a row.</strong><br />Proin mattis vehicula ...</p>[/one_fourth] |
| [one_fourth last] | [one_fourth last]<p><strong>This is one_fourth last of a row.</strong><br />Proin mattis ..</p>[/one_fourth last] |
| [three_fourth] | [three_fourth]<p><strong>This is three_fourth of a row.</strong><br />Proin mattis ..........</p>[/three_fourth] |
| [three_fourth_last] | [three_fourth_last]<p><strong>This is three_fourth last of a row.</strong><br />Proin ...</p>[/three_fourth_last] |
| [one_fifth] | [one_fifth]<p><strong>This is one_fifth of a row.</strong><br />Proin mattis ..........</p>[/one_fifth] |
[one_fifth_last] | [one_fifth last]<p><strong>This is one_fifth last of a row.</strong><br />Proin......</p>[/one_fifth_last] |
| [two_fifth] | [two_fifth]<p><strong>This is two_fifth of a row.</strong><br />Proin mattis ........</p>[/two_fifth] |
[two_fifth_last] | [one_fifth last]<p><strong>This is two_fifth_last of a row.</strong><br />Proin mattis.</p>[/two_fifth_last] |
| [three_fifth] | [two_fifth]<p><strong>This is three_fifth of a row.</strong><br />Proin mattis .......</p>[/three_fifth] |
[three_fifth_last] | [one_fifth last]<p><strong>This is three_fifth_last of a row.</strong><br />Proin mattis ....</p>[/three_fifth_last] |
Facebook special shortcodes
| Shortcode Name | Example | Image example |
|---|---|---|
| [fb_box] | [fb_box] [box] <h2>Fresh Solutions</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> <a href="#">Learn more</a> [/box] [box] <h2>Fresh Strategies</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> <a href="#">Learn more</a> [/box] [box_last] <h2>Fresh Leadership</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> <a href="#">Learn more</a> [/box_last] [/fb_box] |
 |
Slider Shortcodes
| Slider | Shortcodes | Image example |
|---|---|---|
| Content Slider |
[raw][content_sliderid="slider_id"][/raw] [raw][fresh_content_slider id="slider_id"][/raw] |
 |
| 3D Slider | [raw][3d_slider id="slider_id" bg="no"][/raw] [raw][fresh_3d_slider id="slider_id" bg="no"][/raw] |
 |
| Phoenix Gallery | [raw][phoenixgallery id="slider_id"][/raw] [raw][dzs_phoenixgallery id="slider_id"][/raw] |
 |
Other
| Shortcode Name | Example | Image example / description |
|---|---|---|
| [hr] | [hr] |
|
| [blog] | [blog posts_per_page="3"] [blog posts_per_page="3" cat="8,10"] |
|
| [sidebar] | [sidebar id="fourth-sidebar"] | You can use the following IDs: sidebar, secondary-sidebar , third-sidebar, fourth-sidebar |
| [title] | [title]Full Services Agency[/title] |
 |
| [clear] | [clear] |
|
| [cite] | [hr] [cite]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper posuere sem, vel varius diam tincidunt id. Curabitur purus est, mattis non rutrum a, volutpat.. [/cite] [hr] |
 |
| [cite_bg] | [cite_bg]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin lobortis, sem at varius tempus, nisi mauris semper arcu, et feugiat dolor est eu lacus. Aenean eget est in libero condimentum convallis et a lacus. Donec ut magna quam, vitae facilisis enim. Nunc velit lorem, ullamcorper non porttitor nec, tristique condimentum lectus. [/cite_bg] |
 |
| [teaser] | [teaser] <h2>We are the ones that can make your business fresh!</h2> <p>Our design studio cosists of professional staff specialized in creating beautiful and inteligent design</p> [/teaser] |
 |
| [box] | [box] <h2>Fresh Strategies</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin lobortis, sem at varius tempus, nisi mauris semper arcu...</p><a href="#">Learn more</a> [/box] |
 |
| [box_last] | [box_last] <h2>Fresh Strategies</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin lobortis, sem at varius tempus, nisi mauris semper arcu...</p><a href="#">Learn more</a> [/box_last] |
|
| [contactform] | [contactform] |
 |
| [location] | [location] <h4>London location</h4> <p>105A - Street Address, London (5000)<br />Contact: Anna Jones - <a href="#">anna@domain.com</a><br />Office Phone: (+33) 333-555-000</p> [location_img lat="47.157254" long="27.586858"] [/location] |
 |
| [location_last] | [location_last] <h4>Brussels location</h4> <p>105A - Street Address, London (5000)<br />Contact: Anna Jones - <a href="#">anna@domain.com</a><br />Office Phone: (+33) 333-555-000</p> [location_img lat="48.15027" long="11.62239"] [/location_last] |
|
| [location_img lat="" long=""] | [location_img lat="47.157254" long="27.586858" language="en"] |
 |
| [social_icons] | [social_icons] |
 |
| [pricelist] | [raw][pricelist id="yourId"][/raw] |
 |
| [portfolio] | [portfolio items_row="1" category="Portfolio 1 item per row"] [portfolio items_row="2" category="Portfolio 2 items per row"] [portfolio items_row="3" category="Portfolio 3 items per row"] |
 |
| [testimonial] | [testimonial author="John Smith" bg="#D7EBFA"]Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.... [/testimonial] |  |
| [dropcap] | [dropcap]P[/dropcap]roin mattis vehicula metus vitae lobortis. [dropcap1 color="#851018″]P[/dropcap1]roin mattis vehicula metus vitae lobortis. |  |
| [toggle] | [toggle title="Toggle Title" class="toggle1" titlebg="#3a00db" contentbg="#ffffff" title_color="#ffffff" content_color="#666666" ]Content Area[/toggle]
[toggle title="Toggle Title" class="toggle2" titlebg="transparent" contentbg="#ffffff" title_color="#ffffff" content_color="#666666" ]Content Area[/toggle] |
 |
| [warning] | [warning]Attention![/warning] |  |
| [success] | [success]Message sent![/success] |  |
| [error] | [error]Error!Please try again[/error] |  |
| [button] | [button url="#" grad1="#ff8d21" grad2="#821f00" textcolor="#fafafa"]The Button[/button] |
 |
| [video] | [vimeo id="2"] [youtube id="Rv0uMbCux5g"] |
 |
| [tabgroup][tab] | [tabgroup titlecolor="#222" titlebgcolor="#fdgfdf" contentcolor="#222" contentbgcolor="#fff" tabactivegrad1="#82cfff" tabactivegrad2="#d0f8ff"] [tab title="Tab1"]<h2>Tab1</h2>Lorem Ipsum is simply dummy…[/tab] [tab title="Tab2"]<h2>Tab2</h2>Tab 2 content goes here.[/tab] [tab title="Tab3"]<h2>Tab3</h2>Lorem Ipsum is simply …[/tab] [/tabgroup] |
 |
| table model 1 |
<table class="table_model1"> <thead> <tr> <th>Name</th> <th>Salary</th> <th>Extension</th> <th>Start Date</th> </tr> </thead>
<tbody>
<tr> <td>John Fred</td> <td>$3000</td> <td>234</td> <td>01/01/2012</td> </tr> </tbody> |
 |
| table model 2 |
<div class="table_model2">
<ul class="pt_title"> <li class="pt_2_blank"></li> <li>Trial</li> <li>Business</li> <li>Enhanced</li> <li>Platinum</li> </ul> <div class="clear"></div> <ul class=”pt_2_elements”> <li>Email Addresses</li> <li>Small Signs</li> <li>Bandwith</li> <li>File Storage</li> <li>Big Signs</li> <li>Users</li> <li>Price</li> </ul> <ul class="pt_2_list">
<li>5<li> <li><div class=”correct"></div></li> <li>2 Gb</li> <li>20 Gb</li> <li><div class="big_correct"></div></li> <li>10</li> <li>Free</li> </ul> Small correct: <li><div class="correct"></div></li> Small error: <li><div class="error"></div></li> Big Correct: <li><div class="big_correct"></div></li> Big Error: <li><div class="big_error"></div></li></div> |
 |
Another codes:
| Code | Image example |
|---|---|
[two_third] |
 |
[one_half] <h3>Lorem ipsum dolor sit amet</h3><p class="subtitle_services">Duis feugiat orci vitae libero facilisis euismod</p> [raw] <img src="http://localhost/wordpress/wp-content/themes/freshIdeas/images/green_grey/icons/ico_serv_01.gif" alt="picto" /> [/raw] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin lobortis, sem at varius tempus, nisi mauris semper arcu, et feugiat dolor est eu lacus. Aenean eget est in libero condimentum convallis et a lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin lobortis, sem at varius tempus, nisi mauris semper arcu, et feugiat dolor est eu lacus. Aenean eget est in libero condimentum convallis et a lacus. Donec ut magna quam, vitae facilisis enim. Nunc velit lorem, ullamcorper non porttitor nec, tristique condimentum lectus. [/one_half] |
 |
<h3>Contact us</h3> |
 |
Image Effects:
After you upload a photo swich to Visual editor: click on the image you want to insert the effect and select from the bar your effect:
And that's all !!
How to use Pretty photo:
- Insert your image
- Go to HTML Editor
- in your <a> tag type: rel="prettyPhoto[galleryName]"
- If you want to add a video just chage the "href" tag with your new URL
E) Facebook WP Mini-Website Setup - top
First thing you have to do is to upload the facebook mini-website on your server. This is a regular WP Theme, but with a different size, just to fit the facebook frame, and with less content and sections (while you are limited to a small frame, the informations shouldn't be as many as on the main website). Once you've uploaded the mini-site on your server, just write down the link ( e.g.: http://www.yourserver/fb/ ) to the website and follow the steps below.
NEW - 1. Using IFrame Tab (Facebook Recommends this method)- Login your Facebook Account.
- Go to the "Create Application" page: http://www.facebook.com/developers/createapp.php
- If you already verified your Facebook account, you can see the following page. Now enter a name for your app and if agreed to the terms, click "Create App":
(If you are not already verified your account, the above page will not display. First complete the verification and then follow the step 1. More details about verification: http://www.facebook.com/help/?faq=17580)
- So after the above step, the APP Settings page will open. Now click the "Facebook Integration" button to open integration page:
2. How to make Facebook iFrame WordPress Theme work with SSL on HostGator for free
Step 1
Facebook recently changed their terms to allow only secure https apps / iframes work within their pages. Since then, many guides have been posted about avoiding paying 100$ + because for some people the investment is not worth it. Here is one of them ->
If you have a HostGator host it's very simple to build your https link simply from the first mail you receive from them. So let's present the first mail data and the final secure link that facebook requires. We will presume the theme is located on our host in the facebooktheme folder.
First Mail: Your Control Panel: https://gator1444.hostgator.Your Domain: dzsthemes.net
Your Username: hmm23
Your Password: xxxxxxxxxxx
Final Secure URL:
https://secure1444.hostgator.
So let's analyze this a little https://secure1444.hostgator.
1.secure http protocol required for facebook
https://secure1444.hostgator.
2.control panel location without port and with secure instead of gator
https://secure1444.hostgator.
3.your username
https://secure1444.hostgator.
Step 2
Well, that was easy enough. All that remains is change the site url in WordPress. So go to your Dashboard > Settings > General and update both WordPress address and Site address to https://secure1444.hostgator.com/~hmm23/facebookthemeStep 3
All that remains is to update your secure canvas url inside the facebook app settings 
3. Now we remove the scroller
Go to Settings -> Advanced from left - top of the screen and make this changes:
4.Finishing (put the app to your facebook account page)
Click on "View App Profile Page:"
And then click to " "Add to My page"
Now go to your fan page and you can see the new IFrame Tab added and it should show the Template.
F) PSD Files - top
I've included 7 psd's (photoshop native files) with this theme:
- 01.fi_home.psd - Home Page
- 02.fi_about.psd - About Us Page
- 03.fi_services.psd - Services Page
- 04.fi_contact.psd - Contact Us Page
- fbml_home.psd - Facebook Mini Wbsite Page
- ipad_slider.psd - 3d Slider editable psd
Each PSD represents a page or element to make editing easier. All PSD files can be opened in Photoshop CS5 or earlier and contain well labelled layers and groups. All layers are grouped so that elements from sections are contained in a group labelled for ease of finding something very quickly.
All layer effects (styles) are included on the layers so that full editing and personalization is fully available.
You can add your custom screen to the ipad image slider, by editing the "smart object" layer of the ipad_slider.psd: Double click the small "smart object" icon 
, add your custom screenshot or image, save and that's it! )
G) Sources, Credits and Fonts - top
I've used the following images and fonts:
- Arial (should be on your system as standard font) and - MaxTF-Light
- Images used in the preview are from freedigitalphotos.net
- Images by Ambro
- Images by simonbouchard
- TWG - Retina Display Icon Set
H) FAQ - top
[ WordPress Admin ] How do I enable Custom Fields or Comments fields in the Post / Page edit screen?
Find the screen options field
and enable what fields you want
[ WordPress Admin ] How do I enable Custom Fields or Comments fields in the Post / Page edit screen?
Find the screen options field
and enable what fields you want
[ WordPress Admin ] What's a WordPress category ID ? How do I find the category ID ?
Go to Posts > Categories and you'll find the ID in the link that goes to the specific category, as shown in the below picture.
I) Other notes - top
Thank you!
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.