Mantra FAQs

A. Legal

A1. Is the theme free?

A2. Is the theme released under GPL license?

A3. Can I remove the copyright text in the footer?

A4. But I really need to remove the copyright. I’m doing this site for my employer/company/grandmother and I have to. Is there no other way?

B. Compatibility

B1. What browsers does the theme work on?

See question E1 for specific theme information.

B2. Is the theme responsive?

See question E2 for specific theme information.

B3. What version(s) of WordPress is the theme compatible with?

See question E3 for specific theme information.

C. Functionality

C0. Pages? posts? presentation page?

Apparently you’re not accustomed to WordPress’ structure, so lets take this from the beginning…

WordPress allows you to display various… let’s call them areas, or sections.
In a particular area/section, you can display 1 ‘page‘, 1 ‘posts‘ or ‘a lists of posts‘ (the pages and posts are the content you add/edit/control).

Also, the menu items (created automatically by WordPress or manually added by you) link to these areas/sections.

What users see when they get to your http://url_here/ site is the ‘homepage‘. That’s just a particular area/section. WordPress lets you configure this to display either a ‘list of posts‘ or a ‘page‘.
The theme adds one more option here, letting you display the ‘presentation page‘ (not actually a ‘page‘ in the WordPress sense but more like another area/section).

As plain obvious as this sounds – you can only set one of these to be the ‘homepage‘ at one time. Your users will only see one ‘homepage‘, what you configured it to be: the ‘list of posts‘, the ‘page‘, or the theme’s ‘presentation page‘.

If you set the theme to display the ‘presentation page‘ on the ‘homepage‘, obviously, the ‘list of blogs‘ will not be visible anymore. Well, the theme takes care of this by providing another option (described in the C17 question) with which you can create a ‘page‘ (note the term) which will ‘list posts‘. This is not the actual ‘list of posts‘ used by WordPress on its ‘homepage‘ but rather a copy. Nonetheless, it provides the same functionality.

Now, to get to all these ‘pages‘, ‘posts‘ or ‘homepage‘ a visitor (or you) would need to know the actual links… and this would be crazy. This is where the menu comes in.
Wordpress will automatically list all your ‘pages‘ in its main menu by default. But at many times this is not preferred or liked.

This is where ‘custom menus‘ come in.

Using a custom menu you can add whichever ‘items‘ (buttons/links/elements) you want in your menu, each of those ‘items‘ linking to one area/section (‘page‘ or ‘post‘) or external URL.

Now, as a custom case scenario, you’d probably want one an ‘item‘ (button/link/element) to point to your ‘homepage‘ (which in this particular case is set to be the ‘presentation page‘), one to point to your ‘lists of posts‘ custom ‘page‘, and perhaps others to link to other ‘pages‘.

And depending on what content you add to your ‘presentation page‘, the ‘homepage‘ will also point to various ‘post‘s and ‘page‘s around the site… (or none at all)

Best way for you to get accustomed to all this is to first use WordPress’ built-in functionality (and leave the presentation page disabled). Once you learn how various changes/edits you make in the backend affect your visible site, you can move up to using the theme’s more powerful options.

C1. I cannot change the layout in the Theme Settings?

You’re probably using Internet Explorer. Try another browser and you’ll be fine.

C2. How do I use a different font than the ones that are available with the theme?

If you need any other fonts beside what the theme and Google Fonts offer, you’ll have to do it yourself by editing files or using plugins.

C3. How do I remove the paragraph indent?

There’s an option to disable that in the theme settings > Text Settings section.

C4. My post titles and headers have extra padding or spacing. How do I remove that?

There’s an option to disable that in the theme settings > Text Settings section.

C5. I want to disable a background colour / What happens if I delete the colour code inside a colour input field?

If it’s a background color field – that area will become transparent.
If it’s a text color field – the default color for that text will be used (either browser default or inherited from parent HTML element).

C6. How do I hide page titles?

There’s an option to hide them in the theme settings > Graphics Settings section.

C7. How do I hide the “Comments are closed” or the “Comments off” texts that appears on my site’s pages and in the post metas respectively?

There are options in the theme settings > Graphics Settings section to hide those.

C8. How do I hide the text under the comment form?

There’s an option in the theme settings > Graphics Settings section to hide that.

C9. How do I disable comment forms altogether?

We made a small tutorial about that, available here.

C10. How do I disable displaying posts on the presentation page?

There’s an option for that in the theme settings > Presentation Page.

