Introducing Display WordPress Theme

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program. If not, see http://www.gnu.org/licenses/.

Thank you for purchasing our product! We are very glad that you have decided on our Display WordPress Theme.

This documentation will help you to set up and use the Display WordPress Theme. The theme is very easy to use and we are here to guide and help you, so please read and follow the documentation, if there are some other issues you want to discuss then do not hesitate to contact us on support@teslathemes.com. This documentation is more of a reference work if you do not know what to do, or if you are not familiar to WordPress.

Please read the following very carefully as it will help you set the theme up, we have gone through the setup process multiple times and provided the best possible instructions.

We strongly recommend you to use a fresh install of WordPress and integrate your content into the pages according to the documentation. Of course, you can try to implement the theme into your current WordPress, but we will not provide in-depth support for it. The theme has specific settings that may conflict with your current setup of categories, plugins, javascript use, and more.

We wish you good luck in your work with Display WordPress Theme, and of course we would love to see your website and what you come up with by using this theme.

The theme is very easy to use and we are here to guide and help you, so please read and follow the instructions and if you have further questions write us a email support@teslathemes.com. This documentation is more of a reference work if you do not know what to do and need a better understanding on how the template is built write us an email.

Installing WordPress

To the Top

Step 1: Download and Extract

Download and unzip the WordPress package from Download Wordpress.

  • If you will be uploading WordPress to a remote web server, download the WordPress package to your computer with a web browser and unzip the package.
  • If you will be using FTP, upload the wordpress folder to your site.
  • After a successful upload, then you access your site URL and get this message:
Creating a new configuration file

Step 2: Edit the Configuration File

Auto Mode: After accessing the site you will get the configuration page:

Establishing a connection

If the information is correct and everything works fine you will receive:

Successful

If it's successful then skip the "Manual Mode" if not, follow the instructions bellow.

