Presso Wordpress Theme

Documentation & Usage

First of all a huge THANK YOU for purchasing my WordPress Theme at Themeforest. If you have any questions that are beyond the scope of this help file, please join our Support Forums. If you’d like to start a new thread over there I’ll get any issues you’re experiencing sorted out. You can also follow me on Themeforest to keep track of all my theme updates and future themes. Thanks so much!

Created: 2013/11/22
By: Envirra
Email: Envirra

01. Getting Started

Theme Requirements

In order to proceed with the theme installation, you must be running WordPress 3.5 or higher, PHP 5.3 or higher.

Theme Download

Navigate to your downloads tab on Themeforest and find Presso. Click the download button to see the two options. The Main Files contain everything, the Installable WordPress Theme is just the installable WordPress theme file.

Theme Installation via Wordpress

  1. Navigate to Appearance → Themes.
  2. Click Install Themes and hit the upload button
  3. Navigate to find the presso.zip file on your computer and click Install Now
  4. Wait while the theme is uploaded and installed.
  5. Activate the newly installed theme. Go to Appearance → Themes and activate it.

Theme Installation via FTP

  1. Log into your hosting space via an FTP software.
  2. Unzip the press.zip file and ONLY use the extracted Presso theme folder.
  3. Upload the extracted Presso theme folder into wp-content → themes folder.
  4. Activate the newly installed theme. Go to Appearance → Themes and activate it.

Migration to Presso

If there are existing images in your wordpress, Please install and run the plugin Force Regenerate Thumbnails to regenerate your thumbnails for better image quality on your site.

How To Update The Theme

You can update your theme via FTP or via WordPress. See the information below for each method. No matter what method you choose, you first need to download the new theme files from Themeforest.


How To Update Your Theme Via FTP
  1. Go to wp-content → themes location and backup your Presso theme folder by saving it to your computer, or you can choose to simply delete it. Your content will not be lost.
  2. Retrieve the presso.zip file from your new Themeforest download (only theme file) and extract the file to get the presso theme folder.
  3. Then simply drag and drop the new Presso theme folder into wp-content → themes location. Choose to Replace the current one if you did not delete it.

How To Update Your Theme Via WordPress
  1. You need to deactivate the current Presso theme in the Appearance → Themes section by simply activating a different theme. Once you activate a different theme, you can delete the Presso theme. Dont worry, your content will not be lost.
  2. Retrieve the presso.zip file from your new Themeforest download (only theme file) and extract the file to get the presso theme folder.
  3. Then simply upload the presso.zip file in the Appearance → Themes section. Click on the Install Themes tab at the top and choose to upload the zip file.
  4. Once it uploads, choose to activate it. You’re done!

Plugins Installation

In downloaded files from ThemeForest you can find a "Plugins" folder containing these plugins:

  • Presso Shortcodes - This is our easy to use and intuitive shortcodes generator. Read more about our Shortcodes in chapter 10.
  • Contact Form 7 - Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup
  • WP Flexible Map - Flexible Map allows you to add Google Maps to your WordPress website.
  • Envato Wordpress Toolkit - This is an easy way to get the latest theme. After you've activate this plugin, Follow these steps
    1. To establish an Envato Marketplace API connection navigate to the `Envato Toolkit` page and insert your Marketplace username and secret API key in the designated input fields.
    2. To obtain your API Key, visit your “My Settings” page on any of the Envato Marketplaces.
    3. Once the API connection has been established you will see a list of themes that can be auto installed or updated.
We recommend you to install these plugins to get more from the theme.

Other plugins we recommend to you to install:

  • Force Regenerate Thumbnails - Useful if your site already have a lot of content and images. Allows you to delete all old images size and regenerate the thumbnails for your image attachments.
  • Simple Local Avatars - Adds an avatar upload field to user profiles. Generates requested sizes on demand just like Gravatar.

Demo Content Import (optional)

The theme comes with a .xml file containing demo content you can import into your WordPress site. This will help you get started, in case you are running on a fresh WP installation with no content at all.


1-Click Demo Content Installation

  1. Navigate to Appearance → Theme Options.
  2. Click on "Import Demo" button and wait until finished.
  3. If you see some messages about failed to import media, It's ok to ignore that. But if you need all demo images to be shown on your site, Please import again.

