Peekaboo

WordPress theme documentation

Before you get started, please be sure to read this documentation file. We outline all the information you need to use Peekaboo theme. If you have any questions that are beyond the scope of this help file, please post your question in our dedicated support website .Thank you for purchasing Peekaboo theme! We would love to see your website and what you come up with by using this theme.

Getting Started

Peekaboo theme can only be used with a working version of WordPress. We strongly recommend you to do a fresh WordPress installation and integrate your content into the pages accordingly. This theme has specific settings that might conflict with your current WordPress themes, plugins, database, etc.

If you need help installing WordPress, follow the documentation in WordPress Codex . Below are some useful WordPress information to help you get started:


WordPress Installation

  1. Download and unzip the WordPress package if you haven't already.
  2. Create a database for WordPress on your web server, as well as a MySQL user who has all privileges for accessing and modifying it.
  3. (Optional) Find and rename wp-config-sample.php to wp-config.php , then edit the file (see Editing wp-config.php ) and add your database information.
  4. Upload the WordPress files to the desired location on your web server:
    • If you want to integrate WordPress into the root of your domain (e.g. http://example.com/ ), move or upload all contents of the unzipped WordPress directory (excluding the WordPress directory itself) into the root directory of your web server.
    • If you want to have your WordPress installation in its own subdirectory on your web site (e.g. http://example.com/blog/ ), create the blog directory on your server and upload the contents of the unzipped WordPress package to the directory via FTP.
    • Note: If your FTP client has an option to convert file names to lower case, make sure it's disabled.
  5. Run the WordPress installation script by accessing the URL in a web browser. This should be the URL where you uploaded the WordPress files.
    • If you installed WordPress in the root directory, you should visit: http://example.com/
    • If you installed WordPress in its own subdirectory called blog , for example, you should visit: http://example.com/blog/

More detailed instructions follow.


Theme Installation

The first step in getting started with our themes is installing them. There are two ways to do this, Theme Install from Administration Panels and FTP . Sometimes installation via Administration Panels may not work for you, usually because of a server restriction such as memory. In that case, you will need to install your theme manually via FTP .

Adding New Themes using the Administration Panels

  1. Log in to the WordPress Administration Panels .
  2. Select the Appearance panel, then Themes .
  3. Select Install Themes .
  4. Use the Upload link in the top sub-menu to upload peekaboo.zip that you have previously downloaded to your machine.
  5. Wait until the theme is uploaded and installed.
  6. Activate the theme.

Adding New Themes Manually (FTP)

To add Peekaboo Theme to your WordPress installation, follow these basic steps:

  1. Download Peekaboo theme archive and extract the files it contains.
  2. There will be a few folders such as documentation and PSDs. Take note of the folder of your theme name. You will only need to upload peekaboo folder.
  3. Start up your FTP client. We recommend using FileZilla since it is free and cross-platform.
  4. Find the directory where the WordPress installed. It is usually located at /public_html/wp-content/themes/
  5. Upload the peekaboo directory to your host server.
  6. Follow the instructions below for selecting the new Theme.

Selecting the Active Theme

To select Peekaboo theme for your site:

  1. Log in to the WordPress Administration Panels .
  2. Select the Appearance panel, then Themes .
  3. From the Available Themes section, click on Peekaboo theme.
  4. A preview of the Theme will be shown.
  5. To activate the Theme click the Activate "Peekaboo" link in the top right.

Your selection should immediately become active.

Common 'Are you sure you want to do this?' issue

If you get the “Are You Sure You Want To Do This” message when installing the theme via WordPress Administration Panels, please make sure that you only upload the theme file, not the whole package. If the error message persists, install the theme via FTP, or increase your max_execution_time , max_input_time , and memory_limit via the php.ini . Ask your hosting company if you are not comfortable modifying php.ini .


What’s Included in the Package

When you purchase our theme from Themeforest, you need to download the theme files from your Themeforest account. Navigate to your downloads tab on Themeforest and find the theme. Click the download button to see the two options. The Main Files contain everything, and the Installable WordPress Theme is the WordPress theme file only. Below is a full list of what is included along with a brief description of each item:

  • Peekaboo Theme Folder – contains the peekaboo.zip and peekaboo-child.zip WordPress theme. The child theme is only for users who make code changes.
  • PSD Folder – contains all the layered PSD files for those developers or designers who want to customize the design further.
  • Licensing Folder – contains the licensing files, this is not your purchase code that you need to download from Themeforest.

How To Update Theme

When a new version of your theme become available you will get an email notification from Themeforest. You can also use Envato Toolkit Plugin . You will receive notification in your WordPress Dashboard once the theme is updated. Please read the changelog so you can see what was modified in the new version.

We recommend you to keep always your theme updated, to ensure that it is fully compatible with latest WordPress version available.

Backup your WordPress site before updating

We strongly recommend you to backing up your database and WordPress files . That way you will not lose any modifications and customizations that you made in your theme.

You can update your theme via FTP or WordPress Administration Panels. See the information below for each method.

Download theme files

  1. Log into your Envato account and go find Peekaboo from downloads tab.
  2. Click the download button next to it and download the Installable WordPress Theme .

Follow the instructions below for updating via FTP or WordPress Administration Panels.

Uploading the new version

The easiest way to update your theme is to upload it using WordPress Administration Panels in Appearance > Themes > Install Themes > Upload .

But because you already have a theme folder on your server with the same name as the folder inside your ZIP file of updated theme, most likely you will get the following error:

To avoid this error you have several choices:

  • A) Delete your current theme
    1. 1. Deactivate the theme you want to update, enabling another theme (e.g. Twenty Twelve ) (theme can not be deleted if it is active).
    2. 2. Delete the theme.
    3. 3. Now you can go to Install Themes tab and install the updated version of the theme.
  • B) Rename your current theme folder via FTP
    1. 1. Log in to your site via FTP client.
    2. 2. Go to wp-content/themes and rename your current theme folder (e.g. peekaboo ) to something else (e.g. peekaboo-old ), without adding any spaces in the folder name.
    3. 3. Go back to WordPress Administration Panel and install the new version the theme.
  • C) Manually update only modified files
    1. 1. If your theme was previously modified or customized, you can update manually only files that were modified in newer versions than yours.
    2. 2. Look in the changelog of your theme to see which files were modified or added and replace them via FTP.

