“Expression WordPress Theme” Documentation by “Pexeto” v.1.4.7

Created: 18/08/2012
By: Pexeto
http://pexetothemes.com/

Thank you for purchasing Expression theme. If you have any questions that are beyond the scope of this help file, please refer to the Support section. Thanks so much!

If you like this theme, please don't forget to rate it on the ThemeForest site. Thank you!



Table of Contents

  1. Theme requirements
  2. Getting Started
    1. If you are new to WordPress
    2. Working with the theme
  3. Installing and activating the theme
  4. Useful instructions
    1. Options page
    2. Setting a custom field
    3. Setting a featured image to a post/page
  5. The header
    1. Changing the logo
    2. Setting the menu
    3. Setting the sociable icons
  6. The footer
  7. The sidebars
  8. Nivo Slider
    1. Nivo slider in the header of the page
    2. Nivo slider in the content of a page/post
  9. Template pages
    1. Portfolio Grid Gallery page
    2. Full-width and full-height slideshow pages
    3. Index/Blog page
    4. Quick/Easy Gallery page
    5. Contact form page
    6. The default page
  10. Changing the theme style
  11. Styled elements and shortcodes
    1. Formatting buttons
    2. Shortcodes
  12. Fonts
  13. Translation
  14. Plugins included
  15. CSS files
  16. JavaScript files
  17. PhotoShop files and image resources
  18. PHP files
  19. Troubleshooting
  20. Support
  21. Updates
    1. Installing an update
    2. Version 1.1.0
    3. Version 1.2.0
    4. Version 1.2.1
    5. Version 1.2.2
    6. Version 1.2.3
    7. Version 1.3.0
    8. Version 1.3.1
    9. Version 1.3.2
    10. Version 1.4.0
    11. Version 1.4.1
    12. Version 1.4.2
    13. Version 1.4.3
    14. Version 1.4.4
    15. Version 1.4.5
    16. Version 1.4.6
    17. Version 1.4.7

Note: If you have any questions that are beyond the scope of this help file, please refer to the Support section.


Theme Requirements

This theme requires the Classic Editor plugin. Please make sure to install the plugin before you start creating content with the theme. You can either install the plugin manually (from the Plugins -> Add New section) or follow the theme's notifications in the admin dashboard that will prompt you to install the plugin.



Getting Started

a. If you are new to WordPress

Although building a website with WordPress is significantly much easier than coding it by yourself, if you are a beginner, even working with WordPress may look hard for you. That's why, in this section we will provide some useful links and also will explain how to get oriented in the documentation and what pattern to follow when building your website with our theme.

Working with WordPress - Useful Links

b. Working with the theme

Once you have some basic WordPress knowledge, you are ready to go with setting the theme. Here are some example steps about how you can do this:

  1. Install and activate the theme - read about how to do this in the Installing and activating the theme section.
    Having problems with installing the theme?
    » Refer to the "Fail to install the theme" subsection of the Troubleshooting section.
  2. Change your logo - learn how to do this in the Changing the logo section
  3. Create your basic menu - during the process of setting your theme, you will be changing your menu links all the time. However, it is good to start with having the main menu set. Learn how to set your menu in the The menu section.
  4. Start with creating your content

    You can create all the content by creating your pages one by one. Here are some examples of what steps to follow when creating different pages:

    You need a Gallery page to set as home page (in the same way as on the demo):
    1. Go to Template pages » Grid Gallery Page section - in this section you can read about how to create such a page and all the settings you can do about this page template. You can read about how to create the gallery items and all the options that you can set to them.
    2. After you set your page, go to the Menus section and add it to your menu so it can be easily accessible.

    You need a Blog page:
    1. Go to Template pages » Index/Blog page section to learn how to create a blog page, how to create posts to it and all the settings you can do for this page
    2. You need to set a slider for the blog? » Go to the Nivo Slider section to read how to create a slider. After you have your slider created and populated with images, you have to select the slider you have created (how to set the slider is explained in both the slider's section and the blog/index page sections)
    3. You need a separate blog sidebar? » Go to the The sidebars section to learn how to create additional sidebars and how to add widgets to them. After you have created your sidebar, go back to the Index/Blog page section to learn how to set the sidebar you have created to your blog page.

    Basically, these are the steps you need to follow - when you need to create a page, just go to its relevant subsection of the Template pages section and read about how to create it and what settings you can do for the page. The main key about understanding how the theme works is to read the documentation we have provided carefully, as we have explained everything you need to know about the theme in here.

  5. Once you follow all these steps and have the basic theme setup, you can also check the rest of the sections of this documentation to read what other features our theme provides.

We hope you will enjoy working with the theme!


Installing and activating the theme

There are 2 main ways to upload the theme:

  1. Via the built in WordPress theme uploader

    Below you can read the instructions about installing a theme via the WordPress uploader, but you can also watch the "Installing a Pexeto Theme via WordPress Uploader" video here

    First you have to unzip the download file and find the zip file called expression.zip. After this you have to go in the admin panel » Appearance » Themes, click on the Install Themes tab and in this section in the top there is a link "Upload". After you click the "Upload" link, a new page will be opened where you will be asked to find the .zip file on your local file system.

    Note: Some servers have limited access settings and wouldn't allow uploading the theme trough the admin - in these case you have to upload the theme via FTP.
  2. Via FTP client

    Below you can read the instructions about installing a theme via FTP, but you can also watch the "Installing a Pexeto Theme via FTP" video here

    If you know the FTP login details of the server where your site is hosted and you have a FTP client installed (such as FileZilla), you might consider using this way of uploading your theme. First you have to unzip the download file, find the zip file called expression.zip, unzip it and upload the folder to the main WordPress installation folder » wp-content » themes. Please note that if you prefer this way of installation, you have to make sure that the main files of the theme are contained just within one folder of the themes folder. The right way to locate your root theme files is for example themes/expression but not themes/expression/expression.

After you have uploaded the theme to the server you will need to activate it. In order to activate this theme you have to go to the admin panel » Appearance » Themes. In this section you should see the theme with a title Expression by Pexeto. Just click on Activate button and your theme should get activated.

Miminal Theme Requirements:
-WordPress v.3.4 or higher
-PHP v.5.0 or higher

Importing the demo content
If you would like to import the demo content and start editing the theme from the created content rather than from scratch, you need to import the demo_exported.xml file that is included with the download folder. You can do this by going to the WordPress admin panel -> Tools -> Import -> Select WordPress, find the demo_exported.xml file from your local file system and upload it.Please note that not all the settings are saved with the demo exported data, so it is always recommended to set your theme from scratch rather than installing the demo content and editing it.


Useful instructions  back to top

a. Options page

When you activate this theme, an options page is created in order to help you make the theme settings much easier. This page is located in the admin panel » Expression » Expression Options.





b. Setting a custom field

Many times in this documentation you will be told that you have to set a custom field for a page or post. There are some custom fields that have been created for this theme. Those custom fields are located just below the main content area of the page/post when opened in "edit" mode. For the portfolio items the section is called "Expression PORTFOLIO ITEM SETTINGS" and for the pages the section is called "Expression PAGE SETTINGS".



c. Setting a featured image to a post/page

In order to set a thumbnail (featured image) to a post/page, when creating/editing your post/page in the bottom of the right sidebar you will see a link "Set a Featured Image":

If you click on this link, a window will be opened where you can choose the image. When you select the desired image, you have to click on the "Set featured image" link.



The header  back to top

The header consists of three main elements:



a. Changing the logo


The logo consists of two parts - a logo image (in the screenshot above this is the "expression" part) and the WordPress installation tagline (in the screenshot above this is the "Premium WordPress Theme" part).

Changing the logo image

To change the logo image, you can either use your own existing logo image or edit the included logo PSD file - it is called logo.psd and is located within the photoshop_files folder. The font that is used for the "Expression" text is called "PT Sans" (you can download it for free from here)).

