Dottoro Studio Theme Documentation

Tutorial to get your theme work

First of all, we would like to thank you for choosing our theme!

This documentation will show you how to set up and use the Dottoro Studio Theme and it is for both novice and experienced WordPress users alike.

Thanks to its powerful set of tools, the theme provides a highly flexible environment that lets you create a wide range of websites from simple blogs to fully-fledged business solutions.
Some of them are:

1. First Steps

Theme installations steps:
1 Navigate with your favorite browser to your WordPress Admin Panel (yourdomain/wp-admin/) and sign in.
2 Navigate to Appearance » Themes » Install Themes » Upload.
3 Browse and select the dottoro_studio.zip file that is located in the same folder as this documentation file.
4 Click on the Install button.
5 Activate the theme.
After activating the theme you will notice new menu boxes (News, Portfolio, Slideshows, Subheaders, Theme Options) on the admin panel. These along with the additional options on the admin pages for posts and pages give you total creative freedom to create any kind of website.

2. Front Page

By default, WordPress uses a blog list page as the home page. You can change this under Settings » Reading. Since the options for editing the appearance of blog list pages are rather limited, it can be useful to set a custom home page.

Studio Theme provides various page templates. Some of the templates are designed for general content pages, while others for displaying special contents (read more in the Page templates section). You can set any page as a front page but in most cases using the Default Template is the best option.

The Default Template will provide full freedom and control over creating your content; Dottoro shortcodes and widgets will be most helpful during this process.

2.1 Creating a custom front page

1 First you need to create a new page (Pages » Add new), and set its template to the Default Template in the Page Attributes box at the right side of the window. Give a title to your page (for example Home) and save it (Save Draft or Publish). After you have saved the page you will find a lot of settings options below the WordPress Content Editor, with which you can customize the appearance of the page.
You can also use other page templates, but in most cases it is practical to use the Default Template. However, if you would like your home page to be a blog, news or portfolio list page you can select Blog, News or Portfolio page templates as well.
2 After selecting the desired front page template and saving your page you have to create your content. Studio Theme supports a wide range of shortcodes, with you can publish slideshows, blog, news and portfolio item lists, widget areas, tables and other components on your page.
3 After you are done with creating the content, we recommend creating a custom subheader for the front page. You can edit the content of the subheader the same way as the content of the page. You can also use shortcodes and widgets to create custom subheaders (read more: Subheaders).
4 After you are done with the subheader, click on the Publish button in the upper right corner.
5 There is only one more thing to do: set the page you have just created as the Front page. You can do this under Settings » Reading. Select 'static page' under 'Front page displays' and select your page from the 'Front page' list, then click 'Save Changes.'

If you now open your root domain in a browser you will see your newly set homepage.

3. Blog, News and Portfolio post types

Along with the standard blog post type Studio Theme supports news and portfolio post types as well.

WordPress 3 has introduced post types, so one could display on his pages different types of content separated from each other. To take full advantage of this feature, along with the main type - Post - Studio Theme provides two further post types: Portfolio and News.

To help you display your tag and category pages separated for all three post types, tags and categories are also made post type dependent. You can assign a different permalink structure to every post type, making the types which your contents belong to visible in the URLs of your website. Some of the widgets also support post types; e.g. for the Recent Posts widget you can set the desired post type, but you can also set it to post type independent mode.

The settings options for all post types are separated on the admin panel as well in the Posts, News and Portfolio boxes. Posts, categories and tags for all three post types can be managed in the very same way. There are various setting options for every post type. Some of them are located under Posts » Post Settings / News » News Settings / Portfolio » Portfolio Settings and there are options for individual pages and posts as well.

You can read about individual page options in the Page Templates section. For other options, read further.

3.1 Post Type specific settings

Under Posts » Post Settings / News » News Settings / Portfolio » Portfolio Settings you will find options for a whole post type (e.g. Permalink structure), for tag and category pages and for single posts as well. The values of options for posts can be overridden on the admin page of every post. Thus you will not have to set the same values for every single post again and again; the default values can be set here.
3.1.1 General settings
General Settings
Page Priority This setting is available only if there are more than one post list pages. Here you can set the priority of your post list pages; the first one will have the highest priority. The appearance of date and tag pages is based on the settings of the post list page with the highest priority. For a category page, the appearance is based on the settings of the post list page that has the highest priority and matches the category.
Add post type RSS In the Studio Theme you can use both post type dependent and post type independent RSS feeds. Post type-independent RSS feeds contain posts from all three kinds of post types, while post type dependent feeds contain only posts from a certain post type. You can decide for every post type what RSS subscription options you would like to grant your visitors.
3.1.2 Single post/news/portfolio settings
Settings
Thumbnail width The width of the thumbnail displayed on single post/news/portfolio pages, in pixels. You can override this value for every single post.
Thumbnail height The height of the thumbnail displayed on single post/news/portfolio pages, in pixels. You can override this value for every single post.
Thumbnail alignment Here you can choose whether to display the thumbnail image in left, right or center position or in left or right float position. Float means that the thumbnail and the content will be placed side by side. You can override this value for every single post.
Thumbnail target Here you can choose whether clicking on the thumbnail should open the attachment page, a page that only contains the image or set the thumbnail to unclickable. Note that if the post has an image gallery, clicking the thumbnail always opens the Dottoro Gallery Viewer.
Subheader Allows selecting a subheader to be displayed on single pages. You can override this value for every single post. Read more in the Subheaders section.
Sidebar Position Set the position of the sidebar or remove sidebar on single post/news/portfolio pages. The 'default' value means that the sidebar position is determined by the skin settings of the theme. You can override this value for every single post.
Additional Sidebar Widget Area Allows selecting an additional widget area that will be placed in the sidebar below the predefined widget areas on single post/news/portfolio pages. Read more in the Widget Areas section.
Additional Footer Widget Area Allows selecting an additional widget area that will be placed in the footer below the other predefined widget areas on single post/news/portfolio pages. Read more in the Widget Areas section.
3.1.3 Category / Tag / Date page settings
Settings
Subheader Allows selecting a subheader to be displayed on category / tag / date pages. Read more in the Subheaders section.
Show Page Title This option allows you to specify whether the page title should be displayed in the contents of the page.
Additional Sidebar Widget Area Allows selecting an additional widget area that will be placed in the sidebar below the predefined widget areas on category / tag / date pages. Read more in the Widget Areas section.
Additional Footer Widget Area Allows to select an additional widget area that will be placed in the footer below the other predefined widget areas on category / tag / date pages. Read more in the Widget Areas section.
3.1.4 Permalink settings

These settings only take effect when the value of WordPress Permalink Common Setting differs from Default (Settings » Permalinks)! Here you can specify a custom permalink structure to every post type. You can also specify a custom permalink prefix to category and tag pages by post types.

For further details, please see WordPress Permalink Settings.

Please note: to avoid unwanted behavior, use different values for different post types!

3.2 Settings on single post/news/portfolio pages

3.2.1 General page options
Settings
Subheader Allows selecting a subheader for the page. The default value for this select list can be set under Post/News/Portfolio Settings. Read more in the Subheaders section.
Body CSS Class Allows adding style classes to the HTML body element. Classes should be separated by spaces.
Post CSS Class Allows adding space separated style classes to the HTML article element that holds the post. These style classes will be assigned to the article element both on single and post list pages as well.
Sidebar Position Here you can set the position of the sidebar or remove the sidebar. The 'default' value means that the sidebar position is determined by the Sidebar Position option on Post/News/Portfolio Settings.
Editorial Recommendation This setting is specific for the News post type. It allows marking a news item as recommended. Recommended news are displayed as headlines (in a recommended box slideshow) on news list pages. Recommended news that are left out of the recommended box (you can set the number of items in the recommended box for each page, see Number of Recommended News option) will be displayed among other news items, according to the date of publishing.
External URL This setting is specific for the Portfolio post type. With this feature you can assign an external URL to a portfolio item. A 'Visit site' link or button will appear on portfolio list pages opening the specified website.
3.2.2 Image options
Settings
Post list Image Here you can set what image to display as a thumbnail of the post on post list pages. The size of the thumbnail is determined by the post list page settings.
Post Thumbnail Image Here you can set what image to be displayed on the top of the post page above the post's content. You can also set the size an alignment of the image. The default image size is specified under Posts » Post Settings / News » News Settings / Portfolio » Portfolio Settings. If you want to use other image size, you can set it here. A 0 value means the original width/height of the image.
You can create an image gallery to every post. Your visitors can then view the gallery with the Dottoro Gallery Viewer. You can manage the images of your galleries in the Gallery Settings.

For further details, see the Galleries section.

4. Page Templates and Pages

4.1 Available page templates

4.2 Pages created from page templates

After selecting the template for you page, save it with clicking Publish/Update or Save Draft.

After saving it, you find the settings options below WordPress's content editor. Some of the settings are available for every page types; however there are template dependent options as well.

4.2.1 General page settings
These settings are available for every page, regardless of its template.
General Page Settings
Subheader Allows selecting a subheader for the page. Read more in the Subheaders section.
Subheader Title Specifies the subheader title of the page. Use the [subheader_title] shortcode to display the subheader title. Read more in the Subheaders section.
Subheader Teaser Specifies the subheader teaser of the page. Use the [subheader_teaser] shortcode to display the subheader teaser. Read more in the Subheaders section.
Show Page Title This option allows you to specify whether the page title should be displayed in the contents of the page.
Show Breadcrumb Here you can choose whether the breadcrumb should be displayed on the page or not. For easier use, you will find the default value under Theme Options » General » Breadcrumb.
For further details, please see the Breadcrumb section.
Ghost Page There are cases when we need unclickable menu items that have submenus. Similar to this, you may need unclickable items in the page hierarchy displayed by breadcrumbs. Ghost pages provide a solution to this issue. With them, you can create pages invisible to the visitors that you can use to create menu items and that can also be set as parents of pages.
Body CSS Class Allows adding one or more classes to the BODY class attribute, separated by a single space.
Sidebar Position Here you can set the position of the sidebar or remove the sidebar.
Additional Sidebar Widget Area Allows selecting an additional widget area that will be placed in the sidebar below the predefined widget areas on the page. Read more in the Widget Areas section.
Additional Footer Widget Area Allows selecting an additional widget area that will be placed in the footer below the other predefined widget areas on the page. Read more in the Widget Areas section.
Footer Type Allows selecting the type of the footer. You can select whether to show the full footer (widgets and copyright), copyright only, or no footer.
You can create an image gallery to every page. Your visitors can then view the gallery with the Dottoro Gallery Viewer. You can manage the images of your galleries in the Gallery Settings.
Note: The Gallery settings options are not accessible for Blog, News, Portfolio and Imagefolio pages. The galleries of these pages depend on the gallery of items appearing on the page.

For further details, see the Galleries section.

4.2.3 Blog page settings
Blog pages are pages that contain your post lists. To create a blog page you have to create a new page (Pages » Add new), select Blog option under Page Attributes from the template list on the right then click Publish or Save Draft.

You will find the Blog page settings below the WordPress content editor. The first box contains the General Page settings; other options are explained below.

Blog Page Settings
Posts per page Here you can specify the number of visible posts per page.
Number of posts in a row Here you can set the number of posts in a row.
Grid layout Here you can choose whether blog posts should be displayed in a grid or the cell height is determined by its content.
Rendering order Here you can select whether blog posts should be rendered left to right or top to bottom in multi-column layout.
Sorting order Here you can select the sorting order of posts.
Blog Categories Here you can specify which blog categories should be displayed on the page. The advantage of excluding categories is that you will not need to modify blog page settings every time you create a new category. Category filtering gives you the opportunity to create multiple blog pages.
Blog post preview Here you can choose whether the post list should contain the whole content, the teaser, excerpt or only the title of blog posts. The 'teaser or excerpt' value means that if there is a teaser to the post then it will appear otherwise the excerpt will. You can create teasers with the 'More tag'. Just specify where the teaser should end you are done (read more about the More tag).
Excerpt Length Here you can set the length of excerpts in characters.
Excerpt Length Without Thumbnail Here you can set the excerpt length for posts that appear without thumbnail, in characters.
Thumbnail width and height Here you can specify the size of thumbnail images.
Thumbnail alignment Here you can specify the alignment of thumbnail images. Float means that the thumbnail and the content will be placed side by side.
Meta Info Here you can specify what meta information (author name, category, publish date, etc.) should be displayed with the posts.
How to show 'read more' text Here you can choose whether the 'read more' text should appear as a link or button.
4.2.4 News page settings
News pages are pages that contain news item lists. To create a news page you have to create a new page (Pages » Add new), select News option under Page Attributes from the template list on the right then click Publish or Save Draft.

You will find the News page settings below the WordPress content editor. The first box contains the General Page settings; other options are explained below.

News Page Settings
Number of latest news to show / Number of older news to show News items on news pages are displayed in two blocks; the latest ones in the upper box, the older ones in the lower box. Here you can set how many news items to display in the blocks.
Number of items in a row Here you can set the number of items in a row.
Grid layout Here you can choose whether news items should be displayed in a grid or the cell height is determined by its content.
Rendering order Here you can select whether news items should be rendered left to right or top to bottom within the blocks of latest and older news items.
Sorting order Here you can select the sorting order of news items.
Show Recommended Box Here you can choose whether to show the recommended box slideshow, or not. You can mark any news item as recommended. The recommended news are displayed as headlines (in the Recommended box) on news pages.
Recommended box dimensions Here you can set the width and height of the recommended box slideshow, and the width of the excerpt box that is displayed over the background image, in pixels.
Recommended excerpt lengths Here you can set the excerpt length for recommended news items.
Number of Recommended News The number of recommended news items to display in the recommended box. Recommended news that are left out of the recommended box will be displayed among other news items, according to the date of publishing.
Recommended Box Skin Set the skin of the recommended box. The 'auto' value means that the look of the recommended box is determined by the skin settings of the theme (see Creating theme designs).
News Topics Categories of news post are called topics. Here you can specify which news topics should be displayed on the page. The advantage of excluding topics is that you will not need to modify news page settings every time you create a new topic. Topic filtering gives you the opportunity to create multiple news pages.
News item preview Here you can choose whether the news item list should contain the whole content, the teaser, excerpt or only the title of items. The 'teaser or excerpt' value means that if there is a teaser to the item then it will appear otherwise the excerpt will. You can create teasers with the 'More tag'. Just specify where the teaser should end you are done (read more about the More tag).
Excerpt Length Here you can set the length of excerpts in characters.
Excerpt Length Without Thumbnail Here you can set the excerpt length for news items that appear without thumbnail, in characters.
Thumbnail width and height Here you can specify the size of thumbnail images.
Thumbnail alignment Here you can specify the alignment of thumbnail images. Float means that the thumbnail and the content will be placed side by side.
Meta Info Here you can specify what meta information (author name, category, publish date, etc.) should be displayed with the items.
How to show 'read more' text You can set whether the 'read more' text should appear as a link or button.
4.2.5 Portfolio and Imagefolio page settings
Portfolio and Imagefolio pages are pages that contain portfolio item lists. Imagefolio pages differ from Portfolio pages in their appearance only. To create a Portfolio (Imagefolio) page you have to create a new page (Pages » Add new), select Portfolio (Imagefolio) option under Page Attributes from the template list on the right then click Publish or Save Draft.