How to Import Demo Content by Manual

  1. Navigate to Tools → Import.
  2. Click on "WordPress" link (if the Importer plugin is not installed, install it now).
  3. Select the demo-content.xml file located in the archive which you have downloaded from ThemeForest and click "Upload file and import" button.
  4. Your are done! Now your site is populated with demo content.

02. Homepage Setup

Step 1: Prepare the page

  1. Navigate to: Pages → Add New.
  2. Enter the title for this page: Homepage or Home, whatever you like.
  3. On the right side of your screen find the "Page Attributes" box and select "Page Composer" in the "Template" dropdown. Now see the magic happens!

Step 2: Page Composer

After selecting the "Page Composer" template you see the Page Composer interface which easily lets you create the homepage layout. To get started click on the "Add Section" button and you will see all the available sections you can add to your homepage.

  • Featured Posts Slider - Show the posts marked as featured post in slider.
  • Latest Posts - Display latest posts. You can also enable the sidebar to shown with this section.
  • Latest By Category - Display latest posts from any category you want. Just select the desired category from the dropdown. You can also enable the sidebar to shown with this section.
  • Latest By Format - Display latest posts by predefined formats. Just select the desired format from the dropdown. You can also enable the sidebar to shown with this section.
  • Latest Reviews - Display latest reviewed posts with with score made by post author. You can also enable the sidebar to shown with this section.
  • Custom Content - Display your content in theme style.

Step 3: Front Page Displays

Now you have to tell WordPress wich page is your site homepage.

  1. Navigate to: Settings → Reading.
  2. In a "Front Page Displays" select "A static page (select below)"
  3. In a "Front page:" dropdown select your "Homepage" page.
  4. You are done! Now you have your Homepage.

03. Creating Categories

To create a new categoty, navigate to Posts → Categories.

04. Creating New Post

To create a new post, navigate to Posts → Add New.

Post Formats

We enabled four WordPress native post formats. Each format has it's own custom fields (except Standard) for simple content making.

  • Standard - uses only the default fields.
  • Video - when you select this format, A custom "Video Post Options" meta box will apper below the editor. Paste here the URL of the page with the video you want to add. Most of the video hosting sites are supported such as Vimeo and YouTube.
  • Gallery - when you select this format, A custom "Gallery Post Options" meta box will apper below the editor. Adding the gallery:
    1. Click the "Select or Upload Image". The images manager will appear.
    2. Upload images you want to be in the galley
    3. Hold down the Ctrl key and select the images with your mouse. Click the "Select" button at the bottom. Now your images are added to the gallery

    You can drag & drop the images to rearrange the order.
    To remove the image from the gallery, place the mouse over the image and now you see the remove icon on the top right corner of the image. If you want to add another image click on "Add Image" button again.
  • Audio - when you select this format, A custom "Audio Post Options" meta box will apper below the editor. Paste here the URL of the page with the audio track you want to add from Sound Cloud.

Post Options

By using options in this box you can deside what happens in single post.

  • Make this post featured - Check to make the current post featured. Featured Posts Slider section must be added on the Homepage edit page.
You can enter the summary of post in "Excerpt". The excerpt will be displayed as a subtile on single post page.

Wordpress Gallery

To create a WordPress gallery follow this steps:

  1. Add New or Edit existing Post or page.
  2. Click on the "Add Media" button just the above the editor. A media window will open.
  3. Click on "Create Gallery" link on the left.
  4. Upload new images or if you allready have images in your media library click on every image you want to add to the gallery.
  5. Click on the "Create a new gallery" button at the bottom right of the window.
  6. Optional: add captions to each of the images.
  7. Click on the "Insert gallery" button at the bottom right of the window.

Post Review

You can add a review and score fetures to any post. To enable this feature locate the "Review Option" meta box under the editor and click the "Enable Review" checkbox.

After the additional fields are open you can start creating your review.

  • Review Summary - Here you can add a line of text, which will describe why you gave this score to this post. Optional and can be left blank.
  • Review Score - This feature gives you the ability to make a score with different parameters. Each row has two fields: a Label - the name of the parameter and a Score - a dropdown with 1 to 10 numbers. You can add up to ten rows. The total score will be calculated automatically based on the breakdown scores.

