Monument Valley WordPress Theme User Manual

Thank you and congratulations for using Monument Valley theme by WebMan Design!

This user manual will teach you how to set up and use the theme. In case you have any questions that are beyond the scope of this documentation, please join WebMan Design support forum.

Enjoy your Monument Valley WordPress theme!
Love this theme? Support it by leaving a review

WordPress

WordPress is free open source CMS software for creating websites. It can scale with your needs when you're ready to grow and is easy to learn with many free and low-cost tutorials. You can learn more about WordPress at wordpress.org.

What is a theme?

A WordPress theme changes the way your site looks and affects the style of the content displayed on it. WordPress themes are built so you can change your site's design without losing content. As you are reading a user manual for a WordPress theme and it requires WordPress to run, let's install it first.

Installing WordPress

You can run WordPress locally on your computer, or install and use it on your web hosting account (what kind of web hosting should you use?).

Securing WordPress

You can improve your WordPress installation security taking these steps:

  • Set the security keys in wp-config.php file.
  • Do not use admin as user name and set strong passwords!
  • After installation is done, remove wp-admin/install.php file.
  • Keep backups of the database and WordPress files.
  • Keep your WordPress installation, plugins and themes up to date!
  • Strengthen security further with additional specialized plugins.

Tutorials

Beginner tutorials, resources for first steps with WordPress:

Websites & Articles:

Videos:

Theme Installation

Important: Theme requirements

Monument Valley requires at least WordPress 4.7 and PHP 5.6 to work properly. Please make sure to meet the requirements.

Appearance → Themes → Add New → Upload Theme → Install Now → Activate
  1. Download the theme ZIP file from the marketplace.
  2. Log into your WordPress admin.
  3. In WordPress dashboard navigate to Appearance → Themes and click the Add New button next to "Themes" page title.
  4. On "Add Themes" screen click the Upload Theme button next to page title.
  5. On the next screen choose the theme ZIP file you've downloaded in step 1 above and click the Install Now button.
  6. When the theme is installed, activate it by clicking the "Activate" link.
  7. Now you can go to Appearance → Welcome page for information on how to set up your website and the theme.
    Also, please pay special attention to your website image sizes setup.

Tip: Welcome page

Don't forget to check the theme welcome page at Appearance → Welcome. It contains everything you need to start.

Tip: Get info about updates

Get fast information about new theme updates by subscribing to WebMan Design on Facebook and Twitter.

Important: Envato Market

If you've obtained the theme from ThemeForest (Envato Market), please make sure to unpack the downloaded ZIP package on your computer first and check if you are uploading the correct theme ZIP file (or the whole theme folder).

Basically, the theme installation ZIP file or folder is named with your theme slug only, so only monument-valley.

Do not install a whole ZIP package that contains other files such as documentation, child theme, licencing and others. Install only the file in monument-valley-package/theme folder. Otherwise you might experience a common installation error.

Theme Updates

You will be notified in the WordPress admin each time a new updated theme version is available. Install the update following instructions below.

Tip: Info on social networks

If there is a specific procedure required during update, this will be shared on the Facebook and Twitter pages.

Important: Back up your website

To keep things safe please consider backing up your website and database before doing any updates to your website.

Automatic Theme Update

You can get automatic theme updates with help of Envato Market plugin.
Watch an instructional video on how to use the plugin, or read a complete, illustrated instructions on how to use it.

Tip: Automatic update failed?

If automatic update fails for whatever reason, please update the theme manually → see below.

Manual Theme Update

Download the theme ZIP package from where you've obtained it originally. Then follow the steps below:

Updating via WordPress dashboard

A simple way of doing a manual theme update is deleting and reinstalling the theme directly via WordPress dashboard. You can read an article or watch a video on how to do this.

Updating via FTP

This is more advanced manual update procedure and you will need an FTP client (such as FileZilla) to connect to your server:

  1. Download the newest theme ZIP file from where you've obtained it and unpack the ZIP file on your computer.
  2. Now you will need an FTP client to connect to your server.
  3. On your server navigate to WORDPRESS_FOLDER/wp-content/themes/ folder.
  4. Delete the existing monument-valley folder (or create a backup just in case - you can do this simply by renaming the folder name by appending .backup to its name so it becomes monument-valley.backup, for example).
  5. Copy the unpacked theme monument-valley folder from your computer (from step 1 above) into WORDPRESS_FOLDER/wp-content/themes/ folder on your server.
  6. Log into your WordPress admin area and check the version of the theme in Appearance → Themes. Your theme should be updated now. (And you can delete the monument-valley.backup folder from step 4 above.)

Theme Anatomy

  1. Basics (site container, header, intro, footer)
  2. Page content
  3. Blog, archives, search results
  4. Post content
  5. Custom post types
  6. Shop content

Basics (site container, header, intro, footer)

Theme anatomy: Basics
Theme anatomy: Basics
(Enlarge the image)

(Click the item below to reveal more info. Click the image to preview a bigger size.)

Site layout and site borders

Can be customized in Appearance → Customize → Theme Options → Layout. You can set boxed or fullwidth layout, set custom website width, set website borders.

Colors of site borders are inherited from default WordPress website background setup ( Appearance → Customize → Background).

You can also use any font on the website.

All the theme related customization options can be found in Appearance → Customize → Theme Options.

↑ Back to image

Header

Colors can be customized in Appearance → Customize → Theme Options → Colors: Header.

Layout (making it sticky, fullwidth or boxed) can be customized in Appearance → Customize → Theme Options → Layout.

↑ Back to image

Logo

Can be customized in Appearance → Customize → Site Identity. Don't forget to define your logo image dimensions.

↑ Back to image

Primary menu

This is a primary menu location.

Can be customized in Appearance → Customize → Menus.

↑ Back to image

Social Links menu

This is a social links menu location.

Can be customized in Appearance → Customize → Menus.

Once you set the social links menu correctly, you can also display social links anywhere on the website using "Custom Menu" widget.

When using WooCommerce plugin, there will be a shopping cart displayed in the header (after you set up your cart and checkout page) next to social links on wide screens, which can be controlled in Appearance → Customize → Theme Options → Shop subsequently.

↑ Back to image

Header Widgets

A widget area, its content can be set in Appearance → Customize → Widgets.

Colors can be customized in Appearance → Customize → Theme Options → Colors: Header.

You can control the appearance with Content Aware Sidebars plugin.

↑ Back to image

Intro section

A specially styled, main, dominant page title section. You can control its display with page template or custom fields.

Colors can be customized in Appearance → Customize → Theme Options → Colors: Intro.

Background image is taken from page or post featured image, or a custom field, or a WordPress header image ( Appearance → Customize → Header).

↑ Back to image

Page title

Displays a page, post, custom post type, archive page, search results page title.

