xMag documentation

Here you find xMag documentation to help you to install, setup and use this theme. The guide provides answers and solutions to common problems and issues.

A) Installation ↑ top

Installing your theme is easy! After downloading you should have a xmag-plus.zip file.

– WordPress Method
1. Go to Appearance » Themes in the WordPress Dashboard and click on the “Add New” button
2. Click on the “Upload link”, select the xmag-plus.zip file and click “Install Now”
3. Activate the theme.

– Ftp Method
1. Log into your site via FTP
2. Browse to your folder located at wp-content/themes
3. Unzip the xmag-plus.zip folder and upload xMag Plus folder to your server
4. Log In to WordPress and go to Appearance » Themes
5. Find the theme and click to activate

B) Thumbnails ↑ top

The theme comes with it’s own thumbnails to minimize the page size and increase the page loading speed.
We suggest to regenerate your thumbnails.

  1. Install and activate the Thumbnail Regenerate plugin from here.
  2. Go to Tools -> Regen. Thumbnails and press the “Regenerate All Thumbnails” button:
  3. Wait until the regeneration process is 100% done and check your site.

C) Automatic Update ↑ top

If your theme is out of date, you will see a notice on your WordPress Dashboard. You’ll be able to update your theme using the traditional WordPress update tools.
You will get update notifications only if you have an active Theme License. Here you find Theme License Faq.

D) Manual Update ↑ top

There are a few different ways to manually update your theme. We recommend using a child theme if you are going to customize your theme files, as this simplifies updating your parent theme.

Download latest version

Signin to our website and download the latest version of your theme.
If you dont’t have an account, you can create a new one with the email that was used to purchase the theme.

Upload the new version

The easiest way to manually update your theme is to upload it via the WP dashboard.
However, if you try to upload a new version of a theme that is already in your site’s themes directory, you will get a error.
The reason is because you already have a theme folder on your server with the same name as the folder inside your ZIP file.
You can do one of the following:

1. Delete the theme on your server

  • Go to Appearance > Themes
  • Activate Twenty Fifteen (or another theme)
  • Delete the old theme (Make sure you make a backup just in case something goes wrong)
  • Upload new version via Appearance > Themes > Install Themes > Upload
  • Activate the new version

If you have done any customizations to your theme files, these customizations will be lost if you use this method.

2. Rename the folder (via FTP)

  • Login to your site via FTP or cPanel
  • Navigate to wp-content/themes/ and find your old theme
  • Rename your old theme something like “theme-old” (replacing “theme” with the name of your theme).
  • Upload your new theme folder

The old and new versions of the theme will both appear in the themes interface, but you will be able to distinguish them by their folder names and version numbers.

E) Menu ↑ top

xMag Theme supports WordPress Custom Menu. By default, the menus will fallback to Pages.
To setup a Custom Menu, go to Appearance » Menus.
Enter a name for your menu and add links to the menu by using the options on the left sidebar. Custom Menu uses a simple drag & drop interface. Then at the bottom of the menu structure you will see the menu settings, where you can assign your menu to specific locations on your website.
For more details of addings, deleting, and maintaining menus, please visit WordPress Menu User Guide.

F) Header Image ↑ top

For custom header image this theme uses WordPress Custom Header functionality.
Go to Appearance » Header, upload header image using WordPress Media Uploader or select image which is already uploaded and click on the Publish button. Suggested size is 1920 × 360 pixels.
You can also set Custom Header Image from the Theme Customizer.

G) Background Image

If you select Boxed Layout option, you can edit Background Settings.
Click on the Background Image section to upload your custom Background Image.

H) Customize ↑ top

This theme makes use of the WordPress Theme Customizer for all your theme options!
Simply go to Appearance » Customize and you’ll find all the theme options there.

Theme Customizer allows you to tweak theme’s settings and see a preview of those changes in real time.
After making changes, click the “Save & Publish” button at the top of the Theme Customizer.

1: Colors ↑ top

