Dottoro Theme Documentation

Tutorial to get your theme to work

Prologue First Steps Front Page Creating a custom front page Blog, News and Portfolio post types Post Type specific settings General settings Single post settings Category / Tag / Date archive page settings Permalink settings Options on single post pages General page options Image options Gallery settings Page Templates and Pages Page Settings Page Templates Pages created from page templates General page settings Gallery settings Blog page settings News page settings Portfolio and Imagefolio page settings Contact page settings Archives page settings Authors page settings Boomarks page settings Sitemap page settings Special pages Category and tag page settings Archive and date page settings Search page settings Author page settings 404 page settings Header and Menu Subheaders Subheader specific shortcodes Predefined Subheaders Creating Subheaders Assigning subheaders to pages Footer Widgets in the Footer Copyright and other notices in the Footer Sidebar Widgets on the Sidebar Width and alignment of the sidebar Widget Areas Widgets Breadcrumb Shortcodes Shortcodes In Alphabetical Order Shortcodes By Categories Nested Shortcodes Post Templates Overlays Media and External Media Overview of galleries, gallery listings and slideshows Galleries and Gallery Listings About Galleries In General Creating And Managing Galleries [gallery_list] shortcode Slideshows and Popup Slideshows Slideshows Popup Slideshows Slideshow Settings Most Often Used Slideshow Options All Slideshow Options Slideshow Templates - Slideshow Specific Shortcodes Styling Guide For Slideshows Styling Of Slideshow and Post Templates Slides Popups Selectors Web Fonts General Theme Settings User Roles Export / Import Settings Creating theme designs Localization Headings Child Themes CSS Classes Responsive Design CSS Extension JavaScript Toolkit JavaScript Library Action Hooks Filter Hooks Compatibility Issues

20. Selectors

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

Selectors allow you to target posts, pages and media according to their attributes, such as CSS class, post type, post format, categories and tags. With the help of selectors you can specify individual settings for certain posts, pages and media. For instance, you can select individual header for posts from a certain category, you can display individual widgets in the sidebar for posts from a certain author, you can select different post templates for posts according to their post format, and so on.

There are lots of places where you can use selectors:

Page » Page Settings:
- On the Advanced tab, you can use selectors to change the default settings for certain pages.
Posts » Post Settings / News » News Settings / Portfolio » Portfolio Settings:
- On the Advanced tab under Single Post Settings, you can use selectors to change the default settings for certain single post pages.
- On the Advanced tab under Category/Tag/Archive Page Settings, you can use selectors to change the default settings for certain category, tag and date archive pages.
Blog, News, Portfolio, Imagefolio, 404, Search and Author pages:
- On the Advanced tab under the Post Layout section, you can use selectors to change the layout settings for certain posts listed on the page.
- On the Advanced tab under the "Post Thumbnail & Overlay" section, you can use selectors to change the thumbnail and overlay settings for certain posts listed on the page.
Slideshows:
- On the Advanced tabs under the Slide Settings section, you can use selectors to change the look and feel of slides displaying certain posts and media.
Finally, the [selector] shortcode allows you to apply individual settings to certain items/slides in a list/slideshow.

Selectors work the same way and with the same logic as CSS selectors.

Supported Selectors
`page`	Applies to any page.
`post`	Applies to any post (not page).
`media`	Applies to any media. You can add any number of media (self hosted media, external media and slide), posts and pages to a gallery in the Dottoro theme (more on Galleries). The `media` selector can be used to apply individual settings to list items or slides displaying media.
`.className`	Applies to any post and page whose Body/Post CSS Class option contains className. The Body CSS Class option is used for single pages, while the Post CSS Class option is used if the post/page is displayed in a list or slideshow. Additionally, you can use the CSS class selector for media also. You can assign CSS classes to each media with the CSS Class option on the Edit Media screen.
`[type=postType]`	Applies to any post whose post type is postType. Note: The post type of slides is dottoro_slide, the post type of external media is dottoro_media
`[format=postFormat]`	Applies to any post whose post format is postFormat.
`[author=authorName]`	Applies to any post whose author's user name is authorName.
`[category=categoryName]`	Applies to any post from the category categoryName.
`[tag=tagName]`	Applies to any post tagged as tagName.
`[tax_taxName=termName]`	Applies to any post which has a term termName in the taxonomy of taxName. This is useful if you use a custom taxonomy for a post type and you want to filter posts by terms of this taxonomy.
`[created=YY/MM/DD]`	Applies to any post that is created on the specified date. See Supported date formats for details.
`[created_before=YY/MM/DD]`	Applies to any post that is created before the specified date. See Supported date formats for details.
`[created_after=YY/MM/DD]`	Applies to any post that is created after the specified date. See Supported date formats for details.
`[modified=YY/MM/DD]`	Applies to any post that is modified on the specified date. See Supported date formats for details.
`[modified_before=YY/MM/DD]`	Applies to any post that is modified before the specified date. See Supported date formats for details.
`[modified_after=YY/MM/DD]`	Applies to any post that is modified after the specified date. See Supported date formats for details.
`[custom_fieldName=value]`	Applies to any post which has a custom field with a name of fieldName and its value is value.
`[has=property]`	Supported properties: media: applies to any media (self hosted media, external media and slide) and to any posts which has a thumbnail. thumbnail: applies to any post and media which has a thumbnail. For instance, the `[has=thumbnail]` selector can be useful if there are posts with and without thumbnail in a list/slideshow and you want to apply different excerpt lenghts to them.

