Patti WordPress Theme - v.1.4.1

a One Page & Personal Wp Theme

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 me via my user page contact form here. Thanks so much!

Intro

"Patti" is a WordPress theme, packed with nice features like custom post types, widgetized sidebars and footers, custom meta boxes and a beautiful admin panel. Inside the admin panel, which is located in Appearance->Theme Options, you`ll be able to customize the theme without the need of touching a single line of code.

 

Installation

If you`re reading this line, this means that you already unzipped the downloaded package from Themeforest. Now, in the extracted package you will find a folder named "Patti Theme" and 2 archives: "patti.zip" file and "patti-child.zip" which are the archives for the wordpress theme and child theme of Patti. 

If you plan to edit the theme files, like style.css, I`m suggesting you to install both Patti and Patti Child themes, then activate the child theme. Child themes are great because allow you to edit the theme and also lets you update the original theme in the future, without loosing your edited files work. 

Read more about child themes and how to use them here: http://codex.wordpress.org/Child_Themes

You can install the themes in two ways:

After uploading the theme, you have to activate it. Navigate to Appearence -> Themes page to activate the theme.

 

Plugins

In order to get the most out of a website, the theme is packed with a series of WordPress plugins: 

1. Visual Composer - is a premium plugin( Official Page) which lets you create advanced page layouts within minutes, by making use of a nicely visual interface and a bunch of elements. To get used to it, see a live demo of the plugin. 

Within theme, the plugin is active for pages only, but it can be extended by going to Settings->Visual Composer and set more Content Types(I strongly recommend you activate post and portfolio checkboxes).

1.1 - Templatera - is a Visual Composer Addon being a powerful template manager for Visual Composer which allows you to create, manage and set control access to your templates based on user roles or page post types. To get used to it, see a Live Demo. 

2. Revolution Slider - is a premium plugin( Official Page ) which lets you create stunning full-width, full-screen and normal sliders, all responsive and packed with nice effects. To see it in use, check out this video.

3. Contact Form 7 - is a free plugin( Official Page ) which helps you create contact forms to use on any page. 

4. Sidebar Generator - is a free plugin( Official Page ) which helps you create as many sidebars as you want. 

5. Delicious Shortcodes - is a plugin built especially for Patti which makes the theme work at its maximum capability. 

 

After installing the theme, you`ll see a box message telling you about the plugins, which one is recommended and which one is required.

 

Install the plugins and activate them. After that, you should see new sidebar items inside the WordPress dashboard. Also, you should look for Appearance->Sidebar Generator in order to create new sidebars.

If you feel that they`re not installed properly, go to Appearance->Install Plugins and make sure that the list is empty. 

 

Using Demo Content

It's really simple.

If you`re using the theme to build a new website which doesn`t have content yet, I strongly recommend you to use the demo content files. This theme includes xml data files which will allow you to upload the demo content to your website. The content is the same as in the Live Demo Preview.

Very Important: don`t forget to check the "Download and Import File Attachments" in order to import images too.

 

Once you are done and wordpress imports the content, you have to go to Appearance->Menus and assign the menu to the "Main Menu" location.

If you want to save some time and use the sliders from live demo:

Pages

To create WordPress pages, go to Pages->Add New.

Set a title to your page. From right-top area, you can choose wheter to use a right or left position for your sidebar or no sidebar at all. Then you can select a sidebar to use with the page. To create a sidebar, go to Appearance->Sidebars. To populate a sidebar with widgets, go to Appearance->Widgets. 

 

To add a page to the main menu, go to Appearance->Menus and drag and drop it into a menu.

Next step is to set a Template from Page Attributes area.

To create a regular page, use the "Default Template".

