Dottoro Theme Documentation

Tutorial to get your theme to work

PrologueFirst StepsFront PageCreating a custom front pageBlog, News and Portfolio post typesPost Type specific settingsGeneral settingsSingle post settingsCategory / Tag / Date archive page settingsPermalink settingsOptions on single post pagesGeneral page optionsImage optionsGallery settingsPage Templates and PagesPage SettingsPage TemplatesPages created from page templatesGeneral page settingsGallery settingsBlog page settingsNews page settingsPortfolio and Imagefolio page settingsContact page settingsArchives page settingsAuthors page settingsBoomarks page settingsSitemap page settingsSpecial pagesCategory and tag page settingsArchive and date page settingsSearch page settingsAuthor page settings404 page settingsHeader and MenuSubheadersSubheader specific shortcodesPredefined SubheadersCreating SubheadersAssigning subheaders to pagesFooterWidgets in the FooterCopyright and other notices in the FooterSidebarWidgets on the SidebarWidth and alignment of the sidebarWidget AreasWidgetsBreadcrumbShortcodesShortcodes In Alphabetical OrderShortcodes By CategoriesNested ShortcodesPost TemplatesOverlaysMedia and External MediaOverview of galleries, gallery listings and slideshowsGalleries and Gallery ListingsAbout Galleries In GeneralCreating And Managing Galleries[gallery_list] shortcodeSlideshows and Popup SlideshowsSlideshowsPopup SlideshowsSlideshow SettingsMost Often Used Slideshow OptionsAll Slideshow OptionsSlideshow Templates - Slideshow Specific ShortcodesStyling Guide For SlideshowsStyling Of Slideshow and Post TemplatesSlidesPopupsSelectorsWeb FontsGeneral Theme SettingsUser RolesExport / Import SettingsCreating theme designsLocalizationHeadingsChild ThemesCSS ClassesResponsive DesignCSS Extension JavaScript ToolkitJavaScript LibraryAction HooksFilter HooksCompatibility Issues
<

Shortcodes for popup windows

The popup related shortcodes can be divided into two groups. There are shortcodes that can be used in popup templates and display the components of the popup window (such as titlebar, close and fullscreen buttons, etc.) and there are other ones that help you to display a button or any other HTML element that opens a popup window. In the following sections the "popup opener" shortcodes will be described. For details about the popup template specific shortcode, please see the Popup Templates section.

There are two shortcodes that can be used to display a button or any HTML element opening a popup window, the popup_opener and the gallery_button shortcode. They are quite similar but while the gallery_button shortcode can only be used within overlays and designed to display a button, the popup_opener shortcode can be used anywhere on your site and makes it easier to create any HTML content that opens a popup window.

Furthermore, there is another difference between the popup_opener and gallery_button shortcodes. You can create two types of popups in the Dottoro theme: "normal" popups and gallery popups. Gallery popups have been designed to display galleries as popup slideshows while normal popups give you full control over the content of popup windows like pages and posts do (more on Popups and Popup Slideshows).
The popup_opener shortcode allows you to open a normal or gallery popup while the gallery_button shortcode can only be used to open a gallery popup.

If you don't feel like reading, see Examples below.

[popup_opener]

Allows you to add any HTML content to a page or post that opens a popup window. Just put your content into the popup_opener shortcode and clicking on it will open a popup window.

By default, the popup_opener shortcode opens the default gallery of the current post or page in a popup slideshow, but it can be used to open not just popup slideshows but also "normal" popup windows.

Tip: in overlays, you can also use the [gallery_button] shortcode for similar functionality.
Attributes:
General attributes
preloader_anim Specifies whether to show a preloader animation while the popup is loading (true | false). Default is true.
tag If the nested_shortcode attribute is not specified, the popup_opener shortcode puts the content into a "div" element. The "tag" attribute allows you to change the tag name of this element.
nested_shortcode Specifies the tag name of the shortcode nested into the popup_opener shortcode that should open the popup window.

