Documentation: PANES Theme

Getting Started - Installation

Make sure you've got the current version of WordPress. In order to download the current version, please visit http://wordpress.org.

Please check http://codex.wordpress.org/Installing_WordPress for information on how to install WordPress on your server.

Once WordPress is successfully installed, you will have to upload the theme to your WordPress directory - there are two ways to do that:

• Un-zip the theme main file and upload the folder via a FTP program to the /wp-content/themes/ folder on your server.
• Use WordPress Theme Installer. Go to Appearance > Themes > Install Themes, and select the zipped theme file.

Once the theme is installed, you'll just have to activate it in Appearance > Themes > Manage Themes.

Important step! Please go to Settings > Permalinks and change the Default to Post name. The ajax loading will not work if the Permalink structure is set to Default. Check Setting Permalinks section in WordPress Codex if you encounter any problems.

Setting Up Your Site - Theme Options

The PANES theme comes with an easy Theme Options Panel divided into five tabs: BASICS, CONTACT, STYLE, POST and SOCIAL. Each field is accompanied by a short help text. Below we briefly discuss the most important options.

1. Basic Options

   Use BASICS tab to upload your logo, both in standard and retina resolution. If you don't upload your logo, your Site Title will be displayed instead.

   In BASICS tab you can also upload your favicon and an apple-touch-icon.

   It's here where you can upload a custom background image for your 404 Page Not Found error page.

   In BASICS tab you can also paste your Google Analytics (or any other) Tracking Code.

   If you want that the left (navigation) sidebar does not show on page load, or if you prefer that it does not hide after scroll - you can set it here.

2. Contact Options

   Use CONTACT tab to set your all your contact data (address, phone, fax, e-mail). You may also overwrite the admin's email address by a custom one used for the contact form destination or disable the contact form.

   If you want to activate Google Maps on your site, you have to provide the longitude and latitude coordinates of your location at the bottom of the CONTACT tab. If you don't know your coordinates, find them with Google Maps, for example on http://itouchmap.com/latlong.html

   

   The CONTACT tab settings will be used in your "Contact Pane" - check the "Contact Pane" part.

3. Style Options

   Your site's unique look will be achieved thanks to your custom background images (more about in the following section). Besides that you can set your custom colors for links and buttons and the "more content" links. Use STYLE tab to set three colors you wish to use.

   

   You can easily replace the default Open Sans and BenchNine by some Google Fonts. Just paste the font name in the Body Font and/or Heading Font fields. Make sure to choose the font family that we'll be used as a replacement font in case if for some reason the google font can't be loaded.

   

   The body font is used within the template in three variants : Normal (weight 400), Italic (weight 400) and Bold (weight 700). For the proper rendering make sure to choose the body fonts that supports these three styles.

   

   You can also add some custom styles in the Custom Styles field.

4. Post Options

   In the POST tap you can disable/enable which of the post meta data (published date, post's author, post's categories) is displayed.

5. Social Options

   There are 12 ready-to-use social network links built into the theme: TWITTER, GOOGLE-PLUS, FACEBOOK, DRIBBBLE, PINTEREST, INSTAGRAM, FLICKR, TUMBLR, GITHUB, LINKEDIN, VIMEO and YOUTUBE.

   To activate any of them just paste the URL (ex. http://twitter.com/pehaa) of your social profile. The social icons will appear in the left navigation sidebar and on the bottom of your contact page.

Shortcodes

There is a bunch of custom shortcodes added to the template. If you are using the Visual editor, click on the "Shortcodes" button and select your desired shortcode from the dropdown menu - it will be added at your current cursor position.

Two-colums

Edit the First Column Content and Second Column Content between the related opening and closing tags.

Team member

Edit the url, title and content within the [team-member-img] tags and name, role and content within the [team-member-info] tags. Tip: It looks good when inserted as the two-columns content.

Slideshow

There are four slides by default, but you can delete or copy-paste the [slide] tag. Edit the url and caption (may be left empty) parameters for each [slide] tag.

In version 1.1.3. we added two additional parameters to slide: is_inner_link and open_pane_after_scroll. Set "is_inner_link = true" if you want to add a link to another pane and open_pane_after_scroll="true" if you want that the "read-more"" content opens automatically, ie. [slide url="" href="#pane-59" is_inner_link="true" open_pane_after_scroll="true" title="View features" label="Click here"]Aenean lacinia bibendum nulla sed consectetur.[/slide]

Toggle

Edit the title parameter in the [toggle] tag and the content between the opening and closing tag.

Testimonial

Edit the by parameter in the [testimonial] tag and the content between the opening and closing tag.

Button

Edit the url and label parameters in the [factory-button] tag. Note that the buttons have the same colors as links.

In version 1.1 we added two additional parameters to button: is_inner_link and open_pane_after_scroll. Set "is_inner_link = true" if you want to add a link to another pane and open_pane_after_scroll="true" if you want that the "read-more"" content opens automatically, ex. [faktory-button url="#pane-59" is_inner_link="true" open_pane_after_scroll="true" label="Click here"]

Callout

Edit the url and label parameters in the [callout] tag as well as the content between the opening and closing tag.

In version 1.1 we added two additional parameters to callout: is_inner_link and open_pane_after_scroll. Set "is_inner_link = true" if you want to add a link to another pane and open_pane_after_scroll="true" if you want that the "read-more content"" opens automatically, ex. [callout url="#pane-59" is_inner_link="true" open_pane_after_scroll="true" title="View features" label="Click here"]Aenean lacinia bibendum nulla sed consectetur.[/callout]

Import the demo content

For your convenience we put together all posts, projects and pages into a panes_data.xml file ready for importing into your WordPress installation.

In order to import this sample data go to Tools > Import and choose "WordPress" from the list, upload the demo.xml file, make sure to check "Download and import file attachments".

You will need assign the menu a theme location and configure widgets and theme options yourself.

Child Theme

The Panes Theme comes with a ready to use child-theme. You'll find the "panes-child-theme" folder in the theme package.

Check WordPress Codex to learn how to use child themes.

Translate Your Theme

Download and open POEdit. Go to File > Open and choose the translation/default.po file in your theme folder. Line by line translate the theme to your language. Go to File > Save as.. and save your filed in the same subfolder. Name your file accordingly to WordPress language codes, you may find them here. For example the language code for French is fr_FR so you would save your file as fr_FR.po.

Note that the fr_FR.po file will be automatically compiled to fr_FR.mo file.

Open the wp-config.php file (in your WordPress install folder), find the line containing

define ('WPLANG', '');

define ('WPLANG', 'fr_FR');

Troubleshooting

Icon Fonts:

If the font icons don't display properly in Firefox and newer versions of Internet Explorer, probably you're running a in cross domain request issue. In these browsers your web fonts served from a different domain need to have the appropriate “Access-Control-Allow-Origin” response header. You'll have to modify the .htaccess file (see Icomoon documentation)

			
				# For Apache
				<FilesMatch ".(eot|ttf|otf|woff)">
				Header set Access-Control-Allow-Origin "*"
				</FilesMatch>

				# For nginx
				location ~* \.(eot|ttf|woff)$ {
					add_header Access-Control-Allow-Origin *;
				}
			
			

Featured Images:

There are several image size variants used in this template, they are generated by WordPress during the image upload. If your images are already uploaded please use the Regenerate Thumbnails plugin, that will generate the missing sizes for you.

Used assets

Fonts :

We use two web google fonts Open Sans and BenchNine and a custom build of icon fonts from Icomoon.

Images :

Images used in the demo are mostly by ourselves, there are always some stock photos from Shutterstock. Images are not included in the download files.