There are a couple of special templates built to extend the default WordPress functionality. Each one of them has its own role. For example, if you want to create a blog page, you`ll need to create a new page and set it the "Blog" template.

 

After setting up the template, you can populate the page with content. My suggestion is to use the "Visual Composer" button from below the page title to transform the default WordPress page building into a visual user oriented experience. 

Important: Visual Composer works only if the WordPress default textarea is in "Visual" mode. 

 

Once you make sure the setting is set to Visual, click on Visual Composer->Add Row. To add an element, click on the + button. 

Blog

To create a blog page, generate a new page and set it the "Blog" template. Once you click on it, a custom metabox will appear. From here, you can set the blog layout, wheter to be masonry style or regular style.

If you opt in for a blog layout with right or left sidebar, make sure to set a sidebar for them too from the top-right area. 

 

Hit the "Publish" button to save the page. 

Blog Posts

Blog posts are the items of a blog. You can create them from Posts->Add New. 

There are several types of blog post types, based on a number of post formats. Patti is making use of 6 post formats, to increase the functionality of your website and make your blog area look like a microblogging website: Standard, Gallery, Link, Quote, Audio and Video. 

 

Each one of them has its own extra options. For example, in Gallery format, you`ll be able to upload images for the gallery, while in Video format, you`ll have the possibility to use a video from a third party website like YouTube or Vimeo. 

I encourage you to "Set a featured Image" for all your blog posts, to enhance your website with images and make it more user friendly.

Portfolio

To create a portfolio page, generate a new page and set it the "Portfolio" template. Once you click on it, a custom metabox will appear. The portfolio layout is based on a grid. 

From the page, you can set wheter to use filters or not, how many portfolio items to show on portfolio page without filter and from which categories to retrieve portfolio items. Don`t worry if you don`t see any categories listed. Once you create portfolio items and set them categories, you`ll see them on the portfolio page as well. 

 

Portfolio Items

To create a new portfolio item, go to Portfolio->Add New.

You can add here portfolio categories. Also, make sure you set a Featured Image for each portfolio item so it can be added to portfolio pages and widgets.

I strongly suggest you to use Visual Composer for building your portfolio items. If it`s not enabled by default on projects pages, go to Settings->Visual Composer and enable it.

An interesting metabox is the "Thumbnail(Featured Image) options". Here you can set how the thumbnail will behave. You can choose what thumbnail does and the thumbnail size for portfolio masonry layout. 

 

On the page, you`ll find options for the project title. You can display it centered, on left, with a parallax background or not display it at all.

You can use the Visual Composer functionality to create unique pages for your portfolio items. You can save a layout as a Visual Composer Template (from Templates->Save current page as template) and use it later for other portfolio items. 

How to create a One Page Homepage

Setting up the page as Homepage

The theme is set to display on the frontpage your latest posts. You can change this by setting up a certain page to act as your homepage.

To do that, go to Settings->Reading and change the "Front page displays" option to "A static page":

 

 

Patti makes use of a page template called "Homepage". You can find it under the "Page Attributes" section:

 

When you create a page which is using this template, I strongly suggest you to use the Visual Composer page builder functionality. 

To add a fullwidth homepage section, click on Add Row only once and then click on the big plus from the box created to add an element. You can use a fullwidth slider, a projects grid or other fullwith content as element. 

To add a homepage section which is using the wrapper(the content is centered on the page and looks like any other page), click on Add Row, then drag the Add Row button inside the box just created. Then you can add your content by clicking on the plus from the inner box. 

 

Creating Page Content and Splitting it into Sections

Video Tutorial:http://www.youtube.com/embed/nV-r_jZHhMk

Now that you set the page as homepage, let`s create some content. Click on Visual Composer or Frontend Editor to enable the page builder. Visual Composer is a very powerful page builder which comes with a frontend editor too which it`s awesome for inner pages and projects. 

If you want to save some time, use the Templates to add already built sections into the page. The templates have to be imported from the Demo Content. 

 

Visual Composer has a series of elements which will help you easily create the page. There are also a lot of custom elements specially built for Patti, like Portfolio and Blog Grid, Testimonials, Clients and Twitter slider and many more. 

 

When using the Homepage page template, you have to keep in mind 2 things:

Elements inside a Row are using the full width of the screen, while elements placed inside a Row, which is inside Another Row are aligned to the website container.

 

The outer row has a series of options, which helps you create parallax backgrounds and links to menu items. 

You have to click on the outer pen to enable the options:

 

 

By setting up an ID to the row, you can use it after that in navigation. 

 