C11. How do I use an image for the site header and also hide the site title & description? / Why does my browser displays a dash as the site title?

You can set the site header via the Appearance > Header section. Just make sure your image is the proper size, otherwise it will be cropped or distorted.

The “Site Title” option under theme settings > Header Settings allows you to chose between the classic “Site title and description”, the custom “Site Logo” (which you can upload separately from the background header image), the specific “Clickable header image” and the basic “Empty” (nothing at all).

No matter if you chose to display the site title and description or not, still make sure the “Site Title” and “Tagline” fields are filled in under Settings > General, otherwise you will see a stray dash in the browser title. This is no longer the case in the latest theme versions.

If you do wish to hide the previously filled in site title and tagline from the site header area, just set the option to anything but “Site title and description” – logo (if you have one), clickable header (if you’ve set a header image) or empty will all do.

C12. How do I make the site’s header image clickable and link to the homepage?

You need to set the “Site Header” option to “Clickable header image” in the theme settings > Header Settings section.

C13. How do I set my own favicon?

You can upload and use your own custom favicon. The option is in theme settings > Header Settings.

Make sure you take into account browsers’ limitations concerning filetypes and caching (some browsers don’t display a changed favicon instantly).

C14. Can I edit the style.css file to my linking?

You can but you shouldn’t -  all theme files are replaced on updates (added files are removed). You should place simple custom CSS in the theme’s Custom CSS input field found in theme settings » Miscellaneous section.

For heavy modifications, consider using a child theme.

C15. How do I set different layouts / sidebars on different pages/posts/categories?

The theme has a specific way of controlling sidebars:

  • the Layout option in the theme settings sets the general layout structure for the entire site (this applies to all sections, including categories, homepage, specific post, page, tag, archive, author, so on.); the layout option provides 6 layouts:
  1. one column, no sidebars – will display only the content area
  2. two columns, sidebar on the left – will display content plus the left sidebar
  3. two columns, sidebar on the right – will display content plus the right sidebar
  4. two columns, sidebars on the left – will display content plus both sidebars on the left
  5. three columns, sidebars on the right – will display content plus both sidebars on the right
  6. three columns, sided – will display content plus a sidebar on each side of the content

* the general layout option should be set to the layout most (all) of the categories/posts should use

  • each page can use a separate layout structure, by using a specific page template for that page; the available options are the same as the ones available for the general layout option; when creating/editing a page select the desired page template from the page templates list on the right to make that particular page look differently than the general layout.

Notes: the presentation page does not display sidebars; also, there is no way to set specific categories / posts / tags / author / archives to use a different layout than the general one.

C16. How do I add more than 5 slides on the presentation page?

You can define up to 5 custom slides, but you can also set the slider to grab the slides from:

  • latests X posts
  • X random posts
  • latest X sticky posts
  • latest X posts from category
  • random X posts from category
  • specific posts (by ID)

where X is a configurable count.

To make slider compatible posts it is required to add a post featured image (which will be used as the slide image). Make sure the featured images are of proper size (the same one as the slider is configured). The post title and post excerpt will be used for the slide caption if defined.

C17. How do I use both the presentation page and the blog page?

If you’ve enabled the presentation page and also want to create a blog page (like the default WordPress homepage), create a new empty page and choose “Blog Template (Posts Page)” as the page template.

Then add a link to that page in your menu(s) (if it isn’t displayed automatically).

C18. How do I re-order / rename / re-arrange my menu items?

This is not really theme-related functionality. To (absolutely) control your menu and menu items, we recommend using a custom menu.

We wrote a small tutorial on using custom menus here.

C19. How do I add my own styling/CSS? What is that ‘custom CSS’ you’re talking about?

We recommend to never modify the theme’s style.css file, as you will lose any changes you make to it at the next update (or you are forced to never update, losing out on all the bugfixes, improvements, features and new bugs added :) )

We have created a special input field dedicated for your own CSS right in theme’s settings page. You’ll find it by going to Appearance > [theme] Settings, then expanding the Miscellaneous Section by clicking on it. The Custom CSS field is a bit further down. (Screenshot)

As an extra feature, you can also type in your own custom JavaScript code (like Google Analytics or any other JS you need to load in your header) into the field right below, titled Custom JavaScript.

C20. I want to add my own HTML to the presentation page / Why is my custom HTML stripped?

The theme uses WordPress’ built-in sanitation function to strip potentially harmful HTML data. Each field in the settings uses the wp_kses_data() function to sanitize user inputed content. (WordPress Codex has a good explanation concerning sanitation usage)