Click on the Colors section and set your favorite colors.

xMag documentaion - Colors

Options:
  1. Header Text Color
  2. Accent Color
  3. Header Background
  4. Footer Background

Click on the Theme Settings » Logo section.
Upload your logo by clicking on the Select Image button.
After you upload the logo image, click on Save & Publish button to save the changes.

xMag documentaion - Logo

Options:
  1. Max Height (you can set a custom value of pixels, default 30)
  2. Logo Position (Left / Center)
  3. Show Tagline under the Logo

3: Header ↑ top

Click on the Theme Settings » Header section.

xMag offers 3 different Navbar Styles:

you can choose dark style, light style or change the Main Menu background as you like.

xMag documentaion

Stick Menu

xMag has an option that can make your navigation menu stick to top of the browser when your users scroll. This ensures that your navigation menu is always accessible to the user, no matter how scrolled into the page.

Home icon

This theme supports to show the home icon in the menu. To set it up, check on the checkbox saying ‘Show the Home icon in the Main Menu’.

Other Options are:
  1. Show Search Form
  2. Show Header Image on Front Page Only

4: General ↑ top

Click on the Theme Settings » General section.

Layout Style

There are 2 layout styles to choose from: Boxed or Full Width.
If you select Boxed Layout option, you can set a Custom Background Color.

Widgets Style

You can change the Widgets appearance: grey or white style.

Read More Link

Option to show Read More Link on your Blog and Archives.

5: Blog ↑ top

Click on the Theme Settings » Blog section.
The Xmag Plus theme supports 11 different layouts for the Blog Homepage:

Options:
  1. Small Thumbnail + Sidebar
  2. Medium Thumbnail + Sidebar
  3. Large Thumbnail + Sidebar
  4. Two Columns + Sidebar
  5. Two Columns Full Width
  6. Three Columns Masonry
  7. First Large Post then List + Sidebar
  8. First Large Post then Grid + Sidebar
  9. Mixed: Large Post, List + Sidebar
  10. Mixed: Large Post, Grid + Sidebar
  11. Full Content Post + Sidebar
Excerpt lenght

You can change the excerpt lenght (default 25 words).

xMag documentation - Blog

6: Categories and Archives ↑ top

Click on the Theme Settings » Categories and Archives section.
The Xmag Plus theme supports 6 different layouts for Category, Tag, Search result, Author and Archive Pages:

Options:
  1. Small Thumbnail + Sidebar
  2. Medium Thumbnail + Sidebar
  3. Large Thumbnail + Sidebar
  4. Two Columns + Sidebar
  5. Two Columns Full Width
  6. Three Columns Masonry
Excerpt lenght

You can change the excerpt lenght (default 25 words).

xMag documentation - Archives

7: Magazine ↑ top

Click on the Theme Settings » Magazine section.

Check on “Enable Magazine Style for Homepage” to enable Magazine Layout.
At the moment xMag Plus offers four content blocks to show posts filtered by category. You can choose how many articles to display.

xMag documentation - Magazine

Click on the Theme Settings » Featured Posts section.
This section is for Featured Posts customization. If enabled, the Featured Posts will appear on the homepage. Featured Posts come from posts with a user defined tags (separated by a comma, default tag is “featured”) or sticky posts.

xMag documentation - Featured Posts

9: Single Post ↑ top

Click on the Theme Settings » Single Post section.

xMag documentation

Choose the Single Post layout as you like (sidebar or fullwidth).

Other Options:
  1. Show Featured Image
  2. Show Related Posts
  3. Show Post breadcrumb

10: Page ↑ top

Click on the Theme Settings » Page section.

xMag documentation - Page

Options:
  1. Show Featured Image
  2. Show Post breadcrumb

11: Fonts ↑ top

Click on the Theme Settings » Fonts section.

xMag documentation

Options:
  1. Headings Font
  2. Text Font
  3. Font Size (Small / Medium / Large)