Manual Mode: You can either rename the file wp-config-sample.php to wp-config.php on your local machine or on you server (you'll still need to tell WordPress your database information).

Open wp-config.php with a txt editor and enter your database information under the section labeled:

/** The name of the database for WordPress */
define('DB_NAME', 'database_name_here');

/** MySQL database username */
define('DB_USER', 'username_here');

/** MySQL database password */
define('DB_PASSWORD', 'password_here');

/** MySQL hostname */
define('DB_HOST', 'localhost');

/** Database Charset to use in creating database tables. */
define('DB_CHARSET', 'utf8');

/** The Database Collate type. Don't change this if in doubt. */
define('DB_COLLATE', '');
                    

After the information is edited upload the file to the server.

Step 3: Site name and login data

If it's all sparky then you click Run the Install and fill all the lines bellow:

Login Information

This being the last step you will see a success message.

Success

Click Log in and now you can proceed to you site. Now you can go to installing your Display WordPress Theme.

Installing Theme

To the Top

To install the Display WordPress Theme you will need WordPress v3.4 or newer.

Option A

Follow the steps and upload the Theme's installation zip file through the WordPress admin backend:

upload

Then, when prompted activate the theme:

active

Note: If you can't get passed the file upload limit and/or if you get an error message mentioning exhausted memory size or something in those lines, you could try to increase that limit by adding to the "wp-config.php" the following line of code:

define('WP_MEMORY_LIMIT', '64M');

Option B

You have to upload via FTP to the Server, in Wordpress Folder → wp-content → themes folder the Display WordPress Theme Folder.

If everything went well in Option A or B, the theme should appear under Appearance → Themes like shown below:

cover

Now you are ready to customize your theme

General Options

To the Top

Create a page that will serve as homepage - In wordpress admin panel under Pages → Add New, name it for example "Front Page Default". Also, select "Default Front Page" as the template used by the page.

Create a page that will serve as the archive page of blog posts - In wordpress admin panel under Pages → Add New, name it for example "Blog". Make sure that the permalink slug is "blog" only. Also, select "Default Template" as the template used by the page.

Set the front page to display as a static page: - Go to Settings → Reading → A static page (select below) → Front page: → Choose your page from the drop-down menu.

Choose your posts page from the drop-down menu. It should be the "Blog" page we have just created.

Your page should look something like:

home page

We recommend you set the number of items to show to be a number divisible by 3, for example: 6, 9, 12, etc

Tesla Framework options

To the Top

Tesla Framework options are divided into the following pages:


General Options

image

On this page you can set the following options:

Site Logo - you can set an image or you can set a text string as the logo, in case of a text string you can also specify the color, the font and the font size (in pixels)

Favicon - favicon is an image that is shown in the browser tab, also in the browser bookmarks

Site Color - set the general site color used for links, menus etc. (the default color for Display is #45c9c3)


Site Background

image

On this page you can set the background of the site.

You can set the background color and background image.

The options "Position", "Repeat" and "Attachment" are related to the background image.


Social Icons

image

On this page set the URLs to the respective social platforms.

If a social link is present then the corresponding icon and link will be displayed in the "Display - Social Icons" widget.


Twitter Settings

image

On this page you can set the Twitter API keys.

The Twitter API keys are required in order for the "Display - Twitter" widget to function.

Here is a video tutorial on how to obtain your own keys and configure them in our themes: http://youtu.be/WZZaHpAm_0w.


Additional Options

image

In the "Custom CSS" box you can enter the desired CSS code that will be appended to the end of all the CSS styles loaded by the theme. You can use this box to customize the CSS of the theme.

In the "Append to footer" box you can enter the desired code that will be appended to the end of the site content just before the closing body tag (</body>). You can use this box to paste the code from the Google Analytics for example.

In the "Header Menu" box you can specify the alignment of the header menu. The available options are left, center and right (right being the default position).


Contact Info

image

On this page you can configure the following section:

Contact Map - this map is shown on the "Contact" page template, use the input box above the map to search the location on the map (this input is not saved, to enter the address in a textual form use the "Address" input described below), you can also specify the icon shown on the map and the height of the map

Contact Form - set the e-mail that will receive the message from the contact form, also you can set a prefix for the e-mail subject so you can filter the messages from other sources in your inbox

Contact Phone Numbers - you can set multiple phone numbers, click the green "+" button to add a phone input and click the red "x" button to remove a phone input

Contact E-mail - set the contact e-mail (this e-mail is only shown on the site and not used to receive the contact messages)

Contact Address - set the contact address (this address is shown as it is and does not affect the location on the contact map)

All the information on this page is used by the "Contact" page template.

All the information except the contact map is used by the "Home" page template and [displaywp_contact] shortcode.


Subscription

image

On this page you can view the subscribers that have been subscribed through the "Display - Newsletter" widget. For performance reasons you can view only 20 subscribers here. To get the full list of subscribers use the export function.

Theme Specific Post Options

To the Top

Featured Video

Page the embedded code of the desired video in this box.

Setting this option will ignore the featured image (if it is set).

Theme Specific Page Options

To the Top

Page Options

In this box you can set the general page layout. Select between "Default", "Blog Post" and "Clean".

Also if the "Default" layout is set you can set the description which will appear underneath the title.

Featured Video

Page the embedded code of the desired video in this box.

Setting this option will ignore the featured image (if it is set).

Template Options

This box contains various options related to specific templates. When a page template is selected the corresponding options will be revealed.

Creating Content

To the Top

Display theme features a number of content sections each represented by a custom post type.

To manage (add/remove/change) the content in each section go the corresponding page in the Dashboard (for example to manage the team section go to Dashboard > Team).

The full list of custom posts available and the options related to each of them are available in the "Custom Posts" section of this document.


So the content is created in the custom post sections but to display it you need to use either page templates or shortcodes.

To use a page template go to the "Edit Page" of a page and in Page Attributes box select an option in the Template dropdown input as shown in the image below.

image

You can check the full list page templates and their related options in the "Page Templates" section of this document.


To use a shortcode simply write the shortcode in the Editor input on the "Edit Page" as shown in the image below.

image

We recommend to write each shortcode independently on a separate line.

You can specify attributes in the shortcodes as shown in the example above.

You can check the full list of shortcodes and their available attributes in the "Shortcodes" section of this document.

Custom Posts

To the Top

Display theme contains the following custom posts:


Services

To manage the services go to Dashboard > Services.

Each post created in this section will represent a service.

The shortcodes that shows the content from this section is [displaywp_services].

Below are shown the options available when creating a service and their meaning.

image

The title of the post will be the title of the service.

The image will be shown above the title.

The description will be shown below the title.

If the URL is set then it will be applied to the title.

Below is shown a sample output based on the content from this section.

image


Offers

To manage the offers go to Dashboard > Offers.

Each post created in this section will represent an offer.

The shortcodes that shows the content from this section is [displaywp_offers].

Below are shown the options available when creating an offer and their meaning.

image

The title of the post will be the title of the offer.

The image will be shown on the left of the left side of the title.

The description will be shown below the title.

Below is shown a sample output based on the content from this section.

image


Skills

To manage the skills go to Dashboard > Skills.

Each post created in this section will represent a skill.

The shortcodes that shows the content from this section is [displaywp_skills].

Below are shown the options available when creating a skill and their meaning.

image

The title of the post will be the title of the skill.

The value will be used to fill the bar indicating the skill mastery as well as it will be shown on the left side of the title.

Below is shown a sample output based on the content from this section.

image


Choose Us

To manage the "Choose Us" items go to Dashboard > Choose Us.

Each post created in this section will represent a "Choose Us" item.

The shortcodes that shows the content from this section is [displaywp_choose].

Below are shown the options available when creating a "Choose Us" item and their meaning.

image

The title of the post will be the title of the "Choose Us" item.

The description will be shown below the title.

Below is shown a sample output based on the content from this section.

image


Toggle List

To manage the "Toggle List" items go to Dashboard > Toggle List.

Each post created in this section will represent a "Toggle List" item.

The shortcodes that shows the content from this section is [displaywp_toggle].

Below are shown the options available when creating a "Toggle List" item and their meaning.

image

The title of the post will be the title of the "Toggle List" item.

The description will be shown below the title.

Below is shown a sample output based on the content from this section.

image


Staff Info

To manage the "Staff Info" items go to Dashboard > Staff Info.

Each post created in this section will represent a "Staff Info" item.

The shortcodes that shows the content from this section is [displaywp_staff].

Below are shown the options available when creating a "Staff Info" item and their meaning.

image

The title of the post will be the title of the "Staff Info" item.

The value will be displayed above the title.

Below is shown a sample output based on the content from this section.

image


Secondary Slider

To manage the "Secondary Slider" slides go to Dashboard > Secondary Slider.

Each post created in this section will represent a "Secondary Slider" slide.

The shortcodes that shows the content from this section is [displaywp_secondary].

Below are shown the options available when creating a "Secondary Slider" slide and their meaning.

image

The title of the post will not be used in the content output however it is still needed in order to identify the post.

The image will be displayed as the image of the slide.

Below is shown a sample output based on the content from this section.

image


Team

To manage the team members go to Dashboard > Team.

Each post created in this section will represent a team member.

The shortcodes that shows the content from this section is [displaywp_team].

Below are shown the options available when creating a team member and their meaning.

image

The title of the post will be the name of the team member.

The image will be displayed above the name of the team member.

The position will be displayed below the name of the team member.

If the Facebook URL is set then the corresponding social icon and link will be displayed below the position of the team member.

If the Twitter URL is set then the corresponding social icon and link will be displayed below the position of the team member.

If the link URL is set then it will be applied to the name of the team member.

Below is shown a sample output based on the content from this section.

image


Portfolio

To manage the portfolio projects go to Dashboard > Portfolio.

Each post created in this section will represent a portfolio project.

The shortcodes that shows the content from this section is [displaywp_portfolio].

Below are shown the options available when creating a portfolio project and their meaning.

image

The title of the post will be the title of the portfolio project.

The contents entered in the editor of the posts will be displyed on the single page of the portfolio project in the right column.

The small image will be displayed in the portfolio section as the image representing the portfolio project as well as in the related projects section of another portfolio project.

The big image will be displayed when clicking on the zoom icon of a project in the portfolio section.

The author will be displayed on the single page of the portfolio item below the title.

The featured image of the post will be displayed on the single page of the portfolio project in the left column.

The date of the post will be displayed on the single page of the portfolio below the author.

The categories of the post will be used as filter criterias in the portfolio section as well as on the single page of the portfolio item below the date.

Below is shown a sample output based on the content from this section.

image

Below is shown a sample single project page.

image


Main Slider

To manage the "Main Slider" slides go to Dashboard > Main Slider.

Each post created in this section will represent a "Main Slider" slide.

The shortcodes that shows the content from this section is [displaywp_main].

Below are shown the options available when creating a "Main Slider" slide and their meaning.

image

The title of the post will be the title of the slider.

The image will be displayed as the image of the slide.

The icon will be displayed above the title of the slide.

Below is shown a sample output based on the content from this section.

image


Testimonials

To manage the testimonials go to Dashboard > Testimonials.

Each post created in this section will represent a testimonial.

The shortcodes that shows the content from this section is [displaywp_testimonials].

Below are shown the options available when creating a testimonial and their meaning.

image

The title of the post will be the name of the author of the testimonial.

The value entered in the "Subtitle" option will be displayed below the name of the author.

The image set in the "Image" option will be displayed above the name of the author.

The value entered in the "Text" option will be displayed below the name of the author and the subtitle.

Below is shown a sample output based on the content from this section.

image


Clients Slider

To manage the "Clients Slider" slides go to Dashboard > Clients Slider.

Each post created in this section will represent a "Clients Slider" slide.

The shortcodes that shows the content from this section is [displaywp_clients_slider].

Below are shown the options available when creating a "Clients Slider" slide and their meaning.

image

The title of the post will not be used in the content output however it is still needed in order to identify the post.

The image set in the "Image" option will be used as the image of the slide.

If the "URL" option is set then the corresponding link will be applied to the image of the slide.

Below is shown a sample output based on the content from this section.

image

Page Templates

To the Top

Display theme contains the following page templates:

  • About Us - creates a page that displays the information about the company / website / project
  • Contact - creates a page that displays the contact information
  • Home - creates a page that has the homepage layout with a slider in the header
  • Portfolio - creates a page that shows the portfolio
  • Services - creates a page that displays the services
  • Team - creates a page that showcases the team

You can set options for each page template on the Edit Page page in the "Template Options" box.


About Us

This template displays the content from the following posts:

  • Toggle List - managed in Dashboard > Toggle List
  • Staff Info - managed in Dashboard > Staff Info
  • Skills - managed in Dashboard > Skills
  • Secondary Slider - managed in Dashboard > Secondary Slider

Below are shown the available options to configure the output of each section.

image


Contact

The content and options of this template can be configured on Dashboard > Display > Contact Info.


Home

This template displays the content from the following posts:

  • Main Slider - managed in Dashboard > Main Slider
  • Services - managed in Dashboard > Services
  • Team - managed in Dashboard > Team
  • Portfolio - managed in Dashboard > Portfolio
  • Toggle List - managed in Dashboard > Toggle List
  • Blog Posts - managed in Dashboard > Posts
  • Testimonials - managed in Dashboard > Testimonials
  • Clients Slider - managed in Dashboard > Clients Slider

Contact section of this template is configured on Dashboard > Display > Contact Info.

Also this template makes use of the [displaywp_hot_offer] shortcode.

Below are shown the available options to configure the output of each section.

image


Portfolio

This template displays the content from the following posts:

  • Portfolio - managed in Dashboard > Portfolio

Below are shown the available options to configure the output of each section.

image


Services

This template displays the content from the following posts:

  • Services - managed in Dashboard > Services
  • Offers - managed in Dashboard > Offers
  • Skills - managed in Dashboard > Skills
  • Choose Us - managed in Dashboard > Choose Us

Below are shown the available options to configure the output of each section.

image


Team

This template displays the content from the following posts:

  • Team - managed in Dashboard > Team

Below are shown the available options to configure the output of each section.

image

Shortcodes

To the Top

Display theme contains the following shortcodes:

[displaywp_posts_latest]

The content for this shortcode is taken from the blog posts (Dashboard > Posts).

Available shortcode attributes:

title - default is "recent <span>posts</span>" - set the title of the section

nr - default is "5" - set the nr of items to be shown

category - default is "" (empty) - set the slug of the category that the posts should be taken from, set to empty to take from all categories


[displaywp_posts_tabs]

The content for this shortcode is taken from the blog posts (Dashboard > Posts).

Available shortcode attributes:

title - default is "Tabs" - set the title of the section

nr - default is "3" - set the nr of items to be shown

categories - set the lists of slugs (separated by a comma) of the categories that the posts should be taken from


[displaywp_portfolio]

The content for this shortcode is taken from Dashboard > Portfolio.

Available shortcode attributes:

title - default is "" (empty) - set the title of the section

subtitle - default is "" (empty) - set the subtitle of the section

nr - default is "0" - set the nr of items to be shown, set to "0" to show all the items

columns - default is "3" - set the nr of columns, valid values: 1, 2, 3, 4, 6 and 12

items_per_page - default is "12" - set the nr of items to be shown on each page of the section

wide_filter - default is "1" - set to "1" to make the filter have browser width and set to "0" to have content width

background - default is "" (empty) - set the full url of the image that should be used as background for the header of the section (title and subtitle)

wide_header - default is "1" - set to "1" to make the header of the section (title and subtitle) have browser width and set to "0" to have content width

view_all - default is "" (empty) - set the full url to the page with all the items

single_filter - default is "0" - set to "1" to disable selection of multiple filters


[displaywp_hot_offer]

Available shortcode attributes:

title - default is "" (empty) - set the title of the section

description - default is "" (empty) - set the description of the section

date - default is "" (empty) - set the date of the section

title_color - default is "" (empty) - set the color of the title, ex: "#a1b3c3"

description_color - default is "" (empty) - set the color of the description, ex: "#a1b3c3"

date_color - default is "" (empty) - set the color of the date, ex: "#a1b3c3"

background - default is "" (empty) - set the background color of the section, ex: "#a1b3c3"

border - default is "" (empty) - set the color of the border, ex: "#a1b3c3"

wide - default is "1" - set to "1" to make the section have browser width and set to "0" to have content width

url - default is "" (empty) - set the url that will be applied to the title and description


[displaywp_contact]

The e-mail that will receive the message from the contact form as well as other information must be configured on Dashboard > Display > Contact Info.

Available shortcode attributes:

title - default is "Contact us" - set the title of the section

subtitle - default is "it is all about us','contact shortcode" - set the subtitle of the section

form_title - default is "Drop us a line" - set the title of the form

button - default is "Drop us a line" - set the text displayed on the submit button

background - default is "" (empty) - set the full url of the image that should be used as background for the section

address_icon - default is "" (empty) - set the icon for the contact address column

mail_icon - default is "" (empty) - set the title for the contact e-mail column

phone_icon - default is "" (empty) - set the title for the contact phone column

wide - default is "1" - set to "1" to make the section have browser width and set to "0" to have content width


[displaywp_services]

The content for this shortcode is taken from Dashboard > Services.

Available shortcode attributes:

title - default is "" (empty) - set the title of the section

subtitle - default is "" (empty) - set the subtitle of the section

nr - default is "0" - set the nr of items to be shown, set to "0" to show all the items

columns - default is "4" - set the nr of columns, valid values: 1, 2, 3, 4, 6 and 12

wide_header - default is "0" - set to "1" to make the header of the section (title and subtitle) have browser width and set to "0" to have content width

background - default is "" (empty) - set the full url of the image that should be used as background for the header of the section (title and subtitle)

view_all - default is "" (empty) - set the full url to the page with all the items


[displaywp_offers]

The content for this shortcode is taken from Dashboard > Offers.

Available shortcode attributes:

title - default is "" (empty) - set the title of the section

nr - default is "0" - set the nr of items to be shown, set to "0" to show all the items


[displaywp_skills]

The content for this shortcode is taken from Dashboard > Skills.

Available shortcode attributes:

title - default is "" (empty) - set the title of the section

subtitle - default is "" (empty) - set the subtitle of the section

nr - default is "0" - set the nr of items to be shown, set to "0" to show all the items


[displaywp_choose]

The content for this shortcode is taken from Dashboard > Choose Us.

Available shortcode attributes:

title - default is "" (empty) - set the title of the section

subtitle - default is "" (empty) - set the subtitle of the section

nr - default is "0" - set the nr of items to be shown, set to "0" to show all the items


[displaywp_toggle]

The content for this shortcode is taken from Dashboard > Toggle List.

Available shortcode attributes:

title - default is "" (empty) - set the title of the section

subtitle - default is "" (empty) - set the subtitle of the section

nr - default is "0" - set the nr of items to be shown, set to "0" to show all the items


[displaywp_staff]

The content for this shortcode is taken from Dashboard > Staff Info.

Available shortcode attributes:

nr - default is "0" - set the nr of items to be shown, set to "0" to show all the items

columns - default is "4" - set the nr of columns, valid values: 1, 2, 3, 4, 6 and 12

background - default is "" (empty) - set the full url of the image that should be used as background for the section


[displaywp_secondary]

The content for this shortcode is taken from Dashboard > Secondary Slider.

Available shortcode attributes:

title - default is "" (empty) - set the title of the section

nr - default is "0" - set the nr of items to be shown, set to "0" to show all the items


[displaywp_team]

The content for this shortcode is taken from Dashboard > Team.

Available shortcode attributes:

title - default is "" (empty) - set the title of the section

subtitle - default is "" (empty) - set the subtitle of the section

nr - default is "0" - set the nr of items to be shown, set to "0" to show all the items

columns - default is "4" - set the nr of columns, valid values: 1, 2, 3, 4, 6 and 12

wide_header - default is "0" - set to "1" to make the header of the section (title and subtitle) have browser width and set to "0" to have content width

background - default is "" (empty) - set the full url of the image that should be used as background for the header of the section (title and subtitle)

view_all - default is "" (empty) - set the full url to the page with all the items


[displaywp_main]

The content for this shortcode is taken from Dashboard > Main Slider.

Available shortcode attributes:

nr - default is "0" - set the nr of items to be shown, set to "0" to show all the items


[displaywp_testimonials]

The content for this shortcode is taken from Dashboard > Testimonials.

Available shortcode attributes:

nr - default is "0" - set the nr of items to be shown, set to "0" to show all the items

background - default is "" (empty) - set the full url of the image that should be used as background for the section

wide - default is "0" - set to "1" to make the section have browser width and set to "0" to have content width


[displaywp_clients_slider]

The content for this shortcode is taken from Dashboard > Clients Slider.

Available shortcode attributes:

title - default is "our <span>clients</span>" - set the title of the section

nr - default is "0" - set the nr of items to be shown, set to "0" to show all the items


[displaywp_column_first], [displaywp_column] and [displaywp_column_last]

These three shortcodes are used to create columns.

The first column is always created by [displaywp_column_first].

The last column is always created by [displaywp_column_last].

All the other columns in between the first and the last are created by [displaywp_column].

Available shortcode attributes (valid for all three shortcodes):

size - default is "4" - set the size of column, valid values are 1-12

offset - default is "0" - set the offset of column, valid values are 1-12

Note: the sum of all "size" and "offset" attributes of all the columns that form a row must not be greater than 12.

Widgets

To the Top

Display theme contains the following custom widgets:

  • Display - Banner - display an image with an optional link
  • Display - Menu - displays a user created menu with a different style than the default menu widget
  • Display - Newsletter - display a form that is used for e-mail subscription
  • Display - Recent Posts - displays the latest blog posts
  • Display - Social Icons - displays the social icons set in the theme options
  • Display - Tabs - display the latest posts from different categories in tabs
  • Display - Twitter - displays the latest tweets

Thank you so much for choosing Display WordPress Theme. We hope you will enjoy using it!