Appearance ▸ Customize

Navigate to Appearance ▸ Customize. Here you can configure various theme settings from design to copyrights text. It's recommended to add at least a few pages and posts before you start customizing website's look.

Site Identity

You can quickly change site title and tagline and upload logotype image. It's better to upload all logo images to avoid bad readability on HiDPI screens and over the light/dark hero images.

It must be 2x larger than "Logo" image.

It must be light in most cases, or make sure that it looks good over dark hero images.

Retina logo is 104px x 104px while main logo is 52px x 52px

It's strongly recommended to prepare properly resized png/jpeg/gif files before uploading, because the theme doesn't provide any options to change logotype dimensions. There are many technical and aestetical reasons for that: a pixel perfect graphic in terms of the design, for example.

Navigation

Select between "Fullscreen" and "Inline" types. "Fullscreen" menu activates on the website by clicking menu link ("hamburger" icon, for example, which style you can change in the "Menu link style" setting below). "Inline" menu represents a regular website menu that appears on the right to logo position.

There are 3 options available: "Left", "Center" and "Right". You can select an alignment, you prefer.

This option is only available when menu type has been set as "Fullscreen". Change the font size of the menu items.

Vertical menu

Again, this option is for the "Fullscreen" menu only. Decide whether the menu rests in a row or enable column layout.

Activates a solid menu background when user scrolls down the page. It doesn't appear until hero image/slideshow/video is visible in the browser viewport.

Full width menu

Enable or disable full width menu layout.

Compact menu visibility

This option is only useful, if you assigned a menu to "Header Compact Navigation" location. It remains visible on smartphones when it's enabled. Otherwise, it will be moved to the mobile menu.

Single post parent link

Parent link appears on the left side

Enable or disable short navigation that replaces the logo on single posts and archive pages. Make sure that Settings ▸ Reading ▸ Portfolio settings ▸ Portfolio page is assigned, if you can't see the parent link on single portfolio posts.

Change menu link style. "Inline" menu link appears only when menu is hidden (i.e. when user scrolls down the page).

Layout

Content top indent

Set an indent between site's header and the content. Default value is 75px.

Content bottom indent

Set an indent between site's content area and footer. Default value is 120px.

Hero

Height

Modify the hero header height.

Fill mode

"Cover" mode forces the image (or video) to fill the full height and width of the hero header, but often crops them in the process. "Contain" increases or decreases the size of the image (or video) to fill the hero header width/height, preserving aspect-ratio. * Changing this setting may not take effect on the current page, if it was overrided in the "Hero header" tab of the individual page settings.

Slideshow navigation

Select "Eye" or "Arrow" navigation. You can check the result on any page that has hero slideshow.

Page description alignment

It's a global alignment option for the "Page description" field, you can see while editing pages. Can be overrided in the individual page settings.

Title font size

Hero title font size (excluding "Page description"). It refers to single portfolio post title and any title in the slideshow on pages, if page description was not added.

Post title alignment

A global option that applies to titles in the slideshow and all titles on the website. Can be overrided in the individual page settings such as "Title alignment" and "Alignment" in the slide settings.

Portfolio

Manage portfolio settings in this section. Preview your changes on the page that utilizes "Portfolio" template.

Gaps

Select gaps between portfolio posts thumbnails.

Mode

"Flex" mode provides a regular CSS Flexbox grid. You are able to control items alignment, using 2 settings below: "Vertical alignment" and "Horizontal alignment".

Hover effect

There are 4 different styles, available for selection: "Default", "Minimal", "Ticker" and "Overlay".

Headings

Title font size that's below or over the post thumbnail (depends on the "Hover effect" option).

Filter

Categories filter type. "Fixed" filter is hidden and can be activated by clicking "Filter" link that appears on the left of the portfolio page. "Static" filter locates above the portfolio grid.

Blog

These settings apply to posts page that's selected on the Settings ▸ Reading screen. Open the page in the Customize preview window to track changes.

