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
<

5. Header and Menu

Dottoro theme allows you to completely customize the header and features a professional and highly flexible popup menu that you can place anywhere on your pages.

5.1 Header Options

These options are presented under Theme Options » General » Header.

Header Options
Header Here you can select a header for your site.
This setting can be overridden
  • for pages under Pages » Page Settings
  • for search, author and 404 pages under Theme Options » General » Author/Search/404
  • for post, category, tag and date archive pages under Posts » Post Settings / News » News Settings / Portfolio » Portfolio Settings
  • finally, for every single post and page on the edit post/page screen.
All items (site logo, title and description, primary navigation and Header widget area) in the "Standard" header are positioned absolutely that enables you to set their positions in the theme editor.
For further details, please see the Header Customization section.
Tip: Selectors allow you to target posts and pages according to their attributes, such as post type, post format, categories and tags, authors, etc. For instance, you can select a header for posts from a certain category on the Advanced tab in the "Single Post Settings" section under Posts » Post Settings. So you don't need to change the header of posts one by one and you also don't need to change the header every time you create a new post. For further details, please see Selectors.
The "Logo Image" option allows you to set your own site logo. Just click on the "Set an Image" button and select an image for your site logo in the WordPress media dialog. If you want to display you site logo in the header, enable the "Show Logo Image" option.
It is also possible to change the position of your site logo. Open the theme editor and go to Headers » Header Items » Logo. Here you will find a Position option that allows you to change the position of the logo and see the changes in real time.
Site Title and Description The "Show Title" and "Show Description" options allow you to display the site title and description in the header. You can set the text of the title and description the usual way, with the 'Site title' and 'Tagline' options under Settings » General.
It is also possible to change the look and feel of your site title and descriptio. Open the theme editor and go to Headers » Header Items » Title/Description. Here you will find a Position and Font options that allow you to change the position and font settings and see the changes in real time.

5.2 Header Customization

The Dottoro theme gives you multiple options to customize the header of your pages.

5.2.1 How to customize the "Standard" header

By default, all pages and posts use the "Standard" header that in most cases provides sufficient flexibility. The "Standard" header displays the site logo, title and description, the primary navigation and the Header widget area. Each of them is positioned absolutely that enables you to set their positions in the theme editor (Headers » Header Items). If you want to add some widgets to your header, put them into the Header widget area under Appearance » Widgets and your widgets will be displayed in the header. The Header widget area displays the widgets one below the other. To change this, go to Theme Options » Widget Areas, and change the layout of the Header widget area.

There are cases when the Header widget area doesn't provide enough flexibility. For instance, when you want to display some content on the left and some on the right side of the header. For these cases, you can use the dottoro_header_item action.

Example 1
This example shows how to display a login link at the top-right of the "Standard" header.
Add these lines to the functions.php file of your child theme:
add_action ( 'dottoro_header_item', 'login_panel');
function login_panel () {
?>
	<div class="login_panel"><a href="#">login</a></div>
<?php
}
and these ones to the style.css file of your child theme:
.login_panel {
	position: absolute;
	right: 0;
	top: 0;
}
Example 2
It is also possible to remove some items from the header on certain pages. This example shows how to remove everything from the header and display a login link instead of them on the page with id of 500.
Add these lines to the functions.php file of your child theme:
add_action ( 'dottoro_header_item', 'remove_all_and_display_login_panel', 1);
function remove_all_and_display_login_panel () {
    if (is_page('500')) {
        remove_action ( 'dottoro_header_item','Dottoro_Header::do_site_info');
        remove_action ( 'dottoro_header_item','Dottoro_Header::do_menu');
        remove_action ( 'dottoro_header_item','Dottoro_Header::do_widget_area');
?>
		<div class="login_panel"><a href="#">login</a></div>
<?php
	}
}
Of course, you need to style the login panel similar to Example 1.
Example 3
This example shows how to display a widget area at the top-right of the "Standard" header. For further details on widget areas, please see the Widget Areas section.
Add these lines to the functions.php file of your child theme:
add_action ( 'dottoro_header_item', 'add_widget_area_to_header');
function add_widget_area_to_header () {
	echo (do_shortcode ('[widget_area name="NAME_OF_YOUR_WIDGET_AREA" /]'));
}

5.2.2 Custom headers

It is also possible to create totally custom headers. The Header option allows you to select a header for every page and post on your website. This option is useful if you need a completely different header on certain pages or if want to create the layout of the header and you don't want the header items to be positioned absolutely.
Custom headers can be created with the "Add New" button at the top of the page under Headers » Headers. The content of headers can be edited the same way as the contents of pages and posts. You can also use shortcodes in them. There are some shortcodes that are intended for custom headers, but of course, they can be used anywhere on your pages. These are the [site_logo], [site_title], [site_description] and [primary_navigation] shortcodes.
Additionally, the [widget_area] shortcode is also often used in custom headers.

