“WP Lattice” Documentation by “Chris Robinson (contempoinc)” v1.1.1
“WP Lattice”
Created: 4/9/2012
By: Chris Robinson (contempoinc)
Email: [email protected]
Table of Contents
- Installation & Quick Walkthrough
- Uploading Portfolio & Blog Post Images
- Custom Page Templates
- Custom Widgets
- Translation
- Custom Shortcodes
- Using the Child Theme Creator
- CSS Files and Theme Files
- JavaScript
- PSD
- FAQ
A) Installation & Quick Walkthrough - top
Please follow the installation initial instructions below, and I've also created a few screencasts to help you get started.
- Unzip the final zip file; you should now have a final download folder.
- Do NOT upload the final download folder. Open up the final download folder.
- Browse the contents and find the lattice.zip file.
- Unzip and upload ONLY the theme folder to your "wp-content/themes" folder.
- Optional: If you do not wish to manually upload the theme only folder to your "themes" folder, there is an option. You can upload the Lattice.zip via the WordPress themes admin panel by selecting "add new" and clicking "upload".
- Login to your Wordpress admin and navigate to Appearance > Themes > locate "WP Lattice" and activate it.
- Once activated you will be redirected to the Options panel, where you can configure the theme. Make sure to throughly go through each panel and famalirize yourself with everything, there are a bunch of options to configure.
- If this is a new installation and you would like some dummy content I've included an XML file with all the content from the theme demo.
- Go to Tools
- Click Import > Select Wordpress
- Click Browse > Find the supplied "wplattice.wordpress.2012-04-05.xml" located within the main folder
- Click Upload file and import
- That's it!
B) Uploading Portfolio & Blog Post Images:
- No messing around with copy/pasting URL's for images, this theme makes it so easy to add unlimited photos to your posts:
- Open up a post
- Click the image icon next Upload/Insert
- Click Select Files
- Select all your files you wish to upload
- Once uploaded, click Save all Changes at the bottom
- That's it! You can close the window, click Publish or Update and view your listing.
- Now if you would like to select a different first image or re-order the other images for the slider:
- Open up a post
- Click the image icon next Upload/Insert
- Click the Gallery tab
- Now you can click and drag your images around to sort them, the first image in the list will always be your main image.
- Blog: Blog postings work the same way as above however they only support one main image.
C) Custom Page Templates - top
This theme comes loaded with eight custom page templates, all can be used by creating a page and assigning one under the Templates dropdown:
- Contact (Example) - displays a contact form, address info, Google map and social links.
- All options for this are located in WP Lattice Options > Contact.
- Full Width (Example) - use this for any page you'd like to be full-width without a sidebar.
- Right Sidebar (Example) - use this for any page you'd like the sidebar to be on the left and right. You can also configure your sidebar placement sitewide (two or three column) via WP Lattice Options > General Settings > Main Layout.
- Sitemap (Example) - displays all your Pages and Categories.
- Team (Example) - displays all your team members, with pic, position, bio, Twitter, Facebook, LinkedIn & Google+.
- All information for each team member is controlled from thier User profile.
D) Custom Widgets - top
This theme comes loaded with eight custom widgets, any of them can be added via Admin > Appearance > Widgets
- Adspace - flexible ad widget that can accept an image URL or ad code.
- Blog Author Info - use this widget to tell your users a little bit about yourself and your company, with optional avatar and read more link.
- Contact Info - use this widget to list out you or your companies contact information.
- Dribbble - use this widget to display your latest shots from Dribbble.
- Flickr - display a group of photos from your Flickr feed.
- Follow Us - display all your social profiles, configurable via WP Lattice Options > Social.
- Portfolio - use this widget to show your latest portfolio items image or video, with optional view all link.
- Search - displays search field.
- Tabs - displays Latest Posts, Comments & Tags, the amount of posts shown can be specified and each tab can be turned on/off.
- Twitter - use this widget to display your latest tweets.
E) Translation - top
Need to translate the theme into another language? No problem, it's fully localized and translation ready. Follow the simple steps below:
1. Download and install PoEdit.
We need PoEdit to translate a theme. Its a free software and its available for Mac, Windows and Linux. Download PoEdit from this page.
2. Create a new catalog (the local language file)
- Start PoEdit and click on the File menu and select the option New catalog from POT file.
- This will open the file dialog box. Go to the languages folder of the theme. Select All Files from the file dialog box, and open the en_US.po file in the languages folder.
- Now PoEdit will ask you for various configuration options. The most important thing here is to choose the correct country and language you are translating to.
- In the remaining fields of the configuration window, fill the required information or just leave them empty.
- Now click on the Paths tab and change the path variable to the place where your theme files are located.
- Then press OK.
Now PoEdit will ask you to name the file. Its very important to name the file correctly. The naming convention for these files is languageCode_countryCode. The language code must be in lower case while the country code should be in upper case. So, if you are translating the theme for UK English, the file name will be en_UK. Similarly, for translation to french, it will be fr_FR and so on. You can find a list of language codes at this page and country codes here.
3. Translate the Theme
This is the step where we will actually translate the theme. After Step 2 above, you'll see the standard interface of PoEdit where the left panel contain the strings in the original language and the right panel containing the translations. The right panel will be empty as we haven't started the translation yet.
Start translating each string one by one. Click on the first string and press Tab button. This will take you to the translation box in the bottom. Type the translation here. Your change will reflect immediately in the right panel. Once you are done with this string, press Enter and move on to the second string. Repeat this procedure until all the strings are translated. After the translation is done, save the file.
Then open wp-config.php located in the root of your WordPress installation and change line 72 to reflect your new language file.
4. Upload The Files To Your Server
When you save the catalog file in Step 3 above, PoEdit will create two files, a .po file and a .mo file. Upload both these files to the languages directory of your theme. Also upload wp-config.php to the root of your WordPress installation and you'll be good to go.
F) Custom Shortcodes - top
This theme comes loaded with tons of custom shortcodes, all to make your life oh so much easier. What are shortcodes? They're are simple macro codes to be used in WordPress post content. There's no need for any HTML knowledge!
Using shortcodes has never been easier, they can all be used directly from the Post Editor toolbar using the Shortcode Generator.
- Content shortcodes and instructions can be found here
- Layout shortcodes and instructions can be found here
G) Using the Child Theme Creator - top
Easily create a child theme in under 30 seconds then go right into customizing the CSS all within the admin — no need to use FTP. Only theme on ThemeForest with this feature!
H) CSS - top
Main Stylesheet - style.css
This file contains the styling table of contents, outlining the different files included and where each styles are coming from.
- 1. Base (css/base.css)
- 1.1 Reset
- 1.2 General
- 1.3 Typography
- 1.4 Margins & Padding
- 1.5 Links
- 1.6 Lists
- 1.7 Images & Video
- 1.8 Buttons
- 1.9 Tabs
- 1.10 Forms
- 1.11 Tables
- 1.12 Notifications
- 1.13 Widgets
- 1.14 Misc
- 2. Framework (css/framework.css)
- 2.1 Base 960 Grid
- 2.2 Tablet (Portrait)
- 2.3 Mobile (Portrait)
- 2.4 Mobile (Landscape)
- 2.5 Clearing
- 3. Layout (css/layout.css)
- 3.1 Site Styles
- 3.2 Page Styles
- 3.3 Media Queries
If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.
Other Stylesheets Included
- css/comments.css - styles for comments.
- css/flexslider.css - styles for FlexSlider, recommend leaving this file alone.
- css/post-print.css - styles for printing posts.
- css/prettyPhoto.css - styles for PrettyPhoto, recommend leaving this file alone.
- css/validationEngine.jquery.css - form validation styles, recommend leaving this file alone.
I) JavaScript - top
This theme imports six Javascript files.
- core.js - This is the main JS file it controls a few different things, its well commented for easy customization.
- ct.stickywidget.js - Used for the sliding left sidebar widget area, this one doesn't require any editing.
- foresight.min.js - Gives the ability to tell if the user's device is capable of viewing high-resolution images (such as the 3rd generation iPad) before the image is requested from the server, this one doesn't require any editing.
- jquery.easing.js - This conrols easing for the portfolio sorting, doesn't require any editing.
- jquery.fitvids.js - Used for fluid width video embeds, this one doesn't require any editing.
- jquery.flexslider.min.js - This is the main FlexSlider file, this one doesn't require any editing.
- jquery.prettyPhoto.js - This is the main PrettyPhoto file, this one doesn't require any editing.
- jquery.quicksand.init.js - This is the initialization file for the portfolio sorting, highly recommend not editing this unless you really know what you're doing.
- jquery.quicksand.js - This is the main file for the portfolio sorting, doesn't require any editing.
- jquery.validationEngine.js - The form validation is handled by this file, doesn't require any editing.
- markerwithlabel.js - This enables custom markers for Google Maps API v3, doesn't require any editing.
- respond.min.js - A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more), doesn't require any editing.
J) PSD - top
This is a responsive design so no PSDs are included, but if you'd like to say mock up a new template I'd recommend screenshoting the live site then opening that in your favorite editor say Photoshop then making your edits by cutting and slicing.
K) FAQ - top
Q: I get a "Broken Theme/Stylesheet Missing WordPress" error when uploading or activating?
A common issue that can occur with users new to installing WordPress themes is a "Broken theme and/or stylesheets missing" error message being displayed when trying to upload or activate the theme.
This error message does not mean that the theme you have purchased is broken, it simply means it has been uploaded incorrectly.
Luckily, there is a very easy fix: http://wiki.envato.com/buying/support-buying/solving-broken-theme-issues/
Q: My images aren't showing up?
- Make sure lattice > img_resize > cache folder is set to 777
- Make sure you have GD library installed on your server, comes by default wtih any running PHP 4.3+
- Your hosts server security might be blocking timthumb from working more on this here if you're on HostGator you'll need to contact support and have them disable mod_security.
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.
Chris Robinson