Activating your theme

Go to your home page and click the ‘Customize’ button on the admin bar. Click the ‘Change’ button next to your active theme name, scroll through the list of available themes, then select Spaced. Click ‘Save & Activate’ to activate Spaced on your site.

Activating plugins

Spaced requires or recommends several plugins. When you activate the theme, you’ll get a notification in the dashboard asking you to activate certain plugins. This is optional but remember that certain features in Spaced require the use of plugins.

Customizing the Theme

All customizations for Spaced should take place through the Customizer. From the your site’s front end, click the Customizer button in the top admin bar. Here you’ll see a number of options:

Site Identity

Here you can upload a logo for your site, update the site title and tagline, opt whether to hide the tagline under the logo, and upload a favicon. You can also adjust your logo’s width.

Layout

This panel is divided into several sections

Header

  • Choose between a standard header layout with the logo on the left and the navigation menu on the right or a centered layout with the logo above the menu
  • Fixed header – select this to keep the header visible at the top of the page even when you scroll down

Blog

  • Archive Layout – set the global template for post archives and taxonomy pages, e.g. with or without sidebar
  • Post Layout – set the global template for single post pages
  • Comments Per Page – set how many comments to show for page or post
  • Include Related Posts – enabled related posts section

Activities

  • Activity Layout – choose the page template for Activities

Footer

  • Footer Columns – choose how many widget areas in the footer
  • Show Credits – select whether to include a credit back to the theme at the bottom of each page
  • Credits Text – change the credit text
  • Credits URL – change the URL for the credit

Homepage

Spaced has a special homepage template that allows you to create an engaging and visually striking homepage quickly and easily – and without the need for complicated and clunky page builders.

To start, create a new page called ‘Home’ and set its page template to ‘Homepage’. Publish, then view the page on the front end. Click the ‘Customize’ button to start setting it up.

You need to ensure that your homepage is set to display as the front page of your site. From the Customizer panel, select ‘Static Front Page’ then select ‘A static page’ from the radio group. In the ‘Front Page’ dropdown list, select your ‘Home’ page.

Return to the main Customizer panel. If you’ve followed the guidance above and your homepage is using the homepage template and is set to display as the front page, you’ll see a new ‘Homepage’ panel available in the Customizer. Click this.

Homepage content

You can configure up to 6 sections on your homepage using the Customizer. Each section will display your choice of content from the following options:

  • Blog posts
  • Icons
  • Featured Pages
  • Homepage Widget Area 1
  • Homepage Widget Area 2
  • Standard Page Content
  • Activities (if the Spaced Toolkit plugin is enabled)
  • Products (if theWooCommerce plugin is enabled)
  • Product Categories (if theWooCommerce plugin is enabled)
  • Reviews (if WooCommerce is enabled)
  • Testimonials (if the Testimonials for WP plugin is enabled)

To start, click on the ‘Section 1’ menu item in the ‘Homepage’ panel. Below some styling options you’ll see fields for Title, Description and Content. Click the ‘Content’ dropdown to see the available content options. Select ‘Blog Posts’ from this dropdown and you’ll see some further options. Change your selection to ‘Icons’ and you’ll see some different options.

Re-ordering homepage sections

If you allocate all your content to different sections, then decide you’d like to place the sections in a different order, use the Section Order tab.

WooCommerce

If you have WooCommerce enabled, you’ll have some additional layout options:

Global

  • Show breadcrumb – choose whether to display the WooCommerce breadcrumb

Archives

  • Archives Layout – choose the layout for WooCommerce archive page
  • Products Per Row – how many products to display per row
  • Include Excerpt – choose whether to display the short description on archive pages

Single

  • Single Layout – pick the layout for the product page

Colors

This panel is divided into several sections:

  • Global – including background color, text and link colors
  • Header – set alternative header and top bar background and text colors
  • Footer – set alternative footer background and text colors

In the Customizer, click on ‘Menus’ then click ‘Add a Menu’. Create a new menu for your main navigation and select the display location as ‘Primary’. (You can also select its location as ‘Mobile’ if your mobile menu will be exactly the same). Add some pages to your menu and save.

Typography

Spaced supports Google Fonts and Typekit. By default, the theme will use a Google Font which you can select from the dropdown lists available. The secondary font is optional and you’ll need to add your own style rules to use this font.

If you have a Typekit subscription, enter the ID number in the Kit Reference field. This will override any Google Font you’ve selected. You’ll also need to add the font family name, e.g. proxima-nova for the Proxima Nova font, in the Font Family field.

Widgets

Spaced supports several widget areas. It has additional sidebars for WooCommerce and Activities pages. It creates a couple of widget areas to be used with the homepage template, several areas in the footer, and areas at the bottom of the content area for each post type.

Adding New Icons

You can filter the amenities icons to add your own. You need to create two filters – one for the back-end and one for the front-end. Note that you should add this code in your child theme’s functions.php file. Add the new icon to spaced/assets/icons.

<?php
function my_spaced_filter_amenities_icons( $icons ) {
$icons['spaced_cctv'] = array(
'id' => 'spaced_cctv',
'icon' => 'icon-cctv',
'label' => __( 'CCTV', 'spaced' )
);
return $icons;
}
add_filter( 'spaced_filter_amenities_icons', 'my_spaced_filter_amenities_icons' );
function my_spaced_filter_posts_metaboxes( $metaboxes ) {
$metaboxes['2']['fields'][] = array(
'ID' => 'spaced_cctv',
'name' => 'spaced_cctv',
'title' => 'CCTV',
'type' => 'checkbox',
'icon' => 'icon-cctv',
'class' => 'htp-metafield-third'
);
return $metaboxes;
}
add_filter( 'spaced_filter_posts_metaboxes', 'my_spaced_filter_posts_metaboxes' );