Magazette

After you downloaded theme packages, exact theme package. The file you use to upload is a zip file named magpaper. Following these steps below to upload theme via WordPress:

Step 1. Dashboard >> Appearance >> Themes >> Add New.

Step 2. Click Upload Theme button.

Step 3. Browser magpaper.zip file in your computer and click Install Now button.

Step 4. Active Mag Paper.

Step 5. After active the theme, you will see Mag Paper notice!. Click “Install and active ThimPress Core to start now! “ to active core of Mag Paper, move to importing demo data process.

Following these steps below to upload theme via FTP:

Step 1. Login your FTP account via an FTP software to access your host web server.

Step 2. Unzip magpaper.zip file.

Step 3. Upload the exacted theme folder magpaper to wp-content/ themes folder.

Step 4. Active the theme in Dashboard >> Appearance >> Themes.

Step 5. After active the theme, you will see Mag Paper notice!. Click “Install and active ThimPress Core to start now! “ to active core of Mag Paper, move to importing demo data process.

With thim core plugin of ThimPress included in Mag theme, you can auto update theme faster and easier through an account from envato by going to Mag Paper >> Dashboard >> click “Login With Envato” to update theme.

 

This is the way to update theme by a plugin of envato. Do follow these steps to update by Envato Toolkit.

Step 1. Download Envato WordPress Toolkit here.

Step 2. Install and active the plugin in Dashboard >> Plugins >> Add new.

Step 3. Get your API keys.

Step 4. Dashboard >> Envato Toolkit >> input API keys (Marketplace Username &  Secret API Key).

Step 5. After input API keys, there will be “Themes” tab. Now you can update theme automatically.

Sometimes, you may have troubles in updating by Envato Toolkit. So another way is to update via FTP. However, this way will take more time because you have to do step by step manually.

Step 1.  Login you Envato account. In Download tab, find Mag WP and choose the Installable WordPress Theme (the WordPress file).

Step 2. Login your server, then go to wp-content/ themes folder and backup your magpaper theme folder if you want or delete it. The content in your site will not be lost but if you have modified code, the changes will be lost. You have to reapply them after updating over.

Step 3. Exact new file magpaper.zip you have already downloaded from Themeforest.

Step 4. Drag & drop new theme folder magpaper to wp-content/ theme to override the existing files.

Using Thim Core Demo Importer

Step 1 – Navigate to Dashboard > Import Demo.

Step 2 – Select a demo and click Install button.

Step 3 – Select what type of content do you want to import and click Import button.

In the event that your host will not make changes, or you cannot get the demo content to import, you can then import the individual elements manually. Continue reading below to learn how to manually import demo content.

Where To Find Demo Files

There is a “content.xml” file placed in folder name-theme/inc/data/demos, just select a demo you want then find this file for importing demo.

How To Import XML Files

Step 1 – Go to Dashboard >> Tools >> click Import.

Step 2 – On the Import page, select WordPress from the list and install the WordPress Importer Plugin.

Step 3 – Click Choose File, then choose the content.xml file from your desired demo folder. For example, if you would like to install the Demo-01, you would install the content.xml inside the Demo-01 folder.

Step 4 – Once you’ve chosen the correct file, click the Upload File and Import button.

Step 5 – Select admin in the dropdown list, and don’t forget to check the ‘Download and Import File Attachments’ checkbox.

Step 6 – Wait until WordPress is finished importing, then click the Have Fun link to return to your dashboard.

How To Import Theme Options

Go to Dashboard > Demo Importer >> Select a demo that you imported XML file and click Install button >> Select content “Theme Options” and click Import button.

How To Import Widget Data

Step 1 – Install and activate the Widgets Settings Importer/Exporter plugin developed by Voce Communications.

Step 2 – Go to Dashboard >> Tools >> Widget Settings Import.

Step 3 – Click the Select A File button, and select the widgets_data.json file from the same folder you got the XML and theme option files you’e just imported. Example: name-theme/inc/data/demos/demo-01/widget.

Step 4 – Once you’ve selected the correct file, click Show Widgets Settings.

Step 5 – Click the Select All Active Widgets button first, then click the Import Widget Settings button.

Step 6 – You will receive a success message letting you know you’ve successfully imported the widget settings.

Once installed and imported demo data, you can manage it in the Dashboard >> Contact >> click Add New to create new contact forms for different parts of your website or edit the existing ones via the Edit option in Contact Forms tab.

How To Setup Contact Forms:

1. Form: 

You can put any content of contact form and click button “Save” then a shortcode will be auto created. Just copy this shortcode into post, page, or text widget content that you want.

Demo Mag Paper theme has 3 styles contact form available for Contact Page, just click Edit option in Contact Forms tab then copy and paste below content into contact form:

Contact form 1:

<div class=”contact-form-1″><div class=”contact-form-1″><div class=”row”> <div class=”col-sm-4″>[text* your-name id:contact-name class:contact-name placeholder “Name*”]</div> <div class=”col-sm-4″>[email* your-email id:contact-email class:contact-email placeholder “Email*”]</div><div class=”col-sm-4″>[number* your-phonenumber id:contact-phonenumber class:contact-phonenumber placeholder “Phone Number*”]</div></div>
<div class=”row”> <div class=”col-sm-12″>[text* your-subject id:contact-subject class:contact-subject placeholder “Subject*”]</div></div>
<div class=”row”> <div class=”col-sm-12″>[textarea* your-message id:contact-message class:contact-message placeholder “Message*”]</div></div><div class=”sb-contact”>[submit “SUBMIT”]</div></div>

Contact Form 2:

<div class=”contact-form-2″><div class=”contact-form-2″><div class=”row”> <div class=”col-sm-6″>[text* your-name id:contact-name class:contact-name placeholder “Name*”]</div> <div class=”col-sm-6″>[email* your-email id:contact-email class:contact-email placeholder “Email*”]</div></div><div class=”row”><div class=”col-sm-6″>[number* your-phonenumber id:contact-phonenumber class:contact-phonenumber placeholder “Phone Number*”]</div><div class=”col-sm-6″>[text your-website id:your-website class:your-website placeholder “Website”]</div></div>

<div class=”row”> <div class=”col-sm-12″>[text your-subject id:contact-subject class:contact-subject placeholder “Subject”]</div></div>
<div class=”row”> <div class=”col-sm-12″>[textarea your-message id:contact-message class:contact-message placeholder “Message”]</div></div><div class=”sb-contact”><button type=”submit” class=”wpcf7-submit”>SUBMIT</button></div></div>

Contact Form 3:

<div class=”contact-page”><div class=”contact-page”><div class=”row”> <div class=”col-sm-4″>[text* contact-name id:contact-name class:contact-name placeholder “Name*”]</div> <div class=”col-sm-4″>[email* contact-email id:contact-name class:contact-name placeholder “Email*”]</div><div class=”col-sm-4″>[number* contact-phonenumber id:contact-phonenumber class:contact-phonenumber placeholder “Phone Number*”]</div></div>
<div class=”row”> <div class=”col-sm-12″>[text* contact-subject id:contact-subject class:contact-subject placeholder “Subject*”]</div></div>
<div class=”row”> <div class=”col-sm-12″>[textarea* contact-message id:contact-message class:contact-message placeholder “Message*”]</div></div><div class=”sb-contact”>[submit “SUBMIT”]</div></div>

2. Email:

The most important settings you need to define are located in the Mail tab. To learn more about setting email, you can refer document of contact form plugin. Notes that click “Save” after setting.

Setting MailChimp API:

Go to Dashboard >> MailChimp For WP >> MailChimp >> Setting your API Key then click “Save Changes“. To learn how to get API key, you can refer document of MailChimp.

Create MailChimp Form:

Go to Dashboard >> MailChimp For WP >> MailChimp >> Forms:

Demo Mag Paper theme has a style MailChimp form available, just copy and paste below content into your MailChimp form:

<input type=”email” name=”EMAIL” placeholder=”Enter your email” required>
<button type=”submit”>Subscribe</button>

Logo:

This option gives you the freedom to decide how to display the header logo on scroll. Go to Dashboard >> Appearance>> Customize >> General >> Logo.

1. Sticky Logo: Upload your logo and on your sticky logo will be loaded the header logo. If users want to change sticky logo, they can click “Remove” then “Change File” to replace sticky logo.

2. Retina Logo: This option allows you to add to your sticky menu a mobile logo.

The size of your Logo Section on Header Menu could be set with Width Logo option. Since the layout is built using Bootstrap Grid system for a responsive design, the width of your Header Menu is also divided into 12 sections. We recommend using value 2 or 3 (corresponding with 16.67% or 25%) to menu will be shown in a line. You can set logo size as you want then your site will automatically thumbnail size depending on the value of “logo width” to logo displayed balance with menu.

Site Icon:

The Site Icon is used as a browser and app icon for your site. Icons must be square, and at least 512 pixels wide and tall. It should be in one of the following formats: .ico, .png, .gif. Usually we should use .ico.

This is place to configure layout site, archive, single, normal page.

1. Site Layout: To select layout of content site. There is 2 layouts, you can select boxed or wide.

2. Page Layout: To select layout archive, single, normal page. You can choose whether or not to use the sidebar, as well as positioning it in a layout with 1 or 2 columns.

– No side bar at all

– One sidebar, located on the left

– One sidebar, located on the right

– Two sidebar, located on the right and left

1. Primary Color: Each of our theme will have one major color called “Theme primary color”. The elements of the primary color are included with: Hover Text color of buttons, hover social link icon… If you configure any color, it also will be applied similarly to these elements.

2. Select Color, Image, Pattern: This is place to select background color or background image or pattern if select main content or boxed bacground.

All typography options are located within their specific Customize panel. For example, if you’d like to customize your main menu typography settings, then you would find those options in the Dashboard >> Appearance >> Customize >> Header >> Main Menu tab. If you don’t find the typography settings for a specific feature, it may be because it’s been combined into a header typography option in Dashboard >> Appearance >> Customize >> General >> Typography.