Selectors can also be combined the same way as CSS selectors. Some examples:

`[type=product].red`	Applies to any post whose post type is product and Body/Post CSS Class option contains red.
`.red.blue`	Applies to any post, page and media whose Body/Post CSS Class option contains both red and blue.
`page.red.blue`	Applies to any page whose Body/Post CSS Class option contains both red and blue.
`.red, .blue`	Applies to any post, page and media whose Body/Post CSS Class option contains red or blue (or both).
`page.red, media.blue`	Applies to any page whose Body/Post CSS Class option contains red and any media whose CSS Class option contains blue.
`[format=video].red, page[author=john]`	Applies to any post whose post format is video and Body/Post CSS Class option contains red and applies to any page whose author is john.

The value of attribute selectors is optional:

`[type]`	Applies to any post whose post type is not blog (post).
`[format]`	Applies to any post which has a post format (not a standard post).
`[author]`	Applies to any post which has an author (this does not make sense, every post and page has an author).
`[category]`	Applies to any post which has at least one category.
`[tag]`	Applies to any post which has at least one tag.
`[tax_taxName]`	Applies to any post which has at least one term in the taxonomy of taxName.
`[created]` `[created_before]` `[created_after]` `[modified]` `[modified_before]` `[modified_after]`	Applies to any post which has a creation/modification date (this does not make sense, every post and page has a creation/modification date).
`[custom_fieldName]`	Applies to any post which has a custom field with a name of fieldName regardless of its value.

Supported date formats:

The [created], [created_before], [created_after], [modified], [modified_before] and [modified_after] attributes support the date in the following format: YY/MM/DD
Where:

`YY`	A four digit representation of a year or a relative year. Examples: `2013` : the year of 2013 `-1` : the last year `-2` : the year before the last year `-0` : the current year `0` : the current year The year is optional, if not specified there is no condition for the year. For details, please see the examples below.
`MM`	A numeric representation of a month or a relative month. Examples: `1` : January `01` : January `4` : April `-1` : the last month `-2` : the month before the last month `-0` : the current month `0` : the current month The month is optional, if not specified there is no condition for the month. For details, please see the examples below.
`DD`	A numeric representation of a day or a relative day. Examples: `1` : The first day in a month `01` : The first day in a month `4` : The fourth day in a month `-1` : the last day `-2` : the day before the last day `-0` : the current day `0` : the current day The day is optional, if not specified there is no condition for the day. For details, please see the examples below.

Examples for `created` (`modified` works the same way)
`[created=2013]`	Applies to any post that is created in 2013.
`[created=2013/05]`	Applies to any post that is created in May of 2013.
`[created=2013/05/01]`	Applies to any post that is created on May 1, 2013.
`[created=/05]`	Applies to any post that is created in May of any year.
`[created=/05/01]`	Applies to any post that is created on May 1 in any year.
`[created=//01]`	Applies to any post that is created on the first day in any month and in any year.
`[created=-1]`	Applies to any post that is created in the last year.
`[created=0]`	Applies to any post that is created in the current year.
`[created=0/05]`	Applies to any post that is created in May of the current year.
`[created=0/0]`	Applies to any post that is created in the current month.
`[created=/0]`	Applies to any post that is created in the current month in any year.

Examples for `created_before` and `created_after` (`modified_before` and `modified_after` work the same way)
`[created_before=2013]`	Applies to any post that is created before Jan 1, 2013.
`[created_after=2013]`	Applies to any post that is created on or after Jan 1, 2013.
`[created_before=2013/05]`	Applies to any post that is created before May 1, 2013.
`[created_after=2013/05]`	Applies to any post that is created on or after May 1, 2013.
`[created_before=2013/05/01]`	Applies to any post that is created before May 1, 2013.
`[created_after=2013/05/01]`	Applies to any post that is created on or after May 1, 2013.
`[created_before=/05]`	Applies to any post that is created before May 1 of any year.
`[created_after=/05]`	Applies to any post that is created on or after May 1 of any year.
`[created_before=//15]`	Applies to any post that is created before 15th of any month in any year.
`[created_after=//15]`	Applies to any post that is created on or after 15th of any month in any year.
`[created_before=-1]`	Applies to any post that is created before the last year.
`[created_after=-1]`	Applies to any post that is created on or after Jan 1 of the last year.
`[created_before=0]`	Applies to any post that is created before the current year.
`[created_after=0]`	Applies to any post that is created in the current year.
`[created_before=0/05]`	Applies to any post that is created before May 1 of the current year.
`[created_after=0/05]`	Applies to any post that is created on or after May 1 of the current year.