You will find the page settings below the WordPress content editor. The first box contains the General Page settings; other options are explained below.

Portfolio / Imagefolio page Settings
Items per page Here you can specify the number of visible items per page.
Number of items in a row (portfolio only) Here you can set the number of items in a row.
Grid layout (portfolio only) Here you can choose whether portfolio items should be displayed in a grid or the cell height is determined by its content. This setting has no effect at the moment, because portfolio items always have the same height on a portfolio page.
Rendering order (portfolio only) Here you can select whether portfolio items should be rendered left to right or top to bottom in multi-column layout.
Sorting order Here you can select the sorting order of portfolio items.
AJAX Pagination (portfolio only) Here you can enable AJAX pagination so visitors can iterate through result pages without having to refresh the entire portfolio page.
Paging animation (portfolio only) Here you can select an animation effect for Ajax pagination.
Portfolio/Imagefolio categories Here you can specify which portfolio categories should be displayed on the page. The advantage of excluding categories is that you will not need to modify portfolio page settings every time you create a new category. Category filtering gives you the opportunity to create multiple portfolio pages.
Display Categories as filters (portfolio only) Here you can set to display categories as browsing filters at the top of the portfolio page.
Portfolio item preview Here you can choose whether the portfolio list should contain the whole content, the teaser, excerpt or only the title of items. The 'teaser or excerpt' value means that if there is a teaser to the item then it will appear otherwise the excerpt will. You can create teasers with the 'More tag'. Just specify where the teaser should end you are done (read more about the More tag).
Thumbnail width and height Here you can specify the size of thumbnail images.
Thumbnail alignment (portfolio only) Here you can specify the alignment of thumbnail images. Float means that the thumbnail and the content will be placed side by side.
Dottoro Gallery Viewer Here you can enable using the Dottoro Gallery Viewer. The Dottoro Gallery Viewer is an image viewer application. When it is enabled, clicking the thumbnails will open the viewer, otherwise it will open the portfolio item page.
Separate Galleries You can enable using the Dottoro Gallery with the previous option (Dottoro Gallery Viewer). Here you can choose whether the Gallery Viewer should display only the media related to the item that holds the thumbnail or the media of all the items on the page.
Gallery autoplay Here you can set whether the Dottoro Gallery should automatically change media, or not. The 'default' means that this value will be taken from Theme Options » General » Gallery Settings.
Gallery autoplay interval The interval (in seconds) on how often to change media in the Dottoro Gallery. The default interval is specified under Theme Options » General » Gallery Settings. If you want to use other interval, you can set it here.
Meta Info Here you can specify what meta information (author name, category, publish date, etc.) should be displayed with the posts.
Hover Meta Info (portfolio only) Here you can set what meta information should be displayed when hovering over thumbnails.
How to show links You can set whether the 'read more' and 'visit site' texts should appear as links or buttons.
Show title as a link Set whether the title of portfolio items should appear as a link or a plain text.
Show title in tooltip (imagefolio only) Set whether the title of portfolio items should appear as a tooltip over the thumbnails.
Show preview as tooltip (portfolio only) Set whether the preview of portfolio items should appear as a tooltip or regular HTML content.
Excerpt Length Here you can set the length of excerpts.
Excerpt Length Without Thumbnail (portfolio only) Here you can set the excerpt length for portfolio items that appear without thumbnail, in characters.
4.2.6 Contact page settings
To create a Contact page you have to create a new page (Pages » Add new), select Contact option under Page Attributes from the template list on the right then click Publish or Save Draft.

Similar to the Default Template, you will have full control over the contents of the Contact page, but at the bottom of the content, a contact form will be displayed where your visitors can contact you.

You will find the Contact page settings below the WordPress content editor. The General Page settings and Gallery settings are detailed above; other options are explained below.

In the settings fields you can provide an email, CC (additional recipients) and BCC (hidden recipients) address and an e-mail subject, and you can specify the text of the Send button and a 'Thank You message'.

You can enable Akismet spam filtering that protects comments from spam attacks. Akismet service is free for private blogs. Commercial users have to purchase the service. Please note that private blog owners should also register for this service. For more information visit the Akismet website.
Tip: if you wish to create a contact page with a custom layout, choose the Default Template and place a Contact form widget in a widget area that you can insert with a [widget_area] shortcode anywhere on your page, or simply use the [contact_form_widget] shortcode.
4.2.7 Archives page settings

An Archives page is a summary page displaying the categories and the months your posts have been created. Categories and months are separated according to post types.

To create an Archives page you have to create a new page (Pages » Add new), select Archives option under Page Attributes from the template list on the right, then click Publish or Save Draft.

You will find the Archives page settings below the WordPress content editor. The General Page settings and Gallery settings are detailed above; other options are explained below.

Archives Page Settings
List icon Set an icon for list items displayed on the page.
List icon color Set the color of list icons. The 'auto' value means that the color is determined by the skin settings of the theme (see Creating theme designs).
Excluded Post Types Set unnecessary post types on the page.
4.2.8 Authors page settings

An Authors page displays the site authors in alphabetical order with contact and biography information.

To create an Authors page you have to create a new page (Pages » Add new), select Authors option under Page Attributes from the template list on the right, then click Publish or Save Draft.

You will find the Authors page settings below the WordPress content editor. The General Page settings and Gallery settings are detailed above and there are no other special settings for Authors pages.

Authors Page Settings
Layout Select whether to show authors in list or box view.
Show Avatar Set whether to show the avatar.
Show Fullname Set whether to show the full name.
Show Nickname Set whether to show the nickname.
Show Website Set whether to show the website.
Show Biography Set whether to show the biography.
Biography length Set the length of biography, in characters.
4.2.9 Boomarks page settings

A Boomarks page displays a list of available bookmarks.

To create a Boomarks page you have to create a new page (Pages » Add new), select Boomarks option under Page Attributes from the template list on the right, then click Publish or Save Draft.

You will find the Boomarks page settings below the WordPress content editor. The General Page settings and Gallery settings are detailed above and there are no other special settings for Boomarks pages.

4.2.10 Sitemap page settings

A Sitemap page displays a list of all pages and category and monthly archives, separated according to post types.

To create a Sitemap page you have to create a new page (Pages » Add new), select Sitemap option under Page Attributes from the template list on the right, then click Publish or Save Draft.

You will find the Sitemap page settings below the WordPress content editor. The General Page settings and Gallery settings are detailed above; other options are explained below.

Sitemap Page Settings
List icon Set an icon for list items displayed on the page.
List icon color Set the color of list icons. The 'auto' value means that the color is determined by the skin settings of the theme (see Creating theme designs).

4.3 Special pages

These pages are automatically created by the theme, but with the following options you will have control over their contents and appearance.
4.3.1 Category and tag page settings
You can edit the properties of tag and category pages for every post type separately. You will find these options under Posts » Post Settings / News » News Settings / Portfolio » Portfolio Settings (details).
4.3.2 Archive and date page settings
You can edit the properties of date pages for every post type separately. You will find these options under Posts » Post Settings / News » News Settings / Portfolio » Portfolio Settings (details).
4.3.3 Search page settings

Under Theme Options » General » Search:

General Settings
Subheader Allows selecting a subheader for the search page. Read more in the Subheaders section.
Show Page Title Here you can set if you want your page title to be displayed in the contents of the search page.
Sidebar Position Here you can set the position of the sidebar or remove the sidebar.
Additional Sidebar Widget Area Allows selecting an additional widget area that will be placed in the sidebar below the 'sidebar' widget area on the search page. Read more in the Widget Areas section.
Additional Footer Widget Area Allows selecting an additional widget area that will be placed in the footer below the other widget areas on the search page. Read more in the Widget Areas section.
Post List Settings
Posts per page Here you can specify the number of visible posts per page.
Number of posts in a row Here you can set the number of posts in a row.
Grid layout Here you can choose whether posts should be displayed in a grid or the cell height is determined by its content.
Rendering order Here you can select whether posts should be rendered left to right or top to bottom in multi-column layout.
Type of Post Lists Set the type of post lists:
  1. simple - single line with date and title.
  2. extended - more informative blocks.
List items preview Here you can choose whether the post list should contain the whole content, the teaser, excerpt or only the title of posts. The 'teaser or excerpt' value means that if there is a teaser to the post then it will appear otherwise the excerpt will. You can create teasers with the 'More tag'. Just specify where the teaser should end you are done (read more about the More tag).
Excerpt Length Here you can set the length of excerpts, in characters.
Excerpt Length Without Thumbnail Here you can set the excerpt length for entries that appear without thumbnail, in characters.
Thumbnail width and height Here you can specify the size of thumbnail images.
Thumbnail alignment Here you can specify the alignment of thumbnail images. Float means that the thumbnail and the content will be placed side by side.
Meta Info Here you can specify what meta information should be displayed with the posts.
Show Pagination Set whether to show the pagination for multi-page results or not.
Show Divider Set whether to add a divider between list items or not.
Custom
Custom Search Code You can set a custom HTML search code, such as Adsense for Search that overrides the default WordPress search code on your website. It affects both the search form and the search widget.
The following settings have effects only if the custom search code field is not set:
Filtering
Advanced search Set whether to use an advanced or a simple search form. The advanced search form provides post type, date and category selection possibilities. This setting has effect only if the custom search field is empty.
Show Categories Set whether the advanced search form should contain category selection or not.
Show Post Types Set whether the advanced search form should contain post type selection or not.
Show Dates Set whether the advanced search form should contain date selection or not.
4.3.4 Author page settings

Under Theme Options » General » Author:

General Settings
Subheader Allows selecting a subheader for author pages. Read more in the Subheaders section.
Show Page Title Here you can set if you want your page title to be displayed in the contents of author pages.
Sidebar Position Here you can set the position of the sidebar or remove the sidebar.
Additional Sidebar Widget Area Allows selecting an additional widget area that will be placed in the sidebar below the 'Sidebar' widget area on author pages. Read more in the Widget Areas section.
Additional Footer Widget Area Allows selecting an additional widget area that will be placed in the footer below the other widget areas on author pages. Read more in the Widget Areas section.
Post List Settings
Posts per page Here you can specify the number of visible posts per page.
Number of posts in a row Here you can set the number of posts in a row.
Grid layout Here you can choose whether posts should be displayed in a grid or the cell height is determined by its content.
Rendering order Here you can select whether posts should be rendered left to right or top to bottom in multi-column layout.
Type of Post Lists Set the type of post lists:
  1. simple - single line with date and title.
  2. extended - more informative blocks.
List items preview Here you can choose whether the post list should contain the whole content, the teaser, excerpt or only the title of posts. The 'teaser or excerpt' value means that if there is a teaser to the post then it will appear otherwise the excerpt will. You can create teasers with the 'More tag'. Just specify where the teaser should end you are done (read more about the More tag).
Excerpt Length Here you can set the length of excerpts, in characters.
Excerpt Length Without Thumbnail Here you can set the excerpt length for entries that appear without thumbnail, in characters.
Thumbnail width and height Here you can specify the size of thumbnail images.
Thumbnail alignment Here you can specify the alignment of thumbnail images. Float means that the thumbnail and the content will be placed side by side.
Meta Info Here you can specify what meta information should be displayed with the posts.
Show Pagination Set whether to show the pagination for multi-page results or not.
Show Divider Set whether to add a divider between list items or not.
4.3.5 404 page settings

Under Theme Options » General » 404:

General Settings
Subheader Allows selecting a subheader for the 404 page. Read more in the Subheaders section.
Show Page Title Here you can set if you want your page title to be displayed in the contents of the 404 page.
Sidebar Position Here you can set the position of the sidebar or remove the sidebar.
Additional Sidebar Widget Area Allows selecting an additional widget area that will be placed in the sidebar below the 'Sidebar' widget area on 404 page. Read more in the Widget Areas section.
Additional Footer Widget Area Allows selecting an additional widget area that will be placed in the footer below the other widget areas on the 404 page. Read more in the Widget Areas section.
Post List Settings
Posts per page Here you can specify the number of visible posts per page.
Number of posts in a row Here you can set the number of posts in a row.
Grid layout Here you can choose whether posts should be displayed in a grid or the cell height is determined by its content.
Rendering order Here you can select whether posts should be rendered left to right or top to bottom in multi-column layout.
Type of Post Lists Set the type of post lists:
  1. simple - single line with date and title.
  2. extended - more informative blocks.
List items preview Here you can choose whether the post list should contain the whole content, the teaser, excerpt or only the title of posts. The 'teaser or excerpt' value means that if there is a teaser to the post then it will appear otherwise the excerpt will. You can create teasers with the 'More tag'. Just specify where the teaser should end you are done (read more about the More tag).
Excerpt Length Here you can set the length of excerpts, in characters.
Excerpt Length Without Thumbnail Here you can set the excerpt length for entries that appear without thumbnail, in characters.
Thumbnail width and height Here you can specify the size of thumbnail images.
Thumbnail alignment Here you can specify the alignment of thumbnail images. Float means that the thumbnail and the content will be placed side by side.
Meta Info Here you can specify what meta information should be displayed with the posts.
Show Pagination Set whether to show the pagination for multi-page results or not.
Show Divider Set whether to add a divider between list items or not.

5. Header and Menu

In Studio Theme the header contains your website's logo, title, description and the menu.

You can edit the text of the title and description the usual way in WordPress, under Settings » General with the 'Site title' and 'Tagline' options.

You can specify the logo image and whether you want the title, description and logo to be displayed in the header under Theme Options » General » Header.

Note: To set an image as your logo, use the 'Insert into Post' button in the WordPress media dialog.

You can create menus with the WordPress menu wizard under Appearance » Menus. Along the options above, under Theme Options » General » Header you can also edit the settings of your theme's menu:

6. Subheaders

Tip: Check out our video tutorial on Subheaders.
The subheader is displayed between the header and the content.

The Studio Theme provides an extremely flexible support for creating subheaders. The contents of the subheaders can be edited the same way as the contents of your pages and posts. Studio Theme provides a couple of useful ready-made templates but you can always create your own custom subheaders to your pages. You can manage your subheaders similarly to posts and pages; you can save, modify and delete them.

For every page you can decide whether you would like to display a subheader above your content or not; and if so which one. Thus, you can display subheaders of different contents on all your pages.

In the following you can read detailed instructions on how to create subheaders and how to assign them to pages:

6.1 Subheader specific shortcodes

Subheaders often contain information about the page (title, teaser). You can display these information with the [subheader_title] and [subheader_teaser] shortcodes. Thus, you will not have to create separate subheaders for every page. The [subheader_title] and [subheader_teaser] shortcodes do not support any attributes; the following attribute is supported only for the 6 nested shortcodes: On the basis on the above described, [subheader_title] and [subheader_teaser] shortcodes may seem unnecessary; titles and teasers are displayed by the nested shortcodes. The [subheader_title] and [subheader_teaser] shortcodes, however, they have other, as yet unmentioned properties as well. Generally we would want the text of titles and teasers to be displayed in the subheaders along with HTML formatting tags; e.g. <h2>title</h2>, <h4>teaser</h4>. Yet for pages that don't have a title or teaser it is practical not to display the formatting HTML tags either, because empty formatting tags take up unnecessary space in the subheader. That is why you will need [subheader_title] and [subheader_teaser] shortcodes; if the shortcodes nested in them do not display any content, they will also not display any content.

6.2 Predefined Subheaders