What if my theme was modified?

  • Update via FTP only modified files that are listed in the changelog
  • If you don’t remember what modifications you did in your theme, just compare files from your current theme folder with the new version using a tool like Beyond Compare ( Windows & Linux ), WinMerge (Windows) or DiffFork (Mac)

Demo Content

You can to install the demo content for your theme by uploading XML file. It will import posts, pages, menus but the demo site theme settings. We have no rights to distribute the stock photos used in the demo site, therefore it's not included in the demo xml.

Get demo XML

Follow this steps to import the XML:

  1. Go to Dashboard > Tools > Import > WordPress
  2. Install and activate the plugin.
  3. Choose Upload file and import

Configuration

After installing and activating your theme it is now time to start setting up your content and learning more about our theme.


Page Template

A Page Template is a template which comes with your theme. WordPress can be configured to use different Page Templates for different Pages. You can select which Template will be used when displaying a particular Page.

This theme comes with unique page templates which adds additional functionality to your pages. These are the page templates that can be found in this theme:

  • Home Page — a page template for Home Page
  • Full Width Page — a full width page template without the sidebar.
  • Gallery Page — a page template for Gallery Images
  • Testimonial Page — a page template for Testimonials
  • Contact Page — a page template with contact form

How To modify a Page Template

  1. Navigate to Pages > Add New
  2. Find Page attributes panel on the lower right corner. You will see the Template dropdown.
  3. Select the Page Template.
  4. Add a title and Publish the Page. The page will display the pre-defined content within that page template.

What if I couldn't find the Page Attribute panel?

If you do not see this panel, look to the top right of your screen for Screen Options . Click Screen Options and enable the checkbox next to Page Attributes.


Setting Up Home Page

  1. Navigate to Pages > Add New
  2. Find Page attributes panel on the lower right corner. You will see the Template dropdown.
  3. Select Home Page Template as the Page Template.
  4. Add a title and Publish the Page.
  5. Navigate to Settings > Reading
  6. Select A static page option for the Posts page displays
  7. Select the page you just created as the Front page .

Home Page Content

  1. Featured Posts

  2. CTA

    CTA (Call to Action) is a button or some type of graphic or teaser text meant to prompt a user to click it. You can customize the teaser text, the button text, and the button link. You can link the button to any URL.

  3. Headline

    Headline or intro text is the combination of teaser text and image or video.

  4. Definition List

  5. Testimonials
    It will display Testimonial posts from Testimonial custom post type. You can adjust the amount of testimonials to show from Theme Options.

  6. Content

    It will display the content of the homepage. This is the same page as the Front Page.

  7. Home Page Widgets

    The Home Page Widgets is Widget area. You can set the widgets from Appearance > Widgets. It will display the latest post if there is no Widgets configured.


Setting Up Blog page

  1. Navigate to Pages > Add New
  2. Find Page attributes panel on the lower right corner. You will see the Template dropdown.
  3. Select Default Template as the Page Template.
  4. Add a title and Publish the Page.
  5. Navigate to Settings > Reading
  6. Select A static page option for the Posts page displays
  7. Select the page you just created as the Posts page .


