Wallflower Theme Documention

Instructions for setting up a site using the Wallflower WordPress theme, which can be downloaded here.

Getting started

Once you’ve been through the (free) checkout process to download the theme, you’ll see a link to download the zip file for it along with any plugins you’ve purchased. There will also be a link i the confirmation email that you receive.

Once you’ve installed the theme, you’ll notice that there are a couple of recommended third-party plugins to install: namely Featured Image Column and Simple Page Ordering. It’s worth installing these unless you already have alternatives set up. They make the Pages screen easier to manage and help you organise your site’s page wall.

There are a lot of good general guides online to using WordPress. Try WPBeginner for a start. The documentation here will confine itself to the more unique features of Wallflower.

Setting up the page wall

The page wall is the most distinctive element of the theme. Even though it isn’t displayed on mobile and tablet sized screens, its contents still determine the items in the corresponding menu. It is your site’s main navigation: essentially a large graphical menu.

Wallflower displays all of the pages on our site to which a featured image has been assigned on the page wall. You need to have at least one such page and ideally at least three or four. You can experiment, but it’s probably best not to have more than 20. 10 is probably a sensible maximum to aim for. If you are upgrading from an existing site using a different theme, you may need to make some changes to both your menu structure and your pages’ featured images.

For the uninitiated, here is a good general guide to adding featured images to pages.

You can have many more pages without featured images. They won’t appear on the page wall, but your visitors will be able to access them if you include them in the menus.

Selecting featured images

 

You will be able to set a border and background to your images in the Customizer.

Your images will be resized to a maximum height and width of 1000px. You can use smaller images, but they will appear smaller than the others on the page wall; the virtual camera will zoom into them when the page is clicked, and if they are too small they will appear pixelated. You’ve been warned.

Setting up the menus

To avoid duplication, pages included on the page wall don’t need to be included in the additional menus. You may not want to have any additional menus at all.

However, if you do have additional pages – maybe less important things that you don’t want to shout about – these can be added in one of two menu locations. You can also add links to category and tag archives or external links.

Go to Appearance > Menus. Create a new menu or edit an existing menu. Once you’ve decided on the contents, set the location at the bottom. There are two menu locations in Wallflower: at the top of the screen and below the featured pages list. The menu at the top is always visible, the menu below the featured pages list only appears when a the page contents are being shown. It is not shown when the page wall is zoomed out and the content is hidden.

On mobiles and tablets, all menus are shown together, with a small divider below the top menu. The entries are listed in the following order: the top menu, the featured pages (in the order they appear on the page wall) and then the lower menu.

You’ll be able to give a title to the lower menu in the Customizer. For example you might want to use it for external links (“Links”) or something like “Bits and Pieces”.

Setting a blog as the homepage

If you’d like your homepage to contain your latest blog posts this can be done in two distinct ways. First go to Settings > Reading.

The standard way, by selecting “Front page displays: Your latest posts” will load the posts with the page wall in the background, zoomed out. You’ll need to include an additional menu link to take users back to the homepage.

If you’d like to have a link to your blog included on the page wall, you’ll first need to create a blank page via Pages > Add new. Call it “News”, “Blog” or maybe “Home”.  Then under Settings > Reading you need to select “Front page displays: A static page” and set both the front page and posts page to the page you’ve created.

Using the Customizer

The Customizer is accessed via Appearance > Customize. Some settings are common to all modern WordPress themes. Others are unique to Wallflower.

Note that when loading pages within the Customizer preview, the current version of Wallflower sometimes loads the saved settings, overriding what has been set in Customizer. You will have to save your settings to see the new configuration in motion.

This guide will go through the settings in the order they appear.

Site Identity

Upload a logo, title and tagline. The title and tagline affect how your site appears on search engines and when pages are shared socially, even if you select not to display these on the site. The logo may be displayed on the page wall and/or in place of the header on mobile screens (via settings below), or it may be omitted altogether. If there is no header set, it will appear to the right of the title and tag line on large screens, and above them on mobiles.

Something in the region of 1000px x 1000px is a good size for your logo.

Background

The theme comes with seven ready-made background options, most of which employ advanced effects only possible on custom backgrounds when used in conjunction with the Advanced Borders and Backgrounds plugin: for example the star in the centre of the Beach Hut background or the splatter on the Canvas and Old Paper options.

You can pick one of these or use a custom colour or image. Either form of custom background will override the built in option.

A background image will only override the solid colour if it contains no transparency and is tiled horizontally and vertically. Otherwise, the colour will still be visible around the edges or behind the transparent portions of the image.