The Studio Theme contains a number of predefined subheaders created to meet the most frequent needs of users. You can refer to them on the admin pages of posts and pages similarly to your custom subheaders; thus if the predefined subheaders are to your liking you won't need to create custom ones.

In the following you can read about the contents of the predefined subheaders. You may find them useful in creating your custom subheaders as well. Predefined subheaders contain subheader specific shortcodes introduced in the previous section. To fully understand predefined subheaders we recommend you reading the previous section as well.

Details of predefined subheaders:
Name Source
Own The subheader displays the page title and teaser under each other on the left.
<div class="dottoro_subheader_own simple subheader_padding">
[subheader_title]<h2 class="subheader_title">[own_title /]</h2>[/subheader_title]
[subheader_teaser]<span class="subheader_teaser">[own_teaser /]</span>[/subheader_teaser]
</div>
Own 2 Cols The subheader displays the page title and teaser side by side; the title on the left, the teaser on the right.
<div class="dottoro_subheader_own simple subheader_padding">
[row]
[col2]
	[subheader_title]<h2 class="subheader_title">[own_title /]</h2>[/subheader_title]
[/col2]
[col2]
	[subheader_teaser]<span class="subheader_teaser">[own_teaser /]</span>[/subheader_teaser]
[/col2]
[/row]
</div>
Category The subheader displays the title (category name) and teaser (category description) of the category page assigned to the page under each other on the left. You can use this subheader on single post/news/portfolio pages to display information about the category the post belongs to in the subheader.
<div class="dottoro_subheader_category simple subheader_padding">
[subheader_title]<h2 class="subheader_title">[category_title /]</h2>[/subheader_title]
[subheader_teaser]<span class="subheader_teaser">[category_teaser /]</span>[/subheader_teaser]
</div>
Category 2 Cols Similarly to the 'category' subheader it displays the category page title and teaser, but the title and teaser appear side by side; the title on the left, the teaser on the right.
<div class="dottoro_subheader_category simple subheader_padding">
[row]
[col2]
	[subheader_title]<h2 class="subheader_title">[category_title /]</h2>[/subheader_title]
[/col2]
[col2]
	[subheader_teaser]<span class="subheader_teaser">[category_teaser /]</span>[/subheader_teaser]
[/col2]
[/row]
</div>
Matching Page The subheader displays the title of the closest matching post, news or portfolio list page. You can use this shortcode on single post/news/portfolio pages and category, tag and date pages as well. The closest matching page will be selected according to criteria set in Page Priority options. Use this subheader if your website contains multiple list pages in the same post type and you would like the subheaders of single post pages to correspond to the subheader of the list pages the post is displayed on.
<div class="dottoro_subheader_matching simple subheader_padding">
[subheader_title]<h2 class="subheader_title">[matching_title /]</h2>[/subheader_title]
[subheader_teaser]<span class="subheader_teaser">[matching_teaser /]</span>[/subheader_teaser]
</div>
Matching Page 2 Cols Similarly to the 'matching page' subheader it displays the closest matching page title and teaser, but the title and teaser appear side by side; the title on the left, the teaser on the right.
<div class="dottoro_subheader_matching simple subheader_padding">
[row]
[col2]
	[subheader_title]<h2 class="subheader_title">[matching_title /]</h2>[/subheader_title]
[/col2]
[col2]
	[subheader_teaser]<span class="subheader_teaser">[matching_teaser /]</span>[/subheader_teaser]
[/col2]
[/row]
</div>

6.3 Creating Subheaders

Steps:

1 Select 'Add New' under the Subheaders menu box.
2 Enter the name of the subheader. Use a unique name for each subheader, so you can identify it later.
3 Create the content of the subheader. The contents of the subheaders can be edited the same way as the contents of your pages and posts. Subheaders can contain shortcodes; e.g. with the [widget_area] shortcode you can place widgets inside the content of subheaders.
Subheaders often contain information about the page (title, teaser). You can display this information with the [subheader_title] and [subheader_teaser] shortcodes.
4 After creating the content, click 'Publish'.

Additional steps:

6.4 Attaching subheaders to pages

For every page you can decide whether you would want to use a subheader or not; and if so, which one. You can use custom subheaders or predefined ones as well. Similarly to pages, you can create subheaders to blog, news and portfolio items as well. You can also use the options under Post/News/Portfolio Settings; thus you will not have to set subheaders one by one for every post. Finally, you will find the subheader settings for special pages (date, search, author, 404) under Theme Options » General » Special Pages.

In the Studio Theme, the footer consists of two parts. You can place widgets in the upper and custom content (e.g. copyright and other notices) in the lower part of the footer.

You can set whether the widgets and copyright contents should be displayed in the footer or not (Theme Options » General » Footer » Footer type). Footers can be different on each page.

In Studio Theme you can have different widgets in the footer of each page. The theme contains a 'Footer' widget area. Widgets you drag to this widget area will be displayed on the footer of every page. You can make a different footer for each page with the Widget Area Wizard. You can add widgets to custom widget areas under Appearance » Widgets in WordPress admin panel. Then you will only have to specify which custom widget areas you would like to display in the footer. You can do this on the admin page of pages under 'Additional Footer Widget Area'. To customize the footers of post, category and tag pages use the 'Additional Footer Widget Area' settings under Posts » Post Settings / News » News Settings / Portfolio » Portfolio Settings. Finally, you will find the footer settings for special pages (date, search, author, 404) under Theme Options » General » Special Pages.

The contents of the lower region of the footer can be edited under Theme Options » General » Footer » Footer Text the same way as the contents of your pages and posts. You can also use shortcodes.

The Studio Theme supports a number of shortcodes to help you create the content of the footer:

For further information, see the Shortcodes section.

8.1 Widgets on the Sidebar

The Studio Theme provides efficient tools for displaying widgets on the sidebar and creating their layout. The theme provides a couple of predefined widget areas that are placed on the sidebar, but you can create custom widget areas as well. You can add widgets to custom widget areas under Appearance » Widgets in WordPress admin panel.

The theme supports the following widget areas for the sidebar: Predefined widget areas are created to meet the most frequent needs of users. In case they fail to provide the desired flexible creative environment you will find what you need by using custom widget areas.

You can create custom widget areas with the 'Widget Area Wizard'. With the wizard you can also edit the widgets' layout in a widget area, even the predefined ones.

After creating the necessary widget areas you can add widgets to them under Appearance » Widgets in WordPress admin panel.

Having done all this, you only have to decide which widget area to display on which page's sidebar. You can do this with the 'Additional Sidebar Widget Area' option; you will find it on the admin page of pages. If you would like to customize the sidebars of the post, category or tag pages, use the 'Additional Sidebar Widget Area' settings under Posts » Post Settings / News » News Settings / Portfolio » Portfolio Settings. Finally, if you would like to customize the sidebars of special pages (date, search, author, 404), use the settings under Theme Options » General » Special Pages.

For further details, see the Widget areas section.

Dottoro provides various page templates for its users Every page template allows you to set whether the sidebar should be shown on the default, left or the right side, or to turn it off. These options are located in the General Page Settings box on every page. Sidebars of special pages (date, search, author, 404) will always be displayed on the default side.

The skin settings of the theme determines the default position of the sidebar.

9. Widget Areas

The Studio Theme provides a number of predefined widget areas, with you can display widgets on the sidebar, the footer and the content as well.

You can also create custom widget areas. With them, you can display different widgets in the sidebars and footers of each page. You can even place your self-created widget areas in the contents and subheaders of pages with the [widget_area] shortcode.

You can create and manage widget areas under Theme Options » Widget Areas. Here you will find the predefined widget areas of the theme as well. The predefined widget areas cannot be deleted but you can modify their properties; e.g. the layout of the widgets they contain.

Creating Widget Areas:

1 Click 'Create a New Widget Area'
2 Enter the name of the new widget area.
This name will appear in the Appearance » Widgets menu where you can add widgets to the widget area. You can use this name in the [widget_area] shortcode as well.
3 Set the layout of the widget area.
You can set how many lines a widget area should contain. For every line you can specify how many cells they should contain. You can also edit the width of the cells. Finally, you can specify for every cell how many widgets you want to display in them. So you can create very diverse widget layouts. You can set a unique CSS class name to the cells; thus you can display widgets with custom appearances as well.
4 After creating the widget areas you can add widgets to them under Appearance » Widgets.
5 Having done all this you only have to place your widget areas in the desired places. To place a widget area in the content of a page or subheader, use the [widget_area] shortcode. To place a widget area on the sidebar or the footer of pages, use the 'Additional Footer Widget Area' and 'Additional Sidebar Widget Area' options on the admin page of pages. To customize the sidebars and footers of post, category and tag pages, use the 'Additional Sidebar Widget Area' and 'Additional Footer Widget Area' options under Posts » Post Settings / News » News Settings / Portfolio » Portfolio Settings. Finally, to place custom widget areas on the sidebars and footers of special pages (date, search, author, 404), use the options under Theme Options » General » Special Pages.

10. Widgets

The Studio Theme comes with a several number of widgets in addition to the standard WordPress ones.

Since our goal is to provide an extremely flexible theme for our users we improved the standard WordPress widgets; they now have more settings options than the original ones.

The following list contains a short description of the widgets introduced by the theme:

A Breadcrumb trail is a navigation aid that makes the route to a page visible to the visitors. With breadcrumbs your visitors will easily orientate on your website and by clicking on a breadcrumb item they can directly open the page it points to. Breadcrumbs help search engines crawl your pages and easily understand its hierarchy. Also, your breadcrumb will be added to the bottom of your Google SERP listing entry and your visitor surfs better.

You will find breadcrumb settings under Theme Options » General » Breadcrumb:

Settings
Show Breadcrumb Set whether to display the breadcrumb or not. This setting applies to the whole website but you can change it for each page.
Separator Sets the text that separates breadcrumb items.
Nofollow links Here you can specify whether to use nofollow links or not. Search engines do not crawl nofollow links.
More on nofollow (Wikipedia).
Show matching page Set whether the title of the matching page should appear in the breadcrumb on post, category, tag and date pages.
Show post type Set whether the post type should appear in the breadcrumb on post, category, tag and date pages.
Show category of posts Set whether the category should appear in the breadcrumb on post pages.
Show taxonomy of terms Set whether the taxonomy should appear in the breadcrumb on category and tag pages.
Category label Set whether to display slugs or names of tags and categories (a slug is a link friendly name).

12. Shortcodes

Shortcodes are the most powerful tools of WordPress themes; they give you full authority over creating the contents of your pages. Studio Theme support over 90 shortcodes. These enable you to place a high variety of components (buttons, tables, tabs, tooltips, etc.), widget areas, widgets, slideshows, media galleries, videos and other content on your pages. You can also apply skins to the majority of our shortcodes. This feature enables you to customize the appearance of the displayed elements without bothering with codes and web programming.

Shortcodes usually contain several parameters by the use of which you can affect their appearance and behavior. If a shortcode gets an unknown parameter, it will assign the parameter to the top level element of its HTML content. Thus you can assign HTML attributes, events and style properties to the contents displayed by a shortcode.

Shortcodes in detail:

Column layouts

[col2] 1/2 width
[col3], [col23] 1/3, 2/3 width
[col4], [col34] 1/4, 3/4 width
[col5], [col25], [col35], [col45] 1/5, 2/5, 3/5, 4/5 width
[col6], [col56] 1/6, 5/6 width
[row] one row

These shortcodes will help you create the layout of your page.
The following attributes are supported by all column layout shortcodes, excluding the [row] shortcode.

Attributes:
margin Margin of the element (none | small | medium | large | extra-large)
Please Note: if there is no [row] shortcode surrounding [col] shortcodes, a clearing element ( [clear /] ) is required after the last [col] shortcode.

Live example

Line Break

[br /]

This shortcode displays a line break.

Highlighted texts

[highlight]

This shortcode serves to highlight parts of a text.

Attributes:
bg_color Background color. For the supported values, see CSS background-color property.
text_color Font color. For the supported values, see CSS color property.
skin Skin of the shortcode (available skins). Skins are different color schemes that provide attractive appearance.

Live example

Blockquotes

[blockquote]

With this shortcode you can create block quotations.

Attributes:
bg_color Background color. For the supported values, see CSS background-color property.
text_color Font color. For the supported values, see CSS color property.
icon Specifies the quote icon. Default: 'quote-open'.
For a complete list of icons, see Font Icons.
iconset Specifies the icon set that contains the quote icon (see icon above). If no icon set is specified, the theme automatically tries to find an icon set that contains the icon.
For the supported icon sets, see Font Icons.
icon_color Color of the quote icon. For the supported values, see CSS color property.
author The name of the author.
use_dash Insert dash sign before author name (true | false). Default is true.

Live example

Pull quotes

[pullquote]

Similarly to [blockquote] shortcode, this shortcode also for creating blockquotes with the difference of displaying a vertical line before the text instead of using quotation marks.

Attributes:
bg_color Background color. For the supported values, see CSS background-color property.
text_color Font color. For the supported values, see CSS color property.
skin Skin of the shortcode (available skins). Skins are different color schemes that provide attractive appearance.
type Type of the vertical line (1-4).
align The alignment of the pull quote ( '' | left | right ). Default: ''.

Live example

Drop Caps

[dropcap]

With the help of this shortcode you can create drop-caps.

Attributes:
opacity The opacity level of the dropcap. (floating point number 0 - 1) Default: 1.
skin Skin of the drop cap (available skins). Skins are different color schemes that provide attractive appearance.
type Type of drop cap ( disc | simple | square ).

Live example

Drop-Cap Box

[dropcap_box]

With the help of this shortcode you can create drop-cap boxes.

Attributes:
skin Skin of the drop-cap box (available skins). Skins are different color schemes that provide attractive appearance.
type Type of drop-cap box ( disc | simple | square ).
value The text that will be displayed in the drop-cap box.
align The alignment of the drop-cap box. ( top | left | right | bottom )

Live example

Lists

[list]

With the help of the shortcode you can place icons before list items.

Attributes:
icon Specifies an icon for the list items. Default: 'arrow'.
For a complete list of icons, see Font Icons.
iconset Specifies the icon set that contains the icon referred by the icon attribute (see above). If no icon set is specified, the theme automatically tries to find an icon set that contains the icon.
For the supported icon sets, see Font Icons.
icon_color Color of the list icons. For the supported values, see CSS color property.
icon_size Size of the list icons. For the supported values, see CSS font-size property.

Live example

Frames

[frame]

With this shortcode, you can place floating objects in a text block.

Attributes:
align Alignment of the floating object.

Live example

Clear

[clear]

Prohibits showing floating objects on any side of the object. Use it together with the column layout and frame shortcodes.

Attributes: No attributes.

Live example

Font Icons

[icon]

With this shortcode you can display font icons. Studio theme supports two font icon sets by default, but you have the possibility to extend the available icons with your own ones. For details, please see Font Icons.

Attributes:
icon Specifies an icon to display before the link. Default: ''.
For a complete list of icons, see Font Icons.
iconset Specifies the icon set that contains the icon referred by the icon attribute (see above). If no icon set is specified, the theme automatically tries to find an icon set that contains the icon.
For the supported icon sets, see Font Icons.
color Color of the icon. For the supported values, see CSS color property.
size Size of the icon. For the supported values, see CSS font-size property.

Live example

Buttons

[button]