Contact Page

Peekaboo theme comes with a Contact Page template that that fully integrate with Contact Form 7 plugin. Contact Form 7 comes with a useful set of validation methods, including email address validation and CAPTCHA.

How to setup Contact Page

  1. Navigate to Pages > Add New
  2. Find Page attributes panel on the lower right corner. You will see the Template dropdown.
  3. Select Contact Page as the Page Template.
  4. Add a title and Publish the Page. The page will display the pre-defined content within that page template.
  5. Fill the Contact Form 7 ID and all other info in Contact Information tab.

How to get Contact Form 7 ID

  1. Install Contact Form 7 plugin if you haven't done so.
  2. From WordPress Dashboard, navigate to Contact > Add New

  3. Create your custom contact form and Save it. Check the Contact Form 7 guide if you you're not familiar with it.
  4. Copy the Contact Form ID and go back to the Contact page you just created.


Featured Image

Using Featured Image feature you can easily assign an image for your posts, pages, slider, and gallery.

How to assign Images:

  1. Go to Posts and click on Featured Image at the bottom right
  2. Upload an image. You can also drag and drop the image from your computer.
  3. Click Set Featured Image .
  • WordPress will automatically pull the first image from the Post to be used as the thumbnail if there is no featured image.
  • It is highly recommended to upload an image that is larger than 640 px x 200 px
  • Auto-resizing will only occur when the image is uploaded for the very first time. Images that have previously been uploaded will not be re sized.


Setting Up Custom Menu

This theme support Custom Navigation Menu . This feature only compatible with WordPress Version 3.0+. The Custom Menu enable you to easily customize the navigation menu in this theme.

Creating Custom Menu

  1. Navigate to Appearance > Menus in your dashboard.
  2. If you don’t have any menus, click on the create a new menu .
  3. From the boxes on the left select pages or categories that you want to include in your menu. Click Add to Menu .
  4. Expand the Menu Item to configure available options ( Label and Attribute ).
  5. You can change the order and placement of menu items by simply dragging and dropping the items to change their order and create sub-menus. Save Menu once you're done.
  6. Navigate to Manage Locations tab and assign your menu to a theme location. Click Save Changes .

Custom Menu locations

There are 2 locations of the Custom Navigation Menu in this theme:

  • A) Primary Navigation

    This is the main navigation on the header. It supports up to two levels of dropdown menu items.

  • B) Secondary Navigation

    This also called Secondary Nav on the homepage. It only supports one level menu items.

    You can access additional options on the Theme Options. Navigate to Appearance > Theme Options > Secondary Nav

    Make sure you insert the Navigation Label of the Menu items, otherwise it will be displayed as blank menu item.


Sliders

The Home Page features a slider. To add a new slide to the slider, follow this steps:

  1. Navigate to Slides > Add New from WordPress dashboard.
  2. Enter slide title.
  3. Click on Featured Image at the bottom right.
  4. Upload an image. You can also drag and drop the image from your computer.
  5. Click Set Featured Image .
  6. Enter all necessary parameters in Slides tab .
  7. Publish the page.
  8. You can modify Slide additional options from Theme Options .

Recommended image size for the slide is 680 px x 320 px

You can change the slide animation, pause time, etc in the Theme Options section.

This theme includes 2 sliders, Orbit Slider and FlexSlider 2. Both slider ready to be used without installing any plugin. The default slider is FlexSlider 2, you can change it to Orbit Slider from the Theme Options.

Orbit Slider can also be generated from Shortcodes. For more information check the Shortcode section below.

Slider settings

Global slider options

You can access all global slider options from the Theme Options. Navigate to Appearance > Theme Options > Slider to access it.

All the options will affect both the home page slider and shortcode.


Gallery

This theme has Gallery as Custom Post type. On the left side of WordPress Dashboard , there is Gallery section below Posts .

Before you can add Gallery item, you have to setup the Gallery Page. Follow this steps:

  1. Click Pages > Add New and name the Page
  2. Select Gallery Page template on the Page Attributes box at the right side of the page.
  3. Publish the page.

To add Gallery item, follow this steps:

  1. From WordPress Dashboard go to Gallery > Add New
  2. Enter title and content.
  3. Select the Item Category .
  4. Click Set Featured Image on the right in the Featured Image section.
  5. Click Select Files button and select image to upload.
  6. Click Use as featured image and save changes.
  7. You can add video URL in the Video box.
  8. Publish the Gallery Item
  9. The Gallery Item will be displayed in the Gallery Page you created earlier.

 

  • You have to upload the Featured Image in order the Gallery work properly. This image will be displayed as the Gallery item thumbnail.
  • The recommended size for the image is 645 px minimum.
  • Each gallery item can be displayed as a slideshow. You can upload up to 6 images as a slideshow.
  • Each gallery item can display video from Vimeo or YouTube. You have to enter the page URL, no need to insert the embed code.
  • If you want to add video other than Vimeo or YouTube, insert the embed code instead.
  • The recommended size for the video is 645 px minimum.
  • The Gallery item will not create a video thumbnail automatically, so you have to upload an image for the video thumbnail.

