Setting up your theme

1) Populating your blog

To add new posts to your blog, go to Posts > Add new and proceed to:

  1. add a title to your post,
  2. enter the content in the editor,
  3. add a category and/or tag to the post,
  4. upload a featured image by clicking Set featured image on the Featured Image panel,
  5. click the Publish/Update button when you are done.

2) Customizing the appearance

All theme customization is done via the WordPress’s built in customizer. If you haven’t used it or want to learn more about it, please read this article.

Go to Appearance > Customize and you will see this:

suisen-customizer

TIP: Any changes you make in the tabs below will be previewed live on the website that appears in right side of the screen. However to save these changes you need to click the Save & Publish button on the top of the bar. If you have made a change but the button is grayed out (for example changed the font size of a heading), move the cursor outside the input box to the next input box. After doing so, the button should be clickable again.

Let’s take a look at the options each tab gives you.

Menus

Here you can create and assign menus to the theme. The theme features one menu location, the main menu. To learn more about menu creation check out the Codex’s menu user guide.

Site Identity

In this tab you can modify the site’s title, tagline, logo and site icon.

Layout Options

Here you can select the number of words in the automatic excerpt, select pagination style, toggle product title, layout and enable the masonry effect.

Content Colors

Are you looking to create your own unique color scheme? This tab will help you do it by allowing you to modify the colors of different elements of the content. To do that click the Select Color button and either use a hex color value in the box or use the palette to select a color.

color-picker

Widgets

Through this tab you can add widgets to the theme’s sidebars. The theme features three sidebars, one on the homepage and two pre-footer sidebars.

Social Networks

Here you can fill in the URLs to your various social network profiles supported by the theme. You can display them in a sidebar by using the Theme – Social Icons widget.

Post Options

Here you can toggle various aspects of the single post and post listings, like the appearance of categories, tags, date, comments, social sharing etc.

Footer Options

Here you can modify the footer text.

Static Front Page

Use this tab to make the Home page your static front page so you can take advantage of the homepage template we created for you.

Other

In this tab we have the Custom CSS panel, that helps you insert styles for elements not covered by the rest of the tabs. Also here you can set the Google Analytics ID to get statistics on your site.

Theme Pages

The Home page

To create your home page, create a page named Home and apply to it the Homepage Template to it.

The Blog page

To create a post listing page, create a new page named Blog and publish it.

Setting the static pages

Once you have created the two pages above you need to set them as default. To do that go to Settings > Reading and configure them as shown below.

reading-settings

The contact page

To create a contact page similar to the one found on the theme’s demo, you can create a new page, name it Contact and use the Contact Form 7 plugin to help you create a contact form. After doing so, paste the shortcode it provides in the page’s text editor, publish and you are done.

Widgets

Apart from the widgets WordPress’s provides, this theme also includes four custom made. You can see them extensively below:

suisen-widgets

You will find a small description in each widget detailing its usage.

How to use the Latest Posts widget

The Theme – Latest Posts widget will help you display your posts on the front page. Let’s take a look on how to use it.

suisen-widgets-latest-posts

Start by adding a title to the widget. Select a post category to display on it (leaving the option empty will display posts from all categories).  Select whether you want your posts to appear at random (default is by date from newest to oldest) and how many posts you want to display on the widget. Finally you can choose to make the first item appear bigger by checking the appropriate box.

Excluding post categories from the widget

As mentioned above, if you don’t select a post category on the widget it will display posts from all categories. You can exclude some of them if you wish, by selecting them in the Categories to exclude latest posts from field.

Recreating the demo homepage layout

If you chose not to import the default widgets, but still want to recreate the homepage layout of the theme demo, you can do so by following the instructions below.

The Homepage sidebar

Under Customize > Widgets you can access the homepage sidebar. The following widgets are used on the theme demo:

  • Text – a text widget with some introductory text.
  • Theme – Post Type Items displaying four WooCommerce products.
  • Text – a text widget with some text.
  • Theme – Product Category Images displaying the images of two product categories.
  • Theme – Post Type Items displaying five WooCommerce products.

Additional Information

Useful Plugins

  • Contact Form 7: use this plugin to create a contact form, then copy the shortcode it gives you and paste it in a page which will serve as your contact page.
  • WP Instagram Widget: Use this plugin to help you display your Instagram feed in any of the theme’s sidebars.
  • WordPress Jetpack: You can use this to create a contact form instead of Contact Form 7, insert sharing buttons, create tiled galleries etc.

Image Sizes

The minimum recommended image sizes for Suisen are:

  • Post listing thumbnail: 600×480px
  • Post single featured image: 1140×475px
  • Large thumbnail (single column layouts): 1140×750px
  • Cart thumb: 120×120px