log in / join
Dottoro Theme is being discontinued.
There will not be a direct replacement for Dottoro Theme services within Dottoro's product portfolio.
It is recommended that you consider alternative vendor solutions as early as possible.
We understand that this announcement may be unwelcome news to you and your organization.
We want to thank for your loyalty and support, and we are very grateful in having you as our customer. We hope you will find the right replacement solution during your time of transition.
Sincerely,
Dottoro team

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
<

13. Post Templates

The Post Templates menu has been moved to the Templates menu in version 1.37.

Post templates allow you to customize the look of single post pages and the look of posts and media in listings and slideshows.
With the help of post templates, you can display data in various ways. For example, you can have the date above the title, the title below the thumbnail and so on. You have also the possibility to display custom content. For instance, you can put a custom image, button, link or - with the help of the [widget_area] shortcode - widgets above the post title or below the post thumbnail or anywhere you want.
In addition, the [do_action] shortcode gives you the possibility to display PHP generated content. For example, you can display content based on the value of a custom field or the user of the post or anything else.
And to make post templates more flexible, similar to other theme options, you can use selectors for post template settings. For instance, with the help of selectors you can select different post templates for posts according to their post format, post type, author, and so on. For further details, please see the Selectors section.

Table of contents

13.1. Selecting Post Templates

Single Post Pages

You will find a Post Template option under Posts » Post Settings » Single Post Settings / News » News Settings » Single News Settings / Portfolio » Portfolio Settings » Single Portfolio Settings. Here you can select the post template you want to use for single posts and this setting can be overridden for each single post with the Post Template option on Edit post page.

Listings

The "Post Template" options on Blog, News and Portfolio pages and under Theme Options » Author/Search/404 allow you to select a post template for posts in listings.
Additionally, if a listing is displayed with a shortcode (Post List shortcodes, [gallery_list] shortcode), you can use the post_template attribute of a nested [item_settings] shortcode to select a post template for the posts and media appearing in the list.

Slideshows

Similar to listings, the Post Template option of a slideshow allows you to select a post template for the slides.

It is also possible to use different post templates for different items in the same list or for different slides in the same slideshow. For further details, please see the Selectors section.

13.2. Predefined and Custom Post Templates

You can create and manage post templates under Templates » Post Templates. The theme comes with a few predefined post templates to choose from and you can create custom ones. The contents of custom post templates can be edited the same way as the contents of posts and pages, and you can also use shortcodes in them. The predefined post templates give you a good basis to create your own post templates.

If you take a look at a predefined post template, you will see that a post template is nothing else than some shortcodes and a few HTML tags for formatting. The theme provides several post template specific shortcodes that allow you to display post data (such as title, author, categories, thumbnail and some more). These shortcodes are detailed in the next section.

Additionally, post templates are categorized. The category indicates what the post template is intended to be used for. If you want to create a custom post template, in most cases, it is advisable to choose a predefined post template from the appropriate category as a basis.
To create your own post template:

You are done, your custom post template is ready to use. For instance, if you want to use this post template for single blog post pages, just go to Posts » Post Settings, select your new post template in the Post Template option under Single Post Settings, then click Save Changes. If you take a look at a blog post now, you will see the changes.

Categories option

Optionally, you can change the categories of your post template. The Categories option specifies where you want to use the post template:

Post templates for slideshows - slideshow specific CSS classes

There is no significant difference between post templates for slideshows and listings, but there is an important thing you should keep in mind when you are creating a custom post template for slideshows. How will it look when there is no enough space vertically?
For instance, if the post template displays the post thumbnail and the height of the slideshow is less than the height of the image, then the image should be scaled down while keeping the aspect ratio. The problem is more complex if the slideshow is displayed in a popup window. In these cases, you have no control over the height of the slideshow. It is determined by the screen size of the user.

A part of the problems can be solved with CSS, but there are cases when the CSS language does not provide enough flexibility. This is the reason why we have created the CSSEx JavaScript toolkit that extends the CSS language.

If you take a look a couple of predefined post templates for slideshows (such as the "Slider - Post thumbnail" template), you will see something like this: 

[post_media class="js-flex-height-media-on" /]
As you can see, the "js-flex-height-media-on" CSS class is set for the post_media shortcode. This is one of the features provided by the CSSEx JavaScript toolkit. The post_media shortcode adds a couple of wrapper elements around the media and the "js-flex-height-media-on" class will be set on the outermost HTML element created by the post_media shortcode.
The HTML markup will look something like this: 
<div class="media_wrapper js-flex-height-media-on">
	<div class="media_inner_wrapper">
		<img src="..." />
	</div>
</div>
The "js-flex-height-media-on" CSS class marks every media element which is descendant of the current element as a flexible height element. It means that if there is no enough space for the image vertically, its height will be reduced. It works similarly to CSS max-height:100% but gives you much more possibilities. For further details, please see the CSS Extension JavaScript Toolkit.