With this shortcode you can create attractive buttons harmonizing with your theme's design.

Attributes:
active The appearance of active buttons differs from the default. This attribute is most useful if you want to set buttons as tabs and you want to distinguish the current tab button from the other ones.

Possible values: true | false.

href The URL of the webpage that should be opened when clicking on the button.
size The size of the button ( normal | medium | large ).
skin Skin of the shortcode (available skins). Skins are different color schemes that provide attractive appearance.
type The type of the button (normal | submit | reset). You can use Submit and Reset buttons on forms (see submit button, reset button).

Live example

Image Frame

[image_frame]

With this shortcode you can add a frame around the image.

Attributes:
align The alignment of the element ( left | center | right ).

Live example

[link]

With this shortcode you can give an attractive appearance to links on your website.

Attributes:
href The target URL of the link.
icon Specifies an icon to display before the link. Default: ''.
For a complete list of icons, see Font Icons.
iconset Specifies the icon set that contains the icon referred by the icon attribute (see above). If no icon set is specified, the theme automatically tries to find an icon set that contains the icon.
For the supported icon sets, see Font Icons.
icon_after Specifies an icon to display after the link. Default: ''.
For a complete list of icons, see Font Icons.
iconset_after Specifies the icon set that contains the icon referred by the icon_after attribute (see above). If no icon set is specified, the theme automatically tries to find an icon set that contains the icon.
For the supported icon sets, see Font Icons.

Live example

Dividers

[divider], [divider_top]

The divider shortcode displays a horizontal line, the divider_top shortcode displays an additional link to the top of the page.

Attributes:
color The color of the line (see border-top-color property in CSS).
title The text that should be placed on the divider line.
type The style of the line (see border-top-style property in CSS)
width The width of the line, in pixels.

Live example

FAQ

[faq], [question], [answer]

With these shortcodes you can enhance the appearance of your questions and answers lists.

Attributes:
mark Set the drop cap text. The default is 'Q' for questions and 'A' for answers. The [faq] shortcode does not support this attribute.
font_size Font size of the drop cap text, in pixels.
image_size The size of the drop cap image, in pixels. Default is 32.
skin Skin of the shortcode (available skins). Skins are different color schemes that provide attractive appearance.
type Type of drop cap ( circle | disc | simple | square ).

Live example

Boxes

[box], [box_title], [box_content]

With these shortcodes you can display any kind of content in attractive boxes.

The following attributes are supported by the [box] shortcode.
skin Skin of the shortcode (available skins). Skins are different color schemes that provide attractive appearance.
width The width of the box (see width property in CSS)

Live example

Box Bars

[box_bar], [box_button], [box_content]

With these shortcodes you can display a short text and a button in an attractive box.

The following attributes are supported by the [box_bar] shortcode.
fontsize The font size of the content, in pixels. Default is 21.
skin Skin of the shortcode (available skins). Skins are different color schemes that provide attractive appearance.
width The width of the box (see width property in CSS)

Live example

Message Boxes

[message], [notice], [warning], [info], [download]

With these shortcodes you can display attractive messages.

Attributes: No attributes.

Live example

Admin Note

[admin_note]

Only visible for users with permission to publish posts.

Attributes: No attributes.

Live example

Protected Content

[protected]

Users must log in to view this content. Users not logged in will see a login form.

Attributes: No attributes.

Live example

Tabset

[tabset], [tab_labels], [tab_label], [tab_contents], [tab_content]

With these shortcodes you can display tabbed contents.

The following attributes are supported by the [tabset] shortcode.
autoplay Automatic tab switch (true | false).
content_width The width of the contents (see width property in CSS).
height The height of the contents (see width property in CSS).
skin Skin of the shortcode (available skins). Skins are different color schemes that provide attractive appearance.
tab_align The alignemnts of tabs (justify | left | left_and_gaps | justify_and_gaps).
type The orientation of the tab (horizontal or vertical).
animation_type The animation when changing tabs.
  • Clip
    • clip_ltr - Left To Right
    • clip_rtl - Right To Left
    • clip_ttb - Top To Bottom
    • clip_btt - Bottom To Top
  • Fade
    • fadeinout - Fade In Out
  • Flip
    • flip_ltr - Left To Right
    • flip_rtl - Right To Left
  • Flip-Rotate
    • fliprotate_ltr - Left To Right
    • fliprotate_rtl - Right To Left
  • Grow
    • grow_ltr - Left To Right
    • grow_rtl - Right To Left
    • grow_ttb - Top To Bottom
    • grow_btt - Bottom To Top
  • Move In
    • movein_ltr - Left To Right
    • movein_rtl - Right To Left
    • movein_ttb - Top To Bottom
    • movein_btt - Bottom To Top
  • Move Out
    • moveout_ltr - Left To Right
    • moveout_rtl - Right To Left
    • moveout_ttb - Top To Bottom
    • moveout_btt - Bottom To Top
  • Move In Out
    • moveinout_ltr - Left To Right
    • moveinout_rtl - Right To Left
    • moveinout_ttb - Top To Bottom
    • moveinout_btt - Bottom To Top
fadeie8 Set whether fading animation is allowed in old Internet Explorer versions (8 and before). The fading effect doesn't work for positioned elements in tab content in old IE browsers. If this options is disabled, clip animations will be used as a fallback.

Live example

Toggle

[toggle], [toggle_title], [toggle_content]

With these shortcodes you can display collapsible contents.

The following attributes are supported by the [toggle] shortcode.
duration The duration of the expand/collapse animation, in milliseconds. Default: 450.
open Set whether the toggle should be open by default or not. (true | false). Default: false.
eventtype The type of user interaction that expands and collapses the toggle. (click | mouseover). Default: 'click'.
group Specifies the group identifier of the toggle. Toggles with the same group identifier belong to the same group. At most one toggle can open in a group.
open_icon Specifies the icon to display when the toggle is open. Default: 'minus'.
For a complete list of icons, see Font Icons.
open_iconset Specifies the icon set that contains the icon referred by open_icon (see above). If no icon set is specified, the theme automatically tries to find an icon set that contains the icon.
For the supported icon sets, see Font Icons.
closed_icon Specifies the icon to display when the toggle is closed. Default: 'plus'.
For a complete list of icons, see Font Icons.
closed_iconset Specifies the icon set that contains the icon referred by closed_icon (see above). If no icon set is specified, the theme automatically tries to find an icon set that contains the icon.
For the supported icon sets, see Font Icons.

Live example

Tooltip

[tooltip]

Creates a tooltip.

Attributes:
delayhide The amount of time in milliseconds that the tooltip should remain visible before it hides. The value of 0 means that there is no time limit.
delayshow The amount of time in milliseconds after the tooltip will be visible. The value of 0 means that there is no time limit.
direction The default direction of the tooltip (up, down, left, right).
hideonmouseout Set to true if you want to hide the tooltip on mouseout. (true, false)
hideontipmouseout Set to true if you want to hide the tooltip when the mouse pointer moves out of it. (true, false)
keepvisibleovertip Set to true if you want to keep visible the tooltip while the mouse pointer is over it. (true, false)
offsetvertical Specifies the vertical distance between the element and the tooltip, in pixels.
offsethorizontal Specifies the horizontal distance between the element and the tooltip, in pixels.

Live example

Table

[table]

With this shortcode you can display attractive tables.

Attributes:
align The horizontal alignment of the contents within cells (left, center, right). Default is center.
skin Skin of the shortcode (available skins). Skins are different color schemes that provide attractive appearance.

Live example

Testimonial

[testimonial]

With this shortcode you can display user testimonials.

Attributes:
name The name of the author of the testimonial.
status The status of the author of the testimonial.
text_align The alignemnt of text.
arrow_pos The alignment of the bubble arrow. (top | left | right | bottom)
icon Specifies the quote icon. Default: 'quote-open'.
For a complete list of icons, see Font Icons.
iconset Specifies the icon set that contains the quote icon (see icon above). If no icon set is specified, the theme automatically tries to find an icon set that contains the icon.
For the supported icon sets, see Font Icons.
icon_color Color of the quote icon. For the supported values, see CSS color property.

Live example

Bubble

[bubble]

With this shortcode you can display rounded boxes or bubbles.

Attributes:
arrow_pos The alignment of the bubble arrow. (top | left | right | bottom)

Live example

Widget shortcodes

With this shortcodes you can display widgets in the contents of pages and subheaders. This is only a convenience feature really because you can create custom widget areas in the Studio Theme and publish them anywhere in the contents of pages and subheaders with the [widget_area] shortcode. Thus you can not only publish widgets in the contents available with shortcodes but any widget you want.

Widget area

[widget_area]

In Studio theme you can create custom widget areas. You can display them in the subheader and the content with the [widget_area] shortcode. For further information, please see the Widget Areas section.

Attributes:
name The name of your widget area.

Post List

[post_list]

Displays a list of blog posts.

Attributes:
categories Slug of categories, separated by commas.
categories_include The categories are allowed or forbidden ( include | exclude ).
category_icon Specifies a category icon. Basically, the 'folder', 'nav', 'nav-2', 'nav-3', 'nav-4' and 'flag' icons are for categories, but you can use any icon. For a complete list of icons, see Font Icons.

If no category icon is specified, the skin settings of the theme determines the icon. If you want to hide the category icon, use the value of 'none'.

category_iconset Specifies the icon set that contains the category icon (see category_icon above). If no icon set is specified, the theme automatically tries to find an icon set that contains the icon.
For the supported icon sets, see Font Icons.
columns_num The number of layout columns
comments_icon Specifies a comments icon. Basically, the 'comment', 'comment-wire', 'comment-2', 'comment-wire-2', 'comment-3', 'comment-4', 'comment-5', 'comment-6', 'comment-7', 'comment-8', 'comments', 'comments-wire', 'comments-2' and 'comments-wire-2' icons are for comments, but you can use any icon. For a complete list of icons, see Font Icons.

If no comments icon is specified, the skin settings of the theme determines the icon. If you want to hide the comments icon, use the value of 'none'.

comments_iconset Specifies the icon set that contains the comments icon (see comments_icon above). If no icon set is specified, the theme automatically tries to find an icon set that contains the icon.
For the supported icon sets, see Font Icons.
datas_to_show The meta data to show, separated by commas (author, category, comments, date, preview, read_more, tags, title).
date_icon Specifies a date icon. Basically, the 'time', 'time-2', 'time-3', 'time-4', 'time-5', 'hour-glass', 'calendar', 'calendar-2' and 'calendar-3' icons are for dates, but you can use any icon. For a complete list of icons, see Font Icons.

If no date icon is specified, the skin settings of the theme determines the icon. If you want to hide the date icon, use the value of 'none'.

date_iconset Specifies the icon set that contains the date icon (see date_icon above). If no icon set is specified, the theme automatically tries to find an icon set that contains the icon.
For the supported icon sets, see Font Icons.
excerpt_length Set the length of excerpts in characters.
excerpt_length_nothumb Set the excerpt length for posts that appear without thumbnail, in characters.
grid_layout Set whether blog posts should be displayed in a grid or the cell height is determined by its content.
Possible values: false, true.
Default: true.
heading_class Specifies a CSS class for the heading of post titles. Default is an empty string.

The theme supports different classes for headings (see Headings) that allow you to display headings in different sizes, but you can also use custom CSS classes. An empty value means that the heading class is automatically calculated based on the number of columns in the list.

heading_tag Specifies the HTML heading element of post titles. Default is 'h2'.
ignore_sticky_posts Specifies whether the sticky posts should be ignored (true | false). Default is 'true'.
link_type Set whether to display the 'read more' text as a button or link. ( button | link ).
order Specifies the sort order direction ( DESC | ASC ). Default: DESC.
order_by Specifies the name of the sort field. Possible values:
  • ID: Order by post id
  • author: Order by author
  • title: Order by title
  • date: Order by date
  • modified: Order by last modified date
  • parent: Order by post/page parent id
  • comment_count: Order by number of comments
  • rand: Random order
  • none: No order
Default is date.
post_ids The identifiers of blog posts to show, separated by commas. To get the identifier of a blog post, open its page on the admin panel and look at the URL in the location bar of your browser. The URL contains a 'post=number' substring, where the number is the identifier of the blog post.
post_preview Here you can choose whether the list should contain the whole content, the teaser, excerpt or only the title of blog posts.

Possible values: full, excerpt, teaser_excerpt, teaser, only_title.

Default is teaser_excerpt.
posts_per_page The number of posts to show.
read_more_button_skin Set the skin of the read more button (available skins). Affects only if the read more text appears as a button (see link_type above).
read_more_icon Specifies a read more icon. Basically, the 'arrow-right', 'arrow-right-2', 'arrow-right-3', 'arrow-right-4', 'arrow-right-5', 'arrow-right-6', 'arrow-right-7' and 'arrow-right-8' icons are for read more, but you can use any icon. For a complete list of icons, see Font Icons.

If no read more icon is specified, the skin settings of the theme determines the icon. If you want to hide the read more icon, use the value of 'none'.

This attribute has an effect only if the read more text appears as a link (see link_type above).

read_more_iconset Specifies the icon set that contains the read more icon (see read_more_icon above). If no icon set is specified, the theme automatically tries to find an icon set that contains the icon.
For the supported icon sets, see Font Icons.
rendering_order Specifies whether blog posts should be rendered left to right or top to bottom in multi-column layout (left_right | top_bottom). Default: left_right.
show_pagination Specifies whether the pagination should be displayed or not (true | false). Default is 'false'.
tag_icon Specifies a tag icon. Basically, the 'tag', 'tag-2', 'tag-3', 'tag-4', 'tag-5', 'paperclip', 'marker', 'marker-2', 'marker-3' icons are for tags, but you can use any icon. For a complete list of icons, see Font Icons.

If no tag icon is specified, the skin settings of the theme determines the icon. If you want to hide the tag icon, use the value of 'none'.

tag_iconset Specifies the icon set that contains the tag icon (see tag_icon above). If no icon set is specified, the theme automatically tries to find an icon set that contains the icon.
For the supported icon sets, see Font Icons.
thumbnail_align Set the alignment of thumbnail images (center | left | left_float | right | right_float).
thumbnail_height Set the height of thumbnail images, in pixels.
thumbnail_width Set the width of thumbnail images, in pixels.
user_icon Specifies an icon to display for the post author. Basically, the 'user', 'user-2', 'users', 'users-2', 'v-card', 'v-card-2', 'v-card-3' and 'v-card-4' icons for authors, but you can use any icon. For a complete list of icons, see Font Icons.

If no user icon is specified, the skin settings of the theme determines the icon. If you want to hide the user icon, use the value of 'none'.

user_iconset Specifies the icon set that contains the user icon (see user_icon above). If no icon set is specified, the theme automatically tries to find an icon set that contains the icon.
For the supported icon sets, see Font Icons.

Live example

News List

[news_list]

Displays a list of news items.

Attributes:
bottom_news_num The number of news items to show in the lower box. Default is 0.
categories Slug of topics, separated by commas.
categories_include The topics are allowed or forbidden ( include | exclude ).
category_icon Specifies a topic icon. Basically, the 'folder', 'nav', 'nav-2', 'nav-3', 'nav-4' and 'flag' icons are for topics, but you can use any icon. For a complete list of icons, see Font Icons.

If no topic icon is specified, the skin settings of the theme determines the icon. If you want to hide the topic icon, use the value of 'none'.