If you want to disable this title, use a page template or custom fields.

↑ Back to image

Subtitle

Please use WP Subtitle plugin to allow this feature.

↑ Back to image

Excerpt

Displays post or page excerpt or archive page description (a taxonomy term description, such as category description, or author biographical info, if previewing an author archive).

↑ Back to image

Intro Widgets

A widget area, its content can be set in Appearance → Customize → Widgets.

Colors can be customized in Appearance → Customize → Theme Options → Colors: Intro.

You can control the appearance with a page template or a custom field and Content Aware Sidebars plugin.

↑ Back to image

Breadcrumbs

Use a plugin to display breadcrumbs navigation.

↑ Back to image

Content

A content area - displays page, post and custom post content, page builder content, blog and other posts listings.

Colors can be customized in Appearance → Customize → Theme Options → Colors: Content.

↑ Back to image

Footer menu

This is a footer menu location. It displays a search form automatically.

Can be customized in Appearance → Customize → Menus.

Colors of this area are inherited from Footer area.

↑ Back to image

Footer Secondary Widgets

A widget area, its content can be set in Appearance → Customize → Widgets.

Colors can be customized in Appearance → Customize → Theme Options → Colors: Footer.

You can control the appearance with Content Aware Sidebars plugin.

↑ Back to image

Footer

Colors can be customized in Appearance → Customize → Theme Options → Colors: Footer.

Layout (making it fullwidth or boxed) can be customized in Appearance → Customize → Theme Options → Layout.

Main content of footer consist of Footer Widgets area, where you can add widgets in Appearance → Customize → Widgets.

You can control the appearance with Content Aware Sidebars plugin.

↑ Back to image

Credits

Content can be customized in Appearance → Customize → Theme Options → Texts.

Colors can be customized in Appearance → Customize → Theme Options → Colors: Footer.

↑ Back to image

Widget width

You can alter the width of a widget in horizontal widget area using Widget CSS Classes plugin.

↑ Back to image


↑ Back to topics list

Page content

Theme anatomy: Page content
Theme anatomy: Page content
(Enlarge the image)

(Click the item below to reveal more info. Click the image to preview a bigger size.)

Homepage and Blog page

Set up your website front and blog page in WordPress Appearance → Customize → Static Front Page settings (or in Settings → Reading).

↑ Back to image

Page featured image

Page featured image is set as background of intro section. Or you can set a different intro background image using custom fields (useful for child pages when you use page featured image in the list of child pages and the custom intro image on the actual child page).

Featured image is also displayed in the list of child pages. Please see "List child pages" page template for more details.

Please see FAQ section for more information on image sizes.

↑ Back to image

Page excerpt

If you set a page excerpt, this will be displayed in intro section of the page.

Excerpt is also used in a list of child pages. Please see "List child pages" page template for more details.

↑ Back to image

Intro Widgets

A widget area, its content can be set in Appearance → Customize → Widgets.

Colors can be customized in Appearance → Customize → Theme Options → Colors: Intro.

You can control the appearance with a page template or a custom field and Content Aware Sidebars plugin.

↑ Back to image

Fullwidth or sidebar

The theme displays pages as fullwidth, with no sidebar by default. If you would like to display a sidebar on a page, use a specific page template.

Sidebar is a widget area, its content can be set in Appearance → Customize → Widgets.

If you would like to replace sidebar on a specific page with a different one or just remove it, use Content Aware Sidebars plugin. It is a great way to control and alter your website layout.

↑ Back to image

Child pages list

Please see "List child pages" page template for more details.

↑ Back to image

Page with no header and footer

If you are creating a special landing page and would like to remove header and footer from the page use the "Blank" page template.

↑ Back to image

Page builder

For creating a more complex page layouts please use a (any) page builder plugin (we recommend using powerful, optimized and easy to use Beaver Builder page builder plugin).

↑ Back to image


↑ Back to topics list

Blog, archives, search results

Theme anatomy: Blog, archives, search results
Theme anatomy: Blog, archives, search results
(Enlarge the image)

(Click the item below to reveal more info. Click the image to preview a bigger size.)

Blog page

By default WordPress displays blog posts listing on your website homepage. If you would like to set up a static homepage and use a different page for a blog posts listing, set it up in Appearance → Customize → Static Front Page settings (or in Settings → Reading).

The style (layout) of blog and archive page posts listing can be set in Appearance → Customize → Theme Options → Blog.

↑ Back to image

Archive page title

Intro section on archive pages display the archive title and archive description (a taxonomy term description, such as category description, or author biographical info, if it is an author archive).

You can customize the archive title using Archive Title plugin.

↑ Back to image

Featured media

By default all posts display a post featured image.

However, as the theme supports different post formats, the displayed featured media can differ depending on what post format is set for the post in posts listings (such as on blog page, archive pages or search results page).

Please see FAQ section for more information on image sizes.

↑ Back to image

Post title and subtitle

Title of the post. Note that some post formats don't display a post title.

If you would like to display subtitles, use WP Subtitle plugin.

↑ Back to image

Post meta

Such as post publish date, post author name, number of comments...

↑ Back to image

Post excerpt

Automatic WordPress post excerpt can be overrode per post basis.

The excerpt display may differ depending on what post format you are using.

↑ Back to image

Sidebar

The theme displays sidebar on each single post page, single custom post type page, blog page, archive page and search results page.

Sidebar is a widget area, its content can be set in Appearance → Customize → Widgets.

If you would like to replace sidebar on a specific page with a different one or just remove it, use Content Aware Sidebars plugin. It is a great way to control and alter your website layout.

↑ Back to image

Search results

This page has a special layout, different from post archive pages, to allow easier scanning.

In case you need to refine your search, there is a search form conveniently displayed on top of search results listing.

Each post type displays differently in search results page.

↑ Back to image


↑ Back to topics list

Post content

Theme anatomy: Post content
Theme anatomy: Post content
(Enlarge the image)

(Click the item below to reveal more info. Click the image to preview a bigger size.)

Featured image

It is recommended to set up a post featured image for each post.

A featured image is displayed in posts listing and also as a background of intro section on a single post page.

Please see FAQ section for more information on image sizes.

↑ Back to image

Post title and subtitle

Title of the post.

If you would like to display subtitles, use WP Subtitle plugin.

You can also display intro widgets here or hide the post intro section altogether using post type page templates.

↑ Back to image

Post excerpt

If you set a custom post excerpt, it will be displayed in posts listing and in intro section on a single post page.

↑ Back to image

Post meta

Such as post publish date, post author name, number of comments...

↑ Back to image

Post content

A post content, optimized for readability.

You can also use a page builder to create some interesting post layouts.

↑ Back to image

Table of contents

If you separate a post into multiple parts, there will be a table of contents automatically generated.

↑ Back to image

Sharing buttons