This is required for the theme to achieve approval by the WordPress theme reviewing team.

For a list of (default) accepted HTML tags and attributes, see the header of WordPress’ kses.php file.

This default behaviour can be overridden using plugins, theme or WordPress modding.

As far as modding the theme is concerned, you can edit the theme/admin/sanitize.php file and inside the [..]_options_validate() function you can remove the wp_kses_data() processing on every field you wish to remove the sanitation from (the field names are pretty much self explanatory).

Keep in mind these changes can affect your WordPress security.

Note: The presentation page columns and the 2 text areas below support shortcodes. The two titles above and below the slider do not.

C21. Translations? Multilanguage?

The theme is “translation ready“. This means it supports WordPress’ built-in translations functionality, allowing you to translate it into your own language without editing a single theme file. If someone was kind enough to send us a translation in your language, you may be lucky to find it already there. Otherwise see our “how to translate” part I & part II tutorials.

Multilanguage” is a different notion. It means your site will have its content in several languages at once, being accessible to readers in various native languages. A theme doesn’t need to support multilanguage content since this is not its job. This functionality is only provided in WordPress by additional plugins. The theme should be compatible with all multi-language plugins, however, at the time of writing this, only one plugin is capable of translating the theme’s presentation page special fields – qTranslate – using its “quick tags” functionality. If you find other plugins capable of supporting multi-language translations of the presentation page fields, do let us know.

 

C22. My site is missing all/most of the colours / My site lost colours after modifying theme settings

This is most likely caused by a poorly written plugin that is loading it’s functionality on top of the theme’s own code.
First off, navigate and click on one of the theme’s colour fields – notice if two colour selectors pop up instead of one. If the answer is yes, then you will need to figure out the problematic plugin (by switching all plugins on/off) and disable it.
Secondly, check that all the colour fields have the leading ‘#’. If not, add it back where it’s missing and save settings. If the # sign is removed after the save, this may also be caused by a plugin. Switch all plugins off/on to check for the culprit and disable it.

C23. How can I center my menu?

You’ll find the left / right / center menu alignment option under Graphics Settings.

C24. How do I add another social icon?

See question E4 for theme specific information.

C25. Why is my site wider / have a scrollbar when viewing it in landscape mode on a tablet?

Our themes use the 800 pixels limit at which they switch between responsive and desktop mode.

Viewing the site on a screen at least 801 pixels wide will render the full width / desktop version (as configured in the theme settings); viewing the same site on a screen 800pixels wide (or smaller) will render the responsive site.

This number is not chosen randomly. This is usually the smallest value users would chose as general site width.

Using a bigger number for this limit (for example 1000px) would mean everyone who configures their site to a smaller with (for example 800px) will have their site enlarged (and most likely with broken layout) when viewing it on a mobile device with a screen resolution wider than the configured site width.

C26. Twitter/Google/Facebook/insert-social-service-here does not grab or grabs incorrect images from my site

Are you using one of our themes and Twitter/Google+/Facebook/insert-social-site-here grab the wrong featured image from your site (or don’t grab an image at all)?

Most social services use something called OpenGraph to grab content from your site. This is how they know to read the correct title, text and featured image from your posts. And when they don’t find this data they try to parse the source of your site and grab whatever they believe is relevant (such as the first image, even when it may not be relevant to the actual post).

We’ve considered adding code in your themes for serving OpenGraph data, but this is a grey area as far as WordPress rules are concerned. To receive approval into the WordPress directory, among other things a theme should NOT integrate plugin functionality.

Fortunately, this functionality is already included in existing plugins, one of which we found to work perfectly with our themes – WordPress SEO by Yoast – which we highly recommend (even though they pay us no money ;) )

 

D. Updates

D1. Are my hard-worked settings kept during an update?

Theme settings (together with the Custom CSS and Custom JS field contents) are kept during updates.
File modifications (changes to style.css, to theme files or newly added files) in the theme folder are lost on update (this is default WordPress behaviour).

Consider using the custom CSS / JS fields or resorting to child themes for your extra customizations.

Important note: Since you can never have enough backups – and just to be on the safe side – use the Export Settings button (in theme settings) to save a complete backup of all theme settings before updating.

D4. I just updated and all my customizations are gone. How do I get them back?

Unfortunately, you should have used the “Custom CSS” field, a custom CSS plugin, or a child theme to make your changes. Any changes done directly on the theme files (style.css, js files or php files) are lost after an update. This is default WordPress behaviour and cannot be changed.