Testimonials

This theme has Testimonials as Custom Post type.

Before you can add Testimonials, you have to setup the Testimonial Page. Follow this steps to setup the page:

  1. Click Pages > Add New and name the Page
  2. Select Testimonials Page Template on the Page Attributes box at the right side of the page.
  3. Publish the page.

To add Testimonials, follow this steps:

  1. From WordPress Dashboard go to Testimonials > New
  2. Enter testimonials in the Visual / HTML editor
  3. Enter necessary information ( Name and Title ) in the Testimonial Content box.
  4. Publish the Testimonials
  5. The Testimonial will be displayed in the Testimonial Page you created earlier.

This theme has Testimonials Widgets that will display Testimonials in a widget. Read more about Widgets here .

Widgets

Peekaboo theme comes with Custom Widgets. Navigate to Appearance > Widgets to customize the widgets. The Widgets panel on the left side shows all available widgets. The panels on the right are all widgets areas.

Adding a widget

Drag and drop the widget from the left panel to the right panel.

Removing the widget

Drag the widget back to the left panel (Available Widgets panel). If you want to keep the widget setting for future use, drag it to the Inactive Widgets instead of the Available Widgets panel. It will save your widget settings for future use.


Ad Widget

A widget to display advertisement banners.

Options:
  • Title: Title of the widget ( Optional )
  • Image source URL: The URL of the image, e.g. http://themeforest.net/img/ad.jpg
  • Ad link: The URL destination, e.g. http://themeforest.net/

Contact Widget

A widget to display contact information.

Options:
  • Title: Title of the widget.
  • Contact info: Details of your contact info. , e.g. address, phone number, etc.
  • Google Map share link: Google map link of your contact info. Insert the email code, without <iframe></iframe> iframe tag, not the embed version.

  • Map Title: Title next to the map pin icon.


Download Widget

A widget to display a download link.

Options:

  • Title: Title of the widget.
  • Subtitle: Subtitle of the widget.
  • URL: Link to downloadable file.

Latest Post Widget

A widget to displays latest posts from certain category.

Options:

  • Title: Title of the widget.
  • Category ID: Category ID of the posts you want to display.
  • Number of posts: Number of posts you want to display.

Map Widget

A widget to display a link to Google Map in modal window.

Options:

  • Title: Title of the widget.
  • Google map link (without iframe): Google map link of your destination. Insert the email version code, not the embed version.


Popular Posts Widget

A widget to display the posts with most comments.

Options:

  • Title : Title of the widget.
  • Number of posts : Number of posts you want to display.

Single Post Widget

A widget to display the content of a particular post or page.

Options:

  • Title: Title of the widget ( optional ).
  • Type of content: Post or Page.
  • ID: Page or post ID.

Social Media Widget

A widget to display the links to all of your social media profiles.


Testimonial Widget

A widget to display the Testimonial posts.

Options:

  • Title: Title of the widget ( Optional )
  • Number of Testimonials: Amount of Testimonial posts you want to show.
  • URL:URL where the title links to. e.g. http://themeforest.net/

Twitter Widget

A widget to display latest tweets.

Options:

  • Title: Title of the widget.
  • Username: Twitter account user name.
  • Number of tweets: Number of tweets that will be displayed.
  • Consumer Key, Consumer Secret, Access Token, Access Token Secret: OAuth settings and your access token.

Only one Twitter widget can be displayed in a page. You can not have twitter widget in both sidebar and footer.

How To Setup The Twitter Widget

  1. Go https://dev.twitter.com/apps and sign in.
  2. Click Create A New Application button.
  3. Fill out all the required fields. The name and description can be anything. Leave the Callback URL field empty.
  4. Click Create your Twitter application
  5. After creating the app, click Create My Access Token button to generate OAuth access token.
  6. Then you will see all 4 items you need; consumer key, consumer secret, access token, access token secret.
  7. Copy and paste OAuth setting (Consumer key & Consumer secret) and Access token (Access token & Access token secret) to the corresponding twitter widget fields in Appearance > Widgets.
  8. Save the widget setting.

Video Widget

A widget to display a video hosted on other sites like YouTube and Vimeo.