category_iconset Specifies the icon set that contains the topic icon (see category_icon above). If no icon set is specified, the theme automatically tries to find an icon set that contains the icon.
For the supported icon sets, see Font Icons.
columns_num The number of layout columns
comments_icon Specifies a comments icon. Basically, the 'comment', 'comment-wire', 'comment-2', 'comment-wire-2', 'comment-3', 'comment-4', 'comment-5', 'comment-6', 'comment-7', 'comment-8', 'comments', 'comments-wire', 'comments-2' and 'comments-wire-2' icons are for comments, but you can use any icon. For a complete list of icons, see Font Icons.

If no comments icon is specified, the skin settings of the theme determines the icon. If you want to hide the comments icon, use the value of 'none'.

comments_iconset Specifies the icon set that contains the comments icon (see comments_icon above). If no icon set is specified, the theme automatically tries to find an icon set that contains the icon.
For the supported icon sets, see Font Icons.
datas_to_show The meta data to show, separated by commas (author, category, comments, date, preview, read_more, tags, title).
date_icon Specifies a date icon. Basically, the 'time', 'time-2', 'time-3', 'time-4', 'time-5', 'hour-glass', 'calendar', 'calendar-2' and 'calendar-3' icons are for dates, but you can use any icon. For a complete list of icons, see Font Icons.

If no date icon is specified, the skin settings of the theme determines the icon. If you want to hide the date icon, use the value of 'none'.

date_iconset Specifies the icon set that contains the date icon (see date_icon above). If no icon set is specified, the theme automatically tries to find an icon set that contains the icon.
For the supported icon sets, see Font Icons.
excerpt_length Set the length of excerpts in characters.
excerpt_length_nothumb Set the excerpt length for news items that appear without thumbnail, in characters.
grid_layout Set whether news items should be displayed in a grid or the cell height is determined by its content.
Possible values: false, true.
Default: false.
heading_class Specifies a CSS class for the heading of post titles. Default is an empty string.

The theme supports different classes for headings (see Headings) that allow you to display headings in different sizes, but you can also use custom CSS classes. An empty value means that the heading class is automatically calculated based on the number of columns in the list.

heading_tag Specifies the HTML heading element of post titles. Default is 'h2'.
link_type Set whether to display the 'read more' text as a button or link. ( button | link ).
order Specifies the sort order direction ( DESC | ASC ). Default: DESC.
order_by Specifies the name of the sort field. Possible values:
  • ID: Order by post id
  • author: Order by author
  • title: Order by title
  • date: Order by date
  • modified: Order by last modified date
  • parent: Order by post/page parent id
  • comment_count: Order by number of comments
  • rand: Random order
  • none: No order
Default is date.
post_ids The identifiers of news items to show, separated by commas. To get the identifier of a news item, open its page on the admin panel and look at the URL in the location bar of your browser. The URL contains a 'post=number' substring, where the number is the identifier of the news item.
post_preview Here you can choose whether the list should contain the whole content, the teaser, excerpt or only the title of news items.

Possible values: full, excerpt, teaser_excerpt, teaser, only_title.

Default is teaser_excerpt.
read_more_button_skin Set the skin of the read more button (available skins). Affects only if the read more text appears as a button (see link_type above).
read_more_icon Specifies a read more icon. Basically, the 'arrow-right', 'arrow-right-2', 'arrow-right-3', 'arrow-right-4', 'arrow-right-5', 'arrow-right-6', 'arrow-right-7' and 'arrow-right-8' icons are for read more, but you can use any icon. For a complete list of icons, see Font Icons.

If no read more icon is specified, the skin settings of the theme determines the icon. If you want to hide the read more icon, use the value of 'none'.

This attribute has an effect only if the read more text appears as a link (see link_type above).

read_more_iconset Specifies the icon set that contains the read more icon (see read_more_icon above). If no icon set is specified, the theme automatically tries to find an icon set that contains the icon.
For the supported icon sets, see Font Icons.
recommended_box_height Specifies the height of the recommended box slideshow, in pixels. Default is 260.
recommended_box_skin Set the skin of the recommended box (available skins).
recommended_box_width Specifies the width of the recommended box slideshow, in pixels. Default is 600.
recommended_content_length Specifies the excerpt length for recommended news items without thumbnail, in characters. Default is 600. If a news item has no thumbnail, the excerpt appears in the content of the slide not in an excerpt box.
recommended_excerpt_length Specifies the excerpt length for recommended news items, in characters. Default is 170.
recommended_excerpt_width Specifies the width of the excerpt box slideshow that is displayed over the background image, in pixels. Default is 240.
recommended_posts_num Specifies the number of recommended news items to display in the recommended slideshow. Default is 600.
rendering_order Specifies whether news items should be rendered left to right or top to bottom in multi-column layout (left_right | top_bottom). Default: top_bottom.
show_inner_widget_area Specifies whether the News List Inner widget area should be displayed or not ( true | false ). Default is false.
This is the widget area that is placed between the latest and older news blocks.
show_pagination Specifies whether the pagination should be displayed or not (true | false). Default is false.
show_recommended_box Specifies whether to show the recommended box slideshow, or not ( true | false ). Default is false.
tag_icon Specifies a tag icon. Basically, the 'tag', 'tag-2', 'tag-3', 'tag-4', 'tag-5', 'paperclip', 'marker', 'marker-2', 'marker-3' icons are for tags, but you can use any icon. For a complete list of icons, see Font Icons.

If no tag icon is specified, the skin settings of the theme determines the icon. If you want to hide the tag icon, use the value of 'none'.

tag_iconset Specifies the icon set that contains the tag icon (see tag_icon above). If no icon set is specified, the theme automatically tries to find an icon set that contains the icon.
For the supported icon sets, see Font Icons.
thumbnail_align Set the alignment of thumbnail images (center | left | left_float | right | right_float).
thumbnail_height Set the height of thumbnail images, in pixels.
thumbnail_width Set the width of thumbnail images, in pixels.
top_news_num The number of news items to show in the upper box. Default is 8.
user_icon Specifies an icon to display for the post author. Basically, the 'user', 'user-2', 'users', 'users-2', 'v-card', 'v-card-2', 'v-card-3' and 'v-card-4' icons for authors, but you can use any icon. For a complete list of icons, see Font Icons.

If no user icon is specified, the skin settings of the theme determines the icon. If you want to hide the user icon, use the value of 'none'.

user_iconset Specifies the icon set that contains the user icon (see user_icon above). If no icon set is specified, the theme automatically tries to find an icon set that contains the icon.
For the supported icon sets, see Font Icons.

Live example

Portfolio List

[portfolio_list]

Displays a list of portfolio items.

Attributes:
ajax_pagination Set whether to use AJAX pagination or not.
categories Slug of categories, separated by commas.
categories_include The categories are allowed or forbidden ( include | exclude ).
columns_num The number of layout columns
datas_to_show The meta data to show, separated by commas (preview, read_more, title, visit_site).
dottoro_gallery Set whether clicking on a thumbnail should open the Dottoro Gallery Viewer (true | false). Default is true.
excerpt_length Set the length of excerpts in characters.
excerpt_length_nothumb Set the excerpt length for portfolio items that appear without thumbnail, in characters.
grid_layout Set whether portfolio items should be displayed in a grid or the cell height is determined by its content.
Possible values: false, true.
Default: true.
heading_class Specifies a CSS class for the heading of post titles. Default is an empty string.

The theme supports different classes for headings (see Headings) that allow you to display headings in different sizes, but you can also use custom CSS classes. An empty value means that the heading class is automatically calculated based on the number of columns in the list.

heading_tag Specifies the HTML heading element of post titles. Default is 'h2'.
hover_datas_to_show The meta data to show when hovering over thumbnails, separated by commas (preview, read_more, title, visit_site).
link_type Set whether to display the 'read more' and 'visit site' text as a button or link. ( button | link ).
order Specifies the sort order direction ( DESC | ASC ). Default: DESC.
order_by Specifies the name of the sort field. Possible values:
  • ID: Order by post id
  • author: Order by author
  • title: Order by title
  • date: Order by date
  • modified: Order by last modified date
  • parent: Order by post/page parent id
  • comment_count: Order by number of comments
  • rand: Random order
  • none: No order
Default is date.
paging_animation Here you can set an animation effect for AJAX pagination.
  • none - none
  • cards - Cards
  • fade - Fade
  • move - Move
  • move_left_left - Move Left In Left Out
  • move_left_right - Move Left In Right Out
  • move_left_random - Move Left In Random Out
  • move_right_right - Move Right In Right Out
  • move_right_left - Move Right In Left Out
  • move_right_random - Move Right In Random Out
  • move_random_random - Move Random In Random Out
  • move_random_left - Move Random In Left Out
  • move_random_right - Move Random In Right Out
  • scale - Scale
post_ids The identifiers of portfolio items to show, separated by commas. To get the identifier of a portfolio item, open its page on the admin panel and look at the URL in the location bar of your browser. The URL contains a 'post=number' substring, where the number is the identifier of the portfolio item.
post_preview Here you can choose whether the list should contain the whole content, the teaser, excerpt or only the title of portfolio items.

Possible values: full, excerpt, teaser_excerpt, teaser, only_title.

Default is teaser_excerpt.
posts_per_page The number of portfolio items to show.
preview_as_tooltip Specifies whether the preview of portfolio items should appear as a tooltip or regular HTML content (true | false). Default is false.
read_more_button_skin Set the skin of the read more button (available skins). Affects only if the read more text appears as a button (see link_type above).
read_more_icon Specifies a read more icon. Basically, the 'arrow-right', 'arrow-right-2', 'arrow-right-3', 'arrow-right-4', 'arrow-right-5', 'arrow-right-6', 'arrow-right-7' and 'arrow-right-8' icons are for read more, but you can use any icon. For a complete list of icons, see Font Icons.

If no read more icon is specified, the skin settings of the theme determines the icon. If you want to hide the read more icon, use the value of 'none'.

This attribute has an effect only if the read more text appears as a link (see link_type above).

read_more_iconset Specifies the icon set that contains the read more icon (see read_more_icon above). If no icon set is specified, the theme automatically tries to find an icon set that contains the icon.
For the supported icon sets, see Font Icons.
rendering_order Specifies whether portfolio items should be rendered left to right or top to bottom in multi-column layout (left_right | top_bottom). Default: left_right.
separate_galleries Set whether to display galleries of different portfolio items separately.
show_categories Specifies whether to show categories as browsing filters at the top of the list (true | false). Default is false.
show_pagination Specifies whether the pagination should be displayed or not (true | false). Default is false.
show_title_as_link Set whether the title of portfolio items should appear as a link or a plain text ( true | false ).
thumbnail_align Set the alignment of thumbnail images (center | left | left_float | right | right_float).
thumbnail_height Set the height of thumbnail images, in pixels.
thumbnail_width Set the width of thumbnail images, in pixels.
visit_site_button_skin Set the skin of the visit site button (available skins). Affects only if the visit site text appears as a button (see link_type above).
visit_site_icon Specifies a visit site icon. Basically, the 'arrow-right', 'arrow-right-2', 'arrow-right-3', 'arrow-right-4', 'arrow-right-5', 'arrow-right-6', 'arrow-right-7' and 'arrow-right-8' icons are for visit site, but you can use any icon. For a complete list of icons, see Font Icons.

If no visit site icon is specified, the skin settings of the theme determines the icon. If you want to hide the visit site icon, use the value of 'none'.

This attribute has an effect only if the visit site text appears as a link (see link_type above).

visit_site_iconset Specifies the icon set that contains the visit site icon (see visit_site_icon above). If no icon set is specified, the theme automatically tries to find an icon set that contains the icon.
For the supported icon sets, see Font Icons.

Live example

Breadcrumb

[breadcrumb]

This shortcode serves to highlight parts of a text.

Attributes:
separator Sets the text that separates breadcrumb items. Default is: &raquo;.
For special characters, use HTML entities.
nofollow Specififes whether nofollow links should be used in the breadcrumb or not (true | false). Default is true.
More on nofollow (Wikipedia).
show_matching_page Set whether the title of the matching page should appear in the breadcrumb on post, category, tag and date pages (true | false). Default: true.
show_post_type Set whether the post type should appear in the breadcrumb on post, category, tag and date pages (true | false). Default: false.
show_category_for_posts Set whether the category should appear in the breadcrumb on post pages (true | false). Default: false.
show_taxonomy_for_terms Set whether the taxonomy should appear in the breadcrumb on category and tag pages (true | false). Default: false.
slug_or_name Set whether to display slugs or names of tags and categories (a slug is a link friendly name). Possible values: slug, name. Default: name.

Galleries

[gallery]

The [gallery] shortcode is used in a Post or Page to display a thumbnail gallery of images attached to that post. In WordPress, you can upload images, videos and other media for every post, made visible by using the [gallery] shortcode. In Studio Theme, clicking the gallery images will open the Dottoro Gallery Viewer displaying the images in an attractive manner. Read more on the use of the [gallery] on the Gallery Shortcode page.

Live example

[dottoro_gallery]

The WordPress gallery is not identical to the Dottoro Gallery. In the Studio Theme, you can create galleries for every post and page (see Gallery Settings). You can edit this gallery more flexible than the standard WordPress Gallery; e.g. you can set the order of images. You can make the gallery available to your users in more ways (read more in the Galleries section). One way is using the [dottoro_gallery] shortcode. With it you can display a desired HTML content on a page, and clicking the content will open the related gallery. Additionally, with this shortcode you can create custom galleries as well.

Attributes:
add_to_gallery Boolean that sets whether the media set with the href attribute should added to the gallery or not.
for The identifier of the HTML element that should open the viewer when the user clicks on it. If you only want to display a simple link that opens the viewer, you can use the 'value' attribute instead.
height Sets the height of the media that should open in the viewer.
show_frame Boolean that sets whether to show a frame around the image, or not. (default: false)
show_hoverelem Boolean that sets whether to show the magnifier over the content of the dottoro_gallery shortcode. (default: false)
group The identifier of the group containing the images.
href The URL of the image or other media that should be displayed in the gallery.
value Sets the text of the link that opens the viewer. If you need content other than a link to open the viewer, use the 'for' attribute instead.
width Sets the width of the media that should open in the viewer.

The gallery viewer always displays images in a given group. Images set in the Gallery Settings of a page or post are always in the same group. The identifier of this group is an empty string. If you would like the shortcode to open this image group in the viewer, do not specify the 'group' attribute. If the 'group' attribute is specified, the viewer will display the images in the specified group.

With the 'href' attribute you can provide the URL of an image or other media. This media will be added to the gallery identified by the 'group' attribute. If you leave the 'href' attribute unspecified, the shortcode will not assign any new images to the gallery.

Examples:

This example shows how to create a link that opens the gallery set on the admin panel of the page:

[dottoro_gallery value="Show the gallery"/]

This example is the same as the previous one, with the only difference that it also adds an image to the gallery. The viewer will then display this image as the opening first.

[dottoro_gallery value="Show the gallery" href="http://www.example.com/myimage.jpg"/]

This example is the same as the first one, but it creates a heading element instead of a link.

[dottoro_gallery for="example"/]
<h1 id="example">Show the gallery</h1>

This example defines two different galleries (fruits, friends) on the same page. The fruits gallery contains three, the friends gallery two images. Clicking on the 'Show Fruits' link opens the fruits gallery, clicking on the 'jennifer' image opens the friends gallery.

