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 various user options for configuring the site design.
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.
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.
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 405px)
▪ mid-heading.jpg (1080 x 405px)
▪ small-heading.jpg (720 x 405px)
There is also 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).
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 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.
Link to the official Gutenberg blocks guide.
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
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 two custom Blocks from Lynx Graphic Design.
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.
Logo posts are similar to normal Posts but with inputs for Title, Image and Link. They can also be given categories, eg, Members and Supporters.
Logos can then be displayed on any page or post within your site and will automatically update in line with any deletions, additions or category changes made to Logo posts.
Once you’ve added a Logo Block to the content area of the Editor the sidebar will display the various settings for the block.
The content area shows what will be display on your web page, while the sidebar settings control this output.
The settings provided by the block are:
Title: optionally add a heading for the block
Category: tick boxes to select one or more categories
Multiple categories filter: if more than one category is selected, this option allows you to define whether logos to be displayed are those in any of the selected categories or only logos that are in all the selected categories
Order using: this sets whether the logo display order will be based on the Logo Title, or the date the logo was added
Display order: this allows you to reverse the display order; wanting to list from Z – A is unlikely, but if ordering by date, you may want the logos listed newest first rather than the default oldest first.
Columns: allows you to set the maximum number of columns (2, 3, 4, 6 or 8) in the logo grid – the number of columns will reduce on narrower screen widths.
In addition, the Block toolbar offers Wide and Full Width options.
The WYSIWYG display of blocks in the editor means that you see the logos (or the title if an entry doesn’t have a logo) laid out as they will appear on the web page (though the number of columns may change when viewed at narrow screen widths). Changing any of the settings in the sidebar will automatically be reflected in the editor.
In addition to the options and output detailed here, it is possible to get customisations made to this system for your specific requirements.
The Tiles block is designed for use on the Home page and the Section front pages but could be used on any Page or Post being edited using the Block Editor.
The block allows you can add multiple individual tiles, with the option of 2, 3, 4 or 6 column layout. Note that these are maximum numbers which will be used on desktop displays. The number of columns will be adjusted for viewing on smaller devices.
Within the Block Editor, a Tile block can be displayed in either Preview or Edit mode.
You can switch modes using the toolbar that appears above the block.
Edit mode is enabled by clicking the pencil icon in the block’s toolbar, once you are in Edit mode, that icon changes to an eye over a monitor screen which can be used to switch back to Preview mode for the block.
In Preview mode you will get a visual representation of how the tiles will display in your web page. The number of columns may not match your selection as it will re ect the number of columns for the available width; and some Tile styling is also missing from the Block preview.
Adding and editing tiles can be done in either mode but is usually easier in Edit mode – in Preview mode the data input elds are squashed into the sidebar.
Data inputs for each tile are:
Tile heading – this should be kept fairly short
Image – add an image from the Media Library or uploaded from your computer; the minimum size for images is 592 x 333 px, so images smaller than that will be greyed out in the Library and uploads will fail.
Text – should be kept fairly short.
Link Type – select the resource type you want to link to (if any) and its input eld will appear below.
- Page Link – a searchable list of all your site pages will appear, for le you can select from the Media Library and for external you paste in a web address of a web page or le.
- File Link – you can select from the Media Library or upload a new le.
- External Link – paste in a web address of a web page or le. Link Text – the text which will appear on the link button (defaults to Read More). You can add additional tiles using the Add Tile button beneath the last tile, which will add a tile at the end, or to add a new tile before a tile, use the plus icon (see diagram, below). Tiles can be reordered using drag and drop (see diagram, below).
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. If adding a logo here, it will disable any Heading Overlaid Logo added in the Header Image panel, 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.)
If not using a logo in the Heading Menu, there is the option to include an image overlaid on the Heading Image.
Also in this section, 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.
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.