Theme settings, including the contents of the “Custom CSS” field, are kept between updates.

The only way to get your customizations back is to grab the files out of a backup. If you do not have a backup, then you’re out of luck. Sorry!

E. Specific questions

E1 (B1) What browsers does Mantra work on?

Mantra is compatible with all major browsers. Mantra has been tested on and looks the same way in: Mozilla Firefox, Opera, Chrome, Safari and… Internet Explorer 9+.
While the theme looks good on IE 8 we advise against it especially in the admin section of Mantra (the Mantra Settings). Older versions of IE are not supported and most likely don’t display correctly.

E2 (B2). How does Mantra look on mobile browsers?

We also tested it on a several handheld device browsers and it all looks good. We are still awaiting reports.

As of version 2.0.3 Mantra is completely responsive (if the “Mobile View” option is enabled) on all mobile browsers.

E3 (B3). What version(s) of WordPress is Mantra compatible with?

If you’re using a version of WordPress earlier than 3.3 then the last working Mantra version is 1.7.0 – download here.

If you’re using WordPress 3.3 or newer you should be fine with Mantra versions 1.7.1. to 1.9.8.

WordPress at least 3.5 is recommended for Mantra 2.0 and newer.
Mantra 2.x will also work on WordPress 3.4, but some features will be disabled or limited.

E4. How do I add another social icon in Mantra?

Extra social icons can be added or existing social icons images can be changed using a child theme.

For the purpose of the examples, lets assume you will be creating a “NewSocial” icon (Note: capitalization matters. Keep the same capitalization in all the occurrences).

0. Download the sample extra socials child theme[for Mantra v2.0.2 and older] or [for Mantra v2.0.3 and newer]

1. Find an image for you new social that fits in with the existing icons you will be using. Create a 37×37 pixels transparent PNG for it. Place that image as mantra-extrasocials/images/socials/NewSocial.png

2. Edit the provided functions.php file to define/rename your new social icon(s). Your new social icon(s) will then appear in Mantra’s administration page (Appearance > Mantra Settings) and once you enable it (them) also on the website.

3. Install the child theme via WordPress or manually upload the mantra-extrasocials folder to your wp-content/themes site’s folder. Using a child theme makes sure you will not lose your changes on theme updates. Use it as the basis for all your future customization or merge the contents of the functions.php file (and the images folder) with your existing child theme.

4. Activate the new child theme in Appearance > Themes. As you theoretically changed themes, you will need to re-assign the following things (if they were previously set): background image, header image, menu(s) association(s).

PS: If you want to add more than one custom social icon, edit the new socials array to include the extra socials array('NewSocial','NewSocial2') and so on.

PS2: You can use this child theme to only customize the social icons images, by adding all your custom images in the mantra-extrasocials/images/socials/ folder (using exactly the same name as the originals) and leaving the new socials array empty: array().

E5 (C18). Where are the menu font/colour options?

There are no options to control the menu beyond its background colour. These options will eventually show up, but until then, you’ll have to use custom CSS (entered in the Custom CSS field in Miscellaneous options) to customize the menu:

- menu items background colour:
#access ul li { background-color: #aabbcc; }

- menu items colour and font:
#access ul li a { color: #aabbcc; font-family: Helvetica }

- active menu item background colour:
#access ul li.current_page_item, #access ul li.current-menu-item { background-color: #aabbcc; }

- active menu item colour and font:
#access ul li.current_page_item a, #access ul li.current-menu-item a { color: #aabbcc; font-family: Helvetica; }

- menu item background colour on hover:
#access ul li:hover { background-color: #aabbcc; }

- menu item colour and font on hover:
#access ul li a:hover { color: #aabbcc; font-family: Helvetica; }

- sub-menu items background colour:
#access ul ul li { background-color: #aabbcc; }

- sub-menu items text colour and font:
#access ul ul a, #access ul ul ul a { color: #aabbcc; font-family: Arial; }

- sub-menu items background colour on hover:
#access ul ul li:hover, #access ul ul ul li:hover { background-color: #aabbcc; }

- sub-menu items text colour and font on hover:
#access ul ul li a:hover, #access ul ul li:hover a { color: #aabbcc; font-family: Arial; }

 

E6. Why do my (child theme) page templates display the wrong sidebars?

There is currently a limitation concerning the ability to add new page templates (either directly to Mantra or using child themes):

One can override existing page templates in child themes (using the same filename), but any differently named templates will not correctly respect the sidebar settings.