05. Creating Static Page

Static page can be created with sidebar or full width (without the sidebar). You don't have to select any templates to configure the page.

To start creating the pages navigate to Pages → Add New. Leave the "Default Template" in "Template" dropdown.

Locate "Page Options" meta box on the page.

  • Page subtitle - Enter additional title for this page. This is optional, You can leave it blank.
  • Sidebar position - Choose the sidebar position or choose "Hidden" to hide the sidebar and show the page in full width.
  • Sidebar - Choose the sidebar you want to show on this page.
You can also create static pages using Page Composer. Select "Page Composer" template from the "Template" dropdown and build your page.

06. Navigation Setup

Setting Up New Menus

Follow the next steps to define menus for each of the theme's menu locations. In each menu, you can add as many items you need.

  1. Navigate to Appearance → Menus and click Add Menu.
  2. Give it a name, add links and click "Save Menu" button.
  3. Click on Manage Locations tab (WP 3.6 or higher), assign a Menu Location for your newly created menu, by selecting it for the preferred Theme Location.

Menu Location

The theme comes with 2 custom menu locations: Main Menu (with mega menu feature) and a Top Menu. You must define your menu items for each menu location, once you have created your pages.

Main Menu "Mega Menu" Feature

The latest posts of the category will be shown on the main menu by automatically. Just add the category item on the menu.

07. Site Authors

Author Avatar

To make your author avatar to appear on your site, register at gravatar.com with the same email you registered at your site.

Social Profiles

We added some extra fields to the user profile page to extend the information about the authors of your site. The added fields are: Social Profiles and a Custom Avatar upload instead of the default WP gravatar.

To add a new author and information that will be visible on the front, follow this steps:

  1. Navigate to: Users → Add New
  2. Name: Select "Author" in "Role" dropdown and select desired name in "Display name publicly as" dropdown
  3. Contact Info: Type the website address
  4. About the user: Fill in the Biographical Info
  5. Social Profiles: Fill all the desired fields with the socical profile username.

08. Theme Options

The Theme Options Panel helps you easily take control over your site, by allowing you to upload your logo and favicon, style the appearance of the theme with your custom colors, change fonts, turn features on and off, paste custom CSS and JS code, paste the Analytcs code without having to write any code.

To access the Theme Options panel, navigate to Appearance → Theme Options.

Import / Export the Options

After you create a set of settings, you might want to save your work. This is useful if you want to experiment with the options while keeping the old settings in case you need them again.

Navigate to the "Import / Export" tab and click the 'Download' button. Once the download is finished, you will be able to restore your options by clicking the 'Import from file' button, paste the data of downloaded file, and clicking the 'Import' button.

Transfer Theme Options Data

You can tranfer the saved options data between different installs by clicking the 'Copy' button and copying the text inside the text box. To import data from another install, click the 'Import from file' button and paste the data in the text box with the one from another install and click "Import".

9. Sidebar & Widgets

Sidebars

The theme comes with 5 Sidebar areas:

  • Blog - Displayed on all posts, single post page, categories and archives
  • Page - Displayed on all static pages
  • Footer Sidebar - Displayed on footer, There are three areas.

Widgets

The theme comes with 9 custom widgets:

  • About Us - Add info about your site, add a small varriation of your logo (Upload the image in Media section of the admin, copy the URL of the image and paste it in the Logo field in the widget).
  • Authors - Show a list of authors.
  • Categories - Show the listing of category.
  • Custom Banner - Add image banner with custom text.
  • Custom Text - Add text, JavaScript banner or Google Analytics
  • Image Banner - Add image banner: 300x300, 300x250, 250x250
  • Latest by Category - Show posts from selected category.
  • Latest Comments - Show the most latest comments.
  • Most Commented - Posts with higher amout of comments.

10. Shortcodes

We have created a very nice and lightweight shortcode generator with very understandable and intuitive interface.

After installing the plugin, navigate to any page or post where you want to add the shortcode. You will see a new button was added to the editor. Click on the button and you'll see the dropdown with all available shortcodes.

