Sonsaoleh Foxland

Sonsa

The following instructions will help you get started using the Sonsa theme. If you have questions, let us know in the support forums.

Featured Images

Sonsa displays each post’s Featured Image prominently, so it’s recommended that you add one to every post. Featured Images should be at least 960px wide by 540px tall.

On single posts, the Featured Image appears above the post title and displays the full image. On blog, archive, and search pages, the Featured Image is cropped to 450px tall.

You can set a default image for posts that don’t have a Featured Image. To do this, navigate to Customizer → Theme Options → Default post image and select an image from your Media Library.

Setting default feature image

How to set default feature image. Click the image for larger view.

You can also set an image for your site’s “Not found page (404)” under Customizer → Theme Options → 404 page image. If a user navigates to a URL of a non-existing page, the theme will display this image above the “Page not found” message:

Page not found

Post Formats

Sonsa supports all Post Formats:

  • Standard
  • Aside
  • Audio
  • Chat
  • Gallery
  • Image
  • Link
  • Quote
  • Status
  • Video

On the blog, archive, and search pages, the Post Formats each have their own unique look. Standard, Image, and Gallery posts will display their Featured Image as a background. Audio and Video posts will do the same, plus add a unique icon to the top corner.

sonsa-video

Chat, Quote, Status, and Link posts each use a different background color, and display a bit of the post’s content.

Chat and Quote Post Formats

Chat and Quote Post Formats

Status and Link Post Formats

Status and Link Post Formats

Slide-Out Custom Menu

You can add a Custom Menu to Sonsa by navigating to Customizer → Menus and assigning one to the Primary menu location. This menu will appear off-screen, and users can make it slide out by clicking the menu toggle in the top corner.

Sonsa's off-canvas menu

Sonsa’s slide-out menu

There’s also a space underneath this menu where you can add widgets — see below.

Widgets

Sonsa comes with two widget areas:

  • The Primary widget area is in the same slide-out section as the Primary menu location. It appears below the menu.
  • The Header widget area is in the fixed header, below the site title and tagline.

You can add widgets to both spaces by navigating to Customizer → Widgets. The Header widget area has limited space, so it’s recommended that you use shorter widgets here. Some good options include the Search widget, or the Text widget with a short summary about your website.

 

Menu and widgets

Sonsa’s menus and widget areas – click the image for larger view

Social Menu

In Sonsa, you can add a Social Links Menu to the header, connecting your different online accounts to your site. The menu will automatically use an appropriate icon for all supported services:

  • CodePen
  • Digg
  • Dribbble
  • Dropbox
  • Email (mailto: links)
  • Facebook
  • Flickr
  • Foursquare
  • GitHub
  • Google+
  • Instagram
  • LinkedIn
  • Path
  • Pinterest
  • Polldaddy
  • Reddit
  • RSS Feed (urls with /feed/)
  • Spotify
  • StumbleUpon
  • Tumblr
  • Twitch
  • Twitter
  • Vimeo
  • Vine
  • WordPress
  • YouTube

Page Templates

There are two Page Templates in Sonsa:

  • The Featured Template, where the Featured Image is the main focus.
  • The Food Menu Template, which will display the items added to the Food Menus.

You can assign one of the Page Templates by following these steps:

  1. Go to Pages → Add New to create a new page to use.
  2. Under the Page Options section, the Page Template can be changed to Featured or Food Menu.
  3. When finished, click Publish.

Featured Template

Featured Page Template

When you use the Featured Template, the Featured Image fills the entire content area. The page’s written content is overlaid on top of the image. For an optimal layout, we recommend keeping the content short so the image can shine.

The Featured Image used with the Featured Page Template should be at least 1280px by 1280px. 

Food Menu Template

Note: These settings are in the WP Admin dashboard, which will look a little different from the rest of your menus. You can leave WP Admin at any time by clicking on My Site.

Sonsa supports Food Menus, and helps you showcase the menu you build with the Food Menu Template.

Before using this template, you will first add some menu items. Click on My Site → Food Menus.

From there, add new menu items by clicking on Add One Item or Add Many Items. Once added, you can sort your delicious Food Menu items into sections like starters, main courses, or desserts, or use labels to group them. Featured Images added to the menu items will display next to the description.

Food menu in admin

After you’ve added Food Menu items, create a new page and assign it the Food Menu Template. This page will display the whole food menu like this:

Food Menu on Sonsa Theme

Portfolio

Sonsa supports the Portfolio feature, giving you an opportunity to showcase several of your photographs or illustrations together. The theme displays your portfolio projects in a grid using their Featured Images:

Sonsa Portfolio

Where is the Portfolio archive page?

Along with the Portfolio Page Template, your projects will be displayed on portfolio archive pages.

Let’s say you have a WordPress.com site at:
https://sonsademo.wordpress.com/

The URL of the Portfolio archive page will be:
https://sonsademo.wordpress.com/portfolio/

Sonsa automatically adds links to your Project Types above your portfolio projects. You can replace these links with your own Custom Menu by assigning it to the Portfolio menu location. The main portfolio page can be added to any Custom Menu using the Links Panel.

Image Sizes

There are several places where you need to consider which image size to use:

  • Featured Images should be at least 960px wide by 540px tall. This includes the images selected for the default featured image and the “Not found page (404)”.
  • For the Featured Page Template, the Featured Image should be at least 1280px by 1280px. The theme crops the image to fit the website’s content area.
  • When added to post content, images will display at 800px wide; the theme will scale large images to fit.
  • The Site Logo will display at 96px wide by 96px tall, but it’s recommended you use an image that’s at least 192px wide by 192px tall. This will help your logo look sharp on retina displays, like newer mobile phones and laptops.