1. Body Typography Options: To customize the Body Font, navigate to the Appearance >> Customize >> General >> Typography >> Body Typography tab where all the Body Typography options such as font family, weight, size, etc. are found.

2. H1 – H6 and Post Title Typography Options: To customize the Headers and Post Titles Font, navigate to the Appearance >> Customize >> General >> Typography >> Heading tab where all the Headers and Post Titles Typography options such as font family, weight, size, etc. are found.

3. Specific Typography Options: To customize specific typography options, such as Main Menu, Top Bar, Page Title, Sliding Bar, Sidebar, navigate to their specific panels to access their different typography options such as font family, weight, size, etc.

Typography Options Setup:

Font Family: This option allows you to select a font family to use.

Variant:  This option allows you to select a font weight and style to use.

Subset: This option allows you to select which subset to use.

Font Size: This option allows you to set the size of the text on display.

Line Height: This option allows you to set the spacing between lines.

Letter Spacing: This option allows you to set the spacing between letters.

Text Transform: This option allows you to set uppercase or lowercase.

Color: This option allows you to set the color of the text.

Extra Featured tab to allow support something such RTL language, smooth scrolling, open graph meta tags, back to top button, google theme, google theme color, preloading animation, suggestion post, trending searchs, write HTML content.

In case you want to add new CSS class to style your shop more easily, add it in this text box. This will overwrite the theme CSS, so please be careful!

The top bar is located in the top section of the header and give you the option to display the data, top menu and social icons.

Top Bar Options:

The Top Bar theme panel section contains the following options:

1. Show Top Bar: The theme comes with the Top Bar enabled by default. If you would like to disable it just go to Dashboard >> Appearance >> Customize >> Header and expand the Top Bar section. Turn off the button in the Show Top Bar section.

2. Show Top Widget Area: Click to show or hide top widget area.

3. Top bar Fonts: You can decide what font size or color of text you want to display on the top bar section. Go to Dashboard >> Appearance >> Customize >> Header and expand the Top Bar section. Select the desired font size and color from Topbar Fonts option.

4. Background Color: Choose whatever color of background color that you want.

 

 

 

Mag Paper theme is so flexible that you can choose where you want to use the menus. Theme supports custom WordPress menus, with multiple levels of drop down for the main menu. There are 2 areas of the theme where you can display a menu: the Main Menu and the Footer Menu. In this section you will learn how to create a new menu, and customize the Main Menu.

Theme comes with some general options for the Main Menu. Go to Dashboard >> Appearance >> Customize >> Header and expand Main Menu section.

Main Menu Options:

Mag Paper theme offers several theme options to customize the menu. They are located in Appearance > Customize > Header >> Main Menu tab. Users can  customize the fonts, change color and height of menu text.

How To Setup A New Menu:

Step 1 – Navigate to Appearance >> Menus section of your admin sidebar.

Step 2 – Click the Create A New Menu link to make a new menu. Enter the name then click the Create Menu button.

Step 3 – To add a menu item, select one of your created pages on the left hand side and click the Add to Menu button. You can also add all kinds of different posts from the left side.

Step 4 – To add a custom menu item, enter a custom name and link into the Links box.

Step 5 – Manage your menus by using the drag and drop functionality. To create a dropdown menu, simply drag a menu item below and slightly to the right of another menu item, and it will lock into place and create a dropdown section.

Step 6 – After setting up your menu, scroll down to the bottom of the page to assign “Primary Menu” in the Theme Locations box if you want this is “Main Menu”.

Step 7 – Once its all done, make sure you click the Save Menu button.

Here is a screenshot that shows you the various areas and descriptions of the menu section described above.

Sub Menu Options:

Mag Paper theme offers several theme options to customize the sub menu. They are located in Appearance>> Customize >> Header >> Sub Menu tab. Users can change color of background, text, text hover for sub menu.

How To Setup Sub Menu:

After following steps to Setup A New Menu, you need to learn how to setup sub menu. There are 2 ways to create sub menu:

You can drag the sub-menu item to the right until you see that the dashed outline box underneath is indented, then stop dragging:

Or simply use buttons under each menu item to move:

Once you’ve moved your sub-menu items, remember to click Save Menu.

Mag Paper theme supports to has a sticky header option. For improved usability, as the user scrolls down a page, the sticky header activates ensuring the website’s main menu is always accessible. To manage the sticky header, Mag WP theme includes several options for styling, as well as visibility options to enable or disable it on various screen sizes.

Sticky Menu Options:

Below is a list of all the available options for the Sticky Menu. These options are located in Dashboard >> Appearance >> Customize >> Header > Sticky Menu.

1. Show Sticky On Scroll: Enable/disable the sticky menu.

2. Select Style: Select style menu when scroll. If select “The same with main menu” then users do not need to configure for main menu when sticky anymore. If select “Custom” then users need to configure color for text, background, text hover for main menu.