Creating the Menu

Video tutorial: http://www.youtube.com/embed/nV-r_jZHhMk

The theme has raised the functionality of the default WordPress menus by enabling the use of custom links. 

Go to Appearance->Menus and create a new menu. 

Now, instead of adding to it regular pages, use the "Links" area to create sections for the one-page page. 

For example: Let`s say I want to create a link to the "About Us" section. I build the link from the website homepage url + #about and use About for the Link Text. 

 

You can add to the menu other pages or external links. For that, you have to set to menu items that you want to link to other pages, set them the external class.

 

 

To create a menu item which links to the top of the page, use the "initial" class name:

 

Once you`re done with the menu, assign it to the "Main Menu" Location.

 

That`s it. Now you should be able to navigate on your homepage between sections, via menu items. 

 

 

Services, Team, Testimonials

All these 3 custom post types(Services, Team and Testimonials) are built on the same principles.

Instead of limiting the ease of use by creating custom templates for them, I decided to use each service item, team member and testimonial as a shortcode.

When you`ll add a service, team member or testimonial they will receive an ID which will be assigned to a shortcode.

Then, you can get the shortcode and display it on every page/post, wrap it inside another shortcode or directly into Visual Composer.

 

 

Contact Forms

You can create as many contact forms as you wish for your website. Once you activated the Contact Form 7 plugin packed with the theme, go to Contact and generate a new contact form.

Here`s the code that I used for the demo contact form: http://pastebin.com/1aXnbLdk

Use Visual Composer plugin to implement it into the page.

 

 

Widgets

To manage widgets, go to Appearance->Widgets

Patti has 3 widgetized areas (Blog Sidebar, Footer, Page Sidebar) but the number can be increased by creating new sidebars from Appearance->Sidebar Generator.

Patti comes with 3 custom widgets:

 

 

 

 

 

Using WPML with the Theme

Patti is compatible with WPML , the multilanguage plugin for WordPress. In this section, you`ll learn how to turn your website multilingual using the plugin. 

You need a recent version of WPML, including the String Translation and Translation Management modules.

The WPML Getting Started Guide contains clear explanations of many of the steps involved into turning a Patti site multilingual with WPML. You’ll want to refer later to some of its subtopics, such as Theme and Plugin Localization, Menu Synchronization, and String Translation. I recommend you keep this guide open while following this tutorial.

 

Getting Started

These are the main steps you need to follow to get started:

To set up a multilingual site, you obviously need to translate your content. This involves at least translating posts (including custom post types), pages, taxonomies, and menus and other navigational elements. We’ll begin by translating a page. Go to All Pages, and pick a page. 

 

Translating Pages and Posts

To set up a multilingual site, you obviously need to translate your content. This involves at least translating posts (including custom post types), pages, taxonomies, menus and other navigational elements. We’ll begin by translating the pages. Go to "All Pages" and pick a page for translation. Click on the "+" icon. Once you start to translate pages, the plus icon will be replaced with a pen icon. 

 

To understand what translating a page means, WPML actually creates a new WordPress page, linked to the original one. In this new page, you have to add content, as you normally do. You can add any type of content, but for the sake of translation, it`s best to keep the original content, translated in the new language. You also have a button which can copy the entire content from the original page, so you can easily know what to edit. 

 

You can use content as you normally do in regular pages. Use Visual Composer to build fast your pages or copy the content from original language into the page. 

Same thing goes for posts too. You see columns for each active language, with a pencil icon (for ‘edit translation’) or a ‘+’ icon (for ‘add translation’) next to each post. 

 

Translating Blog Categories

To translate a category, click on the language in which you want to translate it and then add  a new category. Make sure you state for which original category the translation is made.

 

Translating Testimonials, Services and Team Members

Translating a custom post type like a service is the same as translating a page. When you visit the services section, you`ll notice that there`s no "+" or pen icon. When you open a service item, you`ll see the language box. Click on the "+" button. A new service page will appear. Add your translated service as you normally do. 

As in a page or post case, translating a service means that a new service item is created. To add a translated service to a translated page, just add it as you normally do with a regular service on a regular page.

 

 

