Blocksy Theme Setup Guide: Companion, Header Builder and Blog Layout

This article is a localized edition of the Japanese original. Read the Japanese original

Blocksy is a free, feature-rich WordPress theme. Most of its settings are made under "Appearance" → "Customize" (the Customizer) with a live preview, and the header and footer are built by drag and drop. This article walks through the setup in order: installing the theme and its helper plugin "Blocksy Companion", choosing your colors and fonts first, building the header, configuring the blog archive and single post views, and preparing a child theme.

Understand how Blocksy is put together

Blocksy consists of three parts.

• Blocksy (the theme itself): Available free from WordPress.org. It provides design settings in the Customizer and a header/footer builder
• Blocksy Companion (free plugin): Handles importing starter sites (demo data) and adding extensions
• Blocksy Pro (paid): Adds extra header elements, conditional display, finer-grained layout features and more

The sensible approach is to start with the theme plus Companion, and consider Pro only once you find that the free features are not enough (the split of features and the pricing can change, so check the official site's information as of October 2026).

Also note that Blocksy is built more like a classic theme, while still supporting the block editor. Its controls live in a different place from block themes, where you build the whole site in the Site Editor ("Appearance" → "Editor"). Remember "overall design in the Customizer, post and page content in the block editor" and you won't get lost.

Installing the theme and Companion

1. Go to "Appearance" → "Themes" → "Add New Theme", search for "Blocksy", then install and activate it
2. From the notice shown after activation, or from the Blocksy dashboard added to the admin area, install and activate Blocksy Companion

With WP-CLI, you can install them like this:

wp theme install blocksy --activate
wp plugin install blocksy-companion --activate

If you are switching the theme on an existing site, back up the entire site first. When you change themes, shortcodes and widgets specific to the previous theme, menu locations and similar settings may not carry over.

Should you use a starter site?

Once Companion is installed, you can import "starter sites" from the Blocksy dashboard. They bring in pre-designed pages, Customizer settings and the required plugins all at once, so on a new site you can quickly get a feel for the finished result.

However, it is safer not to import one on a site that already has posts. Demo pages, images and menus are added and your Customizer settings are overwritten, so you can no longer tell which settings were your originals. If you use one, we recommend doing it at the very start of a new site, or trying it on a staging environment and then copying only the settings you need.

Global settings to decide first

Open "Appearance" → "Customize" and you will see Blocksy's settings listed. The item names are usually translated into your admin language, but the wording can change between versions. Start with these two settings, which affect the whole site.

Colors (color palette)

In the color settings under the global settings, define the palette of base colors your site uses. In Blocksy, text color, link color, button color and so on reference colors from this palette, so changing the palette switches the color scheme of the entire site at once.

If you set colors directly on individual elements, you will have to fix them one by one when you later want to change the color scheme. The manageable approach is to define colors in the palette and only set colors individually for the parts that really need a different color.

Fonts (typography)

In the typography settings, choose the font, font size and line height for body text and headings. One thing to watch on Japanese-language sites: choosing a Latin font does not apply it to Japanese characters. The Japanese text is displayed in the font of the visitor's device, so either leave the body font at the default such as "System Font", or specify a font that supports Japanese.

Loading a Japanese font as a web font can mean large files that affect page speed. If you use one, limit the number of weights and check the impact on page speed with a tool such as PageSpeed Insights.

Building the header

When you open the header section in the Customizer, the header builder appears at the bottom of the screen. The header is divided into top, middle and bottom rows, and you drag elements such as the logo (site title), menu, search and button into the left, center or right of each row.

A common stumbling point is that the desktop header and the mobile header are configured separately. When you switch the builder view to mobile, a different layout appears. On mobile, the standard setup is to put the menu inside the "off-canvas" panel that opens from a hamburger icon (trigger). If you configure only the desktop header and publish, the menu may not appear on smartphones, so check both views.

Click an element and its settings (font size, color, spacing and so on) appear on the left. The menu items themselves are created under "Appearance" → "Menus" and then assigned to the menu element in the header.

The footer is built the same way with the footer builder. To rearrange widget areas or the copyright notice, edit them from the footer section.

Blog archive and single post display

The Customizer has settings for each type of page, such as the post archive (blog), single posts and pages.

• Post archive: Layout such as cards or list, number of columns per row, featured image aspect ratio, excerpt length, and which post meta to show (publish date, categories, etc.)
• Single posts: Content area width, whether to show a sidebar and where, how the title area is displayed, and whether to show related posts and author info
• Pages: Like single posts, set the width and whether to show a sidebar

The setting that has the biggest effect on readability of post pages is the width of the body text. Long Japanese text becomes hard to read when lines are too long, so if you don't use a sidebar, set the content width on the narrow side, and check that text doesn't become too small on smartphones.

If you want to change the layout of only a specific post, you can use the Blocksy settings shown in the sidebar of the post edit screen, for example to remove the sidebar for just that post.

Preparing a child theme

If you edit the theme files directly, your changes disappear when the theme is updated. For adding a little CSS, the Customizer's "Additional CSS" is enough. When you need PHP customizations or template overrides, create a child theme.

The official Blocksy site distributes a child theme template. If you make one yourself, put the following style.css in wp-content/themes/blocksy-child/,

/*
Theme Name: Blocksy Child
Template: blocksy
*/

and load the child theme's stylesheet from functions.php in the same folder.

<?php
add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_style(
		'blocksy-child-style',
		get_stylesheet_uri(),
		array(),
		wp_get_theme()->get( 'Version' )
	);
}, 20 );

When you switch to the child theme, Customizer settings are saved separately from the parent theme, so the settings you made in the parent theme may no longer appear. If Companion is installed, you can move Customizer settings with its export/import feature, so export them before switching to the child theme to avoid redoing work.

Updates and maintenance tips

Blocksy and Companion are updated frequently. Take a backup before updating, and after updating check the header, post pages and the mobile view. If the layout breaks, clear the caches of caching plugins and your CDN, then check again. If you use a speed optimization plugin that combines and minifies CSS, old CSS may linger and make the layout look broken.

Summary

• Start Blocksy with the theme plus Blocksy Companion, and consider Pro once you know which features are missing
• Use starter sites on new sites or a staging environment, and watch out for overwritten settings on existing sites
• Set colors site-wide with the color palette and text with typography. Note that Latin fonts don't apply to Japanese text
• The header builder has separate desktop and mobile layouts. Check both views, and use a child theme if you touch PHP

• How to create a custom footer in Blocksy
• How to safely change your WordPress theme

Questions about WordPress? The publisher of this site is based in Japan and replies in Japanese. Contact (Japanese)