We hope to fix and improve this behaviour in the 2.0 a later release.

E7. How do I define a link for the Skype social icon? callto:// doesn’t work

If you’re trying to use the callto:// link for the Skype social icon you probably noticed already that it doesn’t work.

This is a limitation caused by WordPress’ sanitation function that we have to use for all user inputed content (see question C20 above).

We thank Tracy for finding a workaround for this limitation:

  1. Go to TinyURL.com (other common services didn’t work).
  2. Type callto:SkypeID and generate the TinyURL.
  3. Copy the http://preview.tinyurl.com/TinyURL.
  4. Paste the URL into the Skype Social Media Settings field.
  5. Save and test.

Clicking the icon opens a TinyURL preview page, which displays the full callto:SkypeID. Click Proceed to this site to launch the Skype call process. (This assumes you’ve previously enabled the option to launch it from Skype Advanced settings.)

This workaround is no longer needed starting with version 2.0.3, which allows you to type in the skype ID directly and will properly display the callto://skype_id link on the frontend.

E8. Can I use Mantra with other blogging software?

The Mantra Theme package works only on the WordPress platform.
However a Blogger version of Mantra has been created (not by us) and you’ll find it here .
We don’t offer any kind of support for it as we develop only for WordPress.

E9 (D2). Where did my presentation page went to after the update?

If after updating from a pre-1.9 version you can’t see your presentation page, go to the WordPress admin » Settings » Reading and switch the Front page displays to its default value which is Your latest posts.

This is no longer the case since 1.9.7 as the presentation page is now visible when enabled no matter the WordPress setting.
If you need some other page to show your blog posts just edit that page and choose Blog Template as page template.

Make sure your “Frontpage displays” is set to “Latest posts” under Settings > Reading.

E10 (D3). After updating from a pre-1.9.4 version my sidebar is malfunctioning

This can happen because v1.9.4 changed the page template names. You need to edit all the pages that display the issue (the sidebar being out of place) and select the “Default Template” (or whichever other template you want to use for that page) and click Update. This will reset the page template to use the new template name.

E11 (D5). Why are my featured images gone after updating to 1.9.9.7?

So you’ve updated to 1.9.9.7 and your featured images are gone and you think this is a bug. Actually, it isn’t. It’s in fact a fix of a previous bug (which, apparently, you were using to make Mantra behave in a particular way).

The bug consisted in the fact that full posts used to display both the featured image and any images inside the post – which is bad.

The new behaviour is to display featured images only in “excerpt” view, not full post view. So in case you are using the <!–more–> tag, you are actually viewing full posts, not excerpt, so your featured images will not be displayed.

To resolve this, you need to either switch to “excerpt view” (and set the desired excerpts to posts) or insert the desired (featured) image at the beginning of the posts (specifically before the “more” tag), so it gets displayed on the website.

E12 (D6). Mantra Settings page no longer works after updating to 2.0

In version 2.0 we changed the behaviour of the Settings page to no longer display anything when jQuery fails as a lot of the elements on the settings page are dependent on jQuery functioning properly (otherwise a lot of unexpected behaviour can occur). We also added functionally that relies on the jQuery UI library version included with WordPress 3.5. As such, Mantra’s 2.0 settings page will to work on older WordPress versions.

If you are using WordPress older than 3.5, please update to the latest version. If you cannot update, use Mantra 1.9.9.7.

If you are using WordPress 3.5 or newer and your settings page fails to function, you are probably seeing some interference between a plugin and WordPress’ jQuery, making Mantra’s accordion fail. If you use your browser’s web development tools you should see javascript errors. Try to figure out the plugin causing the issue.

Another way is to disable all your installed plugins (this should make the settings page functional again) and then re-enable them one by one until Mantra’s Settings page fails to work again to see which plugin is the issue.

1,101 Responses to Mantra FAQs

  1. Dana Donlon says:

    I posted a question yesterday about the menu not working correctly. It still is not I have de-activated ALL plugins.

    It is adding new pages to the menu when I do NOT have the add top level pages to menu.

    It is also putting the menu items in alphabetical order when the home page is viewed!

    They are NOT in alphabetical order in the menu settings but they are on the actual page.

    I cannot remove the pages because they do not show up on the menu settings page as being on the menu.

    This is really bizarre. I have tried adding them then taking them away, no luck. If I choose another theme then reload Mantra I will lose all the work I have done I assume.

    Site is webdesign.ufochick.com

Leave a Comment