Click on the Theme Settings » Footer section and edit Footer text.

xMag documentation

13: Advertisements ↑ top

Click on the Theme Settings » Advertisements section and paste your Ad code.
The theme offers three positions where you can add your Ad code: Above Post Content, Below Post Content and at the top of the Sidebar.

xMag documentation - Advertisements

14: Google Analytics ↑ top

Click on the Theme Settings » Google Analytics section and paste you Google Analytics code.

xMag documentation

15: Custom CSS ↑ top

Click on the Theme Settings » Custom CSS section.
You can enter your custom CSS. It will overwrite the main stylesheet.

xMag documentation

To setup your Social Links, go to Appearance » Menus.
Enter a name for your menu and add social links to the menu by using the option “Custom Links” on the left sidebar. You have to enter a valid URL and a label. Here the list of social icons:

  • dribbble
  • facebook
  • flickr
  • instagram
  • linkedin
  • medium
  • pinterest
  • google+
  • stumbleupon
  • tumblr
  • twitter
  • youtube

Then at the bottom of the menu structure you will see the menu settings and check “Social Menu” to assign your menu to Social Menu location on your website.
The theme will display the Social Menu at the top of the right sidebar.

J) Widgets ↑ top

This theme has 3 widget areas for Footer and 1 default Sidebar.
You can insert any widgets into each area.
To setup widgets, go to Apperance » Widgets and use the drag and drop interface to insert widgets into the desired widget areas.

As an addition to the built-in WordPress widgets, xMag Plus also has 6 custom widgets:

  1. Banner Widget
  2. Image Widget
  3. Profile Widget
  4. Recent Posts Widget
  5. Social Links Widget
  6. Video Widget

xMag documentation Widgets

1: Banner Widget

Use this Widget to add a Banner (300×250) to your Sidebar.

2: Image Widget

Image Widget allows you to show an image, with optional text and link.

3: Profile Widget

Profile Widget displays your profile: short bio, an image and Social Links.

Options:
  1. Image size (Medium or Thumbnail)
  2. Link

4: Recent Posts Widget

Recent Posts Widget allows you to show your recent posts.

Options:
  1. Filter by Category: select All Categories or filter posts by a category
  2. Number of posts to show
  3. Show excerpt: check this option to show post excerpt
  4. Show thumbnail: check this option to show thumbnail

5: Social Links Widget

Social Links Widget allows you to show social links with icons.

6: Video Widget

Video Widget allows you to show a video and a description. To embed a video enter its URL, for example:

https://www.youtube.com/watch?v=GGOksApHzeo

K) Translation ↑ top

xMag comes with POT file included under the wp-content/themes/xmag/languages folder.
(For xMag Plus Theme the slug is xmag-plus)

Method 1:
Install Loco Translate plugin: https://wordpress.org/plugins/loco-translate/
Go to Loco Translate » Themes and select xMag theme (or xMag Plus for the premium version).
Click on “New language” link, choose language and location. If you choose “Author” location (theme folder), you have to re-upload language files after updating the theme.
Add your translations and save.

Method 2:

  1. Download and install the free application Poedit
  2. Open Poedit and click on File -> New catalog from POT file in the main menu and select the POT file in your theme’s languages folder.
  3. A properties box will open up where you must enter the language name you want to translate. ( the default for English it’s en_US ; for English (UK) it’s en_GB ; for French it’s fr_FR ; for German it’s de_DE.po)
    Each language and country has a specific code you will need to use when saving translation files.
    Languages list can be found here
  4. Save your new language file, a new .mo file should be created.
  5. Upload the generated .mo and .po files into your xmag/languages folder on your live site.
  6. Go to Settings -> General in the WordPress Dashboard and select Site Language
  7. Save a backup of these files somewhere safe. If you upgrade the theme from WordPress admin, the language files will have to be re-uploaded.

L) Child Theme ↑ top

You can use it to edit and customize your own theme, without losing your customizations when you update the theme.

About child themes: Child Themes