Options:

  • Title: Title of the widget.
  • Embed Code: Iframe embed code.
    Example:
    Vimeo
    <iframe src="http://player.vimeo.com/video/25997002?title=0&amp;byline=0&amp;portrait=0" width="244" height="137" frameborder="0"></iframe>
    YouTube
    <iframe width="243" height="138" src="http://www.youtube.com/embed/H0YR0rC-KCA?rel=0" frameborder="0" allowfullscreen></iframe>
  • Caption: Short description of the video. It will be displayed below the video.

Theme Options


This theme have a custom Theme Options panel. Navigate to Dashboard > Appearance > Theme Options to access the Theme Options.

All the options are self explanatory. Make sure to click Save All Changes to save the changes.

Please Note: If you are using Peekaboo theme prior to v 1.15, your theme options will not be carried away when you upgrade to Peekaboo 2.0. This is due to an entirely new theme options framework.


  1. General

    • Subpages Navigation

      Display sub-pages navigation in the parent pages. This sub-pages navigation will not show if there is no child pages under that page.

    • Sticky Navigation Bar

      Make the Main Navigation sticks to the header when user scroll the page.

    • Footer Text

      Copyright note in the footer. This text will replace the default footer text.

    • Scroll to Top

      Display scroll to top button in the footer.

    • Google Analytics

      Enter Google Analytics tracking code to track your website. Paste the code without the script tag <script>..</script>.


  2. Appearance

    • Background

      Upload custom background image. You can also set the background color and the background repeat property. There is no size limit, however consider the file size. The larger the image, the longer it takes to load.

    • Logo

      Replace the admin panel logo, main logo, and favicon with custom logo. The favicon image must be in ico format. Use favicon generator to generate ico file.

      WordPress login logo


      Main logo

    • Theme Stylesheet

      Select the color scheme of the website. There are 5 styles included in this theme.


  3. Styling

    • Body Font

      Specify the body font properties (Default: 16px Arial Normal #555555). This will override the overall font.

    • Main Background Color

      Pick a background color for the header. No color selected by default. This will replace the background color of <div id="main"> ... </div>

    • Page Title Background Color

      Pick a background color for the page title <div class="page_title"> ... </div>on Pages. No color selected by default.

    • Footer Background Color

      Pick a background color of the footer <div class="footer-container"> ... </div>. No color selected by default.

    • Custom CSS

      This is a great place for adding quick custom styles. Everything you paste here will be included on every page of your site. The code you add here will automatically be placed within style tags <style></style>.

    • Main Heading Color

      Pick the color of headings h1, h2, h3, h4, h5, h6, .post h2 a, .post_title a in the Main page. No color selected by default.

    • Page Title Heading Color

      Select the color of page title headings .page_title h1. No color selected by default.

    • Footer Heading Color

      Select the color of headings in the footer #footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6, #footer-bottom, #footer-bottom a. No color selected by default.

    • Link Color

      Select the color of links a. No color selected by default.

    • Buttons

      Select the color of Learn More button .fancy and Secondary Navigation button .overview li a.menu-box. No color selected by default.

    • Google Web Fonts

      Select font type for the headings (default: Raleway). These are some of the most popular fonts in Google Fonts directory. You can modify this list by modifying the array in /admin/functions/functions.options.php line 311-334


  4. Home Page

    Homepage Layout Manager

    Organize the layout of the homepage. You can drag and drop each mod to arrange the order.

    • Featured Posts

      Most of the options already explained in this section.

      • Section Title

        Display Featured Post section title or heading. This is optional.

      • Read More Text

        Replace the default Read More button with custom text. This is optional.

      • Section Title URL

        Select a page where the Read More button above linked to. This is optional.

      • Posts Columns

        Adjust the amount of columns of the Featured Posts mod in the home page.

      • Column 1 Query - Column 4 Query

        Enter the query parameter for the columns ,e.g., page_id=7, p=7, etc.

        Example:

        • p=1 Display content from Post with ID 1.
        • page_id=1 Display content from Page with ID 1.
        All other parameters can be found in WP Codex.

      • .
    • CTA

      Most of the options already explained in this section.

      • Section Title

        Display CTA section title or heading. This is optional.

      • Section Title URL

        Select a page where the Read More button below linked to. This is optional.

      • Read More Text

        Replace the default Read More button with custom text. This is optional.

      • CTA Columns

        Adjust the amount of columns of the CTA mod in the home page.

      • CTA Image

        Upload CTA image. Recommended size: 280px x 280px.

      • .
      • CTA Read More Text

        Replace read more button in the excerpt with custom text.

    • Headline

      Most of the options already explained in this section.

      • Headline Title

        Display Headline title or heading.

      • Headline Subheader

        Display subheader.

      • Headline Content

        Display Headline content.

      • Headline Button

        Replace the default Read More button with custom text. This is optional.

      • Headline Page

        Select a page where the Read More above linked to.

      • Media

        Choose media type of the Headline mod.

      • Headline Image

        Upload headline image.

      • Headline Video Code

        Add video embed code.

      • Video Ratio

        Ratio of the video.

    • Definition List

      Most of the options already explained in this section.

      • Section Title

        Display Definition List section title or heading. This is optional.

      • Section Title URL

        Select a page where the Read More button below linked to. This is optional.

      • Read More text

        Replace the default Read More button with custom text. This is optional.

      • Section Content

        Display custom content above the list items.

      • List Columns

        Adjust the amount of columns of the Definition List mod in the home page.

      • Definition List Item

        Add list thumbnail and description.

    • Testimonials

      You have to add Testimonials before modifying this options. Most of the options already explained in this section.

      • Section Title

        Display Testimonials section title or heading. This is optional.

      • Section Title URL

        Select a page where the Read More button below linked to. This is optional.

      • Read More text

        Replace the default Read More button with custom text. This is optional.

      • Testimonial Columns

        Adjust the amount of columns of the Testimonials mod in the home page.

      • Random Order

        Display Testimonials in random order.

  5. Secondary Nav

    This is options for the Secondary Navigation. You have to configured the Secondary Navigation before modifying this options.

    • Menu Columns

      Adjust the amount of columns of the Secondary Navigation.

    • Menu 1 - Menu 4

      Upload Secondary Navigation thumbnail. Recommended size: 40px x 40px.


  6. Slider

    • Slider Type

      Set the type of the Slider.

      Foundation Orbit Slider
      Orbit slider is the default slider that comes with Foundation framework. It works best for images without caption.
      FlexSlider
      FlexSlider is 3rd party slider plugin. It works best for images with caption.
    • Slider Effect

      Set the transition animation type.

    • Slideshow Speed

      Set the duration of the slideshow when it pause between slides, in milliseconds. Default: 7000.

    • Animation Speed

      Set the speed of the slideshow transition animation, in milliseconds. Default: 600.

    • Control Navigation

      Display the slide bullet navigation in the Slider.

    • Direction Navigation

      Display Previous / Next Navigation in the Slider.

    • Pause on Hover

      Pause the slider when mouse hover on Slider area.


  7. Page

    • Breadcrumbs

      Display breadcrumbs navigation at the top of every pages. Select the gallery and testimonial parent page to enable the breadcrumbs in gallery and testimonial page.

    • Featured Image

      Display the Featured Image on Single Page. The Featured Image will only displayed if you have set the Featured Image in the Post setting. Recommended size for the Featured Image size is 635px x 150px.

    • Thumbnail Image

      Display the Thumbnail Image on Blog Post. This is the same image as the Featured Image above.

    • Custom Read More

      Replace the default Learn More text with custom text.


  8. Gallery

    Gallery Column

    Adjust the amount of column in the gallery page.


  9. Miscellaneous

    404 Page Title & 404 Page Message

    You can customize the page title and message of 404 error page. The 404 page will be displayed when the server could not find the url what was requested. You can view the 404 page by typing in some random number in the page query: http://www.webpage.com/?p=65465.

    Search Page Title & Search Page Message

    You can customize the page title and message of Search page. The search page message will be displayed when the server could not find the terms you searched. You can view the Search page by typing in some random text in the search bar or add some random text in the search query: http://www.webpage.com/?s=65465.


  10. Social Media

    The Social Media tab will let you display social icons in the page header. We provide default icons for you to use.


  11. Backup Options

    • Backup and Restore Options

      Click the Backup Options to backup your current options. You can restore it back in the future by clicking Restore Options. This is useful if you want to experiment on the options but would like to keep the old settings in case you need it back.

    • Transfer Theme Options Data

      You can transfer the saved options data between different site by copying the text inside the text box. To import data from another install, replace the data in the text box with the one from another install and click Import Options.

Shortcodes

This theme comes with shortcodes which allow you to create more customized post and page layouts with the help of columns, buttons, lists, etc.


Briefly, shortcode is a special tag that you can enter into a post that gets replaced with different content when actually viewing the post on the website. You can add the shortcodes from the WordPress visual editor. Navigate to a Post or a Page, and find the Shortcode Editor button in the post editor window.


Grid

The grid in Peekaboo theme is based on Foundation Grid. You can get more control of the grid layout by using the grid HTML code. The sum of sizes of all columns started with the first and ended with the last column must not exceed 12.

2 Columns

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Praesentium, molestias in nostrum tempore rem quo veritatis iusto.

[one_half_alpha] ... [/one_half_alpha] [one_half_omega] ... [/one_half_omega]

3 Columns

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Praesentium, molestias in nostrum tempore rem iusto.
Temporibus nobis veritatis aliquid hic sequi iure.

[one_third_alpha] ... [/one_third_alpha] [one_third] ...[/one_third] [one_third_omega] ...[/one_third_omega]

4 Columns

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Provident, sequi, asperiores, expedita, fugit eveniet amet.
excepturi sint consequuntur doloribus nisi saepe aperiam.
Doloribus, cum laboriosam praesentium alias unde.

[one_fourth_alpha] ... [/one_fourth_alpha] [one_fourth] ...[/one_fourth] [one_fourth] ...[/one_fourth] [one_fourth_omega] ...[/one_fourth_omega]

1/3 & 2/3 Columns

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, dolorem, corporis rerum molestias officia deserunt quibusdam ex!

[one_third_alpha] ... [/one_third_alpha] [large_8_omega] ...[/large_8_omega]

2/3 & 1/3 Columns

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, dolorem, corporis rerum molestias officia deserunt quibusdam ex!
Provident, sequi, asperiores, expedita, fugit eveniet amet.

[large_8_alpha] ... [/large_8_alpha] [one_third_omega] ...[/one_third_omega]


Alert Box

The [alert]…[/alert] shortcode gives you and your editors and easy way to display the Foundation Alerts with some additional options.


    [alert] ... [/alert]

    [alert type=alert] ... [/alert]

    [alert type=success] ... [/alert]

    [alert type=secondary] ... [/alert]

    [alert close=no] ... [/alert]

Attributes

Alert boxes come with two additional options: close=no (default is yes) and timeout=2000 (timeout in ms). The timeout option makes the box disappear after the timer is done.

[alert close=no]…[/alert] // no close button [alert timeout=10000]…[/alert] // timeout of 10s

Accordion


[accs]
    [acc title="Accordion 1 Title here"]Insert content here. [/acc]
    [acc title="Accordion 2 Title here"] Insert content here. [/acc]
    [acc title="Accordion 3 Title here"] Insert content here.[/acc]
[/accs]
                        

Tabs


[tabs tab1="Tab 1 Title" tab2="Tab 2 Title" tab3="Tab 3 Title"]
    [tab] Insert Tab 1 content here [/tab]
    [tab] Insert Tab 2 content here [/tab]
    [tab] Insert Tab 3 content here [/tab]
[/tabs]
                        

Vertical Tabs

[vtabs][tab title="Tab 1 Title"]Insert Tab 1 content here [/tab] [tab title="Tab 2 Title"] Insert Tab 2 content here [/tab] [tab title="Tab 3 Title"] Insert Tab 3 content here [/tab][/vtabs]

Buttons


[btn_red url="#" target="_self" position="left"] Button text here [/btn_red]

[btn_orange url="#" target="_self" position="left"] Button text here [/btn_orange]

[btn_yellow url="#" target="_self" position="left"] Button text here [/btn_yellow]

[btn_green url="#" target="_self" position="left"] Button text here [/btn_green]

[btn_blue url="#" target="_self" position="left"] Button text here [/btn_blue]

[btn_teal url="#" target="_self" position="left"] Button text here [/btn_teal]

[btn_gray url="#" target="_self" position="left"] Button text here [/btn_gray]
                        


[btn_arrow_red url="#" target="_self" position="left"] Button text here [/btn_arrow_red]

[btn_arrow_orange url="#" target="_self" position="left"] Button text here [/btn_arrow_orange]

[btn_arrow_yellow url="#" target="_self" position="left"] Button text here [/btn_arrow_yellow]

[btn_arrow_green url="#" target="_self" position="left"] Button text here [/btn_arrow_green]

[btn_arrow_teal url="#" target="_self" position="left"] Button text here [/btn_arrow_teal]

[btn_arrow_blue url="#" target="_self" position="left"] Button text here [/btn_arrow_blue]

[btn_arrow_gray url="#" target="_self" position="left"] Button text here [/btn_arrow_gray]
                        

Clearing Shortcode

Clearing is a new jQuery plugin introduced in Foundation 3.2 that gives you the option to create a beautiful popover gallery from the images in your post or page. The [clearing] shortcode has similar options to the built in [gallery] already available in WordPress.

[clearing size=medium] // basic example with specified thumbnail size

Attributes:

  • id — takes a post/page ID, defaults to current post/page
  • size — size of the thumbnail images used, defaults to thumbnail
  • columns — gallery columns on the page 1-6, defaults to 3
  • include — list of attachment IDs to include
  • exclude — list of attachment IDs to exclude
The attributes include and exclude can’t be used at the same time.

Orbit Slider

This is a shortcode to create Orbit responsive slider. It has similar attributes we used in the Clearing shortcode.

Placing [orbit] in your editor creates a responsive slider from all the images attached to the post/page

Attributes:

  • id — takes a post/page ID, defaults to current post/page
  • size — size of the images used, defaults to large
  • include — list of attachment IDs to include
  • exclude — list of attachment IDs to exclude

How To Use Shortcode Attributes:

Adding attribute to the [orbit] shortcode looks like this: [orbit size="small"]. Adding a second attribute would look as follows: [orbit size="small" exclude="6,3,1"]. It’s only necessary to add a attribute to the shortcode if you wish to override the default attribute.


Reveal

This is a shortcode to create simple modal windows on your site.

[reveal link="Link text" linkclass="button radius alert"]…[/reveal]

Attributes:

  • link — button or link text
  • linkclass — additional CSS classes on the button
  • class — additional CSS classes on the modal window

Tooltip

This is a shortcode that creates simple Tooltips.

[tooltip position="top" title="What goes in the tip"]Text that has a tip[/tooltip]

Attributes:

  • positiontop | bottom | left | right
  • title — Text in the tip
  • class — Additional CSS classes.
  • width — Size of the tip, in pixels.

Checklist

[checklist]...[/checklist]
[checklist2]...[/checklist2]

Pull quote and Blockquote

[pullquote_left]...[/pullquote_left]
[pullquote_right]...[/pullquote_right]
[quote]...[/quote]

Extras

Some additional information about the theme.


Credits

This theme used the following sources as listed:

Icons

  • Social Media Balloons by Double-J designs. Licensed under Creative Commons.
  • Elusive by Aristeides Stathopoulos. Licensed under SIL Open Font License (OFL).
  • Font Awesome by David Gandy. Licensed under SIL Open Font License (OFL).

Font

  • Raleway . Licensed under SIL Open Font License (OFL).

Plugins and Framework


Changelog

A summary of all of our updates.

1.13 (8/15/2013)
  • Fix WP_DEBUG issue
  • Files changed: admin/common-functions.php, admin/options-interface.php, functions/post-types.php, functions/twitter/twitter.php, functions/twitter/widget-twitter.php, lib/comment-form.php, and style.css
1.14 (8/21/2013)
  • Theme Options update
  • Files changed: 404.php, /admin/, comments.php, footer.php, functions/post-types.php, header.php, lib/slide-home.php, loop.php, page-contact.php, page-home.php, search.php, sidebar.php, single-gallery.php, single.php, functions.php, functions/tinymce/tinymce.php and style.css
1.15 (8/21/2013)
  • Theme Options update
  • Fix contact page error
  • Fix Twitter widget
  • Files changed: admin/classes/class.options_machine.php, admin/functions/functions.options.php, admin/common-functions.php, page-contact.php, functions/twitter/twitter.php, and style.css
1.14 (9/4/2013)
  • Theme Options update
  • Files changed: 404.php, /admin/, comments.php, footer.php, functions/post-types.php, header.php, lib/slide-home.php, loop.php, page-contact.php, page-home.php, search.php, sidebar.php, single-gallery.php, single.php, functions.php, functions/tinymce/tinymce.php and style.css
1.16 (10/2/2013)
  • Colorbox, Superfish, jQuery, jQuery UI and Nivoslider update
  • Tinycarousel removed due to incompatibility with latest jQuery in WordPress 3.7.1
  • Added Cycle2
  • Files changed: functions.php, p2.js, css/layout.css, header.php, js/jquery.cycle2.carousel.min.js, js/jquery.cycle2.js, lib/slide-home.php, css/colorbox.css, img/colorbox, js/jquery.colorbox-min.js, js/superfish-compile.js and style.css
2.0 (2/10/2014)
  • Major Update. Rebuilt the theme using Foundation Framework.

Support

If you have any questions that are beyond the scope of this help file, please check our support website . Please send your Purchase Code when creating a ticket. We provide support for all theme issues, however we are not able to provide support for theme customizations and third-party plugins related issue.

Get support

Follow this steps to get theme support:

  1. Check the Knowledgebase . Most of questions can be answered in the Knowledgebase.
  2. Always perform a Search before open a ticket. Your question may already been brought up and has been answered.
  3. Please email us if you couldn't find any answers and send us the Site URL and Purchase Code .
  4. You can also send us the WordPress and FTP login info if necessary. All tickets are private, only our team can see the login info.

How to find Purchase Code

  1. Go to Themeforest.net and log in to you account
  2. Click on Download Tab
  3. Find the theme and click Download .
  4. Click License certificate & purchase code . The purchase code is inside this file.