By default, the popup_opener shortcode puts its content into a wrapper element and listens the click event of the wrapper element to open the popup. In most cases, this provides sufficient flexibility, but for instance, if you want to create a button with the [button] shortcode that opens a popup, then a wrapper around the button is totally unnecessary.
The nested_shortcode attribute has been designed for these cases. Just put a [button] shortcode into the popup_opener shortcode and set the nested_shortcode attribute of the popup_opener shortcode to "button". In this case, the popup_opener shortcode will listen the click event of the button to open the popup window and will not create any wrapper around the button. See Example 5 and Example 8 below.

title Specifies a tooltip for the popup opener. The tooltip is displayed when the user moves the mouse pointer over the popup opener.
translate Specifies the domain to be used to translate the text of the title attribute (above). The default is 'dottoro_theme' which is the text domain of the Dottoro theme. An empty string means that no translation is required.
This attribute is mostly useful if your own translations are loaded into a domain different than the text domain of the Dottoro theme, or if you want to prevent the translation of the visit site text.
For further details, please read I18n for WordPress Developers.
Attributes for normal popups
popup_id Specifies the identifier of the popup window that should be opened when the user clicks on the popup opener.

This attribute only needs to be specified if you want to open a "normal" popup window not a gallery popup (popup slideshow). If this attribute is set, the attributes for gallery popups (see below) will be ignored.

To get the identifier of a popup, go to Popups » Popups, click on the popup and take a look at the URL in the location bar of your browser. The URL contains a 'post=number' substring, where the number is the identifier.

For further details about popup windows, see Popups.
load_type Specifies whether the popup window specified by the popup_id attribute above should be preloaded or not. Possible values:
  • empty_string: no need preloading. The popup starts loading when the user clicks on the popup opener.
  • ajax: the popup starts downloading when the page has been loaded.
  • static: the popup is added to the source code of the page. Since the popup is inserted into a script block, it does not affect SERP (SEO).

Default is 'ajax'.

For further details, please see Preloading Popups.
Attributes for gallery popups (popup slideshows)
galleries Comma separated list of galleries that should be displayed in the popup slideshow.

For instance, "gallery1" means that the popup slideshow will display the "gallery1" gallery of the post, while "gallery1, gallery2" means that the popup slideshow will display both the "gallery1" and "gallery2" galleries of the post.

Additionally, you can also use the post_id:gallery_name syntax to refer to a gallery of another post or a global gallery. For instance, "23:gallery1" refers to the "gallery1" gallery of the post with id of 23, "0:gallery1" refers to the "gallery1" global gallery.

Finally, there is a special value: "_default", that refers to the default gallery of the post. The default value of the galleries attribute is "_default".

Specifies the identifier of the gallery popup (popup slideshow) that should be opened when the user clicks on the popup opener.

To get the identifier of a gallery popup, go to Popups » Gallery Popups and click on the popup. Here you will find the id of the popup.

If the gallery_popup attribute is not set, the (first) gallery specified by the galleries attribute above determines the gallery popup (see Gallery Popup option of a gallery).

For further details, please see Popup Slideshows.
start_idx Specifies the index of the slide the popup slideshow should start with. Default is 0.

Displays a button that opens a popup window. This shortcode can only be used in Overlays.

Tip: the [popup_opener] shortcode can be used anywhere not just in overlays and provides similar functionality to the gallery_button shortcode.
Attributes:
General attributes
Selects an icon for the gallery button (magnifier | photo | player | vimeo | youtube | flash | readmore | external). Default is "magnifier".

An empty string means no icon will be used.

