BetterMag - News, Blog, Magazine WordPress Theme

Documentation & Usage

First of all a huge THANK YOU for purchasing our WordPress theme on ThemeForest. If you have any questions that are beyond the scope of this help file, please contact us from our ThemeForest profile contact form. You can also follow we on ThemeForest to keep track of all our theme updates and future plugins and themes. Thanks so much!

Updated: 17 Jun 2015 By: BETTERSTUDIO
Support: Help Forum Type: WordPress Theme

Need more help or guidance? Register and use our Help Center

How To Install The Theme

If you want to add theme to your WordPress installation, you can proceed in different ways:

Theme Installation via WordPress

  1. Navigate to Appearance → Themes.
  2. Click Install Themes and hit the upload button
  3. Navigate to find the better-mag.zip file on your computer and click Install Now
  4. Wait while the theme is uploaded and installed.
  5. Activate the newly installed theme. Go to Appearance → Themes and activate it.

Theme Installation via FTP

  1. Log into your hosting space via an FTP software.
  2. Unzip the better-mag.zip file and ONLY use the extracted BetterMag theme folder.
  3. Upload the extracted BetterMag theme folder into wp-content → themes folder.
  4. Activate the newly installed theme. Go to Appearance → Themes and activate it.

How To Update The Theme

You can update your theme via FTP,WordPress or automatically. See the information below for each method. No matter what method you choose, you first need to download the new theme files from ThemeForest.

How To Update Your Theme Via FTP

  1. Go to wp-content → themes location and backup your BetterMag theme folder by saving it to your computer, or you can choose to simply delete it. Your content and options will not be lost.
  2. Retrieve the better-mag.zip file from your new ThemeForest download (only theme file) and extract the file to get the better-mag theme folder.
  3. Then simply drag and drop the new BetterMag theme folder into wp-content → themes location. Choose to Replace the current one if you did not delete it.

How To Update Your Theme Via WordPress

  1. You need to deactivate the current BetterMag theme in the Appearance → Themes section by simply activating a different theme. Once you activate a different theme, you can delete the BetterMag theme. Don't worry, your content will not be lost.
  2. Retrieve the better-mag.zip file from your new ThemeForest download (only theme file) and extract the file to get the better-mag theme folder.
  3. Then simply upload the better-mag.zip file in the Appearance → Themes section. Click on the Install Themes tab at the top and choose to upload the zip file.
  4. Once it uploads, choose to activate it. You’re done!

How To Update Your Theme Automatically

To use the automatic theme updater you must enter your Themeforest username and API key into theme options. They only need to be entered one time. Once they are entered and we issue a theme update, you will receive a notification message in your WordPress admin “Updates” or “Themes” section.

Go to BetterStudio → Theme Options → Auto Updates and fill username and API key fields. Following images shows how to find them inside ThemeForest.

Migration to BetterMag

BetterMag comes with some tools that helps you in activating and configure your site to new theme quickly!

How To Regenerate/Fix My Site Images For BetterMag

If there are existing images in your WordPress, Please use theme built in images regenerate toll in BetterStudio → Rebuild Thumbnails to regenerate your thumbnails for better image quality on your site.



How To Import Demo Content

The theme comes with built in toll to import all demo contents with simply one click! fpr use it go to BetterStudio → Demo Content and click Import Demo Content button.

Create & Setup Pages

Creating pages is a simple process. However, the available templates and special layout based shortcodes might need a bit of explanation.

Visual Composer Page Builder

BetterMag comes with Visual Composer, the most advanced visual page builder for WordPress that brings creating pages with advanced structure and layouts just simply with drag & drop items, BetterMag includes 29 custom widget element for Visual Composer for creating unlimited Homepages simply.



Page Templates

In this section you choose how to view this page. The following templates are available:

  1. default: The default page has a container.
  2. Archive: This is a special template only to be used to create a Archive page as shown in the demo.
  3. Sitemap: This is a special template only to be used to create a Sitemap page as shown in the demo.

How To Create Contact Form Page

Setting up a contact page requires that you install the Contact Form 7 plugin (go to Appearance → Install Plugins if you have not already installed it).

  1. Go to Contact and edit the default contact form (Contact Form 1).
  2. Replace form content with this:

    <p>[text*  your-name placeholder "Your Name" ] </p>
    
    <p>[email* your-email placeholder "Your Email (required)"] </p>
    
    <p>[text your-subject placeholder "Subject"] </p>
    
    <p>[textarea your-message placeholder "Your Message"] </p>
    
    <p>[submit "Send Message"]</p>
    
  3. Edit the Mail settings to suit your needs and Save
  4. For more information, refer to Contact Form 7's FAQ and Docs.

