Our Callanish theme for WordPress gets its name from the Standing Stones of Callanish on the Isle of Lewis in Scotland. The theme is designed as a base theme for the development of fully customised websites rather than as an off-the-shelf theme. But even in its base form, it comes with many site design settings.
The theme runs on the Genesis Framework and makes use of the Advanced Custom Fields Pro plugin. If bought separately, these would cost over $100 with annual fees of $50, but are included with the Callanish theme. (As the software is supplied under our developer licence, it can only be used with our theme.)
The theme includes various options for modifying the site header image and title position.
Heading Image Height
The height of the Heading Image can be set as a percentage of the screen height in the WordPress Customizer, see below.
Site-wide Default Heading Image
The theme design includes a full width heading image sitting below a fixed menu bar.
By default, this is an image in the theme’s images folder, with the option to set a different image using the WordPress customiser, see below.
Note that limitations in the way WordPress uses customiser-set Heading Images mean that there are performance benefits in using the version in the theme’s images folder. If you are able to upload files to your theme (using a file manager or ftp transfer) it is better to change the image manually. In this case, the image should be uploaded to the theme’s images folder in 3 sizes:
- heading.jpg (1920 x 1080px)
- mid-heading.jpg (1200 x 675px)
- small-heading.jpg (720 x 405px)
Page Heading Image
There is an option on Pages and Posts to set a custom header image for that page or remove the header image.
When using a custom image, there are additional options to set the image to full width (like the default heading image), wide (the same width as Wide Width content blocks) or narrow (the width of standard blocks). And the focus of the image can be set as top, centre or bottom, so that cropping of the image retains that area of the image.
Pages and Posts have the option to place the page title overlaid on the heading image, above the content in the narrow or wide position, or to hide the title. Unfortunately the WordPress editor does not yet reflect the Title position selection within the editor, but the effect of your setting choices can be seen in Preview.
Notes on Heading options:
On Category listing pages there is an additional Wide or Narrow option for any Into text, unless the title position is set to Narrow which will automatically set the Intro text to Narrow.
If the front page is set as the “blog” page, it is not an editable page so will use the default heading image with no page title. Some templates may also exclude Heading options.
The Featured Image option when editing Posts is the image which will be use on listings pages such as All Posts, Category listings or in the Latest Posts block.
The theme uses 3 colours: Primary, Secondary and Tertiary – these colours can be modified in the Customiser.
The Primary colour is used for headline text, the footer bar and other page elements
The secondary colour is used for buttons, table backgrounds, …
The Tertiary colour has no pre-defined use but, along with the other colours, is available in the block editor Colour Palette for setting text and background colours for some blocks.
You are not restricted to the defined colour palette and can click on Custom Colour to select any colour. However, to maintain consistency, it will usually be better to keep to the defined colours.
For more information on the benefits of a theme-defined colour palette, see Why your WordPress theme should use a custom colour palette.
Also see WordPress Customiser, below.
Blocks are the new way of adding content to pages. As an editing experience, it’s not to everyone’s taste, and many clients prefer to stick with the old Classic editor.
See the official WordPress blocks guide for details of the editor.
The theme will work with either editor but has some features which can only be used with the Block editor. It is possible to do the bulk of your editing in Classic mode and only switch to the Block editor when you need it for its advanced layout options. (Don’t switch between them mid-edit though as sometimes edits can be lost, especially if you jump back and forth between modes!)
The Blocks that come with WordPress, and other third-party blocks don’t always have options you might want, but some additional control is possible using the Advanced panel for individual blocks. This allows you to add classes to the block. Classes are used to define styling which can supplement or over-ride the default styling for the block. As the user needs to know class names and what they do, it’s not a very elegant solution, but the Block editor is an evolving system and has its limitations.
The Callanish theme has several classes designed for use with blocks and others can be added as part of the customisation of the theme.
- img-border adds a border to images, for use in the Gallery Block
- text-shadow-black adds a black text shadow to text, useful where white text is overlaying an image
- clip10, clip-10, skew10, skew-10 are classes specifically for the Media & Text block to provide a sloping edge to the image
- fullheight and halfheight are for use with the Cover Block which by default can only have its minimum height set in pixels; these classes will set the minimum height to fill all or half of the screen height
In addition, there are blocks like Paragraph which do not have the toolbar option for Wide Width or Full Width, but this can be applied by including the relevant class, alignwide or alignfull. These classes will not be reflected in the editor view but will be applied when the page is displayed on your website, at least for some blocks.
Third Party Blocks
The theme comes with the Atomic block set pre-installed and additional block sets can be installed using plugins. However, many block set have similar blocks, and not all of these will have styling which matches your site, and having too many blocks can become confusing and make it difficult to maintain consistency across the site.
The theme comes with three Custom Blocks developed to accompany the theme. The Custom Blocks page has full details of these blocks.
The Logos block is part of a system we have developed for displaying a grid of logos in Posts and Pages. Logos are added using the Logos post type, which comes with the theme, and placed within pages using the Logos block.
The Tiles Block allows you to add content in a similar styling to the theme’s columns layout for post listings. There are input fields for image, heading, text and button, which can link to any site page or file, or external web address.
Latest Posts Block
WordPress core includes a Latest Posts Block, but at least for now it has no option to include post featured images.
Our Latest Posts Block allows you to add the most recent posts from one or all categories within any post or page which will be displayed with the same styling as the category listing pages and the Tiles Block.
There are options for the number of posts to show and the number of columns.
The WordPress customiser includes various settings for adjusting the appearance of your website. The customiser is accessed from the Admin menu in the Appearance submenu.
Three of the customiser settings are particularly relevant for the Callanish theme.
The Site Identity panel offers various settings such as the Site Name and Site Icon which is used in browser tabs, bookmarks and elsewhere. There is also an option to add a logo, this will appear in the Heading Menu instead of the Site Name. This is best used with landscape oriented images and is restricted to a maximum width of 240px and height of 60px (the uploaded image will be scaled proportionately to fit). Note that these controls are separate from those for any logo overlaid on the heading image, see below.
The Colours section allows you to set the three theme colours which will be used on the site and available in the colour palette used by some Blocks in the Block editor.
Unless you have a specific need to change the Link colour, you should leave this at the default. It is important that the Link colour is different to the Theme colour.
The Triadic colours option will automatically set the second and third colours from the main Theme colour. These will match the saturation and luminosity of the Theme colour to give colours which will work in harmony. You should select dark colours as the colour system automatically adds lighter tints of these colours to your colour palette.
The Heading Image
The Heading Image setting allows you to change the default heading image used across the site. Note that limitations in the way WordPress uses customiser-set Heading Images mean that there are performance benefits in making any change in the theme’s images folder rather than using the customiser. (See Heading Image section.)
Heading Image Height
The height of the heading image can be set to 25, 33, 50, 67 or 100% of the screen height.
Heading Image Focus
The focus of the Heading Image can be set as top, centre or bottom, so that cropping of the image retains that area of the image. This setting will only apply to pages using the default Heading Image. Pages using custom Heading Images have their own settings.
There is the option to include an image overlaid on the Heading Image. This is separate from any logo used in the Menu bar.
You can select the overlaid logo and its alignment. By default, the image used is logo.png in the images folder of your theme, but you can replace this with any image from the Media Library or uploaded from your computer. The alignment options are left, right or none. The logo only displays with full width heading images.
There is a setting for the logo width which will scale the image proportionately.
A further setting gives the option to hide this logo on any pages using the Overlaid Title. We recommend using this option unless your logo is much wider than it is tall and all Titles are kept short, to avoid the logo and Title overlapping.
The Heading Menu can easily be switched from its default left alignment to the right. This is done in the Customiser under Menus > View All Locations. Because third-level menu items display to the right of the second-level drop-down menu, we recommend only switching to a right-aligned menu if your Header Menu does not have third-level items.
Also in this section you can change which menus are used in the Header and Footer of the site. As the Footer Menu doesn’t support drop-down menus, any menu placed in this position should not have any sub-menu items.
The theme includes an optional sidebar which can be activated on any page or post. However, sidebars and Wide or Full Width blocks are not compatible, so your page layout needs to be based on one or the other.
To include the sidebar on either the right or left of the main content area.
In the Block editor use the Genesis icon (top right) and select Content, Primary Sidebar or Primary Sidebar, Content from the Layout selector. After making your selection, use the Cog icon to return to the normal editing options.
In the Classic editor, use Layout Settings which will be below the content editor. Select the required layout by clicking on the appropriate icon.
The Sidebar has content added using Widgets in the WordPress admin, Appearance > Widgets.
The same content will appear on any pages where the Sidebar option is selected.
As a customisation, we can add additional sidebars which can be set to appear depending on context or selected manually. Or even provide a system for separate sidebars for individual pages.