[dottoro_gallery group="fruits" href="http://www.example.com/banana.jpg"/]
[dottoro_gallery group="fruits" href="http://www.example.com/pear.jpg" value="Show Fruits"/]
[dottoro_gallery group="fruits" href="http://www.example.com/peach.jpg"/]

[dottoro_gallery group="friends" href="http://www.example.com/peter.jpg"/]
[dottoro_gallery group="friends" for="img_jen" href="http://www.example.com/jennifer.jpg"/]
<img id="img_jen" src=" http://www.example.com/jennifer.jpg"/>

Live example

For further details, please see the Galleries section.

Slideshow

[slideshow]

Studio Theme provides a widespread support for creating and displaying slideshows. You can display slideshows with the SlideShow Widget and with the [slideshow] shortcode. For further information, please see the Slideshows section.

Attributes:
name Name of slideshow.
width The width of the slideshow, in pixels.
height The height of the slideshow, in pixels.
autoplay Boolean that sets whether the slides should change automatically (true | false).
autoplay_duration The elapsed time between slide changes, in seconds.
loop Boolean that sets whether whether slideshow should be repeated or not.
classname CSS class that is assigned to the top level element in the slideshow..
animation_type Here you can set the slide transition animation. Not all animations are supported in old browsers, clip and fade animations will be used as a fallback.
  • Clip
    • clip_ltr - Left To Right
    • clip_rtl - Right To Left
    • clip_ttb - Top To Bottom
    • clip_btt - Bottom To Top
  • Fade
    • fadeinout - Fade In Out
  • Flip
    • flip_ltr - Left To Right
    • flip_rtl - Right To Left
  • Flip-Rotate
    • fliprotate_ltr - Left To Right
    • fliprotate_rtl - Right To Left
  • Grow
    • grow_ltr - Left To Right
    • grow_rtl - Right To Left
    • grow_ttb - Top To Bottom
    • grow_btt - Bottom To Top
  • Move In
    • movein_ltr - Left To Right
    • movein_rtl - Right To Left
    • movein_ttb - Top To Bottom
    • movein_btt - Bottom To Top
  • Move Out
    • moveout_ltr - Left To Right
    • moveout_rtl - Right To Left
    • moveout_ttb - Top To Bottom
    • moveout_btt - Bottom To Top
  • Move In Out
    • moveinout_ltr - Left To Right
    • moveinout_rtl - Right To Left
    • moveinout_ttb - Top To Bottom
    • moveinout_btt - Bottom To Top
animation_duration The duration of the transition effect, in milliseconds.
animation_easing Easing functions (timing functions) specify how the intermediate values are calculated during the transition. It allows for a transition to change speed over its duration.
Supported functions:
  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • quad-in
  • quad-out
  • quad-in-out
  • cubic-in
  • cubic-out
  • cubic-in-out
  • exp-in
  • exp-out
  • exp-in-out
  • back-in
  • back-out
  • back-in-out
  • bounce-xl
  • bounce-l
  • bounce
  • bounce-s
  • bounce-xs
  • elastic-xl
  • elastic-l
  • elastic
  • elastic-s
  • elastic-xs

See Live Demo.
pagination_type The type of the pagination buttons. (nopagination | sphere | rect | numbers | images)
pagination_skin The skin of the pagination buttons. Only supported for the following pagination button types: sphere, rect and numbers.
pagination_align The alignment of the pagination. (left | center | right)
pagination_button_width The width of the pagination buttons, in pixels. Only supported for the following pagination button types: rect and images.
pagination_button_height The height of the pagination buttons, in pixels. Only supported for the following pagination button types: rect and images.

Live example

Layer

[layer]...[/layer]

A layer is timed content that can appear and disappear with an animation. With the layer shortcode you can display any type of content and you can specify where, when and how it should appear and disappear.
You can use it:

In addition to the standard HTML properties (such as class, style ...) the following attributes are supported:
Layer Shortcode Attributes
starttime The amount of time after the show animation of the layer should start, in milliseconds. Default: 600
startduration How long, in milliseconds, the show animation should take. Default: 20
duration The duration until the layer is visible, in milliseconds. If set to 0, the hide animation won't start automatically. Default: 0
endduration How long, in milliseconds, the hide animation should take. Default: 20
start Property and value pairs (prop: value) that are appended to the layer before showing it, separated by commas.
The supported properties are:
  • CSS properties that take length values (width, height, left, top, right, bottom, font-size, etc.)
  • opacity (values between 0 and 1)
  • clip (for example: clip: {left: 0, top: 0, right: 100, bottom: 'auto'})
  • trafo (two-dimensional linear transformation, supported functions: moveX, moveY, scaleX, scaleY and rotate)
See the examples below.
on Property and value pairs that are appended to the layer when it is visible. See the 'start' attribute for details.
end Property and value pairs that are appended to the layer after hiding it. See the 'start' attribute for details.
starteasing Specifies the easing function for the show animation. Easing functions (timing functions) specify how the intermediate values are calculated during the start animation. It allows for a transition to change speed over its duration.
Supported functions:
  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • quad-in
  • quad-out
  • quad-in-out
  • cubic-in
  • cubic-out
  • cubic-in-out
  • exp-in
  • exp-out
  • exp-in-out
  • back-in
  • back-out
  • back-in-out
  • bounce-xl
  • bounce-l
  • bounce
  • bounce-s
  • bounce-xs
  • elastic-xl
  • elastic-l
  • elastic
  • elastic-s
  • elastic-xs
endeasing Specifies the easing function for the hide animation. Possible values are the same as for the starteasing attribute.
showonce Boolean that sets whether the layer should appear only once, or not. [true, false]. Default: false

Examples:

[layer]Some text[/layer]

[layer style="top:20px;left:100px"]<a href="#">Link</a>[/layer]

[layer start="top:20,left:10" on="top:0,left:10" starttime="600"]content[/layer]

[layer start="left:'0%'" on="left:'50%'" end="left:'100%'"]content[/layer]

[layer start="clip:{right:0, left:'auto'}" on="clip:{right:'auto'}" end="clip:{left:-1}"]content[/layer]

[layer start="trafo:{scaleX:0, rotate:0}" on="trafo:{scaleX:1, rotate:6.28}"]content[/layer]

Live example

Flash Slideshow

[flash_slideshow]

With this shortcode you can place animations displayed by the Dottoro Flash Slideshow in the contents of your pages. You can use the shortcode for displaying both slideshows created under 'Flash Slideshows' and custom XML files.

For further information, see the Slides and Slideshows section and the documentation of the Dottoro Flash Slideshow application.

Attributes:
align The horizontal alignment of the slideshow (left | center | right). The default is center.
width The width of the slideshow, in pixels.
height The height of the slideshow, in pixels.
name The name of your Flash slideshow, created under 'Flash Slideshows'.
url The URL of the slideshow XML file.

Video

[video]

With this shortcode you can display videos on pages.

Attributes:
url The location of the video.
url_mp4 The location of the mp4 video.
url_ogg The location of the ogg video.
url_webm The location of the webm video.
poster The location of the image to show until the user plays or seeks.
width The width of the video.
height The height of the video.
max_width The maximum width of the video.
max_height The maximum height of the video.
wmode Sets the Window Mode property of the Flash movie (window | opaque | transparent). Default is transparent.

Live example

Gray Image

[grayimage]

With this shortcode you can display gray images. Just embed an image tag into a grayimage shortcode and the image will appear grayed out. The color image becomes visible when the mouse hovers over the gray image.

Note: The grayimage shortcode uses canvas element for the grayed out effect. Unfortunately, the same origin policy prevents access to cross origin image data, so the grayimage shortcode only works for images located in the same domain as the HTML page which uses them.

For example:

[grayimage]<img src="myImage.jpg" width="200" height="200" />[/grayimage]

Attributes:
startopac The opacity of the gray image.
endopac The opacity of the color image.

Live example

Google Maps

[google_maps]

With this shortcode you can insert Google Maps into the contents of your pages.

For example:

[google_maps latitude="40.777203" longitude="-73.961475" zoom="17" marker="true" info="My Info" /]

Attributes:
width The width of the map, in pixels.
height The height of the map, in pixels.
type The type of the map. (ROADMAP | SATELLITE | HYBRID | TERRAIN)
address The address to show in map.
latitude The north-south location's coordinate. (This parameter has effect only if the address is not set)
longitude The east-west location's coordinate. (This parameter has effect only if the address is not set)
zoom The initial resolution at which to display the map (0 - 20).
info The information to show, when the user clicks on the marker. If you want to display more complex content, use the [marker_info] shortcode within the [google_maps] shortcode.
marker Set whether to identify the specified locations on the map with the standard icon, or not. (true | false)
panControl Set whether to show the pan control, or not. (true | false)
zoomControl Set whether to show the zoom control, or not. (true | false)
mapTypeControl Set whether to show the 'Map Type' control, or not. (true | false)
scaleControl Set whether to show the scale control, or not. (true | false)
streetViewControl Set whether to show the 'Street View' control, or not. (true | false)
overviewMapControl Set whether to show the 'Overview Map' control, or not. (true | false)

You can embed the [marker_info] shortcode within the [google_maps] shortcode to display more complex content within the marker's bubble.

For example:

[google_maps latitude="40.777203" longitude="-73.961475" zoom="17" marker="true"]
[marker_info]Any HTML content[/marker_info]
[/google_maps]

Along with the subheaders and contents of pages, you can also use shortcodes in the content of the lower region of footers (see ' Copyright and other notices on Footer'). Because usually there is not much written content in this region (only copyright information, date), there are shortcodes created to be used here but of course you can use them in subheaders and contents as well. You can read about these shortcodes in this section.

The [rss] shortcode supports the following attributes:
feed Possible values:
  • full

    Link to the RSS feed that contains all blog, news and portfolio entries.

  • comments

    Link to the RSS feed that contains all blog, news and portfolio.

  • blog

    Link to the RSS feed that contains all blog posts.

  • news

    Link to the RSS feed that contains all news items.

  • portfolio

    Link to the RSS feed that contains all portfolio items.

  • auto

    Link to the RSS feed that contains all entry from the post type of the current page. On post type independent pages (such as home, search, author, ...), the Default Post Type settings determines the target RSS feed.

Live example

Subheader shortcodes

Subheaders often contain information about the page (title, teaser). These information can be displayed by shortcodes; thus you will not have to create subheaders for every page. The shortcodes can of course be used in the contents as well but you will most often need them in the subheaders.

These shortcodes are the following:

[subheader_title], [own_title], [category_title], [matching_title]
[subheader_teaser], [own_ teaser], [category_ teaser], [matching_ teaser]

For further information, please see the Subheaders section.

Shortcodes in alphabetical order

Nested Shortcodes

You can use shortcodes within shortcodes in the Studio theme. So for example the following code snippet displays a three-column layout, a button in the first column, a post list in the second one and a slideshow in the third one:

[row]
[col3]
	[button href="#" skin="sand" size="medium"]
		[icon icon="users" /]Users
	[/button]
[/col3]
[col3]
	[post_list
		datas_to_show="title, preview, read_more"
		posts_per_page="6"
		columns_num="1"
	/]
[/col3]
[col3]
	[slideshow name='Home' /] 
[/col3]
[/row]

Sometimes the need arises to use the same shortcode within itself. For example when you want to use tabs in tabs, or toggles in toggles, or a two-column layout within a two-column layout. Unfortunately WordPress doesn't allow that, so for example the followings are invalid:

[foo]
	[foo]
	[/foo]
[/foo]
[row]
	[col2]
		content ...
		[row]
			[col2]
				content ...
			[/col2]
			[col2]
				content ...
			[/col2]
		[/row]
		content ...
	[/col2]
	[col2]
		content ...
	[/col2]
[/row]

Studio theme provides a solution to this issue. Just add a plus sign to the beginning of the shortcode's name at each nested level and your are done:

[foo]
	[+foo]
		[++foo]
		[/++foo]
	[/+foo]
[/foo]
[row]
	[col2]
		content ...
		[+row]
			[+col2]
				content ...
			[/+col2]
			[+col2]
				content ...
			[/+col2]
		[/+row]
		content ...
	[/col2]
	[col2]
		content ...
	[/col2]
[/row]

Please note that the plus sign can only be used in the right context:

[+foo]
[/+foo]
[foo1]
[+foo2]
[/+foo2]
[/foo1]
[foo]
[++foo]
[/++foo]
[/foo]
[row]
	[col2]
		content ...
		[+row]
			[+col3]
				content ...
			[/+col3]
			[+col3]
				content ...
			[/+col3]
			[+col3]
				content ...
			[/+col3]
		[/+row]
		content ...
	[/col2]
	[col2]
		content ...
		[+row]
			[col3]
				content ...
			[/col3]
			[col3]
				content ...
			[/col3]
			[col3]
				content ...
			[/col3]
		[/+row]
		content ...
	[/col2]
[/row]

13. Slides and Slideshows

Tip: Check out our video tutorial on Slideshows.
Studio Theme provides a widespread support for creating and displaying slideshows. You can manage your slides and slideshows with the menus in the 'Slideshows' menu box.
Every slideshow consists of a chain of slides. The same slide can be used in more than one slideshow.

13.1 Creating Slides

You can create new slides under SlideShows » Add New. The contents of slides can be edited the same way as the contents of posts and pages, and you can also use shortcodes in them. You can set background and pagination images and add HTML content and any number of layers to every slide. Use a unique name for each slide, so you can identify it later.
Slide Options
Background Image Here you can set a background image to the slide. You can also set the size, position and repetition of the image. The default image size is determined by the slideshow. If you want to use other image size, you can set it here. A 0 value means the original width/height of the image.
CSS Class Here you can assign a CSS class to the slide. With this value you can specify the class attribute of the top level element of the slide's HTML content. Thus you can have control over the appearance of the slide.
Delay Here you can set the amount of time in milliseconds that the slide should remain visible before it hides.
Transition Animation Here you can set the slide transition animation. Not all animations are supported in old browsers, clip and fade animations will be used as a fallback.
Animation easing Easing functions (timing functions) specify how the intermediate values are calculated during the transition. It allows for a transition to change speed over its duration. See Live Demo.
Animation duration The duration of the transition effect, in milliseconds.
Pagination Image Here you can set a pagination image to the slide. It has effect only if the slideshow's 'Pagination type' is set to 'images'.
Pagination Tooltip Here you can set a description or caption that will be displayed as a tooltip when hovering over the pagination item.
Target and Link The Link option specifies the URL the item points to, the Target option specifies the target window where the document should be opened.
Adding layers (captions) to slides
A layer is timed content that can appear and disappear with an animation. In the Studio Theme, you can add any number of layers to slides. Creating layers is simple, just embed your HTML content into a layer shortcode.

For example:

[layer]Some text[/layer]
[layer style="top:20px;left:100px"]<a href="#">Link</a>[/layer]
[layer start="top:20,left:10" on="top:0,left:10" starttime="600"]<img src="myImage.jpg" />[/layer]
[layer start="right:30,bottom:50;" on="right:0,bottom:10" end="right:-30,bottom:-50"]text[/layer]

Layers can be used not only in slides but in post, news, portfolio items and in pages as well. The layer shortcode supports several attributes, some of them are standard HTML attributes while others are for layer animation effects. For the available attributes, please see the [layer] shortcode.