After you have your logo image, you have to go to the Expression Options » Styles » Logo and upload (or insert the image URL) in the Logo Image section. We have also included a Retina display logo image option which allows you to set another logo image for retina displays. The image size for retina displays should be twice the size of the regular logo - for example if the standard logo image size is 30x70 pixels, the size of the retina display logo image should be 60x140 pixels. If you don't set an image in this field, the image set in the "Logo Image" field will be used on retina displays.
In the Logo section you can also set your logo image width and height:

Please note that the size of the image you upload should be in the size you would like it to be displayed.

Changing the tagline

You can change the default tagline in Settings -> General -> Tagline. If you would like to hide it, you can do this in the Expression Options -> Style Setting -> Logo -> "Display site tagline next to logo" field.



b. Setting the menu


Here are the steps you have to follow in order to set the menu:

  1. Go to Appearance » Menus. To create the menu click on the "Create a new menu" link.
  2. After you create the menu, you can add Page, Category and custom links from the left sidebar. You can watch this video to tutorial to learn more about working with the WordPress Menus functionality.
  3. Then click on the "Manage Locations" tab section and select the menu that you have created in the "Expression Theme Main Menu" field.

c. Setting the sociable icons

To set the icons, you have to go to Expression Options » General » Sociable Icons section.

First, you have to make sure that the "Display sociable icons" field is set to "ON". After that, you can add the icons you like into the "Add a sociable icon" field:
1. Select the icon
2. Insert the link of the icon in the "Sociable Link" field
3. Insert a hover title (optional) - this title will be displayed when you hover the icon with the mouse
4. Click on the "Add Icon" field to add the icon

Note: Don't forget to click on the "Save Changes" button after you finish setting the Sociable Icons section.


The footer  back to top

The footer is minimal and simple and consists of a copyright section only. You can change the Copyright text in the Expression Options » Translation » Other section.


The sidebars  back to top

This theme supports multiple sidebars and they are all dynamic. This means that you can insert whatever widgets you like on them.

There is one default sidebar that goes to each of the pages. If you would like to have more sidebars than the default one, then you can create your new sidebars in Expression Options » General » Sidebars section:

To customize your sidebars you have to go in the admin panel » Appearance » Widgets. There you should see your sidebars on the right part of the page. Now you can drag and drop widgets from the left into your sidebars and that's it!
Here is an example of a sidebar:


Nivo Slider  back to top

The Nivo Slider looks like this:



a. Nivo slider in the header of the page

Adding images

In order to add images to this slider you have to go to the Expression » Nivo Slider section. All you have to do is to upload the selected image (or add its URL), link of the image (links can be set to the images, so that when the user clicks on the image to be redirected- this feature is optional) and description (also optional) and press the "ADD" button. After that the image is automatically saved for the slider.

Changing the image order

Once you add the images, you can change their order by dragging and dropping the image container to the desired place. After you change their order, in order the new order to be saved, you have to click on the "Save Order" button that would appear right above the images:



Creating additional Nivo Sliders

If you would like to add a new slider, you have to click on the "Add new nivo slider" button located in the top section of the page and insert its name in the dialog box that will be displayed. After that a section for the additional slider images will be created so that you can set the new images to it.



Changing slider options

You can change the default slider options such as setting automatic image resizing and changing slider speed in the Expression Options » Sliders » Nivo Slider section.

Optimal image size: 980px × 400px

Setting a slider to your page

The way you set the slider depends on the page you would like to set it to:

1. Blog page - to set the slider to your blog page you have to go to Expression Options » Page Settings » Blog and select your slider from the "Header" select field.
2. Standard page - for all other (non-blog) pages, you can select the slider to display in the "Header" custom field that you will see displayed below the main content area when the page is opened in edit mode:

a. Nivo slider in the content of a page/post



The purpose of the Nivo slider in the content of the page/post is to show the attachment images of the page/post. Image attachments are the images that are uploaded from the post.

Adding images
In order to add images as attachments to the page/post you have to:
  1. Open the page/post in edit mode
  2. Click on the "Add Media" button above the main content area:
  3. Click on the "Upload Files" tab and upload the images
  4. If you would like to change the default image order or edit the images, select the "Uploaded to this post" option in the filter:

    When you edit the images, they get automatically saved.
Adding the slider into the content of your post/page

You can add the slider to any place of your post/page by using the "contentslider" shortcode:

[contentslider]

In the same way like the WordPress gallery, you can also set an "id" attribute if you would like to display the images from another page/post - the id should be set to the page/post ID:

[contentslider id="123"]

Another option the shortcode supports is displaying images from an existing Nivo slider, created from the Expression Options -> Nivo slider section, rather than the post/page attachments. To load a slider from this section, just specify its name in an "name" attribute:

[contentslider name="New nivo slider"]

Also, if you want to add the slider to a standard post and want it to be displayed instead of the featured image, instead of using the shortcode, you just have to select "Gallery" as post format of the post within the "Post Format" section (you can read more about the post formats in the Blog section):

If you create a gallery post, you can select whether to load the images from the post attachments or from an existing slider in the "Gallery post type slider - display images from:" custom field of the post.



Changing slider options

You can change the default slider options such as setting automatic image resizing and changing slider speed in the Expression Options » Sliders » Nivo in content section.



Template Pages  back to top

a. Portfolio Grid Gallery Page

The Grid Gallery page is the one that you can see on the theme demo as front page:

In this section you can read all the main instructions about setting a Portfolio Grid Gallery page, but also you can watch the Creating A Grid Gallery With Expression Theme video.
Main setup instructions

In this section the main steps you would need to accomplish in order to set this page are explained, more options and settings are described in the "Other Gallery Page Options" section below.