13.3. Post Template Specific Shortcodes

These shortcodes can only be used in post templates and display post titles, authors, media and thumbnails, categories, comments and some more.

13.4. Examples for Custom Post Templates

If you have not already done so, please read the Predefined and Custom Post Templates section.
Example 1
I'm pleased with the look of single blog post pages, but i want the tags to show at the top of the page not at the bottom
Since the single blog post pages use the 'Single' predefined post template by default, create a custom post template based on this template and assign your new template to the single blog posts.
This is the content of the 'Single' predefined post template:

[post_article class="post-template-single"]
	[post_header]
		[post_title /]
		[post_meta]
			[post_date /]
			[post_category /]
			[post_author /]
			[post_edit_link /]
		[/post_meta]
	[/post_header]

	[post_body]
		[post_thumbnail /]
		[post_content /]
		[clear /]
	[/post_body]
	
	[post_pagination style="margin-top:20px"/]

	[post_footer]
		[post_tags /]
	[/post_footer]
[/post_article]

[do_action action="dottoro_single_bottom_widget_area" /]

[post_comments /]
Just remove its footer (marked in red) and insert the [post_tags /] shortcode after the [post_category /] shortcode: 
[post_article class="post-template-single"]
	[post_header]
		[post_title /]
		[post_meta]
			[post_date /]
			[post_category /]
			[post_tags /]
			[post_author /]
			[post_edit_link /]
		[/post_meta]
	[/post_header]

	[post_body]
		[post_thumbnail /]
		[post_content /]
		[clear /]
	[/post_body]
	
	[post_pagination style="margin-top:20px"/]
[/post_article]

[do_action action="dottoro_single_bottom_widget_area" /]

[post_comments /]
Example 2
This example shows how to add a custom widget area, an image caption, and prev / next post buttons to single post pages
'Single' predefined post template: 
[post_article class="post-template-single"]
	[post_header]
		[post_title /]
		[post_meta]
			[post_date /]
			[post_category /]
			[post_author /]
			[post_edit_link /]
		[/post_meta]
	[/post_header]

	[post_body]
		[post_thumbnail /]
		[post_content /]
		[clear /]
	[/post_body]
	
	[post_pagination style="margin-top:20px"/]

	[post_footer]
		[post_tags /]
	[/post_footer]
[/post_article]

[do_action action="dottoro_single_bottom_widget_area" /]

[post_comments /]
New post template (changes marked in green): 
[post_article class="post-template-single"]
	[widget_area name="My Widget Area" /]
	[post_header]
		[post_title /]
		[post_meta]
			[post_date /]
			[post_category /]
			[post_author /]
			[post_edit_link /]
		[/post_meta]
	[/post_header]

	[post_body]
		[post_thumbnail show_caption="true"/]
		[post_content /]
		[clear /]
	[/post_body]
	
	[post_pagination style="margin-top:20px"/]

	[post_footer]
		[post_tags /]
	[/post_footer]
[/post_article]

[row style="margin:40px 0;font-size:15px"]
	[col2 style="text-align:left;"]
		[previous_post_link /]
	[/col2]
	[col2 style="text-align:right;"]
		[next_post_link /]
	[/col2]
[/row]

[do_action action="dottoro_single_bottom_widget_area" /]

[post_comments /]
Example 3
I want to change the heading tags of post titles from h3 to h2 on the portfolio page.
This is the content of the 'Portfolio List' predefined post template:

[post_article class="post-template-portfolio-list"]
	[post_thumbnail /]
	<div style="padding: 0 6px;">
		[post_header]
			[post_title /]
			[post_meta]
				[post_date /]
				[post_comments_num /]
				[post_author /]
				[post_category /]
				[post_tags /]
			[/post_meta]
		[/post_header]
		[post_body style="padding-top:0;"]
			[post_content /]
		[/post_body]
 		[post_footer]
			[post_excerpt_tip /]
			[post_read_more /]
			[post_visit_site /]
		[/post_footer]
	</div>
	[clear /]
[/post_article]
New post template (just set the heading_tag attribute of the post_title shortcode to 'h2'): 
[post_article class="post-template-portfolio-list"]
	[post_thumbnail /]
	<div style="padding: 0 6px;">
		[post_header]
			[post_title heading_tag="h2" /]
			[post_meta]
				[post_date /]
				[post_comments_num /]
				[post_author /]
				[post_category /]
				[post_tags /]
			[/post_meta]
		[/post_header]
		[post_body style="padding-top:0;"]
			[post_content /]
		[/post_body]
 		[post_footer]
			[post_excerpt_tip /]
			[post_read_more /]
			[post_visit_site /]
		[/post_footer]
	</div>
	[clear /]
[/post_article]
< Nested Shortcodes | Overlays >