13.2 Creating Slideshows

You can create slideshows under 'Slideshows' with a wizard similar to the WordPress menu editor. On the left side of the wizard you will see the lists of slides; the right side contains the slideshows.
1 There are tabs on the top of the right side displaying the names of your slideshows and a + sign where you can add a new slideshow.
2 Set the settings of the slideshow.
SlideShow Settings Options
Slideshow Name The name of the slideshow. Every slideshow must have a unique name.
Slideshow width and height The size of the slideshow, in pixels.
Autoplay / Autoplay duration Here you can set if you would like the slides to change automatically and the elapsed time between slide changes, in seconds.
Loop Here you can set whether slideshow should be repeated or not.
CSS Class Here you can assign a CSS class to the slideshows. With this value you can specify the class attribute of the top level element of the HTML content generated by the slideshow.
Transition Animation Here you can set the slide transition animation. (if the animation is not supported on older browsers, the fade or move effect is used)
Animation Duration The duration of the transition effect, in milliseconds.
Animation Easing Easing functions (timing functions) specify how the intermediate values are calculated during the transition. It allows for a transition to change speed over its duration. See Live Demo.
Pagination settings With these settings you can change the appearance of pagination items.
  • pagination type

    Here you can choose whether you want to use pagination or not. If you do, you can also choose their type here. Available types are: sphere, rectangle, numbers or images.

  • pagination skin

    If the type is set to sphere, rectangle or number you can select a pagination skin here. The 'auto' value means that the look of the pagination is determined by the skin settings of the theme.

  • pagination align

    The alignment of pagination items.

  • pagination width / height

    The size of pagination items, in pixels.

3 After having assigned a name and edited other settings, click 'Save Slideshow'. You must first save settings to be able to add items to the slideshow.
4 You can add items to slideshows with the 'Add to Slideshow' button on the left. The items of the slideshow are displayed on the right side of the screen, under each other.
5 Set the order of slides.
6 After creating the slideshow, click 'Save Slideshow' on the top of the page.

13.3 How to add Slideshows to your pages

You can display slideshows with the [slideshow] shortcode and the Slideshow widget on your pages.

13.4 Flash Slideshows

Displaying the slideshows and the slide transition effects are managed by a JavaScript application in the theme. The theme contains another application for displaying slideshows as well, the Dottoro Flash Slideshow. It is a flash application supporting more impressive effects than the JavaScript application but its use is more complicated, too. To make it easy, you can convert the slideshows created in the theme to a format supported by Dottoro Flash Slideshow under 'Flash Slideshows'. The theme will automatically save the converted slideshows as XML files. To display the slideshow, you only have to provide a name by which you will refer to them in the [flash_slideshow] shortcode.

The automatically created XML files cannot take advantage of all the features of the Dottoro Flash Slideshow. If you want more impressive image transition effects, you have to modify the content of the files under 'Flash Slideshows'. You can also use Dottoro Flash Slideshow to create your very own XML files.

For further information, see the documentation of the Dottoro Flash Slideshow application.

14. Galleries

Tip: Check out our video tutorial on Gallery.

In WordPress, there is an image gallery to every page and post containing the images uploaded to them. These galleries are unfortunately not very flexible. One image can belong to only one gallery and it is rather difficult to modify the order of images.

This is why we created the Dottoro Gallery. There is a 'Gallery Settings' option box in the theme for every page and post that serves for creating galleries. The Dottoro Gallery is fully customizable, independently from the content of the page or post and from the WordPress gallery of the page. Here you can freely arrange the images and have the option of easily copying the images in the WordPress gallery to the Dottoro Gallery ('Import Images from WordPress Gallery' button).

How to create a gallery?
1 You can add images to the gallery with the 'Add new image' button.
2 Set the URL of your image or media. You can specify a remote or a local URL, or you can use the browse button to open the WordPress Media dialog, where you can select the media you want to insert (use the 'Insert into Post' button in the Media Dialog to insert image). The media can be an image, a flash application, a video or sound, too.
3 Set the title of the image (this title will be visible in the Dottoro Gallery Viewer application as the image title). With the 'Link to the attachment page' checkbox you can set the title to open the attachment page of the media when clicking on it. This is only effective for media that have an attachment page; it does not work with images set with remote URLs.
4 Set the dimensions of the media. This necessary only if the automatically calculated size of the media does not meet your needs.
Gallery settings

How to publish your gallery

The images in the Dottoro Gallery will be displayed by a JavaScript image viewer applicaton, the Dottoro Gallery Viewer. To enhance the look of you website, the image transitions are animated.

15. General Theme Settings

The theme supports a high number of setting options. Some of them apply to post types (see Post Type specific settings), to posts (see Settings on single post/news/portfolio pages), to pages (see Page Templates and Pages) and some to the whole website. In this section you can read about settings applying to the whole website.

You will find these options on the General tab of the General menu item in the Theme Options menu box:

Header Settings
Favicon A favicon (Favorites icon) is a file that contains icon or icons associated with a website or webpage. The favicon of a webpage will appear in the address bar and bookmarks list of browsers. To set a favicon, you can use the favicon.ico file provided by the theme, or any icon file you created; it is best to use a custom favicon.
Apple Touch Icon Set the location of your Apple touch icon. Use .png image only. This icon will be visible if your visitor adds the link of your website to the Home Screen on Apple Devices.
Header Includes Here you can set an HTML content that will be inserted at the end of every page's HEAD section. You can specify additional META tags, links to external CSS and JavaScript files (see link element), analytics code and other content usual in HEAD sections.
Pagination
Page navigation settings (pagination) You will find paginations on multiple page pages and in long comment lists.

With these options you can specify the whether the paginations should be numerical or text (Page navigation type), the alignment of paginations (Page navigation alignment), for numbered paginations the number of page links displayed after and before the current page link (Page navigation range), and the texts displayed as links to the previous and next page (Page navigation previous/next text).

Content Settings
Here you can set the target of author's links. Author's links can lead to a page that contains the author's profile and posts, or a website specified on the settings page of the user.
Default Post Type In the theme you can set a number of widgets according to which post type to display the results. If these widgets are set to 'auto' mode, they will display the results according to the post type of the page the widgets are placed on; e.g. blog posts for blog pages and news items for news pages. There are also pages that are not related to post types (home, search, 404, etc.). If you use 'auto' widgets on these pages, they will be displayed by your Default Post Type settings.
Post Type in document title Here you can set whether the document title (HTML title tag) of category, tag and date pages should contain the post type text or not. The document title appears on the title bar of browsers and in search results pages. In the Studio Theme, the category, tag and date pages are post type dependent. If you use more than one post type in your theme, it is recommended to select this checkbox to avoid duplicated document titles.
Show 'comments are closed' Set whether to show the 'Comments are closed' text or not.
Show comments on attachment pages Set whether comments are allowed on attachment pages, or not.
Disable wpautop Here you can disable the WordPress wpautop function.

The WordPress wpautop function automatically replaces double line-breaks with HTML paragraphs in the contents of pages and posts. That's fine in almost any situation, but it also generates p (paragraph) tags within shortcodes causing unwanted spaces. Unfortunately the wpautop function is a bit buggy and sometimes generates unclosed paragraph tags within shortcodes resulting in invalid HTML output.

Therefore, if you use nested shortcodes, it is advisable to disable the wpautop function. In addition, your pages will appear faster when wpautop is disabled (this also applies to the wptexturize feature). The only drawback is that you must add paragraph tags manually to the contents of pages and posts to format their content.

Please Note: after you enable this option, you must check the look of your posts (line breaks may disappear)! See wpautop (WordPress.org) for further details.

Disable wptexturize Here you can disable the WordPress wptexturize function - the function that automatically replaces all special characters (quotes, apostrophes, dashes, etc.) with HTML numeric character references. See wptexturize (WordPress.org) for further details.
Gallery Settings
Here you can set whether the gallery should automatically change media or not. This setting applies to the whole website but you can change it for each gallery.
The interval (in seconds) on how often to change media. This setting applies to the whole website but you can change it for each gallery.

17. Export / Import settings

Currently the standard WordPress exporter/importer allows you to migrate your posts, comments, and categories from one site to another, but it does not support the transport of widget and theme settings. That's why it was necessary to introduce the Dottoro export/import functions that allow you to migrate your widget and theme settings from a site to another one. So you are able to clone your whole website in a few minutes. Just use the WordPress exporter (Tools » Export) together with the Dottoro exporter (Theme Options » General » Export/Import) to export and the WordPress importer (Tools » Import) together with the Dottoro importer to import your website settings.

Our demo content was created the exact same way.

You can read more about importing on the WordPress Codex Importing Content page.
Note: Dottoro does not export all of your WordPress settings only the Studio theme specific settings and your home page setting. The other settings (such as site title, tagline, permalink structure) need to be manually set after importing.

18. Theme Skins

With the help of the turn-key theme designs, you can easily change the outlook of your whole website. Just select a premade theme skin under Theme Options » Skins then save changes and the appearance of your website changes immediately.

The CSS for the theme is split into two files: one that holds the basic markup for layout (style.css) and one that contains all information on the current skin (style_skin.css). The style.css file is located in the root folder of the theme while the skin CSS files are located under the skins folder.

Please do not modify these files. Any customizations you have made will be lost when you update the theme. To avoid this, please consider using child themes for modifications.

19. Localization

Studio Theme is completely localization ready. Text contents in the theme are in language resource files, thus you can easily localize contents and admin. For localization, you only have to make a language file; there's no need to bother with the source code to translate them to the desired language.

How to translate:

In accordance with WordPress standards, text contents in the themes are located in .po language files. The translated .mo files are also a part of the package. The theme contains two .po files; one containing the admin resources, the other the ones applied on sites available for your visitors. Thus, if you only want to translate the content available for your visitors, you can easily do it.
Translation files
You will find the language files in the directories
WordPress themes folder / dottoro / admin / languages
and
WordPress themes folder / dottoro / content / languages.


In each folder you will find files default.po and default.mo. To create your own language file all you have to do is save a copy of default.po and rename it to you locale (e.g. en_US.po). Make the changes in the content of the new file and save it. The file you created must be in the same folder as default.po. Then compile an .mo file from your .po file.
Read more about creating language files on Translating WordPress.

20. Headings

Headings are one of the most important factors in SEO. Search engines give higher weight to words within heading elements (H1, H2, .., H6) than the others. H1 has the highest weight, H2 a little lower and so on.

Headings normally appear in larger font sizes but sometimes keywords important for SEO should not appear too large. To facilitate this, the theme offers five different font size settings for headings:
no class, headings_small, headings_xsmall, headings_xxsmall, headings_xxxsmall.

<h1>title</h1> is the largest, <h1 class="headings_small">title</h1> is a bit smaller, and so on.
Similarly, <h2>title</h2> is the largest, <h2 class="headings_small">title</h2> is a bit smaller, and so on.
These CSS classes can also be used for the container elements of headings. The following headings:

<div class="headings_small">
	<h1>Main title</h1>
	<h2>Subtitle</h2>
</div>
is larger than these ones:
<div class="headings_xsmall">
	<h1>Main title</h1>
	<h2>Subtitle</h2>
</div>

Another important feature in the theme is related to page and post titles. Page titles (and the post titles on single post pages) are displayed in h1, post titles within post lists are displayed in h2 elements. That is typically good for SEO, but if you want, you can modify it. The dottoro_content_title_args and dottoro_post_meta_title_args filters allow you to change the heading tags and their CSS classes. For further details, please see Child Themes and Filter Hooks.

Post list shortcodes also allow you to specify the properties of headings. Further details, please see the heading_tag and heading_class attributes of the post_list, news_list and portfolio_list shortcodes.

21. Child Themes

A child theme inherits the functionality of the parent theme and allows you to modify the styling, the layout ... of the parent theme to any extent without editing the files of the parent theme itself. Without a child theme, when you update the Studio Theme, your changes will be overwritten and lost. Therefore, if you plan to modify your theme, it is highly recommended to use a child theme.

How to install:

1 Download our demo child theme.
2 Log in to your WordPress dashboard and navigate to Themes / Install Themes / upload. Upload the downloaded file, install and activate it.
3 You are done. Now you can get to work and make changes in your child theme.

Important Changes in Studio Theme 1.4

Prior to version 1.4, the Studio theme loads the style.css file of a child theme as standard in WordPress. It means if a child theme is used, the theme only loads the style.css file of the child theme and if you want to load the stylesheet of the Studio theme, you have to import it (@import rule).
The main drawback of this mechanism is that every time the Studio theme is updated you have to change the version number in the @import rule manually (?ver=...) to ensure that your visitors get the latest stylesheet of the Studio theme. If you forget to modify the version number, the browsers of your returning visitors won't download the latest version of the theme's style.css file so your website will not appear properly.

To solve this problem, the loading mechanism of stylesheets has been changed in version 1.4.
Studio theme from version 1.4 loads both the style.css file of theme and the style.css file of the child theme in the following order:

  • style.css file of the theme
  • style.css file of the child theme
In addition, the URL pointing to the style.css file of the theme ends with the version number of the theme (style.css?ver=...), the URL pointing to the style.css file of the child theme ends with the last modified timestamp of the file. So you don't need to worry about browser caching issues neither on theme updates nor when you modify the content of your child theme's style.css file.

To avoid duplicated stylesheets, please remove the @import rule from the style.css file of your child theme that loads the style.css file of the Studio theme:
@import url("../dottoro_studio/style.css?ver=...");

22. CSS Classes

Studio theme and WordPress together apply a lot of different CSS classes to different elements to make it easier to customize the look of your website. In the followings the most important and most commonly used classes are mentioned.
Note: It is strongly advised to use a child theme for customization.

22.1 Body CSS Classes Based On Page Types

These CSS classes allows you to customize the look of your pages based on their type.
The following CSS classes are added to the HTML body element:
Page Type CSS Classes
404 error404
Archives page_archives
Author author
Authors page_authors
Blog post_type_blog
page_blog
Blog category post_type_blog
category
Blog date post_type_blog
date
Blog post post_type_blog
single-post
single
Blog tag post_type_blog
tag
Bookmarks page_bookmarks
Contact page_contact
Imagefolio post_type_portfolio
page_imagefolio
News post_type_news
page_news
News category (topic) post_type_news
category
News date post_type_news
date
News item post_type_news
single-news
single
News tag post_type_news
tag
Portfolio post_type_portfolio
page_portfolio
Portfolio category post_type_portfolio
category
Portfolio date post_type_portfolio
date
Portfolio item post_type_portfolio
single-portfolio
single
Portfolio tag post_type_portfolio
tag
Search search
Sitemap page_sitemap
In addition, there is a Body CSS Class option for every page and post that allows you to add one or more custom CSS classes to the body.
How to use them?
For example, if you want to change the background color of the search page:
.search {
	background-color: red;
}
To change the background color of single post pages in all post types (blog posts, news and portfolio items):
.single {
	background-color: red;
}
To change the background color of single news item pages:
.post_type_news.single {
	background-color: red;
}
or:
.single-news {
	background-color: red;
}
To change the background color of category pages in all post types:
.category {
	background-color: red;
}
To change the background color of news category (topic) pages:
.post_type_news.category {
	background-color: red;
}

22.2 CSS Classes For Blog, News and Portfolio lists