As we mentioned before, by default, the site logo, title and description, the primary navigation and the Header widget area are positioned absolutely. Moreover, the height of the header is also set by the skin of the theme. In case of custom headers, these settings are usually not necessary. The theme options for custom headers allow you to disable these settings.

The following options are supported for custom headers:

Headers on small screens

The responsive stylesheet in our demo child theme gives you a good basis to create your own responsive header design (see Responsive Design). It shows you how to change the height of the header and how to move the menu and the other header items to different positions on small screens. This stylesheet is designed for cases when you have the same header on all of your pages and the header items are positioned absolutely.
But what do you need to do if you want to use different headers on your pages or the header items are positioned statically on your site?

Example 1
This is an example for a custom header. You can create custom headers under Headers » Headers. This example shows how to display the site logo, title and description, the primary navigation and the Header widget area. If the "Full Width", "Static Positions" and "Auto Height" options are disabled for this header, then the header will look exactly the same as the "Standard" header.
[site_logo /]
[site_title /]
[site_description /]
[primary_navigation /]
[widget_area name="Header" /]
Example 2
This example is similar to the previous one, but it creates a liquid layout and works with statically positioned header items. The "Static Positions" and "Auto Height" options must be enabled for this header. Please note that since the items in this header are positioned statically, you cannot use the theme editor to change their positions.
[row]
	[col][site_logo /][/col]
	[col]
		[site_title /]
		[site_description /]
	[/col]
	[col style="float: right"]
		[widget_area name="Header" /]
	[/col]
[/row]
[primary_navigation /]
The Back button is displayed to the left of the "Menu" menu item in the compressed menu. Since in this custom header the primary navigation is aligned to the left side, if the Compressed Menu option is enabled for the primary navigation, the Back button needs to be moved to the right side of the "Menu" menu item to avoid 'jumping'.
If you add this line to your style.css file:
.popup_menu .menu_compressed .menu_back {float: right !Important;}
then the Back button will be displayed to the right of the "Menu" menu item in all compressed menus on your site.
If you want the Back button to be displayed on the right side only in your custom header, add a class to the "Outer CSS Class" option (e.g. compressed_back_on_right) and add this line to your style.css file:
.compressed_back_on_right .popup_menu .menu_compressed .menu_back {float: right !Important;}
Example 3
This example shows how to create a custom header that displays the site title on the top-left, the Header widget area on the top-right, a custom widget area on the bottom-left and the primary navigation on the bottom-right corner.
[row]
	[col]
		[site_title /]
	[/col]
	[col style="float: right"]
		[widget_area name="Header" /]
	[/col]
[/row]
[row]
	[col]
		[widget_area name="NAME_OF_MY_CUSTOM_WIDGET_AREA" /]
	[/col]
	[col style="float: right"]
		[primary_navigation /]		
	[/col]
[/row]

5.3 Menus

Tip: Check out our menu demo site.

The theme provides the following options for displaying menus:

The following options are supported for popup menus:

In addition, it is also possible to completely customize the look and feel of your menus in the Theme Editor. The options under Menu » Primary allow you to change the look of the primary menu while the options under Menu » Widget allow you to change the look of menus displayed with the popup menu widget, separately in the header, subheader, content, sidebar and footer. Moreover, the Theme Editor provides several pre-made menu skins that help you to create your own menu design. The "Submenu Skins" button under the Skins main menu allows you to select a menu skin for the primary navigation. The "Submenu Skins" buttons under Menu » Widget » Header/Subheader/Content/Sidebar/Footer » Submenu Skin allow you to select menu skins for menus displayed with the popup menu widget.

5.3.1 Mega Menus

With the help of mega menus you have the ability to display any content in popup menus on your site. You can display widgets, post lists, sldeshows and anything you want in drop-down menus.
Managing Mega Menus
Mega menus can be managed under Appearance » Mega Menus. To create a new mega menu, click on the "Add New" link at the top-left corner of the page, give your menu a title, set its content and click publish. The contents of mega menus can be edited the same way as the contents of posts and pages, and you can also use shortcodes in them.
Adding mega submenus to menus
You will find a Mega Submenu option in the "Dottoro Options" box for every menu item under Appearance » Menus. It allows you to assign a mega menu to a menu item that will be displayed as a drop-down submenu of the item. Since compressed menus don't support mega menus, it also makes sense that a menu item with mega submenu has child items. So you have the chance to display a mega menu in normal and a "standard" submenu in compressed mode.
In most cases, mega submenus require custom styling. For instance, mega submenus usually have the same width as the whole main menu. Check out our menu demo site. It shows how to create and customize mega menus.