Everything you need to get started with Blocksy Theme and Companion

Content Blocks

Content blocks is an feature from Blocksy PRO that is aimed at advanced users that know their way around building a highly dynamic WordPress site. The main idea of it is that you can have a piece of content and dynamically insert it in a spot of your WordPress site with the help of actions. Fortunately, Blocksy comes with an easy to use UI for doing this so no coding knowledge is necessary.

There are three components of a content block:

  1. Content — the content that you define with any design tool (Brizy, Gutenberg, Elementor etc)
  2. Action — the place where the content is inserted
  3. Conditions — Attach an additional set of conditions to the content block for deciding where exactly it will be placed

There are a lot of other options present in Blocksy for content blocks, but this three are the main building blocks.

After that, it’s important to mention that there are 4 types of content blocks out there:

  1. Hook — The one that is attached to a WordPress action
  2. 404 — Attach the content (#1) to the 404 pages of your site for designing it from scratch
  3. Header — replace your header with the content and also respect the conditions
  4. Footer — replace your site footer with the content and also respect the conditions

Later on for this article we’ll be interacting only with Hooks as the other three types of content blocks are very easy to grasp after the hooks are covered.

Creating a hook manually

To understand what content blocks are, first we’ll start with creating a hook manually and then we’ll introduce more shortcuts and further options that accompany this feature. See the following video to understand to to create a hook and place it After the header of Every page of the site.

Hooks debugger

Next, it makes sense to understand what the hooks debugger is so that you can create hooks more easily, in a visual fashion.

Container settings

Blocksy offers a way to use regular containers for the hook content, but it disables it by default. The three possible values for the hooks container are:

  • No container
  • Narrow container
  • Regular container
After header hook in Normal width

On the frontend this will obviously be boxed in respect with the other elements from the page.

Other hooks options

Expiration Date/Time allows you to display the hook on your location only for a limited amount of time. For example it can be useful for a limited offer you’re running or for a countdown.

Block Position allows you to create a fixed element on the top/bottom sides of the viewport. This can be useful for global announcements to your users.

Just like in other places of Blocksy, Visibility option allows you to hide the piece of content on some specific devices. Very useful for targeting your mobile device users, which tend to be so numerous these days.

Displaying content block based on current language

Sometimes, it might be useful to display a content block based on the current language. Starting with Blocksy Companion 1.8.0 there are a couple of ways to achieve this.

By using Blocksy’s built in language conditions (available for WPML, Polylang and TranslatePress):

By translating content block post itself in the translation plugin. Instructions for doing this are down below.

Translating content blocks with WPML:

  1. Add all the relevant site languages from WPML settings. We’ll have English and Romanian in this example.
  2. Go to Blocksy → Content Blocks and click Add New. Pick your content block type and a Name. We’ll use Test EN name for the sake of this example. Add the English content and save.
  3. To create the Romanian version of the content block created in step #2, go to Blocksy → Content Blocks and click on Add New and pick the same template type and a name. We’ll use Test RO in this example.
  4. Very important, please always create content blocks using the Add New button, otherwise not all the relevant options will be picked up by Blocksy.
  5. Add the Romanian content in the newly created content block
  6. Link the Romanian content block with the English one as in the following video. As a result, the content blocks will be displayed only on the right languages
Link Romanian content block with the English one

Load content block styles with third party plugins

Content Blocks have out of the box support for a handful of tools for building pages. Specifically:

  • Elementor
  • Brizy
  • Zion Builder
  • Gutenberg

For the tools that are not supported, Blocksy implements a general purpose mechanism which any tool could use to hook into the loading process for our hooks and inject their assets. Example of how to use:

add_action('blocksy:pro:content-blocks:pre-output', function ($id) {
// Enqueue assets for the specific content block

Code for tools that is too big to put into Blocksy but can be added manually by users who absolutely need the support:

As of Blocksy Companion 1.8.0 they’re no longer part of our code because of the big size and bad assets enqueueing. It sometimes resulted in assets being enqueue twice for some page builders, which is obviously a big problem for many reasons.

Not the solution you are looking for?

Please check other articles or open a support ticket.