Real life examples:

How to change the header of blog post pages from the category of "tech"?
Go to Posts » Post Settings and click on the Advanced tab within the Single Post Settings box.
Add the following selector to the selectors: [category=tech]
Finally, enable the Header option below and select the header you want to display.
Remember to click "Save Changes".
How to remove the sidebar from blog post pages whose post format is video?
Go to Posts » Post Settings and click on the Advanced tab within the Single Post Settings box.
Add the following selector to the selectors: [format=video]
Finally, enable the Sidebar Position option below and select the "none" value.
Remember to click "Save Changes".
The Body CSS Class option of some of my blog posts is set to "external". This CSS class allow me to style these pages individually, but how can I change the post template for them?
Go to Posts » Post Settings and click on the Advanced tab within the Single Post Settings box.
Add the following selector to the selectors: .external
Finally, enable the Post Template option below and select the post template you want to use.
Remember to click "Save Changes".
The Body CSS Class option of some of my pages is set to "external". This CSS class allow me to style these pages individually, but how can I set a change the header for them?
Go to Pages » Page Settings and click on the Advanced tab within the Page Settings box.
Add the following selector to the selectors: .external
Finally, enable the Header option below and select the header you want to display.
Remember to click "Save Changes".
My Blog page lists both video and standard posts. I want the video posts to have a totally different look than standard posts. How can I achieve this?
Go to Pages, edit your Blog page and click on the Advanced tab in the "Post Layout" section within the Blog Page Options box.
Add the following selector to the selectors: [format=video]
Finally, enable the Post Template option below and select the post template you want to use for video posts.
Remember to click "Save Changes".
The search page on my website lists both pages and posts and displays the date for them. I want the date to show up only for posts but not for pages. How can I achieve this?
Go to Theme Options » General » Search and click on the Advanced tab in the Post Layout section.
Add the following selector to the selectors: page
Finally, enable the Meta Info option below and select the meta data you want to display for pages in the search result list.
Remember to click "Save Changes".
I have a gallery containing posts and a carousel slideshow that displays the post thumbnails. I want the thumbnails of posts from the "tech" category to be larger than other thumbnails. How can I achieve this?
The Media Width and Media Height options in the Slide Settings section of the slideshow allow you to set the size of post thumbnails.
Additionally, you can use selectors for these settings. Just click on the Advanced tab and add the following selector to the selectors: [category=tech]
Then specify the thumbnail size for the posts from the "tech" category with the Media Width and Media Height options for the selector.
I have a gallery containing images and a carousel slideshow that displays the images. I want certain images to be larger than other images in the slideshow. How can I achieve this?
You should add a unique CSS class to the "large" images (CSS Class option on the Edit Media screen). For instance "large".
Now specify the size of your "small" images with the Media Width and Media Height options in the Slide Settings section of the slideshow. Then click on the Advanced tab, and add the following selector to the selectors: .large
Finally, specify the size of your "large" images with the Media Width and Media Height options for the selector.
I have a gallery containing posts and images, and a carousel slideshow that displays the post thumbnails and the images. I want post thumbnails to have a size 200x100 and the images to have a size 300x150 in the slideshow. How can I achieve this?
Set the Media Width and Media Height options in the Slide Settings section of the slideshow to 200x100.
Then click on the Advanced tab, and add the following selector to the selectors: media
Finally, set the Media Width and Media Height options for the selector to 300x150.
I have a gallery containing posts and images, and a carousel slideshow that displays the post thumbnails and the images. I want the thumbnails of posts from the "tech" category to have a size 300x150, other thumbnails 200x100, certain images 500x250, other images 400x200. How can I achieve this?
You should add a unique CSS class to the "large" images (CSS Class option on the Edit Media screen). For instance "large".
Now set the Media Width and Media Height options in the Slide Settings section of the slideshow to 200x100.
Then click on the Advanced tab, and add the following selector to the selectors:
- post[category=tech]
- media
- media.large
Finally, set the Media Width and Media Height options for the selectors to the corresponding values.

< Popups | Web Fonts >