Setting The Page:
  1. Create a new page (Page » Add New)
  2. Select "Portfolio Grid Gallery" in the "Template" field (located in the right sidebar of the edit page section
  3. If you would like to make this page a front page (to be opened by default when the site is visited) go to Settings » Reading » Front page displays » Select "A static page" and select the page that you have just created in the Front Page list:


Creating the portfolio/gallery items (adding images to the gallery)

Each of the images in the gallery represents a single Portfolio Item. For each of the portfolio items:
  1. Creating new items
    You can create a new item in "Portfolio" » Add New section. You can set the title in the "Title" field of the item.
  2. Add Images
    Note: WordPress 3.5 implemented a new Media management interface which changed the way the images are added to the slideshow. Now the theme requires to insert a gallery into the content of the portfolio item containing the images you would like to display. Updating the theme to version 1.2.0 will automatically add the gallery to existing portfolio items.
    1. Click on the "Add Media" button above the main content area:
    2. Open the "Create Gallery" section. If you would like to upload new images click on the "Upload Files" tab and upload the images. If you would like to add existing Media Library images, click on the "Media Library" tab and select the images you like. After you select the images, click on the "Create a new gallery" button.
    3. After this when you click on each image in the gallery, in its Caption field you can set a description to it. You can also change the default image order by dragging and dropping the images on different positions.
    4. When you finish editing the images Click on the "Insert Gallery" button. This will insert a gallery object into the content section of the portfolio item.
    5. Later if you would like to edit the images, click on the gallery object and click on its "Edit Gallery" button:
  3. Setting the thumbnail of the item

    By default the first image of the images you have added will be used as the item's thumbnail. If you would like to set another image as thumbnail, you have to set it as featured image to the item. You can read about how to set a featured image here.

    As the images uploaded would be bigger, the thumbnail image will be resized automatically to the size in which it should be displayed. However, if you prefer to use your custom thumbnail image, you can set it in the "Custom Thumbnail URL" field of the item.

    - Changing the default thumbnail size and layout

    You can set the default layout of the thumbnail in the "Image Layout" field of the item:

    By default the thumbnail will allocate one column and one row, but if you want it to be bigger or displayed in a more lanscape or portrait layout, in this section you can select the number of columns and rows to allocate. The default column and row size can be changed in the "Base Image width" and "Base Image height" fields of the Grid Gallery page.
    Example: If you would like to set a portrait oriented image, you would select 1 column and 2 rows.

    Also you can specify how the thumbnail will be cropped in the "Crop thumbnail from" section:

  4. Selecting the type of the item

    Each portfolio item supports different formats in which it can be displayed. You can select the type of the item in the "Item Type" field:

    Here is an explanation for each of the item type options:

    - Full-width slider and Full-height slider - the item will be displayed in a slider containing all the images added. The difference between the two types of sliders is that with the full-width slider the display width is the same as the window width and the height varies depending on the image aspect ratio - it is mostly suitable for landscape oriented images.
    The full-height slider displays the image in its full height, depending on the window size and the width varies depending on the image aspect ratio. This page template is suitable for both portrait and landscape oriented images.

    The sliders also provide a sharing functionality - by default Twitter, Facebook, Pinterest and Google+ are included, but you can remove any of them or add new buttons in the Expression Options -> Slider Settings -> "Gallery Slider" section.

    - Lightbox Gallery - if you select this option the images of the item in the Grid Gallery will be displayed lightbox:

    With this type selected, the single portfolio item page will automatically include a Quick gallery with option to open the images in lightbox. - Standard Page - the item will be displayed in a standard page format. In the "Standard page item type settings" section of the item you can select the layout and sidebar for the page.
    - Video Item - in the Grid Gallery, a video in lightbox will be played after clicking on the item thumbnail. For the video link you have to set the custom field Custom Link/Video URL by inserting the Video URL in there.

    Here are some examples of inserting videos:

    • YouTube video:
      http://www.youtube.com/watch?v=geplBr2fcZc
    • Vimeo:
      http://vimeo.com/11326568

      Please note that a vimeo link containing www is not valid (such as http://www.vimeo.com/11326568)

    • Flash Alone:

      Please note that you need to insert width and height of the video in the URL of the flash video.
    You can also set a description in the "Video Description" field of the item, which will be displayed below the video.
    With this option selected, the single portfolio page of the item will contain the video embedded in the content of the page.
    - Custom Link - after clicking on the item the user will be redirected to a custom link that you have set in the custom field "Custom Link/Video URL" of the item.
  5. Set a custom order to the item - by default the items are ordered by date, however if you would like to set them in a custom order you can set the gallery to load the items by custom order select "By Custom Order" in the "Portfolio item order" field of the gallery page. The items with the smaller order number will be displayed first, which means that an item with order set to 5 will be displayed before an item with order set to 10.

    In order to change the default order of the portfolio items, go to the Portfolio » Custom Order section where you can easily drag and drop the portfolio items to different positions:



Other Gallery Page Options

b. Full-width and full-height slideshow pages

The full-width and full-height slideshow pages are pages that contain an image slideshow which is displayed on the full screen without any additional content, with a thumbnail image container in the bottom. The Full-width page template displays an image to its full width - the display width is the same as the window width and the height varies depending on the image aspect ratio. This page template is mostly suitable for landscape oriented images.
The full-height page template displays the image in its full height, depending on the window size and the width varies depending on the image aspect ratio. This page template is suitable for both portrait and landscape oriented images.

As the steps for creating both template pages are the same, they are explained in this section:

Creating the page

In order to make one page a full-width slideshow page you have to select the Template for this page to be Full width slideshow. In order to make one page a full-height slideshow page you have to select the Template for this page to be Full height slideshow.

If you would like to make this page a front page (to be opened by default when the site is visited) go to Settings » Reading » Front page displays » Select "A static page" and select the page that you have just created in the Front Page list.


Adding the images
Note: WordPress 3.5 implemented a new Media management interface which changed the way the images are added to the slideshow. Now the theme requires to insert a gallery into the content of the page containing the images you would like to display. Updating the theme to version 1.2.0 will automatically add the gallery to existing slideshow pages.
  1. Click on the "Add Media" button above the main content area:
  2. Open the "Create Gallery" section. If you would like to upload new images click on the "Upload Files" tab and upload the images. If you would like to add existing Media Library images, click on the "Media Library" tab and select the images you like. After you select the images, click on the "Create a new gallery" button.
  3. After this when you click on each image in the gallery, in its Caption field you can set a description to it. You can also change the default image order by dragging and dropping the images on different positions.
  4. When you finish editing the images Click on the "Insert Gallery" button. This will insert a gallery object into the content section of the page.
  5. Later if you would like to edit the images, click on the gallery object and click on its "Edit Gallery" button:
Slideshow Options

All the slideshow settings can be changed in the "Slder Settings" » "Full-width slider" (for the full-width page) and "Slder Settings" » "Full-height slider" (for the full-height page) section of the Options panel. In this section you can set automatic thumbnail cropping and change some of the main animation settings.


c. Index/Blog page

Index page is the default home page that is opened when first installing the theme. This page actually is a blog page.

Note: All the settings for the Blog page can be set in the Expression Options » Pages » Blog section.

There are 2 different ways of using this template:

  1. As a home/front page- the blog will be opened by default on your site. To set the blog like this, you have to go to Settings » Reading and select "Your latest posts" in the "Front page displays":
  2. As a normal, non-home page. In order to do this you have to create a new page, lets say that its name is "Blog". After this you have to go in the Admin Panel » Settings » Reading and you have to select "A static page" option. Below this field you have to select the page which will be your home page in the "Front page" field and you have to select the name of the page that you have just created (in our case "Blog") in the field "Posts page". Now your Blog page will contain the latest posts:
Excluding categories from the blog:

In order to exclude categories from the blog you have to go to the Expression Options in the section Pages » Blog » Exclude categories from blog. In this section you have to check the names of the categories that you want to be excluded.



Defining the number of posts on the blog:

In order to define the number of posts per page that will be shown on the blog you have to go to the Expression Options in the section Pages » Blog » Number of posts per page and you have to edit the value of this field. Default is set to 5.

Setting a slider/static image for the page:

In order to set a slider you have to go in the Expression Options in the section Pages » Blog » Header. In this field you can select between Nivo Slider/Fader, Static Header Image and None.
-If a slider is selected, the default slider of the selected slider type will be automatically assigned to the blog page. If you have created additional sliders, their name will be displayed in the relevant slider section of the drop-down list.
-If Static Header Image selected, you have to insert its URL into the the Static Image URL field below.



Selecting a layout for the page

For the blog page you can select the layout to be Right Sidebar, Left Sidebar or Full Width. You can do this in the Page Layout section. This setting will affect also the blog post, archive and search layouts.



The blog sidebar:

By default this page template uses the Default Sidebar. If you would like to use another sidebar, you can create one in the Expression Options » General » Sidebars and after that you can select the created sidebar in the field Sidebar in the Expression Options » Pages » Blog » section. To customize it you have to go to the Appearance » Widgets and find the selected sidebar. You can drag and drop widgets from the left into it.


Setting advanced blog pagination

In order to have advanced pagination enabled on your blog page (as on the screenshot above) you need to install the WP-Pagenavi plugin. You can read more about how to do it the section Plugins included.


The blog posts:

The blog posts look like this:



Selecting a format for the post:

The posts support three formats - Standard, Gallery and Video and the format can be selected in the "Format" section of the post:

Here is an explanation about each of the supported formats:
- Standard - will display a featured image as header of the post. You can read here about how to set a featured image to the post.
- Gallery - will display all the image attachments as a Nivo slider in the beginning of the post (as header of the post). You can read more about it here.
- Video - will display a video as header of the post. You can set the video URL in the "Video URL" custom field of the post. The theme uses the WordPress [embed] shortcode to insert the video, you can see the supported formats on the WordPress Embeds page. We have also included support for Flash videos (with .swf extension).



Hiding part of the content of the post with the "Read More" link:

Just before the text that you want to be hidden you have to click on the "Insert more tag" button (Alt+Shift+T):



Enabling threaded comments (with reply functionality):

In order to enable threaded comments, you have to go to Settings » Discussion and check the field "Enable threaded (nested) comments x levels deep"




d. Quick/Easy Gallery page

This is the default WordPress image gallery - the purpose of this gallery is to insert multiple images at once - you can very quickly create multiple galleries just for several minutes. Here is how the gallery looks like:

In order to create a quick gallery you have to:

  1. Create a new page (you don't have to set a page template to it)
  2. Click on the "Add Media" button above the main content area:
  3. Open the "Create Gallery" section. If you would like to upload new images click on the "Upload Files" tab and upload the images. If you would like to add existing Media Library images, click on the "Media Library" tab and select the images you like. After you select the images, click on the "Create a new gallery" button.
  4. After this when you click on each image in the gallery, you can set a title and description to it.
  5. Use the "Gallery Settings" section to change the gallery settings:

    In the "Link to" select "Media File" and in the "Gallery Columns" field select 5 if the page is full width or 3 if the page contains a sidebar.
    Click on the "Insert Gallery" button.
  6. If you would like to change the default image size, you can do it in Settings » Media » Thumbnail Size field. Please note that if you change the default size, you would have to reupload the images again, as WordPress automatically crops the images during image upload only.

e. Contact Form page

The contact form page looks like this:


This page contains an AJAX contact form which visitors of your website can use to contact you.

To make one page contain a contact form you have to do some settings. When you create (or edit) your page, you should find the field Template and in it to choose the Contact form page option. After that immediately your page will contain a contact form.

To set a text in the contact page, just insert it as a content of the page.

Setting the email address to which to send the email
To set the email address, you have to go to the Expression Options and in the section Pages » Contact find the field Email to which to send contact form message in. In this field you have to insert your email address.
As you can see in this section there are some other fields that you can edit. I have provided this feature in case that you need to translate your site or just don't like the text that is output.

Setting a sender e-mail address

You can set the e-mail address to which to send the messages in the Photolux Options » Page Settings » Contact » Email sender field.

Important: Please make sure to set a sender email address to avoid messages sent by users using a Yahoo email address failing to be sent.

Yahoo has recently published a DMARC policy of reject, meaning that all the emails that are sent from Yahoo emails, but not from the Yahoo servers, should be rejected by the email providers. This means that if your site visitor sets a Yahoo email and this email is set as a sender, you may not be able to receive the email (depending on the email provider that you use to receive the messages). Therefore, please make sure to set your custom email address in this field (such as [email protected], non-Yahoo address), so that you can make sure that you will receive all the emails from Yahoo users.

Setting the sidebar

By default this page template uses the Default Sidebar. If you would like to use another sidebar, you can create one in the Expression Options » General » Sidebars and after that you can set the custom field Sidebar and select the sidebar that you have just created. To customize it you have to go to the Appearance » Widgets and find the selected sidebar. You can drag and drop widgets from the left into it.


Setting the page layout

For this page you can select the layout to be Right Sidebar, Left Sidebar or Full Width. You can do this by setting the custom field Page Layout:


Setting a slider/static image for the page:

In order to set a slider, you have to set the custom field Header on the page. In this field you can select between Nivo Slider/Fader, Static Header Image and None.
-If a slider is selected, the default slider of the selected slider type will be automatically assigned to the blog page. If you have created additional sliders, their name will be displayed in the relevant slider section of the drop-down list.
-If Static Header Image has been selected, you can set the static image by setting the image as a Featured one. Here is explained how to do this.



f. The Default page

This is the page template that is assigned by default when a page is created. By default this page template uses the Default Sidebar. If you would like to use another sidebar, you can create one in the Expression Options » General » Sidebars and after that you can set the custom field Sidebar and select the sidebar that you have just created. To customize it you have to go to the Appearance » Widgets and find the selected sidebar. You can drag and drop widgets from the left into it.

Setting the page layout

For this page you can select the layout to be Right Sidebar, Left Sidebar or Full Width. You can do this by setting the custom field Page Layout:


Setting a slider/static image for the page:

In order to set a slider, you have to set the custom field Header on the page. In this field you can select between Nivo Slider/Fader, Static Header Image and None.
-If a slider is selected, the default slider of the selected slider type will be automatically assigned to the blog page. If you have created additional sliders, their name will be displayed in the relevant slider section of the drop-down list.
-If Static Header Image has been selected, you can set the static image by setting the image as a Featured one. Here is explained how to do this.



Changing the theme style

All the style settings can be done in the Expression Options » Styles

Changing the background color:

You can select a background color within the predefined colors we have provided from the Predefined Background Colors field.


If you would like to use another custom color, rather than one of the predefined colors, you can select your color in the Custom Background Color field below:


Changing the background image/pattern:

If you would like to use a background pattern for the theme, rather than the default one, you can choose one from the Background Pattern section.

If you would like to use your own custom pattern, you can upload it within the "Custom Background Pattern" field below.

If you would like to use a full width non-repeatable image, you can upload one within the "Full Width Background Image" field. We recommend that the image is neither too big or too small, as big images would take longer time to load and smaller images wouldn't look nice resized on higer resolutions - a medium sized image would be around 1000 pixels wide.

These are the main style settings that you can do on the theme. In the Styles section there are some other custom settings that you might need to change such as text size, different sections' colors, etc.


Styled elements and shortcodes  back to top

Important: If you are running WordPress 5.0 or newer, please make sure to install the Classic Editor plugin. This theme supports the classic editor only and a major part of its elements rely on the classic editor.

a. Formatting Buttons

There are buttons for almost all of the styled elements that the theme provides. These buttons allow you to more easily insert styled elements and also you are able to see how they will look from the editor.

Inserting Lighbox image

One way to insert image lightbox is to use the "Lightbox Image" button. Another way is to insert the image into the post (via the "Add Media" button), after that click on the image » an Edit Image button will be displayed. You have to click on this button, and in the window that is opened you have to click on the "Advanced Settings" section. In this section, in the field "Link rel" you have to insert the word lightbox. This automatically will set the lightbox functionality to the image.

b. Shortcodes

Some elements, such as the jQuery tabs, can be displayed by using shortcodes - in order to use a shortcode you just have to paste its code into the content text area of the page/post.
Available shortcodes:

Tabs

The jQuery tabs look like this:

		[tabs titles="Title One, Tab Two, Tab Three" width="small"][pane]Tab One Content[/pane] [pane]Tab Two Content[/pane] [pane]Tab Three Content[/pane][/tabs]

As you can see, in the tabs element you can specify the width of the tab title. The available options are "small", "medium" and "big".

Note:Please make sure that all the shortcode tags are on the same line, but separated with at least a space, for example:

		... [pane]Tab One Content[/pane] [pane]Tab Two Content[/pane] ...

Accordion

The Accordion looks like this:

		[accordion][apane title="First Pane"]Pane One Content[/apane] [apane title="Second Pane"]Pane Two Content[/apane] [apane title="Third Pane"]Pane Three Content[/apane][/accordion]
Note:Please make sure that all the shortcode tags are on the same line, but separated with at least a space, for example:

		... [apane]Tab One Content[/apane] [apane]Tab Two Content[/apane] ...


Sidebar contact form

The sidebar contact form looks like this:

You can insert this contact form in the sidebar or footer section just by using the WordPress Text widget and inserting the following shortcode into it:

		[contactform]
You can set the email to which to send the messages in the Expression Options » Page Settings » Contact section.

Fonts  back to top

All the fonts settings can be done in the Expression Options » Style settings » Fonts section. By default the theme uses a Google Font - "PT Sans".

Using Google fonts

In order to use Google Fonts, the field "Enable Google Fonts" should be set to "ON". As mentioned above, the theme already uses a font from the Google Fonts API. If you would like to remove this font, and use another ones, you can remove the old font by clicking on the red X button of their container and you can add the new ones in the text area provided within the "Add Google Font". When adding the new font, please make sure that you insert the URL of the font only, not the whole embed link. For example, if you would like to insert the Nobile font, you have to click on the "Quick Use" button:

In the new window that will be opened, select the settings according your needs and from the embed sectuion you have to copy only the value that is contained within the href property:

After you add the font URL in the "Add Google Font" field, you have to set the theme use this font. You can do this, by setting its font name in the "Headings font family" or "Body text font family" field, depending where you would like to use this font. For example, if you would like to add the font for the headings, you first have to get its font name from the Google page:

and insert its name within the "Headings font family" section:

The other fonts, that go after this font name are the fonts that will be used, in case there is some problem with loading the font from Google.

Note:In order to use a Google font for the headings, please make sure that the Cufon font replacement is disabled.
Note:If you prefer not to use Google fonts, it would be better to disable them within the "Enable Google Fonts" field, so that the font files are not loaded unnecessary.
Using Cufon font replacement

You can enable Cufon font replacement by setting "ON" in the "Enable Cufon for headings" field. When Cufon is enabled the selected font will be set for all the main headings, and for the headings this font will be used with higher priority than any font settings set in the below section or within the style.css file. With Cufon enabled, you can still use Google or standard fonts for the rest of the sections.

If Cufon enabled, you can select either one of the fonts that the theme goes with (in the "Heading Cufon Font" field) or upload your own font within the "Custom Heading Font" field. The font to upload should be in JavaScript format and you can generate this JavaScript file on the following page: http://cufon.shoqolate.com/generate/


Translation  back to top

For this theme we have provided the possibility to easily translate/change the built-in words from the admin panel, without having to edit the PHP files. You can do this in the Expression Options in the Translation section. For the contact form you have to edit the fields in the Pages » Contact section.


Setting a multi-language installation

If your WordPress installation supports more than one language, you can set the theme built in words change depending on the selected language. In order to do this you have to follow the following steps:

  1. In Expression Options » Translation » Settings select "ON" for the "Enable Translation" field.
  2. In the same section select the locale for the default language. If your default langauge is English, you don't have to change this field. If, for example, you would like to change the default language to German, in this field you have to insert de_DE. Here you can see some examples of locales. For the default installation language, the theme will use the words that are set in the Expression Options » Translation section.
  3. Create .mo files for the additional languages
    In the lang folder within the main theme folder you will find a file called default.po. You have to open this file with a program that can generate .mo files, such as PoEdit. Once you open it, you can insert the words in the additional language. Here is an example, with the file opened with PoEdit and the meanings of the words inserted into English:

    In the same way you can insert the translations in the additional language. Once you save the document, a .mo file will be generated in the directory you specify. You have to rename this .mo file to the locale of the language used. For example, if this language is French, the name of the file should be fr_FR.mo. After that, you have to insert this .mo file in the lang directory of the theme.



Plugins included  back to top

The theme goes with some additional plugins included:

All the optional widgets/plugins (except the required Classic Editor plugin) are located within the plugins folder of the download folder. In order to activate them, you have to go to the WordPress admin panel -> Plugins -> Add New -> click on the Upload link and find the plugin file you want to install on your local file system. After the plugin has been uploaded successfully you need to click on the Activate link. For the WP PageNavi plugin only activation is needed. For the other two you need to go to the Widgets section and drag and drop them to the sidebar you like.

Note: The Contact Form widget that you see on the demo in sidebar section is not added via plugin, but with a shortcode. It is explained how to add a contact form in the Shortcodes section above.



CSS Files  back to top

The theme contains the following CSS files:

The first file (style.css) contains all of the specific stylings for pages. The file is separated into sections:

  1. CSS Restart
  2. Basic Text and Heading Styles
  3. Basic Document Styling
  4. Sliders
  5. Content
  6. Portfolio
  7. Sidebar
  8. Footer
  9. Widgets and Page Templates
  10. Elements
  11. Others
  12. Updates

For each of the main parts of the website there are comments. For example, for the footer the comments look like this: 
 
/*-------------------- FOOTER --------------------*/ 
--footer styles here--
Note: If you need to do some CSS changes, it is recommended to add the new styles into the Expression Options » Styles » Additional Styles section, rather than editing the style.css file itself, as these changes will be saved trough the updates of the theme.


Javascript files  back to top

The theme contains the following JavaScript files:

Font files - all fonts have been downloaded from http://www.fontsquirrel.com/ and have been generated from http://cufon.shoqolate.com/generate/


PhotoShop files and image resources  back to top

The theme comes with PhotoShop files included - they are located within the photoshop_files folder of the main downloaded zip file. Every PSD file has a clear structure and is organized in groups with well named layers.


Special thanks to all the great graphic resorces to:

Images used on the demo: http://photodune.net/

PHP files  back to top

Except the main files needed for this theme to run, here are the other external PHP files used:

Troubleshooting  back to top

In this section you can check the most common issues and the solutions for them

  1. Fail to install the theme

    If you experience any problems with installing the theme, please check the following:

    • Please make sure you have installed the theme as described in the Activating the theme section
    • If you have used the WordPress uploader and can't upload the theme: as the theme is versatile and provides lots of options, its zip file is bigger than standard themes and some servers can't handle an upload with that file size. In this case you have to use an FTP client to upload the theme.
    • If you have used an FTP client to upload the theme:
      * make sure the theme main files (such as style.css and index.php) file are located just within one directory apart the wp-themes directory. The right way to locate your root theme files is for example themes/Expression but not themes/Expression/Expression
      * the problem you are experiencing may be related with the FTP client used - in this case you can try with another one- we recommend FileZilla FTP client.
    • Make sure you have WordPress 3.0 or higher installed
    • Make sure your server is running PHP version 5 or higher. Although when developing the theme, we have followed the main rules for cross-version compatibility, we have the possibility to test the theme on servers running versions higher than 5.0. If your server runs an old PHP version and you get any errors when installing the theme, you can contact the hosting support and ask them update PHP to a newer version.

  2. Portfolio thumbnail/Slider image not generated

    Sometimes the image resizing script doesn't generate the image due to the following reasons:
    *lib/utils/cache directory is not editable (at least 755)
    *original image size is too big (more than 2000 pixels)
    *original image is not located within the WordPress installation directory
    *your site is hosted on a HostGator server - HostGator have some known incompatibilities regarding timthumb and in this case you have to contact the support and ask them to make your server settings compatible for timthumb. On the this page you can find an article with an email template that you can use to send them the query.

  3. A "406 Not Acceptable" error occurs when saving the option in the Expression Options page

    This error may occur on some servers, because of some security settings and it is related with the jquery.cookie.js script which is used for saving the last edited tab within the options page. In this case, apart of changing the server settings, the easiest way to fix this would be to disable this functionality. You can do this by opening the lib/functions/general.php file and change line 101:

    		pexetoOptions.init({cookie:true});
    to be like this: 
    		pexetoOptions.init({cookie:false});
  4. Portfolio section does not exist in the main menu

    This theme is available for WordPress version 3.0 or higher, so please make sure you have the latest version installed.

  5. Appearance » Menus section does not exist

    This theme is available for WordPress version 3.0 or higher, so please make sure you have the latest version installed.

  6. Contact form not sending emails

    This issue is mostly likely to happen if you have uploaded the theme via an FTP client or uploaded the whole download zip file rather the theme only zip file. If so, you need to make sure that the main theme files are contained within just one directory of the wp-themes directory, not more. For example for the style.css file it is correctly to be located within http://site.com/wp-content/themes/Expression/ but not http://site.com/wp-content/themes/Expression/Expression/

    Also another reason for this issue is that the server where the theme is hosted has some restrictions set about email sending.

  7. Style changes within the Options panel do not affect the theme

    This issue is mostly likely to happen if you have uploaded the theme via an FTP client or uploaded the whole download zip file rather the theme only zip file. If so, you need to make sure that the main theme files are contained within just one directory of the wp-themes directory, not more. For example for the style.css file it is correctly to be located within http://site.com/wp-content/themes/Expression/ but not http://site.com/wp-content/themes/Expression/Expression/

  8. Portfolio items not loading on Internet Explorer

    This issue is most likely to happen if you have a broken image URL has been inserted. In this case, please make sure that all the image URLs that you have inserted are URLs of existing images.

  9. In the Expression Options Upload Button/Color Picker/Add Slider Image Functionality is not working

    This is most likely to be caused by a plugin you have installed. You can try to deactivate all the plugins you have installed and check if it will work. If it turns out that a plugin is causing this, you can deactivate the plugin until you set the theme and activate it back once you are done.


Support  back to top

We will do our best to assist with questions directly related to the theme set up, however please note that theme support is completely voluntary for ThemeForest authors. Therefore before you contact us, please consider finding an answer to your question in:

Note: If you have already explored all the sources of information stated above, and you are still experiencing problems with the theme set up, you can open a ticket with your question on the Pexeto Support Site.
'

Updates  back to top

a. Installing an update

You can install an update of the theme either automatically by using the Envato Market Plugin or manually.

If you have modified the theme's code: your modifications will be lost when you install the update. Please create a backup of your code modifications and consider using a child theme instead of modifying the theme's code. More info here.

Installing the update automatically
Important: The folder that contains the theme files must be called "expression" in order to automatically update the theme.

Due to the retirement of the old Envato API, since version 1.4.3 of the theme we have changed the way automatic updates are installed from the Dashboard. We had to remove the Envato Toolkit Library from the theme and recommend installing the Envato Market Plugin that can replace it.

In order to install updates automatically from the dashboard, you first need to install the Envato Market Plugin. The Envato Market Plugin, created by the Envato team, can be used to install updates of all of your ThemeForest and CodeCanyon items.


Installing the Envato Market Plugin

  1. Download the plugin
    • If you are running version 1.4.3 or later, you should see a notification in your Dashboard to automatically install the plugin
    • If you are using an older version or you don't see the dashboard notification:
      - Download the plugin from here or
      - Go to the Envato Market Github page, scroll down to the "Installation" section of the plugin description and click on the "download" link. Do not use the "Download ZIP" link of the repository!
  2. Install the plugin. After you have downloaded the plugin, you can install it from the Plugins » Add new » Upload Plugin section and select the downloaded plugin zip file.

Configuring the Envato Market Plugin

Once you have the Envato Market Plugin installed and activated, you will need to setup your API token in order to be able to use it. To setup your token, visit the "Envato Market" page of your dashboard and follow the instructions on the page. This page includes a link to the Envato Market site where you can easily generate your token.

Once you setup your token, you should see a "Themes" tab on the page where you can install updates of all your ThemeForest themes. Clicking on the "Update Available" button will start installing the update.



If you experience issues with using the Envato Market Plugin



Installing an update manually

There are two main ways of installing an update manually:




b. Version 1.1.0

This update includes:


c. Version 1.2.0

This update includes:


d. Version 1.2.1

This update includes:


e. Version 1.2.2

This update includes:


f. Version 1.2.3

This update includes:


g. Version 1.3.0

This update includes:


h. Version 1.3.1

This update includes:


i. Version 1.3.2

Bugfix release - this update includes:


j. Version 1.4.0

This update includes:


k. Version 1.4.1

This update includes:


l. Version 1.4.2

This update includes:


m. Version 1.4.3

This update includes:


n. Version 1.4.4

This update includes:


o. Version 1.4.5

This version includes:


p. Version 1.4.6

This version includes:


q. Version 1.4.7

This version includes:




Once again, thank you so much for purchasing this theme! If you like it, please don't forget to rate it on the ThemeForest site.

Pexeto

Go To Table of Contents