To enable post, custom post and/or WooCommerce products sharing buttons (can be previewed on the theme demo website), please use Jetpack plugin's sharing module.

You can also add a "Print this" button as the theme contains a special stylesheet for printing.

Sharing buttons are displayed at the bottom of the post content (if you don't use page builder on the post) and in post intro section.

↑ Back to image

Comments

Comments are useful for blog posts to engage discussion with your website visitors. You can set them up in Settings → Discussion and disable them also per post basis.

However, if you do not want to use comments for specific post types, we recommend setting up Disable Comments plugin.

↑ Back to image

Posts navigation

Displays links to previous and next post. Inherits colors of Footer area.

↑ Back to image

Page builder

For creating a more interesting, complex post layouts please use a (any) page builder plugin (we recommend using powerful, optimized and easy to use Beaver Builder page builder plugin).

Please note that you will probably need to enable the page builder for WordPress posts first! (For Beaver Builder go to Settings → Page Builder → Post Types.)

↑ Back to image

Content options

The theme is compatible with several content options provided by Jetpack plugin. You can hide certain post meta information or display post author biography below post content.

↑ Back to image


↑ Back to topics list

Custom post types

You need WebMan Amplifier plugin to enable this functionality.

Theme anatomy: Custom post types
Theme anatomy: Custom post types
(Enlarge the image)

(Click the item below to reveal more info. Click the image to preview a bigger size.)

Projects and Staff archives

The theme is compatible with WebMan Amplifier plugin, which allows you to use several different custom post types: Projects, Staff, Testimonials, Content Modules.

While Content Modules is a helper post type with no archive page, the theme displays Projects and Staff (and Testimonials) post archive pages in a special masonry layout, different from the blog posts listing.

(Other post types can be added by a different plugins. If you want to sell products, please use WooCommerce plugin.)

↑ Back to image

Post featured image

Project or Staff post featured image.

Please see FAQ section for more information on image sizes.

↑ Back to image

Post title

Project or Staff post title.

If you would like to display subtitles, use WP Subtitle plugin.

↑ Back to image

Post excerpt

Custom post excerpt is displayed in intro section on all custom post type single pages.

Staff post excerpt is displayed also in posts listing, and if the Staff post contains some content, a "Nice to meet you!" button is displayed too. After clicking the button you get to single Staff post page.

Project post does not display excerpt in posts listing.

↑ Back to image

Taxonomies

Project or Staff post custom taxonomies.

The display depends on the custom post type and on taxonomies you have assigned to it (such as project category, project tags, staff department or specialty).

↑ Back to image

Project and Staff single post page

Custom post type single page has a different layout than native WordPress pages or posts. There is a featured image displayed at the beginning of the post, that can be zoomed in (we recommend using WP Featherlight plugin).

Intro section is displayed similarly to WordPress native posts.

↑ Back to image

Post content

Project or Staff post content.

You can also use a page builder to create some interesting post layouts.

↑ Back to image

Sidebar

The theme displays sidebar on each single custom post type page and archive page.

Sidebar is a widget area, its content can be set in Appearance → Customize → Widgets.

If you would like to replace sidebar on a specific post with a different one or just remove it, use Content Aware Sidebars plugin. It is a great way to control and alter your website layout.

↑ Back to image

Page builder

For creating a more complex custom post layouts please use a (any) page builder plugin (we recommend using powerful, optimized and easy to use Beaver Builder page builder plugin).

Please note that you will probably need to enable the custom post type in your page builder settings first! (For Beaver Builder go to Settings → Page Builder → Post Types.)

If you would like to remove the intro section for the custom post type, use a post type page template or a specific custom field.

↑ Back to image

Sharing buttons

To enable custom post sharing buttons, please use Jetpack plugin's sharing module.

Sharing buttons are displayed at the bottom of the post content (if you don't use page builder on the post) and in post intro section.

↑ Back to image

Posts navigation

Displays links to previous and next post. Inherits colors of Footer area.

↑ Back to image


↑ Back to topics list

Shop content

You need WooCommerce plugin to enable this functionality.

Theme anatomy: Shop content
Theme anatomy: Shop content
(Enlarge the image)

(Click the item below to reveal more info. Click the image to preview a bigger size.)

Intro section

Shop page intro section displays your shop page title (and subtitle) and page excerpt.

On product archive pages (such as a product category page) there is an archive title and description displayed.

Single product page intro section contains shop breadcrumbs navigation, product title, product price, product rating and optional sharing buttons. Intro section on single product pages can be disabled globally in Appearance → Customize → Theme Options → Shop or per product basis using a post type page template.

If you would like to display subtitles for products, use WP Subtitle plugin.

↑ Back to image

Intro background image

On both shop and product archives pages there is a default header image ( Appearance → Customize → Header) displayed as an intro section background.

You can set up a custom intro section background image on single product page by setting up a dedicated custom field.

↑ Back to image

Shop page content

You can set a custom content for your shop page. The content will be displayed above the products list on main products archive page then.

↑ Back to image

Product categories list

The theme conveniently separates categories from products list (which is a WooCommerce default display) for you.

Please note that you need to have a "Show categories & products" set for Shop Page Displays (and "Show subcategories & products" set for Default Category Display) in your WooCommerce products display settings for this feature to be enabled.

↑ Back to image

Before products list

A widget area, its content can be set in Appearance → Customize → Widgets.

This widget area is best suited to display WooCommerce filter widgets, such as "WooCommerce Layered Nav", "WooCommerce Price Filter" and/or "WooCommerce Product Categories".

↑ Back to image

Products list

The layout of products list can be set on your shop page.

If you use a "With sidebar" page template for your shop page, there will a sidebar displayed on your product archive pages.

You can also set a special stretched layout for the shop page (set a dedicated layout_stretched custom field when editing your shop page), which will widen the content area fullwidth, making space for more products. You can still use a sidebar in this layout too.

↑ Back to image

Featured image

Product featured image is displayed in products list, as well as on single product page. It is the main image displaying your product, so please make sure you always set it up.

Please see FAQ section for more information on image sizes.

WooCommerce comes shipped with lightbox image zooming effect. We recommend disabling this in your WooCommerce products display settings and using a dedicated lightbox plugin (such as WP Featherlight) throughout your whole website for consistency.

↑ Back to image

Shop Sidebar

The sidebar is displayed on product archive pages only if you set the "With sidebar" page template for your shop page.

There is no sidebar displayed on single product page to reduce a clutter and focus visitor on the product details and purchase action.

Shop Sidebar is a widget area, its content can be set in Appearance → Customize → Widgets.

If you would like to replace Shop Sidebar on your shop pages with a different one or just remove it, use Content Aware Sidebars plugin. It is a great way to control and alter your website layout.

↑ Back to image

Product gallery

If you would like to display more images of the product, use a product image gallery.

Please see FAQ section for more information on image sizes.

WooCommerce comes shipped with lightbox image zooming effect. We recommend disabling this in your WooCommerce products display settings and using a dedicated lightbox plugin (such as WP Featherlight) throughout your whole website for consistency.

The theme is also compatible with WooCommerce Product Image Flipper plugin which displays the additional (first image from product image gallery) image when hovering a product in products listing. The theme changes the hover effect of the plugin to a custom one, though.

↑ Back to image

Product short description

Set this on your product edit screen. Please see WooCommerce documentation for more info.

↑ Back to image

Sharing buttons

To enable product sharing buttons, please use Jetpack plugin's sharing module.

↑ Back to image

Product description

Set this on your product edit screen. Please see WooCommerce documentation for more info.

Please note that the product description width is set for best readability. If you would like to override this, use a page builder to build the product description content.

For creating a more complex product description layouts please use a (any) page builder plugin (we recommend using powerful, optimized and easy to use Beaver Builder page builder plugin).

Please note that you will probably need to enable the product post type in your page builder settings first! (For Beaver Builder go to Settings → Page Builder → Post Types.)

↑ Back to image

Product tabs

Set this on your product edit screen. Please see WooCommerce documentation for more info.

↑ Back to image

Product widget area

A widget area, its content can be set in Appearance → Customize → Widgets.

This widget area is best suited to display a general featured information about your shop, such as shipping info, newsletter subscription form or similar.

↑ Back to image

Related products

Set this on your product edit screen. Please see WooCommerce documentation for more info.

↑ Back to image

Checkout guide

The theme provides a convenient checkout guide displaying steps of purchase process on a cart page, checkout page and order received page.

You can enable or disable it in Appearance → Customize → Theme Options → Shop.

↑ Back to image

Cart and Checkout page

Once you set these pages according to WooCommerce documentation, there will also be a compact shopping cart displayed in the website header which can be disabled in Appearance → Customize → Theme Options → Shop subsequently.

You can treat the cart and checkout page the same way as other WordPress pages.

↑ Back to image

My Account page

Please see WooCommerce documentation for more info on how to set up this page.

↑ Back to image


↑ Back to topics list

Content: Demo

The theme allows you to import a demo content, which matches theme demo website. Then you can simply change the imported demo content to your needs and build your website faster that way.

Before you import the theme demo content, please check these important notes:

Tip: Delete leftovers

Theme demo contains a lot of pages. You will certainly end up not using most of them. In that case it is strongly recommended to delete the leftover demo content you no longer need from your website. It improves your website performance and relevance.

Important: Install on fresh WordPress

It is recommended to install demo content on empty, fresh WordPress site. (If you are testing the theme on a computer and not your live website, you can always reset WordPress to a fresh state.

Warning: Images and media quality

Please understand that demo images, audio and video files are of low quality. This is to prevent any copyright infringement. You should replace them with your own, properly licensed media that fit your website project.

Recommended: Classic widgets interface

WordPress 5.8 introduced a new block-based interface to widgets and sidebars management screen. Theme demo content was built using the classic widgets interface, so it is highly recommended to install and activate Classic Widgets plugin to retrieve the classic WordPress widgets interface again.

Warning: Page builder compatibility

If you want to use a page builder, please understand that if the theme demo content was not built with your page builder, you will not be able to edit the imported demo pages.

→ Read knowledge base article for more info.

And now, for detailed instructions about importing theme demo content please visit demo content repository at GitHub (where it is kept up to date).

Content: Pages

Setting Up Home and Blog Page

  1. Navigate to Appearance → Customize → Homepage Settings (or you can also do this at Settings → Reading).

  2. For "Your homepage displays" option set "A static page".

  3. Select your homepage and posts page from the dropdown lists. Posts page becomes your blog page.

Templates

Monument Valley theme supports WordPress page/post templates functionality and contains selection of predefined templates for you (see the list below).

Setting up template in editor
Setting up template in editor
"Blank"

Displays only page content and so it's best suited for creating landing pages. There is no site header, no page intro title section (no h1 heading tag), and no site footer on this template.

"With intro widgets"

There is an additional "Intro Widgets" widget area displayed in the intro section of this page template. No intro widgets are displayed when the intro section is not displayed on the page or there are no widgets set in "Intro Widgets" sidebar.

"No intro"

Use this page template to remove the page intro title section (when you want to set up your own). Only the page content will be displayed.

For standard pages, the title will be accessibly hidden.

On the other hand, if you are using Beaver Builder page builder, please, do not forget to set up your custom h1 heading, as it is being completely removed from the page HTML in this case. The same applies for pages that you set to be ready for any other page builder.

"With sidebar"

By default, there is no sidebar is displayed on pages. However, if you would like to display a sidebar on a page, use this page template with it.

"List child pages"

Please set this page template for a parent page only.

It will display a list of child pages below the actual (parent) page content. You can tweak each child page display by setting the corresponding page options.

There will be a page featured image (you can then even set a different intro image displayed on the actual page with a dedicated custom field), page title, page excerpt and optional "Continue reading" button displayed. "Continue reading" button is displayed only if the page has some content.

To set up a child page excerpt please use the "Excerpt" field on page edit screen.

If you would like to custom order your child pages, use page "Order" attribute. Or you can use a plugin for this, such as Nested Pages or Intuitive Custom Post Order.

Page Excerpt

The theme adds support for excerpts also to WordPress pages. This functionality basically matches the post excerpt → check more info about excerpts.

Page Intro Section

Page intro is basically a main title area of the page, post or archive page. By default it displays intro image, page title and page excerpt:

Page excerpt

Page Excerpt content depends on the page you are on.

If it is an actual WordPress Page or Post or any custom post type, you can set the "Excerpt" field.

On taxonomy archive pages it displays the taxonomy (such as post category or tag) term description which you can set for any/all taxonomy terms in WordPress.
If you want to display some description text for the custom post type archive pages too, you need to use a plugin for that.

Image and Video

Intro image is taken from your website header images that can be set in Appearance → Customize → Header Media. That image can be overridden then by setting up a post/page featured image, which can be again overridden by setting up a dedicated intro_image custom field.

If you are using WooCommerce plugin, intro image is not displayed on single product pages even if you set a product featured image. If you really need to display an intro image there, use aforementioned custom field for that.

If you would like to remove the intro section (to set up your own with a page builder, for example), use "No intro" page template (or set up the specific custom field).

Colors of intro section can be customized in Appearance → Customize → Theme Options → Colors: Intro.

Tip: Intro Widgets

You can additionally display widgets in the intro section. Just add them into Intro Widgets area and set "With intro widgets" page template for the page/post.

Content: Posts

Excerpt

Excerpt will be displayed in posts list. If no excerpt is set, a portion of post content will take its place.

If you set a custom excerpt text for a post or page, this will be also displayed in page intro section (main title area) unless you hide it with a template.

Adding/editing excerpt field
Adding/editing excerpt field

Archive Page Title

By default WordPress displays a caption in the archive page title (such as "Category:" in front of a category name). Use Archive Title plugin to hide these labels.

Table of Contents on Parted Post

If you are setting up a multipage post (using a "Page break" button in visual editor, or <!–nextpage–> tag in "Text" tab of visual editor), the automatic table of contents will be generated for the post/page for you.

All you need to do is to set up a post parts titles at the top of each post part (so, immediately after <!–nextpage–> tag) with H2 heading.

Blog Styles

This theme comes preset with multiple blog styles. You can set them globally for your posts archive pages in theme options in Appearance → Customize → Theme Options → Blog.

Setting Up a Post Format

On the post edit screen you can choose a post format supported in the theme:

Standard post

This is basic standard blog post layout.

Aside post

Displays a whole post content in posts listing with a special styles applied. Otherwise the same as standard post format.

Audio post

Displays audio player to play your audio files. Could be used for Podcasting.

To set the audio, use an [audio] (or [playlist]) shortcode in the content. The first [audio] ([playlist]) shortcode will be used in post media area in posts list display, including the post featured image.

If no [audio] or [playlist] shortcode used, but oembed media URL found, this media will be displayed instead of the featured image in posts lists display.

Gallery post

Just add a [gallery] shortcode anywhere in the content. The first [gallery] shortcode images (3 of them) are used as a preview in posts list display.

Image post

On single post page it acts like standard post, in posts list it displays an image, post title and "Excerpt" field content which can be used as a brief image info.

Link post

Enhances any links in the post content. No post title is displayed.

Quote post

Displays the post content as blockquote (any blockquotes in the content will be removed and replaced with single wrapping blockquote).

Use <cite> to set the quote source, or set the quote_source custom field, or the post title will be used as quote source. No post title and featured image is displayed.

Status post

A short status update, similar to a Twitter status update. The whole post content is displayed without excerpt and post title. If no featured image set, the post author avatar is used.

Video post

Displays a video player to play your video files. Could be used for video blogging.

To set a video, use a [video] (or [playlist]) shortcode in the content. The first [video] ([playlist]) shortcode will be used in post media area in posts list display.

If no [video] or [playlist] shortcode used, but oembed media URL found, this media will be displayed instead of the featured image in posts list display.

Supports also [wpvideo] shortcode when using Jetpack plugin.

Content: Projects

This custom post type is provided via WebMan Amplifier plugin.

Projects custom post can be used to showcase your work. You can place any content into projects and create stunning complex layouts using Beaver Builder page builder plugin.

Each project can be categorized and tagged and you can use these taxonomies for animated on-page filtering in a dedicated Beaver Builder "Posts (custom posts)" module.

You can choose from various styles of projects archive display in Appearance → Customize → Theme Options → Layout. On Projects archive pages there is a filter displayed on top of the posts list from (non-empty) project categories.

To display all projects on your site, you can use a projects archive page link in the navigation.

Tip: Renaming the post type

If you would like to rename this post type, use the Custom Post Type Editor plugin. To rename the custom taxonomies related to this post type, use the Rename Taxonomies plugin.

Tip: Custom posts order

For custom posts order you can use a plugin, such as Intuitive Custom Post Order.

Content: Staff

This custom post type is provided via WebMan Amplifier plugin.

With Staff custom post type you can easily manage your company team info.

Post excerpt is displayed in posts listing, and if a post contains some content, a "Nice to meet you!" button is displayed to link to specific Staff post page.

On Staff posts archive pages there is a filter displayed on top of the posts list from (non-empty) staff departments.

To display all staff posts on your site, you can use a staff archive page link in the navigation.

Tip: Renaming the post type

If you would like to rename this post type, use the Custom Post Type Editor plugin. To rename the custom taxonomies related to this post type, use the Rename Taxonomies plugin.

Tip: Custom posts order

For custom posts order you can use a plugin, such as Intuitive Custom Post Order.

Content: Testimonials

This custom post type is provided via WebMan Amplifier plugin.

Testimonial posts can be used to display reviews you receive from your clients or customers.

To display all testimonials on your site, you can use a testimonials archive page link in the navigation.

Tip: Renaming the post type

If you would like to rename this post type, use the Custom Post Type Editor plugin. To rename the custom taxonomies related to this post type, use the Rename Taxonomies plugin.

Tip: Custom posts order

For custom posts order you can use a plugin, such as Intuitive Custom Post Order.

Content: Content Modules

This custom post type is provided via WebMan Amplifier plugin.

Content Modules can be used as a reusable content injection to various website areas. They can be styled as icon boxes, so they are perfect for your services, features or benefits presentation.

Tip: Modifications

You can modify the layout of this post type display with helper CSS classes.

Tip: Renaming the post type

If you would like to rename this post type, use the Custom Post Type Editor plugin. To rename the custom taxonomies related to this post type, use the Rename Taxonomies plugin.

Tip: Custom posts order

For custom posts order you can use a plugin, such as Intuitive Custom Post Order.

Customization: Menus & Navigation

Navigational menus for your website can be created at Appearance → Menus. They may contain links to pages, categories, custom links or other content. You can specify a custom menu item label, as well as other attributes.

Display menus on your website by assigning them to a predefined theme menu location. The theme defines these menu locations for you:

Primary

This is the main navigation in the header of the website.

Menu in this location can be nested and hierarchically organized (up to 4 levels deep) and you can also use a simple megamenu functionality here.

It is also mobile-ready menu and, if needed, mobile functionality can be disabled at Appearance → Customize → Theme Options → Others.

Footer

Menu in the footer area of the website. This menu can not be nested or hierarchically organized. A search form is displayed aside this menu area.

Social Links

Please read the "Social Links" documentation section below for more info.

Create a Menu

Follow the instructions in WordPress documentation for how to create a menu.

Tip: Add a post type archive link

You can add any custom post type archive link into your menu:

Adding custom post type archive link to menu.
Adding custom post type archive link to menu.
Illustration image. May not display this actual theme.

Megamenu

With built in simple megamenu functionality you can display child menu (sub-menu) items in columns.

Megamenu example preview.
Megamenu example preview.
Illustration image. May not display this actual theme.
  1. Set a megamenu class on the parent menu item (1st level menu item).

    Setting up menu item class.
    Setting up menu item class.
  2. Then the 2nd level menu items (first child menu items) become captions for megamenu columns.

    Tip: Disable link

    You can set disable-link CSS class on these menu items to render their link inactive. It is still recommended to set their link to a dummy URL such simple as #0 would do.

  3. Finally, the 3rd level menu items (second child menu items) become actual menu items within your megamenu columns.

Customization: Social Links

Social icons linked to your social network profiles can be displayed anywhere on the website. But beforehand you must create and set up a social links menu:

  1. Go to Appearance → Menus in the WordPress admin.
  2. Click create a new menu link.
  3. Give the menu a name, such as "Social Menu".
  4. Click Create Menu button.
  5. Click the Custom Links header on the left side of the page.
  6. Type a link (such as https://www.facebook.com/webmandesigneu/) in the URL field.
  7. Give the link a label by typing in the Link Text field. (This label text will be accessibly hidden.)
  8. Click Add to Menu.
  9. Repeat the above steps for additional social links.
  10. In the Menu Settings section at the bottom, check the "Social Links" box for Theme locations.
  11. Click Save Menu button.

Adding your social links as a custom menu allows you to sort your profiles and add as many as you want. Once you assign a social links menu this way, feel free to use a Navigation Menu widget to display it in sidebars of your website.

The theme displays icons as SVG images. For full list of supported icons please refer to assets/images/svg folder of your theme.

For links starting with mailto: an envelope icon is applied. For unrecognized links a link chain icon is used.

Social sharing buttons

If you want to add a social sharing buttons to your website to allow your visitors to share your content, please consider enabling the Sharing module of Jetpack plugin, or use different dedicated plugin.

Customization: Theme Options

Monument Valley seamlessly integrates its options into live preview customizer. You can set up your site's title, tagline and logo, home and blog page, manage menus and widgets, customize colors, layout, typography and others.

Customizer can be accessed at Appearance → Customize. All the changes you make in Customizer will be immediately displayed in the preview, but they will be made live only after you press the Publish button.

At Appearance → Customize → Theme Options panel you'll find theme-specific options. Check them out to get familiar with theme customization capabilities.

Localization

Every WordPress theme contains some texts that need to be translated into your language if you are building a non-English website. This theme if fully translation ready.

The theme also supports RTL languages.

To enable your language in the WordPress website, please switch WordPress into the desired language localization.

Tip: Adding languages into WordPress

Check out tutorial on how to install WordPress in your language.

How to Translate a Theme

Method 1: Using Poedit software

  1. Make a copy of the original monument-valley/languages/monument-valley.pot file.

  2. Rename the copied file now: add hyphen followed with your language code locale, and change the file extension to "po". For example, the British English file would be named monument-valley-en_GB.po.

  3. Use Poedit to translate the file and export (save) translation in "mo" file format.

  4. Upload translated monument-valley-en_GB.mo and monument-valley-en_GB.po file into your WordPress languages directory, into themes folder (such as /wp-content/languages/themes/monument-valley-en_GB.mo (if the themes folder does not exist in your WordPress languages directory, create it).

Warning: Don't lose your files!

When you update the theme, all custom translation files will be deleted from /wp-content/themes/monument-valley/languages folder. Do not put your custom translation files into that folder! Basically, you should never modify the actual theme files and folders.

Methos 2: Translating in WordPress admin

If you would like to translate the theme directly in your WordPress dashboard you need to use a specialized plugin. Check out Loco Translate plugin and instructions on how to use it at beginner's guide and technical overview.

Translate Plugins Too!

Your website is built with WordPress system itself, a theme and some plugins.

There is a high chance that WordPress itself is already translated into your language. So, you don't have to translate it on your own. You have also learned how to translate the theme above. But what about plugins and their texts?

If you are lucky, your plugin contains your language translations already and you don't have to do anything. But if you need to translate a plugin, the best advice is to check the plugin's documentation for the best approach.

Alternatively you can also use Loco Translate plugin (again) to translate your plugins directly in your WordPress admin area.

Share Your Translation

If you would like to help out translating the theme, please contribute your translations at WebMan Design support forum by submitting a ZIP package of your .po and .mo translation files in a new support ticket attachment. Thank you!

Accessibility

Accessibility in web development means creating a web site that everybody can use regardless of one's hardware, software, or sensory, or physical impairment. It is about building a barrier-less web.

While creating accessible website is a complex process that includes a content strategy, Monument Valley theme helps you with being accessibility ready out of the box. It complies to WordPress accessibility requirements and was built to help you create a website that passes WCAG 2.2 level AA requirements.

Among other features the theme itself applies proper headings structure, uses ARIA attributes and landmarks where needed, adds informative "read more" links, makes your website navigation keyboard accessible, creates skip links for you and provides sufficient color contrast in default color scheme.

However, please understand that creating an accessible website is not just about a theme. You need to apply accessibility principles also to your website content and be cautious when using plugins. For further information please read WordPress documentation about accessibility.

And for even more information about accessibility please check:

Focus on Readability

Content area of this theme was designed carefully to provide the best reading experience for your visitors. Maximum line width is set to roughly 70 characters (can be tweaked in theme options). With proper line height and spacing around elements it is easier for visitors to digest your website content.

Headings Hierarchy

To comply with accessibility guidelines, the theme follows this headings structure:

Max one h1 on any given page

Theme outputs only one first-level heading (HTML tag <h1>) on each page. This is reserved for a page main title.

Important: Exceptions in templates

Read more about exception from this rule applied with certain templates. For example, you can remove the h1 title altogether and create your own custom one in a page content.

Site title heading

Site title (logo) is rendered as h1 only on homepage. On other pages the h1 tag is reserved for the actual page main title.

Hierarchy

Theme follows the best practice by hierarchically organizing heading levels, not skipping any of them. For example, h3 headings can be found only in a section titled with level h2 (and not h1). You should do the same when building your site content too.

Tip: Test it out!

In case you would like to test a page headings hierarchy, there is a great browser extension for this called HeadingsMap.

Plugins

Recommended plugins | Useful plugins

Why do you need to use plugins when you expected the theme to have all the functionality in it? Well, according to WordPress guidelines and generally the best practice: themes are meant for presentational purpose only, while plugins provide website functionality.

The reason for this is that when you decide to update your website looks you simply change a theme without loosing your website content and additional functionality such as eCommerce or portfolio.

This theme follows this WordPress philosophy and you can rest assured your site is as future-proof as possible. No lock-in effect with WebMan Design themes!

Info: Compatibility

The theme does not need any plugin to work properly. It is coded responsibly and flexibly enough so it should be compatible with any decently coded 3rd party plugin.

However, please understand there are thousands of plugins available for WordPress and it is not humanly possible to test them all. Feel free to use your plugin and in case of an issue contact support for help.

Recommended Plugins

Theme provides code and/or design integration for certain plugins. You will find these plugins in recommendations list below. They provide additional functionality for your website or improve your and your visitor's experience.

Please note that these are only recommended, suggested plugins, they are not required for the theme to work. Always read the plugin description before installing a plugin and install only those plugins you will use on your website.

Appearance → Install Plugins
Plugins recommendation page example: Recommended, not required
Plugins recommendation page example: Recommended, not required
Illustration image. May not display this actual theme.

Warning: Demo content required plugins

List of plugins the theme recommends may differ from plugins that are required when installing demo content. Check the demo content information for more details.

Here is a list of plugins that were successfully tested with the theme and the theme even provides additional integration layer for them:

Useful Plugins

With this theme you can use whatever plugins you like (check out compatibility info above). Here is a selection of additional useful plugins:

Advanced Custom Fields (ACF)
Add custom fields, content types and taxonomies to your website.
Archive Title
Removes archive page title labels.
Block Editor For WooCommerce
If using WooCommerce, this plugin allows you to create product description content with block editor.
Block Visibility
Allows controlling visibility of WordPress blocks.
Breadcrumbs NavXT
Create a perfect SEO friendly and flexible breadcrumbs navigation.
Custom Post Type Editor
Allows you to rename any post type.
Disable Comments
Disables comments site-wide per post type.
Icon Block
Allows you to add custom SVG icons and graphics to the WordPress block editor.
Imsanity
Automatically downsizes huge images during upload.
Intuitive Custom Post Order
For easier posts (and other post types) order management.
iThemes Security
Enhances your website security.
Meta Field Block
Display a meta field as a block on the front-end, supporting ACF fields.
Nested Pages
Provides drag and drop interface for managing pages and posts.
Ninja Forms
For creating forms.
Page Links To
Allows you to redirect a post or a page to a custom URL.
Polylang
Easy to use plugin for creating multilingual websites.
Post Type Archive Descriptions
Manages description (displayed on archive pages) for any post type.
Rename Taxonomies
Allows to rename taxonomies, such as "Tags" to "Topics", for example.
Social Sharing Block
Allows you to add social share icons to your website..
WPCode
Insert custom code snippets to your site.
WS Form
For creating mobile friendly, accessible forms.
WP Subtitle
You can easily add posts and pages subtitles with this plugin.

FAQ & Tips

  1. How to use a page builder
  2. Why are uploaded images blurry or small
  3. How to modify element appearance
  4. SEO - Search Engine Optimization
  5. How to speed up a website
  6. How to add custom CSS
  7. Breadcrumbs navigation
  8. Custom fonts
  9. Custom icons set
  10. Custom fields
  1. How to use a page builder

    The theme is 100% compatible with Beaver Builder page builder plugin. It is the only page builder plugin in which there is integration for custom theme content modules. If you are using other page builder, you will need to use shortcodes.

    The theme was also tested and is working perfectly fine with other page builders and should be compatible with any decently coded page builder plugin.

    To ensure layout compatibility there is a convenient "Page builder layout" metabox (preview ») where you can set special custom fields to prepare the page or post layout for use with your page builder. As every page builder works differently, you will need to set these options to your needs. Also, please note that when you are using Beaver Builder, this metabox is not available as the plugin works automagically without it.

    ↑ Back to questions list

  2. Why are uploaded images blurry or small

    Settings → Media → "Recommended image sizes" info

    The theme requires certain minimal image dimensions for optimal display. Info about recommended image size setup can be found at Settings → Media.

    Tip: Regenerate images

    Once you set correct image sizes, all your newly uploaded images will get processed with new settings. But for the images already uploaded to your website you need to use additional plugin to refresh their sizes. Regenerate Thumbnails plugin (or similar) will do the trick.

    Tip: File size optimization

    It is recommended to use an image optimization plugin to keep the file size of images uploaded to your server under control.

    ↑ Back to questions list

  3. How to modify element appearance

    This theme predefines some useful modifier CSS classes for you. You can use them in block editor, in a page builder, or however you find useful. These classes modify appearance of your website elements and blocks.

    For full up-to-date list of the helper modifier CSS classes and instructions on how to use them refer to theme demo website.

    ↑ Back to questions list

  4. SEO - Search Engine Optimization

    This theme is coded semantically, with the best SEO practices in mind.

    You can push your SEO performance even further with help of additional plugins such as Yoast SEO. You can also integrate support for microformats.

    ↑ Back to questions list

  5. How to speed up a website

    Having a performant website is a must. It makes your website more SEO friendly and most importantly pleasing for your visitors, more accessible. This theme was coded with performance in mind but we can always take things even further:

    Use a good host

    A good hosting for your website is very important choice you can make towards a speedy website. Depending on your location it is also advised to use a host that has servers in your country or at least on the same continent.

    Check out Siteground (a very good personal experience), or have a look at WordPress hosting recommendation page.

    Optimize your images, video and audio files

    You should always keep the file size of your website media as low as possible. Prepare images before you upload them to your website: compress them, reduce their dimensions, maybe even crop them. Use plugins to optimize further more.

    In case of video and audio files set the optimal compression and formats before uploading them to your site. Consider also using services such as Vimeo, YouTube or SoundCloud to host your files off your servers.

    Also consider using a CDN service.

    Enable caching

    A basic browser caching and GZIP compression is a must!

    But you will get better results using a dedicated solutions such as WP Rocket or WP Super Cache or SiteGround Optimizer. Or maybe your hosting provider applies some sort of caching already? Check with them.

    Warning: Minify & combine

    Your caching solution may provide CSS and JS files minification and combination. Be cautious though: these are complex processes which may cause errors on your website. Test thoroughly!

    Tip: Measure performance

    For measuring your website performance and tips on how to improve it use services such as GTmetrix, Pingdom Tools and WebPageTest.

    ↑ Back to questions list

  6. How to add custom CSS

    Appearance → Customize → Additional CSS

    Add your custom CSS code into Appearance → Customize → Additional CSS, or alternatively into your child theme's style.css file.

    ↑ Back to questions list

  7. The theme supports Breadcrumb NavXT plugin that allows very flexible set up and display of breadcrumbs navigation on your website. After you install and activate the plugin, the theme displays the breadcrumbs navigation in preset location you can tweak in Appearance → Customize → Theme Options → Layout.

    Here is some tip for setting up your breadcrumbs display:

    Settings → Breadcrumb NavXT → General → "Breadcrumbs Separator"
    Set to <span class="sep"> / </span>.
    Settings → Breadcrumb NavXT → General → "Home Template"
    Settings → Breadcrumb NavXT → General → "Home Template (Unlinked)"
    Prepend the existing text with <a href="#top" class="back-to-top">Back to top ↑</a> <span class="breadcrumbs-title">You are here: </span>. (The "Back to top" link will only be displayed in breadcrumbs navigation below the page/post content.)

    ↑ Back to questions list

  8. Custom fonts

    Instead of restricting you to using either Google Fonts or Typekit fonts (or any other fonts provider) built within the theme, you have the luxury of choosing your own preferred fonts provider (or using web safe fonts) with the Monument Valley WordPress theme.

    There are multiple different custom fonts plugins you can use, such as Easy Google Fonts, Typekit Fonts for WordPress or Font Squirrel (unofficial).

    All the information regarding the theme typography and fonts setup can be found in Appearance → Customize → Theme Options → Typography.

    Tip: More advanced but flexible procedures

    For more thorough and flexible procedure you can watch a video on how to change any font on any WordPress website.

    For using a child theme to add custom fonts, please read/watch How to Add Custom Fonts in WordPress.

    ↑ Back to questions list

  9. Custom icons set

    The theme comes bundled with 2 icons sets:

    Utility icons

    The utility icons set is used by the theme internally to provide icons for post meta information, for example. These icons can not be changed easily, you can override them with custom CSS code only. The theme uses Genericons icon set as the utility icons.

    Content icons

    Thanks to help of WebMan Amplifier plugin, you can use a set of custom content icons, which can be changed under Appearance → Icon Font in your WordPress dashboard using a Fontello online icon fonts generator. These icons are then available to set in Content Modules posts or for use anywhere on the website (just grab the icon-specific "Instant HTML" when hovering over an icon in Appearance → Icon Font page).

    By default, the theme provides its own custom content icons set best suited for the theme usage purpose. If you import your own Fontello icons set, this will override the default theme icons. In case you just want to add a new icons to the theme's predefined set, please import the theme's monument-valley/assets/fonts/fontello/config.json file into Fontello icons font generator first (as seen in the picture below) and then select your additional icons or import your custom icons SVG into Fontello (read instructions on how to use Fontello).

    Importing config.json file into Fontello.com icons font generator
    Importing config.json file into Fontello.com icons font generator
    Illustration image. May not display this actual theme.

    ↑ Back to questions list

  10. Custom fields

    To allow more control over pages and posts appearance, the theme uses some predefined custom fields.

    You can use the WordPress native custom fields interface, but for the best experience it is recommended to install and activate the Advanced Custom Fields plugin. The theme is compatible with this plugin out of the box and automatically creates easy-to-use metaboxes for you for all its options (custom fields).

    Custom fields used in the theme:

    Intro section related

    For easy setup of these custom fields please use the ACF metabox (click to preview).

    no_intro

    Boolean: "1" or empty

    Disables Intro section for the current page/post.

    With supported post types (pages, posts, projects, staff and WooCommerce products) you can preferably use a special page template instead.

    intro_image

    String: URL or ID of the image

    Overrides the default intro section image with a custom one.

    show_intro_widgets

    Boolean: "1" or empty

    Displays Intro Widgets area if Intro section is displayed.

    With supported post types (pages, posts, projects, staff and WooCommerce products) you can preferably use a special page template instead.

    Child pages list related

    For easy setup of these custom fields please use the ACF metabox (click to preview). The metabox is only displayed for pages set as a child of some parent page.

    no_thumbnail

    Boolean: "1" or empty

    Removes the page thumbnail (featured image) from the list of child pages on the parent page.

    Shop related

    These custom fields can be set for WooCommerce "Shop" page or a single product.

    intro_image

    String: URL or ID of the image

    Overrides the default intro section background image with a custom one for a specific product. This option is obsolete when you disallow intro section on product pages in theme customizer.

    On product edit screen the custom field can be set in ACF metabox in the sidebar (click to preview).

    layout_stretched

    Boolean: "1" or empty

    By setting this custom field for your "Shop" page you can enable special full width shop layout. The layout will be applied on all WooCommerce archive pages.

    On "Shop" page edit screen the custom field can be set in ACF metabox in the sidebar (click to preview).

    Page builder related

    These custom fields can be set for any post type only if you are not using Beaver Builder page builder.

    Why the theme uses a custom field for this instead of a page template?
    For better flexibility. If this custom field was replaced with a custom page template, you could not use a different page template on that specific page or post. The theme allows you to use any page template you like while preparing it for your page builder plugin custom layout.

    For easy setup of these custom fields please use the ACF metabox in the sidebar of page/post edit screen (click to preview).

    layout_stretched

    Boolean: "1" or empty

    Stretches the content area full width and removes content area paddings.

    layout_no_paddings

    Boolean: "1" or empty

    Removes content area paddings only, keeping its original width.

    ↑ Back to questions list

Modifications

Warning: Limited support

This topic is meant for WordPress developers who would like to modify the theme and WordPress functionality.

Please understand that we do not provide support for custom code modifications, though.

Use a Child Theme/Plugin

If you need to make coding changes to the theme or WordPress itself, use child theming functionality, or even more flexible "child theme" plugin solution.

This way you can update the parent (original) Monument Valley theme without worrying about your custom code getting overwritten and lost. Your code is kept safe in your child theme/plugin.

Tip: Read more about child themes in WordPress documentation.

CSS code

Put your custom CSS code into style.css file.

PHP code

Modify functionality of the theme and/or WordPress via functions.php file. Use action and filter hooks.

"Child theme" plugin

For more flexible approach that works with any type of theme (classic or FSE block theme), or for cases when you can't use a child theme, we have created a free "Child Theme" Plugin for you.

Info: Is using a "child theme" plugin better?

Using "child theme" plugin is mostly beneficial when you use a block theme (full site editing theme) for some time already and then you decide you need to modify something with code.

If you plan to provide means for future code modifications right from the start use a child theme, even with a block parent theme.


More technical details

Full site editing block theme compatibility with WordPress child themes concept is limited. This is due to Site Editor user-modifications being stored in WordPress database. It causes issues when you decide to use a child theme afterwards, because all of these database records are bound to a specific (parent) theme name.

Copying modified Site Editor options and layouts so they work with a child theme is more complicated process. Though, this complication is solved elegantly using a "child theme" plugin.

The plugin works the same way as classic child theme would - you can use it anytime, even after you've already made custom changes in Site Editor, and it involves less code in comparison to a child theme.

A downside of the plugin may be overriding parent theme templates with code:

Sample child theme/plugin

Download a free child theme or plugin from WebMan Design GitHub repository. Don't forget to check the information in the repository for how to set them up.

Tip: Theme from Envato Market?

If you've obtained the theme from Envato Market, there is a high chance that a dedicated child theme is already included in the package you've downloaded from the marketplace.

Check out your files. Or download a sample child theme from the aforementioned repository.

Hooks: Actions and Filters

The theme provides multiple useful action and filter hooks, which can alter its functionality. Check the theme's source code for hook references: simply search for do_action and/or apply_filters. Or contact support for help.

Monument Valley theme uses Theme Hook Alliance (THA) hooks too. This is useful to rebuild theme structure or add your custom sections anywhere.

Tip: Theme builder compatibility

This theme can be modified with a theme builder plugin such as Beaver Themer or Elementor Pro Theme Builder.