Receive all the latest news, webinars, updates, events and more right to your inbox.
Below are documentation and tutorials explaining how to add different functionality and layout options to your theme.
Miscellaneous functionality options
Translating an individual page into French
If you want a particular form or page to be translated to French you can add the tag 'lang_fr'. This will translate any consistent theme elements e.g. form fields, disclaimer, join section, but will not effect any copy created in the editor. This will have to be translated manually.
Hide 'Stay in touch' footer section
You can hide the 'Stay in touch' footer section from a page by adding the tag hide_footer_section.
Without tag
With tag
Hide footer signup form
You can hide the footer sign up form from a page by adding the tag hide_footer_signup.
Without tag
With tag
Campaign page logos
The following tutorials will walk you through how to prepare and add an additional logo to a campaign page.
Removing a campaign logo background
It may be that you can get hold of a version of your required campaign logo that has no background already. That image will probably be in .png form. However, if you only have access to a logo with a background you can remove it using the following method.
Cropping a campaign logo to size
The second stage in preparing your campaign logo, after removing the background, is to crop the canvas to fit the logo dimensions perfectly.
Colouring the campaign logo for a dark background
By this point we should have removed the background from our campaign logo and resized it to the correct dimensions. The next stage is to recolour it to suit the dark background of our theme.
Rename and uploading a campaign logo file
For a campaign logo to appear on a campaign page you need to do three things:
- Rename the logo file to include the words 'campaign_logo' (e.g. if the file is currently called supporter_organisation.png change it to something like supporter_organisation_campaign_logo.png).
- upload the logo to the 'Files' section of your campaign page.
- Add the tag 'campaign' to your campaign page.
With these three steps followed the logo should appear in the top left of the page, next to the IAPB logo.
Landing page sub sub pages
The following tags can be applied to any basic page who's parent is also a basic page which in turn sits under a landing page. They are used to create grid layouts within a landing page.
Changing the order of sub sub pages on a landing page grid
Add order_[order number] to a sub sub page to change the order it will appear in the grid seen on it's corresponding landing page (i.e. a sub sub page with order_1 will appear ahead of sub page with order_2 in a grid on the landing page).
Link your sub sub page grid section to an external location
You can link the 'Find out more' anchor of your sub sub page to an external location by adding the tag external_link:[external web address to link to]. The bracketed area should be replaced by the required web address, e.g. external_link:https://thespaceroom.com
With this tag in place The 'Find out more' link as it appears in on the sub sub page's corresponding landing page will open the specified web address in a new window on click.
Link your sub sub page grid section to an internal location
You can link the 'Find out more' anchor of your your sub sub page to an internal location within your site by adding the tag internal_link:[slug of internal page to link to]. The bracketed area should be replaced by slug of the internal page you want to link to, e.g. internal_link:my_internal_resource
With this tag in place The 'Find out more' link as it appears in on the sub sub page's corresponding landing page will open the internal web page with the specified slug.
Hide all sub sub pages on the landing page
If you don't want the sub sub pages to appear at all on your landing page you can tag their parent basic page with 'hide_children':
- Landing page
- sub page (add tag: 'hide_children' here)
- sub sub page 01
- sub sub page 02
- sub sub page 03
- sub page (add tag: 'hide_children' here)
Landing page sub pages
The following tags can be applied to any sub page of a landing page.
They can also be used to alter the appearance of include content.
Change the order of sub content on landing pages
Add order_[order number] to a sub page to change the order it will appear on it's corresponding landing page (i.e. a sub page with order_1 will appear ahead of sub page with order_2 on the landing page).
Hide the sub page on it's parent landing page
If you want to stop a sub page from appearing on it's corresponding landing page you can add the tag hide_on_parent.
With this tag the sub page will no longer appear on the landing page but it will still be listed in the page's sub navigation. However, the anchor will now link directly to the page rather than to any sub section of the landing page.
Hide the sub page's headline on it's corresponding landing page
If you want to remove the sub page's headline from the block as it appears on it's corresponding landing page you can add the tag no_header.
Changing the colour combination of the landing page sub section
You can change the colour combinations of your sub page as it appears on the landing page by adding either the tag alt_background or altbackground2.
The specific way this will look depends on the colours chosen in your theme's colour variables file.
Add an introductory button to your landing page
You can add a button to the introductory section of your landing page which links to the corresponding sub section by adding the tag intro_button.
If the sub page also has the ‘hide on parent’ tag then the button will link directly to the page rather than a landing page sub section.
If the add_main_buttons tag is present on the landing page then this will override the intro_button tag meaning it has no effect.
Divide the layout of an action sub section to be text left and form right
If your landing page sub section is an action page you can add the tag divide_page to changes the layout so that the text sits to the left and the action form sits to the right.
This presupposes that there is some introductory text on the sub page other wise the layout will not change.
Divide the layout of an action sub section to be text right and form left
If your landing page sub section is an action page you can add the tag divide_page to changes the layout so that the text sits to the left and the action form sits to the right.
If you add the tag align_right the layout is reversed so that text sits to the right and the action form sits to the left.
This presupposes that there is some introductory text on the sub page other wise the layout will not change.
Landing pages
Includes allow you to make more complex layouts that pull information from different parts of your site but you can achieve a similar thing by creating a landing page. A landing page will take any of it sub pages and display them beneath the content area in much the same way as an include would. The landing page method is useful for when you want to create more self contained site areas, like campaigns for example.
Creating a landing page
Add the tag landing_page to changes a basic page or blog post into a landing page.
The page or post must have sub pages for any changes to be seen.
Hiding the landing page navigation
You can hide the site main navigation by adding the tag hide_nav to any page or post that already has the tag landing_page.
This is useful for instances where you want a landing page to stand alone from the rest of the site.
Includes
These tags allow you to display content from another section of the site on another page or post. They can be applied to any basic or blog post page.
The includes will be displayed below any content on the page or post in question.
Adding an include to a page or post
Add the tag include_[slug of content to be added] to a basic page or post. The bracketed area should be replaced by the required web address, e.g. include_my_signup_form. Whatever slug is added to the include tag is displayed in a ‘landing page friendly’ style below any other content.
Change the includes order
Add order_[order number] before the slug portion of an include tag to specify where it should appear in relation to any other includes (i.e. an include tag containing order_1 will appear ahead of an include tag containing order_2).
An include tag with an order designation would look like this include_order_[order number on page]_[slug of page to be added].
e.g. include_order_1_my_signup_form would appear before include_order_2_my_donate_form on the page or post.
Add a limit to the display of sub posts in an include
Certain types of include content will display a grid of sub posts when added to the page. For example if a blog is added it will, by default, display the three latest posts in a grid. If there are more than three posts in the blog a 'See all' link will also be added.
However, if you want to increase or decrease the number of posts displayed in these kinds of includes you can add limit_[post amount] to the tag. So for example you could display four posts instead of three using a tag like this: include_limit_4_my_blog. In this example 'my_blog' is the slug of the page you want to display.
You can also combine the limit number with the order number by adding it before the order portion of the tag e.g. include_limit_4_order_2_my_blog.
Resource centre
Use the following tags to convert a normal blog page into a resource centre.
Setting up a resource centre
Add the tag resource_blog to changes the standard blog into a resource download area.
Each post will then represent a download or multiple downloads. Downloads are added to posts in the ‘files’ section of the post.
If the post (resource) has a single file attachment then the grid label will read 'Download' and clicking on it will instantly download the resource.
If the resource has more than one file attachment then the grid label will read 'See X downloads' with 'X' being them number of downloads attached to that post. Clicking on that link will take the user through to a single post with the available downloads accessible through a series of buttons.
If the resource post has content in the 'After the flip' section the grid view will show the 'Find out more' in addition to any download link.
Change the post order in the resource centre grid
Add the tag order_[order number] to denote what specify the resource will appear within a resource centre grid (e.g. order_1 appears before order_2).
Link your resource to an external location
You can link the 'Find out more' anchor of your resource post to an external location by adding the tag external_link:[external web address for post to link to]. The bracketed area should be replaced by the required web address, e.g. external_link:https://thespaceroom.com
With this tag in place The 'Find out more' link as it appears in the resource grid will open the specified web address in a new window on click.
Link your resource to an internal location
You can link the 'Find out more' anchor of your resource blog post to an internal location within your site by adding the tag internal_link:[slug of internal page for post to link to]. The bracketed area should be replaced by slug of the internal page you want to link to, e.g. internal_link:my_internal_resource
With this tag in place The 'Find out more' link as it appears in the resource grid will open the internal web page with the specified slug instead of clicking through to a resource post page.
Alternative blog grid
Setting up an alternative blog grid
Add the tag alt_blog changes the standard blog layout to be more suited to content that is not time based.
For example, you could create a grid of team members.
Change post order in alternative blog grid
Add the tag order_[order number] to denote what order the post will appear within the blog grid (e.g. order_1 appears before order_2).
Add an email address to an alternative blog post
To add an email address to an alternative blog post add the tag email:[email address to be added to post]. The bracketed area should be replaced by the required email address, e.g. email:[email protected]
A link referencing the email address will be added below the post header and any excerpt on the blog grid page. It will also appear below the title on the blog post page.
Add a website link to an alternative blog post
To insert a website link to an alternative blog post add the tag website:[web address to be added to post]. The bracketed area should be replaced by the required web address, e.g. website:https://thespaceroom.com
A link referencing the web address will be added below the post header and any excerpt on the blog grid page. It will also appear below the title on the blog post page.
Link your alternative blog post to an external location
You can link the 'Find out more' anchor of your alternative blog post to an external location by adding the tag external_link:[external web address for post to link to]. The bracketed area should be replaced by the required web address, e.g. external_link:https://thespaceroom.com
With this tag in place The 'Find out more' link as it appears in the blog grid will open the specified web address in a new window on click.
Link your alternative blog post to an internal location
You can link the 'Find out more' anchor of your alternative blog post to an internal location within your site by adding the tag internal_link:[slug of internal page for post to link to]. The bracketed area should be replaced by slug of the internal page you want to link to, e.g. internal_link:my_donate_page
With this tag in place The 'Find out more' link as it appears in the blog grid will open the internal web page with the specified slug instead of clicking through to a blog post page.
Blog tags
Hide the byline
In certain instances you may not want to display the byline on a blog . By adding the tag hide_byline to the blog page the byline is hidden for both the blog page and on each individual post that sits below it.
General tags
These tags can be applied to any page type.
Add introduction excerpt
Add the tag add_intro_excerpt to insert the page SEO excerpt as an introduction to the page. This will only work if the page has an SEO excerpt (found in the Settings>SEO tab for a page).
Add introductory link
Add the tag add_intro_link:[link destination url] to insert a 'Find out more' link under the page introduction, or under the page title if there is no ‘add_intro_excerpt’ tag.
Note: Replace the section bracketed section in the tag with the url you want to link to e.g. https://thespaceroom.com.
Add introductory supporter nav buttons
Add the tag add_main_buttons to insert the supporter nav buttons in the introductory section of the page beneath the header or excerpt/intro link if present. This will only work if the site has supporter nav links present.
Hide the breadcrumb
If you want to hide the breadcrumb on a page you can add the tag 'hide_breadcrumb'.
Update the secondary navigation (burger menu)
You can add, edit and remove links from the secondary menu by going to the 'Secondary Nav' page and editing the links that appear in the list on the content area of the page. The secondary navigation is the menu that appears when you click the menu link.
Adding a general grid navigation
To add the general grid navigation to any page you need to give the page the tag 'show_grid_nav' to the page.
You can specify which pages should appear as grid items on this page.
To display a grid item you need to copy the slug portion of it's url and add it to the page content.
Each slug needs to be separated by a comma.
You can remove a grid item by removing it from the page along with any trailing comma.