Type

Select "Plain" or "Grid" type.

Post titles font size

Select one of the available font size options.

Excerpt

Show/hide post excerpt.

Pagination

Type

3 Type are available for selection: "Plain", "Minimal" and "Modern". Preview changes on the page that has pagination such as blog or portfolio page (if these have enough posts).

Alignment

Pagination alignment.

Typography

Headings font

Select a font for all heading on the website.

Content font

Another font that's used for all texts on the website.

Decorative font

It does apply to <blockquote> tag and some other elements on the website.

You can change the font weight for any font option. Font subsets selection is only available for Google Fonts.

Colors

Global color options for all pages.

Background

Page background.

Text

Text color. Please pick a contrast color for better readability on pages.

Accent

Links and a few other desing elements color.

Miscellaneous

Social

You can counfigure social profile links here.

Style

Select link style. Display as a plain text links or as icons.

Add social profile URLs below. Leave fields blank to hide a link.

Sharing

This subsection allows you to configure sharing icons/links.

Style

Select link style. Display as a plain text links or as icons.

Enable or disable sharing bar links below.

Default sharing image

This image will be used as default placeholder in Open Graph meta tags if featured image isn't available.

You need to update social networks cache every time you change default sharing placeholder. Here is the nice article, where you can learn more about Open Graph Meta Tags and how to rescan your website by social network debug tools. Note, it isn't a theme support area.

Twitter username

Your Twitter username will be used for Twitter Card Meta Tags.

Google Maps

Add Google Maps API key in the "Google Maps" subsection. It's required in order to enable javascript API for the map on the page that uses "Split" page template with map activated.

Copyrights

Add site copyrights text in the "Copyrights" subsection. It appears in the site's footer. Allowed HTML tags: <a>, <br>, <span>, <strong> and <img>.

Menus

It's native WordPress feature, so you can read about it in WordPress Codex article.

But, it must be noted that Wakiro theme also supports menu item descriptions, if navigation menu type was set as "Fullscreen". Read how to add descriptions here (step #1 only), please.

The theme has 3 menu locations: "Primary Navigation", "Compact Header Navigation" and "Footer Navigation".

Primary location can be found in the site's header or in the full screen overlay, if your menu type is "Fullscreen".

"Compact Header Navigation" is completely optional and it's mainly for the "Fullscreen" menu type as well. You are able to add a small inline menu in addition to the primary navigation. See on the screenshot, please:

"Footer Navigation" locates in the site's footer. It's better to don't add many items to ensure that it looks good in a couple with copyrights text. Of course, it depends on your preferences.

Widgets

You can read about native "Widgets" section on WordPress Codex.

There are 2 built-in widget areas in the theme: "Sidebar widget area" and "Footer widget area". By default, footer widgets area isn't activated and sidebar is only available on the posts page (blog), including its archives, and single blog posts, but you can change that in the next "Sidebar and Footer" section.

Sidebar and Footer

In this section you can assign sidebar and footer to posts and pages, visining an apropriate subsection. There are 3 settings you need to configure in every subsection: "Sidebar label", "Sidebar" and "Footer". Sidebar is hidden on the website and can be opened by clicking "sidebar link":

Sidebar link "Search" with icon appears on the right side

Wakiro theme provides the ability to create custom widget areas that can be assigned to any posts and pages like 2 built-in default ones. Navigate to Widget areas and create as many, as you might need. See on the screenshot below:

Note that widget area isn't visible in the "Widgets" section while visiting a page which has no sidebar/footer in the Customize preview window. So, open a page that has it or just assign default or custom widget area in the "Sidebar and Footer" section. Then you will be able to add widgets via Customize ▸ Widgets screen.

Other sections

You can see "Homepage settings", "Additional CSS" etc. sections on the screen. These settings are native, so you can find helpful articles on https://www.wp101.com/, for example.