Spatial Setup Guide

This setup guide is for our premium Spatial theme. For quick reference, keep the live demo open in another tab/window.

Spatial theme screenshot

Jetpack Features

You’ll need to install Jetpack to use Featured Content and Infinite Scroll, necessary for live demo parity.

Featured Content

With Jetpack Featured content enabled, a new section will display above the non-featured blog posts on the blog homepage.

With more than one featured post, a slider will activate, letting users navigate through slides with left and right arrow buttons.

With only one featured post, the new section will look exactly the same, just without left and right arrows (because there are no other posts to navigate through).

Infinite Scroll

Spatial fully supports Jetpack Infinite Scroll, which is highly recommended to give your blog readers an easy way to quickly browse through your posts without being burdened with page reloads.

On the live demo, the “click to scroll” functionality is active because footer widgets are set. Without footer widgets, you could have a similar effect by unchecking the “Scroll Infinitely” option in Settings → Reading, as described in our Infinite Scroll support document.

Featured Images

Spatial will look good with or without featured images, as the Masonry layout will automatically adjust regardless. However, it will probably look best with Featured Images on each post.

There are two different image sizes in Spatial, one for featured posts and one for Masonry posts.

Featured images in featured posts are hard-cropped to 840×560. It’s necessary to hard-crop because if the image dimensions vary too much, it would make the heights of different slides too different and look weird, especially on mobile widths.

Featured images in Masonry posts (i.e. the non-featured blog index, archive pages, and search results) have an image size of 550×9999. While the height is virtually unlimited, it’s probably a good idea to not have heights wildly vary, otherwise things would get very lopsided.

Footer Widgets

Spatial features three footer widget areas, one representing each column.

These are flexible footer widgets, meaning that the footer widget column layout will automatically adjust depending on how many widget areas are active.

As mentioned above, if any footer widget is active alongside Jetpack Infinite Scroll, the latter will automatically switch to “click to scroll” functionality to make sure your website visitors can see whatever content is in your footer widgets without scrolling forever.

Menu Locations

Spatial features two menu locations: Slide Out and Social.

The “Slide Out” menu location will display in the sliding panel you can see after clicking the “Menu” toggle button.

The “Social” menu location is a social links menu displayed to the right of the search box on wider screens, until it is moved within the sliding panel on mobile widths.

Simply add links to your social profiles, and Bari will automatically display the relevant social icon. For example, add a link to “https://twitter.com/themetryhq” and a Twitter icon will display linking to that URL.

Of course, you’re free to use other menus in widget areas, should you desire.

Custom Logo

Spatial utilizes the WordPress core custom logo feature.

Upload a custom logo under Customize → Site Identity.

The logo image on the demo site is 162×121. While you can use up to a 1000×1000 image, we’d recommend one closer to the dimensions of the demo site’s logo.