Translating Portfolio Items

To translate a portfolio item, the process is the same as for pages. Click on the "+" or pen icon and add the new content. You also have to add again your media files like images used on the original page because the translation creates a blank page which needs new content. 

Don`t worry about categories. They`re still in the original language. We`ll translate them later in "Translating theme texts and other strings" section. 

 

Translating Menus

WPML can synchronize menus for you. This means that if some entries, for example some pages, posts or categories, are in the English menu, WPML can generate and keep in sync menus for other languages pointing to the translated versions of these pages, posts or categories.

Go to Appearance->Menus. Choose the menu you want to translate. 

From the right top, click on the language you want to translate it. Now, you`ll be directed to a new page on which you can build your new menu, with the translated pages. 

 

 

Translating theme texts and other strings

Patti comes with its own localization files, i.e. translations of the theme texts to a number of languages. Sometimes some texts are not translated, so to complete the missing translations you need to follow the procedure for Theme and Plugin Localization. In a nutshell, go to WPML->Theme and Plugin Localization, and click on ‘Scan the theme for strings’. After doing it, you’ll see something like this:

 

You can then see from WPML->String Translation the theme strings and which ones are translated or not, and complete the translation from there:

 

 

You know that Patti has a theme options panel in which you have to add your copyright text for example. To translate that text, filter the dropdown from the WPML->String Translation page to "admin_texts_theme_patti". 

 

To translate the Portfolio Categories, filter the context for "Portfolio Category" and all the categories that you use for projects will appear on the page. 

 

 

 

After going through all these steps, you should have a functional multilingual language based on Patti theme. If you`re feeling like your website is still not 100% translatable, drop me an email and I`ll be glad to help you out!

Sources and Credits

Along the project, I've been using the following assets, even if they were images, icons or other files, as listed.

 

Changelog

Version 1.4.1 - 23 July 2014

Removed white space from the menu on responsive layout
Fixed the LinkedIn function for the Social Block

 

Version 1.4 - 01 June 2014

New feature - Search Widget in Header
New portfolio grid options - set a category as the default filter, manipulate the 'All' keyword with ease(move, translate, hide)
Updated plugins to Latest Versions
Updated Theme Options
Updated FontAwesome Icon Font library
Enabled default Visual Composer Buttons
Enabled Revisions for Projects
Added Behance, SoundCloud, Xing, VK to social block
Added Instagram, Pinterest to team members
Added more thumbnail options for team members: it can now be set to open a custom link
Disabled PrettyPhoto hashtags
Responsive Layout option revised
Revised process of building templates
Child Theme revised(if you are using a child theme, check out the new one and add your changes into it)

 

Version 1.3.1 - 21 April 2014

100% Compatibility with WordPress 3.9
Plugins updated to Latest Versions
Added Envato WordPress Toolkit for automatically theme updates

 

Version 1.3 - 3 April 2014

Plugins updated
Youtube Video Backgrounds for sections
Added more thumbnail options for team members
Added more thumbnail options for project thumbnails: now you can open an image gallery or a Video in lightbox, for every project thumbnail.
Added centered layout for footer
Added option for displaying social icons in header
Reviewed blog posts displaying behavior
Added option for button target
Added theme option for custom JS
More header options
Blog fullwidth options
Portfolio Manager

 

Version 1.2 - 18 March 2014

A new, more powerful, solid Theme Options panel - now, based on ReduxFramework
Improved the website preloader to display the website faster
Improved the child theme
Twitter feed support shortcode for non-latin languages
Updated RevolutionSlider to Latest Version
Small CSS adjustments
Small JS adjustments

 

Version 1.1 - 14 March, 2014

Updated premium plugins(Visual Composer and Revolution Slider) to latest versions
Fixed an "Unexpected T Function" error caused by servers running PHP lower than version 5.3 - some might experienced it as a blank/white screen
Added Enable/Disable option for website`s initial preloader
Small JavaScript adjustments
Small CSS adjustments

Version 1.0 - 13 March 2014

Theme released

Thank you!

Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template.
 
 
Madalin Tudose, DeliciousThemes.com