These CSS classes allow you to customize the look of post, news and portfolio lists separately; single-, two-, three- and four-column layouts separately and much more.

Every list has two wrapper elements: an outer wrapper that sourrounds the inner wrapper that holds the list items.

The following CSS classes are added to the outer wrapper:
CSS class Description
post_list Identifies a blog post list.
news_list Identifies a news item list.
portfolio_list Identifies a portfolio item list.
mixed_postlist Identifies a list that can contain blog, news and portfolio posts, as well. Mixed lists are displayed on search and 404 pages.
The following CSS classes are added to the inner wrapper:
CSS class Description
grid_list Identifies a list that has a grid layout.
newspaper Identifies a list that has a 'newspaper' layout (the cell height is determined by its content).
list_1_col Identifies a single-column list.
list_2_col Identifies a 2-column list.
list_3_col Identifies a 3-column list.
list_4_col Identifies a 4-column list.
The following CSS classes are added to the list items:
CSS class Description
col1 Assigned to each item in a single-column list.
col2 Assigned to each item in a 2-column list.
col3 Assigned to each item in a 3-column list.
col4 Assigned to each item in a 4-column list.
col_idx_1 Assigned to each item in the first column of a list.
col_idx_2 Assigned to each item in the second column of a list.
col_idx_3 Assigned to each item in the third column of a list.
col_idx_4 Assigned to each item in the forth column of a list.
first_col Assigned to each item in the first column of a list. Same as col_idx_1.
last_col Assigned to each item in the last column of a list.
row_idx_n n = 1, 2, 3, ... Assigned to each item in the n-th rows of a list that has a grid layout.
idx_0mod2 Assigned to the 2-th, 4-th, 6-th, ... items in a list that has a grid layout. Indexes start from 1 and go left to right, then top to bottom regardless of the rendering order of the list.
idx_1mod2 Assigned to the 1-th, 3-th, 5-th, ... items in a list that has a grid layout. Indexes start from 1 and go left to right, then top to bottom regardless of the rendering order of the list.
idx_0mod3 Assigned to the 3-th, 6-th, 9-th, ... items in a list that has a grid layout. Indexes start from 1 and go left to right, then top to bottom regardless of the rendering order of the list.
idx_1mod3 Assigned to the 1-th, 4-th, 7-th, ... items in a list that has a grid layout. Indexes start from 1 and go left to right, then top to bottom regardless of the rendering order of the list.
idx_2mod3 Assigned to the 2-th, 5-th, 8-th, ... items in a list that has a grid layout. Indexes start from 1 and go left to right, then top to bottom regardless of the rendering order of the list.
idx_0mod4 Assigned to the 4-th, 8-th, 12-th, ... items in a list that has a grid layout. Indexes start from 1 and go left to right, then top to bottom regardless of the rendering order of the list.
idx_1mod4 Assigned to the 1-th, 5-th, 9-th, ... items in a list that has a grid layout. Indexes start from 1 and go left to right, then top to bottom regardless of the rendering order of the list.
idx_2mod4 Assigned to the 2-th, 6-th, 10-th, ... items in a list that has a grid layout. Indexes start from 1 and go left to right, then top to bottom regardless of the rendering order of the list.
idx_3mod4 Assigned to the 3-th, 7-th, 11-th, ... items in a list that has a grid layout. Indexes start from 1 and go left to right, then top to bottom regardless of the rendering order of the list.

22.3 CSS Classes For Blog Posts, News and Portfolio items

These CSS classes are: post_author, post_category, post_comments, post_date, post_meta, post_more, post_tags, post_title.

In addition, there is a Post CSS Class option for every post that allows you to customize the look of posts separately.

How to use them?
For example, if you want to change the look of the title of news items:

On single news item pages:

.single-news .post_title {
	color: red;
}

In news lists:

.news_list .post_title {
	color: red;
}

Changes in version 1.4
CSS classes for news and portfolio items have been renamed in Studio theme 1.4 to make them consistent with blog posts. Please rename them in the style.css file of your child theme to make them compatible with the latest theme version. These CSS classes are:
From To
news_author post_author
news_category post_category
news_comments post_comments
news_date post_date
news_meta post_meta
news_more post_more
news_tags post_tags
news_title post_title
folio_author post_author
folio_category post_category
folio_comments post_comments
folio_date post_date
folio_meta post_meta
folio_more post_more
folio_tags post_tags
folio_title post_title
So for example, if the style.css file of your child theme contains this rule:
.news_title {
	color: red;
}
change it to:
.single-news .post_title, .news_list .post_title {
	color: red;
}

23. Action Hooks

Dottoro actions notify your child themes and plugins about events generated by the Studio theme. These actions allow you to extend the theme's functionality without editing any of its files.

Initial Action Hooks

dottoro_pre
Occurs before any components of the theme have loaded. This is the first event that fires in the theme.
dottoro_init
Initializes the Studio theme. Use this hook to initialize your child theme, define constants, import child theme files.
dottoro_before_load
Occurs before the Studio theme files have loaded, but after constants have been defined.
dottoro_after_load
Occurs immediately after the Studio theme files have loaded and the theme has been initialized. Use this hook for the initialization steps of your child theme that require the Studio theme to be initialized.

Whole Page

dottoro_before_page
Occurs before the theme starts building the contents of the current page.
dottoro_page
Occurs when the theme starts building the contents of the current page.
dottoro_after_page
Occurs when the theme has built the contents of the current page.

Page Structure

dottoro_doctype
Outputs the opening elements of the page source (<!doctype>, <html>, <head> and charset <meta>).
dottoro_doctitle
Outputs the document title element (<title>).
dottoro_meta
Outputs meta elements in the head section of the document (<meta>).
dottoro_scripts_styles
Outputs scripts and styles in the head section of the document (<meta>).
dottoro_styles_pre
Allows to insert custom styles before Dottoro styles.
dottoro_styles
Allows to insert custom styles after Dottoro styles but before Dottoro scripts.
dottoro_scripts_pre
Allows to insert custom scripts before Dottoro scripts.
dottoro_scripts
Allows to insert custom scripts after Dottoro scripts.
dottoro_after_wp_head
Occurs immediately after the wp_head method has been called.
dottoro_close_head_open_body
Outputs closing tag of the head and the opening tag of the body section (</head>, <body>).
dottoro_open_main_wrapper
Outputs the opening tag of the wrapper element, that contains the whole content of the page.
dottoro_open_headers
Outputs the opening tags of the headers section.
dottoro_headers
Outputs the contents of the headers section. The headers section includes both header and subheader.
dottoro_open_header
Outputs the opening tags of the header section.
dottoro_header
Outputs the contents of the header section. The header section contains the site logo, title and description, the header widget area and the primary navigation bar.
dottoro_header_item
Outputs an item of the header section.
dottoro_close_header
Outputs the closing tags of the header section.
dottoro_open_subheader
Outputs the opening tags of the subheader section.
dottoro_subheader
Outputs the contents of the subheader section.
dottoro_close_subheader
Outputs the closing tags of the subheader section.
dottoro_close_headers
Outputs the closing tags of the headers section.
dottoro_open_page_body
Outputs the opening tags of the page body section.
dottoro_page_body
Outputs the contents of the page body section. This section includes the content of the page and the sidebar.
dottoro_open_body_content
Outputs the opening tags of the page content section.
dottoro_body_content
Outputs the contents of the page content section.
dottoro_close_body_content
Outputs the closing tags of the page content section.
dottoro_open_sidebar
Outputs the opening tags of the sidebar.
dottoro_sidebar
Outputs the contents of the sidebar.
dottoro_close_sidebar
Outputs the closing tags of the sidebar.
dottoro_close_page_body
Outputs the closing tags of the page body section.
dottoro_open_footer
Outputs the opening tags of the footer section.
dottoro_footer
Outputs the contents of the footer section. This section includes footer widget and text boces.
dottoro_open_footer_widgetbox
Outputs the opening tags of the footer widget box.
dottoro_footer_widgetbox
Outputs the contents of the footer widget box.
dottoro_close_footer_widgetbox
Outputs the closing tags of the footer widget box.
dottoro_open_footer_textbox
Outputs the opening tags of the footer text box.
dottoro_footer_textbox
Outputs the contents of the footer text box.
dottoro_close_footer_textbox
Outputs the closing tags of the footer text box.
dottoro_close_footer
Outputs the closing tags of the footer section.
dottoro_close_main_wrapper
Outputs the opening tag of the wrapper element, that contains the whole content of the page.
dottoro_close_body
Outputs the closing tag of the body section (</body>).
dottoro_close_html
Outputs the closing tag of the document (</html>).

Comments

dottoro_open_comments_block
Outputs the opening tags of the comments block.
dottoro_comments_block
Outputs the contents of the comments block. This section includes comments and trackbacks.
dottoro_open_comments
Outputs the opening tags of comments.
dottoro_comments
Outputs the contents of the comments. This section includes the title line above comments, the comments list, pagination and form.
dottoro_open_comments_title
Outputs the opening tags of title line above the comments.
dottoro_comments_title
Outputs the contents of the title line above the comments.
dottoro_close_comments_title
Outputs the closing tags of title line above the comments.
dottoro_open_comments_pagination
Outputs the opening tags of comments pagination.
dottoro_comments_pagination
Outputs the contents of comments pagination.
dottoro_close_comments_pagination
Outputs the closing tags of comments pagination.
dottoro_open_comments_list
Outputs the opening tags of comments list.
dottoro_comments_list
Outputs the contents of comments list.
dottoro_close_comments_list
Outputs the closing tags of comments list.
dottoro_open_comments_form
Outputs the opening tags of comments form.
dottoro_comments_form
Outputs the contents of comments form.
dottoro_close_comments_form
Outputs the closing tags of comments form.
dottoro_open_comments_closed
Outputs the opening tags of the 'comments are closed' message.
dottoro_comments_closed
Outputs the contents of the 'comments are closed' message.
dottoro_close_comments_closed
Outputs the closing tags of the 'comments are closed' message.
dottoro_close_comments
Outputs the closing tags of comments.
dottoro_open_pings
Outputs the opening tags of trackbacks.
dottoro_pings
Outputs the contents of the trackbacks. This section includes the title line above trackbacks and the trackbacks list.
dottoro_open_pings_title
Outputs the opening tags of title line above the trackbacks.
dottoro_pings_title
Outputs the contents of the title line above the trackbacks.
dottoro_close_pings_title
Outputs the closing tags of title line above the trackbacks.
dottoro_open_pings_list
Outputs the opening tags of trackbacks list.
dottoro_pings_list
Outputs the contents of trackbacks list.
dottoro_close_pings_list
Outputs the closing tags of trackbacks list.
dottoro_close_pings
Outputs the closing tags of trackbacks.
dottoro_close_comments_block
Outputs the closing tags of the comments block.

Font Icons

dottoro_iconset_register
Registers the two default font icon set and allows to register your own ones.

24. Filter Hooks

Dottoro filters allow you to change the way Studio theme works with your child themes and plugins. With the help of filters, you can modify the arguments and return values of methods in the Studio theme.

Page Structure

dottoro_doctitle_text
Applied to the document title text.
dottoro_body_class
Applied to the class settings of the body element.
dottoro_headers_args
Applied to the arguments of the Dottoro_Headers::do_headers method that outputs the contents of the headers section. The headers section includes both header and subheader.
dottoro_subheader_title_text
Applied to the subheader title text.
dottoro_subheader_title_link
Applied to the target URL of the subheader title.
dottoro_subheader_teaser_text
Applied to the subheader teaser text.
dottoro_subheader_teaser_link
Applied to the target URL of the subheader teaser.
dottoro_open_page_body_args
Applied to the arguments of the Dottoro_Page_Body::do_open_page_body method that outputs the opening tags of the page body section.
dottoro_page_body_args
Applied to the arguments of the Dottoro_Page_Body::do_page_body method that outputs the contents of the page body section. This section includes the content of the page and the sidebar.
dottoro_open_body_content_args
Applied to the arguments of the Dottoro_Page_Body::do_open_body_content method that outputs the opening tags of the page content section.
dottoro_body_content_args
Applied to the arguments of the Dottoro_Page_Body::do_body_content method that outputs the contents of the page content section.
dottoro_content_title_text
Applied to the text of the content title.
dottoro_content_title_args
Applied to the arguments of the content title. Allows you to modify the headings of page titles. For post titles, use the dottoro_post_meta_title_args filter.
dottoro_blog_body_content_args
Applied to the arguments of the Dottoro_Blog::get_body_content method that outputs the contents of a Blog page content section.
dottoro_news_body_content_args
Applied to the arguments of the Dottoro_News::get_body_content method that outputs the contents of a News page content section.
dottoro_portfolio_body_content_args
Applied to the arguments of the Dottoro_Portfolio::get_body_content method that outputs the contents of a Portfolio page content section.
dottoro_imagefolio_body_content_args
Applied to the arguments of the Dottoro_Imagefolio::get_body_content method that outputs the contents of an Imagefolio page content section.
dottoro_footer_args
Applied to the arguments of the Dottoro_Footer::do_footer method that outputs the contents of the footer section. The footer section includes footer widget and text boces.

Post List Pages

dottoro_blog_post_preview_path
Applied to the path of the blog post preview file. This file displays an item of post lists (e.g. a blog post on blog pages).
dottoro_news_item_preview_path
Applied to the path of the news item preview file. This file displays an item of news lists (e.g. a news item on news pages).
dottoro_portfolio_item_preview_path
Applied to the path of the portfolio item preview file. This file displays an item of portfolio lists (e.g. a porfolio item on portfolio pages).
dottoro_portfolio_item_hover_preview_path
Applied to the path of the portfolio item preview file that is visible when the mouse hovers over an item.

Post Meta

dottoro_post_meta_title_args
Applied to the arguments of the Dottoro_Post_Meta::get_title_html method that retrieves the html source of a post title. Allows you to modify the headings of post titles. For page titles, use the dottoro_content_title_args filter.
dottoro_post_meta_title_html
Applied to the html source of the post titles.
dottoro_post_meta_date_html
Applied to the html source of the date post meta data.
dottoro_post_meta_category_html
Applied to the html source of the category post meta data.
dottoro_post_meta_tags_html
Applied to the html source of the tag post meta data.
dottoro_post_meta_author_html
Applied to the html source of the author post meta data.
dottoro_post_meta_author_link_html
Applied to the html source of the link within the author post meta data.
dottoro_post_meta_comment_html
Applied to the html source of the comment post meta data.
dottoro_get_edit_link
Applied to the html source of the post edit link.

Breadcrumb

dottoro_breadcrumb_args
Applied to the arguments of the Dottoro_Breadcrumb::get_breadcrumb method that displays the breadcrumb.
dottoro_breadcrumb_items
Applied to the items of the breadcrumb.

General

dottoro_finalize_output
Applied to the output of the page in the Dottoro_Page_Structure::finalize_output method.
dottoro_locale_settings
Applied to the path of language folders where the language resources files are located.
dottoro_unique_id
Applied to the return value of the unique id generator method. If you want you can use your own unique id generator.
dottoro_wp_fixes
Studio theme fixes some post type related bugs in WordPress and extends default WordPress widgets. With this filter, you can enable and disable these fixes, features.
dottoro_matching_page_id
Applied to the return value of the Dottoro_Theme::get_matching_page_id method that retrieves the identifier of the matching post list page.