To start generating the shortcodes, make sure your mouse cursor is blinking inside the editor and click on one of the shortcode name.

  • Accordion - Add an accordion with content and custom icon.
  • Button - Control the text, url, color, text color and a link behavior.
  • Columns - Just click on the desired columns layout.
  • Info Box - Add content box for additional information
  • List - Create the list with custom icon.
  • Map - Add google map into post/page.
  • Tabs - Create the tab with content
  • Typography - Improve an interesting in your content with Dropcap, Mark text and Quoted text.
After configuring any of the shortcode above you must click the "Insert Shortcode" button to acctually insert she shortcode into the editor.

11. Customization

There are two ways to customize the theme without changing it's core files.

It's important not to touch the theme core files because every time we will update the theme, you will loose you changes.

1. Custom CSS On Theme Options Panel

To style the theme with custom CSS, navigate to Appearence → Theme Options and click on the "Custom JS/CSS" tab. The first text box "Custom CSS" is where you can wright your own CSS code.

2. Child Theme

The theme comes with it's Child Theme. If you want more complex cutomization of the parent theme and change the files, layout, html, objects order this way is even better. To start using child follow this steps:

  1. Navigate to Appearence → Themes
  2. Click the second tab "Install Themes" at the top and click the "Upload" link
  3. Now locate the presso-child.zip inside the "Theme Files" folder which you have downloaded from ThemeForest and double click on that file.
  4. Click the "Install Now" button and after the theme is installed Activate it

That is it, now the child theme is ready. You can open the style.css file and write your CSS there. It will override the default the CSS from the parent theme. You can also copy any file from the parent theme, put it inside the child them and make the changes.

12. Translation

This Premium Theme is fully translation ready! The translation files .po/.mo are located in /presso/languages in the Themes folder. We've included English Translation right away.


To translate the theme, just follow these steps:

  1. Duplicate the en_EN.po file and rename it to your language (for German it's de_DE.po)
  2. Edit the new .po file using POEdit (http://www.poedit.net/)
  3. Hit save, a new .mo file should be created.
  4. Make sure that in the root of your WordPress Installation in the wp-config.php file your language is defined like this: 

    define('WPLANG', 'de_DE');

    You need to change the code de_DE to you language and country code.

To rename different Words, like "Read More", "Comments" etc, just follow these steps:

  1. Open en_EN.po file using POEdit (http://www.poedit.net/)
  2. Rename the Words you want to rename.
  3. Hit save, the .mo file should be updated.
  4. Make sure that in the root of your WordPress Installation in the wp-config.php file your language is defined like this: 

    define('WPLANG', 'en_EN');

Instead of using POEdit, You can use the localization plugin like Codestyling Localization.


Notice: We constantly develop new features, so after downloading a new Version we recommend to check that everything is translated correct.

Copyright & Credits

Images used in demo

Jay DeFehr - http://www.flickr.com/photos/jay_defehr
Daniel Zedda - http://www.flickr.com/photos/astragony/
_dChris - http://www.flickr.com/photos/_dchris/
mark sebastian - http://www.flickr.com/photos/markjsebastian/
Kenny Louie - http://www.flickr.com/photos/kwl/
atomicjeep - http://www.flickr.com/photos/atomicjeep/
William Cho - http://www.flickr.com/photos/adforce1/
warrenski - http://www.flickr.com/photos/warrenski/
Allen - http://www.flickr.com/photos/whoalse/
Luis Hernandez - http://www.flickr.com/photos/d2k6/
Ian Norman - http://www.flickr.com/photos/inorman/
Glenn Brunette - http://www.flickr.com/photos/gbrunett/
Adrian ... - http://www.flickr.com/photos/41279068@N08/
Stig Nygaard - http://www.flickr.com/photos/stignygaard/
Roberto Taddeo - http://www.flickr.com/photos/robertotaddeo/
Daniel M Viero - http://www.flickr.com/photos/danielviero/
Dave Dugdale - http://www.flickr.com/photos/davedugdale/
Jack Donaghy - http://www.flickr.com/photos/jackdonaghy/
News Oresund - http://www.flickr.com/photos/newsoresund/
Highways Agency - http://www.flickr.com/photos/highwaysagency/


1. All images have the Attribution 2.0 Generic (CC BY 2.0) license.
2. None of these images are included in demo-content.xml

Theme Options

Redux Framework - http://reduxframework.com

jQuery Plugins