When an image is uploaded, some standard options appear. They behave somewhat idiosyncratically in Wallflower:

  • Background Repeat – When set to no-repeat, the image will be stretched to cover the height or width of the page wall. When tiled it will be sized according to the file’s dimensions in pixels. Note that when the page wall is zoomed out, the background image will be much smaller than the file would appear if viewed normally.
  • Background position – This applies only to tiled backgrounds.
  • Background attachment – This only applies to mobile screens, when the custom background is being used. It does not apply to the page wall.

You are asked to specify whether the background is light or dark. This affects a number of instances when text is set against the background directly, such as the colophon.

You can then set the mobile background to be either the same custom background that you have set for the page wall, or to be a simple white or black texture. Use the latter if you have a very complex or high-contrast background image, over which text would not be easily legible. The colour – white or black – of the mobile background here is controlled by the setting under Content (below).

Page Wall

You can include your logo on the page wall. It can be either in the top-left position (good for broadly square logos) or on a line of its own at the top (good for wide landscape logos). The logo can be a PNG with a transparent background, which is recommended.

There then follow some settings very specific to Wallflower, worthy of some explanation:

  • Camera twist – This determines the extent to which the view of the page wall rotates randomly to the left or right when navigating between different pages. Experiment with it.
  • Jumbliness – This determines the degree to which the images on the page wall are randomly displaced and rotated on the wall. The value you choose will depend on the effect you are trying to create: whether it’s a sober picture gallery or a haphazard scrapbook. You can enter a value larger than 10, but it’s not recommended, as the images may overlap each other completely.
  • Camera zoom – The extent to which the viewpoint zooms in on the image when a page is selected. At 10, the image will fill the full height of the screen, at 0, it will be only half the height. You can experiment with values greater than 10 or even negative values but it’s not recommended for the majority of sites.
  • Spotlight intensity – There is a subtle spotlight effect overlaid on the page wall, adding a dark shadow towards the edges. Darker (higher intensity) values can be used with darker backgrounds, or where you’re seeking an atmospheric or nostalgic effect.

Show titles below images?

You can opt to show titles below the images on the page wall. This should be switched on if the images you’re using do not contain the title text. If this is off, on mobiles, the title will also be omitted on pages, with the featured image standing in place of the title.

Wall image style

There are various effects that can be applied to the images:

  • Plain – No effect is applied.
  • Merged – A merging effect is used to blend your images with the background. This is useful if you want the images for example to appear painted onto the background texture. Note that this doesn’t currently work with Internet Explorer.
  • White border – This adds a white border (and background, if your images contain transparency) and slight shadow to the images, to create a postcard effect.
  • Polaroid – This makes the images appear like old-school instant-image pictures. The titles appear hand-written below the photos.
  • Sepia – This is similar to the white border effect but adds a sepia tone to the images. They fade into full colour when selected.

Side menu title

You can optionally include a title above the side menu where the title of the pages that are included on the wall are listed. So if for example you were an author and each of the page wall items showed one of your books, you could give this the title “Books”. Otherwise you can leave this out

Extra menu title

You can likewise include a title for the lower custom menu. As explained above, this could say for example “Links” or “Bits and Pieces”.

Content

On desktop screens, when homepage first loads…

You can display the homepage content when the site first loads or show the zoomed-out page wall. On mobiles and tablets your visitors will always see the homepage content when the site loads.

Content backgrund

The overlaid block containing the content can be light or dark. This setting also affects the mobile background if you’re not using a custom background on mobiles.

Custom colophon text

The colophon text (the tiny credit in the bottom corner of the site, or the foot of the page on mobiles) can be changed. If you don’t want any text, just put a space here.

Header image

You can upload a header to appear above the content, which replaces the logo. Typically, this should be wide and landscape. If your logo is more square, you may wish to use it instead on mobile screens.

Menus

This provides the same functions as Appearance > Menus. See Setting up the menus, above.

Widgets

There are two widget areas: the area below left menu and the content sidebar. These are both responsive to the page size. If items below the left menu over spill off the page, this whole widget are will be shifted to the content sidebar, making one large widget area. On narrower screens, the content sidebar items will appear below the content rather than to the right of it.

As the site’s pages all load asynchronously, without refreshing the browser, you can add features such as a music player to your widgets. Playback will not be interrupted while navigating between pages.

You can also edit the Widgets via Appearance > Widgets.

Static Front Page

This provides the same functions as Settings > Display. See Setting a blog as the homepage, above for some specific comments.

Social Media and Email Links

You can include links to your social media profiles. These appear above the list of featured pages. You can also include an email link and a default subject line. As per the instructions on the page, enter the full URL (including “http://” or “https://”) for all networks except Skype, where you just have to enter your ID, and the email link, where you just enter your address.