Once you have created your form:

  1. Go to Contact again. Copy the code under Shortcode column.
  2. Go to Pages → Add New. Add your page content and paste the shortcode where you would like your contact form to appear.

Note You can add title before contact form like demo with inserting following shortcode before contact form shortcode:

[bm-block-title]Contact Us[/bm-block-title]

Adding Google Maps to Contact Page

  1. Go to Google Maps.
  2. Find the desired location and in the left pane, click Link icon (it's to the right side of My places button, next to print icon).
  3. Click customize and preview embedded map. Set settings as desired and the copy the HTML code.
  4. Edit your page and go to Text editor (next to Visual). Paste your code and Publish.

Extra Options to Customize and Make Pages Unique

BetterMag adds more than 40+ extra fields to customize pages and create beautiful pages without touching code!

Each page have Better Options that includes many options that are categorized in following tabs:

  1. Post: Options for changing page layout.
  2. Page Style: Options for changing page style. ex: changing background color or image.
  3. Header: Options for changing header and main navigation style and layout.
  4. Sidebar: Options for changing sidebar layout.
  5. Footer: Options for changing footer style and layout.
  6. Slider: Options for changing slider. select revolution slider or BetterMag original slider.
  7. Breadcrumb: Options for changing breadcrumb style.
  8. Custom CSS: Options for adding custom CSS and body class per pages.

How To Setup Homepage

Once you have created a page that you would like to use as your homepage, follow these steps:

  1. Go to Settings → Reading.
  2. Choose A static page option for Front page displays.
  3. Next to Front Page, select the page you created to be used as the homepage.
  4. Save Changes.

Adding & Customizng Pages

Adding a new post is the same way as default WordPress installations, however, there are extra options that might need explaining.

Extra Options to Customize and Make Posts Unique

BetterMag adds 40+ extra fields to customize posts and create beautiful posts without touching code!

Each post have Better Options that includes many options that are categorized in following tabs:

  1. Post: Options for changing page layout.
  2. Page Style: Options for changing page style. ex: changing background color or image.
  3. Header: Options for changing header and main navigation style and layout.
  4. Sidebar: Options for changing sidebar layout.
  5. Footer: Options for changing footer style and layout.
  6. Slider: Options for changing slider. select revolution slider or BetterMag original slider.
  7. Breadcrumb: Options for changing breadcrumb style.
  8. Custom CSS: Options for adding custom CSS and body class per post.

How To Create Review Post

The review system is pretty self-explanatory. You only have to enable it for posts that are supposed to contain to be a review.

  1. General: You can enable review for post inside this tab.
  2. Style: This tab contains options for changing overall review style.
  3. Verdict: This tab contains options to enter verdict and messages before and after that.
  4. Criteria: You can add your criterion inside this tab.

While the theme can function without featured images, it's highly recommended that you add a featured image to each post. This not only makes your site/blog more lively but also improves user experience.

To set the featured image, use the WordPress normal method.

If you have existing content and featured images, use theme Better Rebuild Thumbnails tools.

Image size (dimensions) will depend on what type of layout you're using throughout your WordPress installation or per individual post basis. This image will not only be used on the post, but also on the category listing pages.

  • Compatible with all layouts and default slider: 1140x530 minimum (width x height).
  • If you don't use Full Width layout: 750x350 minimum.

Note BetterMag uses WordPress's standard cropping and resizing method.

We recommended using images of double height and width to have even your content images appear sharp on high-res devices like iPad. Read more below.

How To Add Retina Images

Retina images are used for hi-definition / hight DPI screens such as iPad, Macbook Retina and so on. For these devices, you need to upload images twice the recommended dimensions above.

BetterMag, when activated, informs you to install a few plugins and one of them is WP Retina 2x. Assuming you had existing images that are large enough, you can convert them to retina images from Media → Retina, after activating the plugin.

Supported Post Formats

Post formats are used to style and display a post according to a specific content. BetterMag supports 3 Custom Post Formats other than the "Standard" post format.

These post formats can be set from the "Format" panel of your post editor. Let's see how to use post formats.

Video Format

Setup your post normally and set a featured image. Copy the embed code of the video from YouTube, Vimeo or any other site that gives you video embed codes. Paste the code in the Featured Video Code box.

Gallery Format

BetterMag will automatically convert the first gallery inserted into a post to a gallery slider - granted "gallery" post format is checked. To use the gallery post format, same as every other post, set a featured image first.

  1. Click Add Media button.
  2. Click Create Gallery. Upload images or select from Media Library. Click Create a new gallery.
  3. Click Insert gallery.
  4. (optional) If you wish to show thumbnails or create a static/non-slider gallery, set image captions and click Insert Gallery. Change post format to Standard.

Audio Format

WordPress supports embedding into posts by default. An audio player will be inserted into the post.

  1. Click Add Media button.
  2. Select your audio file. Once uploaded, make sure embed option is selected.
  3. Insert and Publish.

To create a gallery slider follow this steps:

  1. Create a new post.



  2. Click Add Media button, Click Create Gallery. Upload images or select from Media Library. Click Create a new gallery.



  3. On this page select Better Gallery Slider from Gallery Type pull down, also you can name your new gallery using the Gallery Title field and select color schema of gallery from Gallery Skin pull down, then press the Insert gallery at the bottom (right side) of the page.



  4. Click Insert gallery.

Setup Categories & Tags

Setting up categories and tags for this theme is no different than ordinary category setup in WordPress, however, we provide 50+ advanced options for customizing category.

  1. Style: This tab contains options for changing overall style.
  2. Title: This tab contains options to customize title and change title pattern.
  3. Header: Options to changing the layout and style of header and customize logo for category.
  4. Sidebar: Options to changing the layout and style sidebar.
  5. Footer: Options to changing the layout and style footer.
  6. Slider: Options for changing slider. select revolution slider or BetterMag original slider.
  7. Breadcrumb: Options for changing breadcrumb style.
  8. Custom CSS: Options for adding custom CSS and body class per category.

We added inline short description for each field and also meaningful images for options to using them in ease way

Setup Navigation & Menus

If you have imported demo content, follow (a) else follow (b) to create a new menu.

(A) Existing Menu

  1. Go to to Appearance → Menus.
  2. In the Manage Locations area, under Main Navigation, select Main Menu. Click Save.

(B) Creating a New Menu

  1. Go to to Appearance → Menus.
  2. Click on the + button or the create a new menu link. Enter a menu name and click Create Menu.
  3. Using the Custom Links and Pages boxes at the left, add items to the menu and drag/drop to arrange them.
  4. (optional) If you would like to use this menu in navigation, in the Manage Locations area, under Main Navigation, select your newly created menu. Click Save.
  5. Click Save Menu and that is all.

BetterMag ads some new fields per menu item that you can use them to bring your menus to new level!

  1. Mega Menu: Options to creating mega menu and changing the layout of that.
  2. Title: This tab contains options to customize title and change title pattern.
  3. Header: Options to changing the layout and style of header and customize logo for category.
  4. Sidebar: Options to changing the layout and style sidebar.

Mega Menus Options

  1. Mega Menu: Options to creating mega menu and changing the layout of that.
  2. Title: This tab contains options to customize title and change title pattern.
  3. Header: Options to changing the layout and style of header and customize logo for category.
  4. Sidebar: Options to changing the layout and style sidebar.

Mega Menus Types

BetterMag comes with 2 type of mega menu that re pointed below.

  1. Link Mega Menu: The first one is used to create an organized multi-column list of links. We call it the "Links" that can be in 2, 3 and 4 column.


  2. Category Mega Menu: The category mega menu is a 2 and 3 column mega menu that shows sub-categories and recent posts the mega menu box with 6 difference layout that you can select.

How To Add Mega Menu

To add mega menu to your menu item:

  1. Go to to Appearance → Menus and select your menu.
  2. Expand the item you wish to add mega menu to by clicking the arrow icon.
  3. Under Mega Menu Type, select mega menu types.
  4. Save Menu. Next configure sub-items (below).

Configure Mega Menu Items

To make mega menus work, you have one additional step of adding sub-items.

For Category Mega Menu, add a few sub-categories as sub-items (drag/drop them under a parent category in menu). Example:




Links Mega Menu is configured by adding Custom Links to be used as headings. You can use 2, 3 or 4 of these headings. Then, a 3rd-level sub-items are added which are displayed as links, under each heading. Example:

Menu Icons

You can search and select icon for each menu item in simplicity way just with "Icon" options of BetterMag.

Tip: You can hide menu text for showing only icon in menu with checking Show Just Icon? option.

Menu Badges

You can set custom badge (Label) for each item in menu and also you can customize color of background and font, For Example:

Sub Menu Background & Padding

You can change sub menu style with this group of fields.

Header & Logo Setup

By default, your site title will be used as a text-based logo. However, you can also use an image-based logo.

To be retina friendly (look high quality on devices like iPad), you will have to create two images of your logo. One the normal size and the second exactly double the height and width.

  1. Go to BetterStudio → Theme Options → Header → Logo.
  2. Under Logo Image, click Upload button.
  3. Upload your second logo (2x size) under Logo Image Retina (2x).
  4. Click Save Settings.
  1. Go to BetterStudio → Theme Options → Header → Logo.
  2. Under Logo Text, if you want the "Mag" part of BetterMag to use the theme's main color, input as follows: Better<span class="main-color">Mag</span>
  3. Save Changes.

Logo Positions

  1. Go to BetterStudio → Theme Options → Header → Logo.
  2. Under Logo Position, select logo postiton.
  3. Save Changes.

Top Bar

Top bar is the area above the header. It's enabled by default. Top Bar separated to 2 Widget area location of Top Bar - Left Column and Top Bar - Right Column. This Widget areas are useful for adding social icons, menus, search box, social counter, etc.

Disabling Top Bar

  1. Go to BetterStudio → Theme Options → Header → Top Bar.
  2. Under Enable Top Bar, click the button.
  3. Save Changes.

Adding Advertisement

BetterMag has an ad spot at the right side of the header. To use it, simply create an advertisement widget in the Aside Logo widget area. You can also use another widgets like Social Counter and Search too.

How To Config Slider

BetterMag has 2 type of slider that you can use them in header.

  1. BetterSlider: Theme original slider with many options to change timing and post filters.
  2. Revolution Slider: Revolution slider is a Premium 3rd party slider plugin used, mainly, for creating static sliders. These are the sliders where you can control each slide, images, animations, text layers and so on. To learn more, please refer to the Revolution Slider Documentation.

How To Enable Slider

BetterMag has advanced slider option with 10 difference style that you can use it for home page also you can specify slider style per page and category.

Slider at first is disabled and for enabling that go to BetterStudio → Theme Options → Slider and select one slider in Home Page Slider field.

Typography & Font Manager

Font manager inside theme is a powerful tool that you can use it for adding custom fonts inside theme and changing typography options.

How To Change Theme Typography

BetterMag have a huge bunch of options to change and customize typography in easy way.

  1. Go to BetterStudio → Theme Options → Typography


  2. We separate each section fields in this page to navigating quickly and selecting fields quicker! Expand groups and change the typographies.


How To Add/Upload Custom Font

The font manager enables you to add custom fonts simply to WordPress. Follow this steps to adding custom font to Font Manager.

  1. Go to BetterStudio → Font Manager → Custom Fonts and click the Add New Font.



  2. In opened for enter your font name upload font files.

  3. Click Save Fonts and Go to BetterStudio → Theme Options → Typography and select that font for one of that typography fields. The custom font will be at the top of Font Family field.

Plugins

BetterMag comes with 9 specific plugin that we created to them to add or remove functionality to site simply. With this plugins ou can enable only features that only you need and deactivate disable fetures you didn't!.

Plugin can be reached by the administration WordPress Theme section click the Appearance → Install Plugins. Here you will see a list of recommended and required plugins needed for correct running themes.

Plugins are continuously updated along with the update theme. Please install and activate the plugin required prior to import dummy data.

BetterWeather

This plugin adds weather widget and shortcodes to show forecasts in your site. For more on this, see the plugin on the official page: BetterWeather

Better Social Counter

This plugin adds social counter and social banner widgets to site with advanced options. This plugins supports 19+ sites currently and more will be added soon.

Better Reviews

All review options will be added to your site with activating this options.

Better Post Views

This plugin enables your site to track each post views and enables you to show it.

Better 404 Template

This plugin enables you to change your 404 page with a custom page.

Better Disqus Comments

This plugin enables you to replace overall comment mechanism with Disqus comments.

Better Facebook Comments

This plugin enables you to replace overall comment mechanism with Facebook comments.

This plugin enables you to replace overall WordPress default search with Google Custom Search.

Better Sticky Sidebar

This plugin enables you to make sidebars sticky simply with activating this plugin.

Visual Composer

This plugin is required for the correct running of themes. Please install this plugin before you import dummy data. For more on this, see the plugin on the official website: vc.wpbakery.com

Shortcodes

BetterMag supports the usage of shortcodes in Pages, Posts and Widgets. There by, giving your maximum flexibility. Please note when creating a post or a page, most of these shortcodes are accessible via the Shortcodes button in the Visual editor.

Posts Shortcodes

Post shortcodes are accessible via the GUI Shortcode Generator. Simply click the Shortcodes drop-down in the editor (make sure you're on Visual Editor) and select the relevant shortcode to be guided.

PullQuote

[pullquote]INSERT HERE[/pullquote]
Property Value & Description
align pullqoute align, Values: left and right
[pullquote align="right"]INSERT HERE[/pullquote]

Dropcap

[dropcap]INSERT HERE[/dropcap]
Property Value & Description
style Values: square, square-outline, circle, circle-outline
[dropcap style="circle-outline"]INSERT HERE[/dropcap]

Highlight

[highlight]INSERT HERE[/highlight]
Property Value & Description
style Values: yellow and red
[highlight style="red"]INSERT HERE[/highlight]

Tabs

[tabs]
[tab title="Tab 1"]Tab 1 content...[/tab]
[tab title="Tab 2"]Tab 2 content...[/tab]
[/tabs]

Columns

[columns]
[column size="1/2"]Column 1...[/column]
[column size="1/2"]Column 2...[/column]
[/columns]
Property Value & Description
size Values: 1/2, 1/3 and 1/4
[columns]
[column size="1/4"]Column 1...[/column]
[column size="1/4"]Column 2...[/column]
[column size="1/4"]Column 3...[/column]
[column size="1/4"]Column 4...[/column]
[/columns]
 

Button

[button link="#link"]Large Button[/button]
Property Value & Description
size Values: large, medium and small
[button link="#link" size="large"]Large Button[/button]
link Link of button.
[button link="http://betterstudio.com" ]Large Button[/button]

Accordions

[accordions ]
[accordion title="Accordion 1 Title" load="show"]Accordion 1 content...[/accordion]
[accordion title="Accordion 2 Title" load="hide"]Accordion 2 content...[/accordion]
[/accordions]

List

[list]
[li]List item 1...[/li]
[li]List item 2...[/li]
[li]List item 3...[/li]
[/list]
Property Value & Description
style Values: check, star, edit, folder, file, heart and asterisk
[list style="heart"]
[li]List item 1...[/li]
[li]List item 2...[/li]
[li]List item 3...[/li]
[/list]

Divider

[divider]
Property Value & Description
size Values: full, small, tiny and double-line
[divider style="double-line"]

Alerts

[alert]This is an alert message.[/alert]
Property Value & Description
type Values: success, info, warning and danger
[alert type="success"]Well done! You successfully read this important alert message.[/alert]
[alert type="info"]Heads up! This alert needs your attention, but it's not super important.[/alert]
[alert type="warning"]Warning! Better check yourself, you're not looking too good.[/alert]
[alert type="danger"]Oh snap! Change a few things up and try submitting again.[/alert]

How To Shop Setup ( WooCommerce )

BetterMag can be used with WooCommerce 2.1+ to setup an eCommerce Shop with fully compatibility offered since version 2.0.

If you do not know how to use WooCommerce, please use WooCommerce's Documentation to familiarize yourself.

How To Forum Setup ( bbPress )

BetterMag can be used with bbPress with fully compatibility offered since version 1.5.

If you do not know how to use bbPress, please use this step by step forum setup with bbPress.

Translation & Internalization

BetterMag Comes with advanced and useful panel that help you to translate theme only in minuets without using any extra tools and technical requirement! Just go to BetterStudio → Theme Translation and translate the strings to your language.

Use Theme Pre Translations

Inside theme translation panel we bring you an amazing tool that you can use pre translation of theme just with one click!

Got to BetterStudio → Theme Translation → General and select your language from Ready Translations field.

If your language translation is not inside that list please tranbslate all strings and share you translation with us with the Share The Translation with Your COMPATRIOTS tool.

RTL Version

For languages that read from right-to-left unlike English which is left-to-right, BetterMag will automatically switch to an RTL style, as long as you it's in your language and uses the correct locale (as explained above).

Child Theme

WPBeginner has a great article on How to create a WordPress Child Theme. Use Template: better-mag instead of twentyeleven.

Do not add @import url("../better-mag/style.css"); in css file for importing parent stylesheet! BetterMag adds it dynamically for better browser caching mechanism.