Please note that if the [gallery_button] shortcode has HTML content, no icon will be shown.
Specifies a tooltip for the button. The tooltip is displayed when the user moves the mouse pointer over the button.
Specifies the domain to be used to translate the text of the title attribute (above). The default is 'dottoro_theme' which is the text domain of the Dottoro theme. An empty string means that no translation is required.
This attribute is mostly useful if your own translations are loaded into a domain different than the text domain of the Dottoro theme, or if you want to prevent the translation of the visit site text.
For further details, please read I18n for WordPress Developers.
Attributes for gallery popups (popup slideshows)
Comma separated list of galleries that should be displayed in the popup slideshow.

For instance, "gallery1" means that the popup slideshow will display the "gallery1" gallery of the post, while "gallery1, gallery2" means that the popup slideshow will display both the "gallery1" and "gallery2" galleries of the post.

Additionally, you can also use the post_id:gallery_name syntax to refer to a gallery of another post or a global gallery. For instance, "23:gallery1" refers to the "gallery1" gallery of the post with id of 23, "0:gallery1" refers to the "gallery1" global gallery.

Finally, there is a special value: "_default", that refers to the default gallery of the post. The default value of the galleries attribute is "_default".

Specifies the identifier of the gallery popup (popup slideshow) that should be opened when the user clicks on the button.

To get the identifier of a gallery popup, go to Popups » Gallery Popups and click on the popup. Here you will find the id of the popup.

If the gallery_popup attribute is not set, the (first) gallery specified by the galleries attribute above determines the gallery popup (see Gallery Popup option of a gallery).

For further details, please see Popup Slideshows.
Specifies the index of the slide the popup slideshow should start with. Default is 0.

Examples

Example 1
How to add an image to the content of a page/post that opens the default gallery of the page/post in a popup slideshow when the user click on it?

Click on the "Add Media" button above the WordPress content editor to insert an image to the content of your page/post. When you have selected the image in the media dialog, you will find an Overlay option on the right hand side of the dialog. Select an overlay for your image that contains a [gallery_button] shortcode. For instance, the "Gallery" overlay (more on Overlays). Finally, click on the "Insert Into Post" button.
You are done. When the mouse hovers over the image an overlay will be shown and clicking on the gallery button opens a popup slideshow displaying the default gallery of the post.

Example 2
How to add an image to the content of a page/post that opens the "gallery1" gallery of the page/post in a popup slideshow when the user click on it?

Similar as in the previous example, select an overlay for your image on the media dialog. You will find a "Popup Galleries" option below the Overlay option. Here you can specify the name of the gallery you want to display in the popup slideshow.

Example 3
How to add some text to the content of a page/post that opens the default gallery of the page/post in a popup slideshow when the user click on it?

Put the text into a [popup_opener] shortcode.
Something like this:

[popup_opener]Open Popup Slideshow[/popup_opener]

Example 4
How to add some text to the content of a page/post that opens the "gallery1" gallery of the page/post in a popup slideshow when the user click on it?

[popup_opener galleries="gallery1"]Open Popup Slideshow[/popup_opener]

Example 5
I want to create a button with the [button] shortcode that opens a popup slideshow. How do I do this?

Put the button into [popup_opener] shortcode and set the nested_shortcode attribute to "button" to avoid the creation of a wrapper element around the button.
Something like this:

[popup_opener nested_shortcode="button"][button skin="coral"]Open popup[/button][/popup_opener]

Example 6
I have a popup and I want to add a button to a page/post that opens it. How do I do this?

Specify the id of your popup from the popup_opener shortcode (23 in the example):

[popup_opener popup_id="23" nested_shortcode="button"][button skin="coral"]Open popup[/button][/popup_opener]
Also see Example 5 above.

Example 7
I have a popup and I want to add an image to a page/post that opens it. How do I do this?

You have two options:

Example 8
I want to add a button to every blog post on my site that opens a popup slideshow displaying the default gallery of the post.

You should do the same as in Example 5, but the code to the post template used for you blog posts.
Something like this:

[popup_opener nested_shortcode="button"][button skin="coral"]Open popup[/button][/popup_opener]