WunderMag | Multi-Purpose Blog / Magazine WordPress Theme

Contents

1. Installing the theme

2. Install required plugins

3. Import the Demo Content

4. Set up navigation menu

5. Creating a post

6. Creating a page

7. Setting up Contact page

8. Adding a featured image

9. What is the best image size for the blog?

10. Setting up your Shop

11. Set Up Products

12. Translating WordPress theme to another language

13. ​Updating the theme

1. Installing the theme

When you purchase a theme license & download the theme, you will receive a zip file. To unzip the file on Windows right click > and choose unzip / on Mac simply double click.

Open the unzipped folder and you will find a number of folders such as Demo Content, Documentation, Licensing and one zip file which is your theme. It is important that theme zip file remain zipped.

Within your WordPress Dashboard, navigate to Appearance > Themes.
Click the “Add New” button at the top-left of the page > Click the “Upload Theme” button at the top.
Click “Choose File” > then find your theme zip file > Click the “Install Now” button.

Once the theme is successfully installed on your WordPress, you can “Activate” it via the installation page or via Appearance > Themes to switch over and begin using your new theme!

Please note: If you try installing the entire zipped theme package or another incorrect file, you’ll likely receive this error message: “The package could not be installed. The theme is missing the style.css stylesheet. Theme install failed.” If you receive this error message, please be sure that you’re installing the ZIPPED file titled “wundermag.zip”.


2. Install required plugins

Within your WordPress Dashboard, navigate to Plugins tab. Click at “Begin installing plugins” notice at the top. Select all plugins and set Bulk Action to Install > click “Apply” button. The installation process will start and this process may take a while on some hosts, so please be patient.

After installation process all required plugins will be automatically activated.

3. Import the Demo Content

WunderMag theme comes with "One Click Demo Import" feature and importing demo data (post, pages, images, theme settings, ...) is the easiest way to setup your theme. It will allow you to quickly edit everything instead of creating content from scratch.

After you install all the required plugins you can navigate to Appearance > Import Demo Data.

Choose your desired layout and click the button "Import". The import process will start and this process may take a while on some hosts, so please be patient.

Once the import is done, the success notice will appear in the center of your screen.


Note: The Demo Importer works best to import on a new fresh install of WordPress. If you're not using a fresh install, make sure you backup your current theme options as they will be overwritten.

4. Set up navigation menu

Navigate to WordPress Dashboard > Appearance > Menus 

From the drop-downs on the left, choose the content to add to your menu.

Adding Pages, Categories, etc. to your menu

On the left side of this screen are a number of drop-down boxes titled “Pages”, “Links” and “Categories”. Each heading will list available items you can add to your menu.

For example, to add a Page to your menu, please ensure you’ve first created the desired page (within WP Dashboard > Pages > Add New). Click the “Pages” drop-down heading. The pages you’ve created will be listed below. Check the box next to the page you’d like to add to your menu and click “Add to menu”. The selected item should now appear under “Menu Structure” column. Here, you can drag and drop the item you’ve added to adjust its location in the menu. You can also create sub-menus by dragging and dropping a menu item underneath another so that it’s indented.

When you finish creating your menu be sure to check the box to set the menu as “Primary menu” & "Side Menu"

Click the “Save Menu” button.

5. Creating a post

Theme has the possibility to create 5 different types of posts: standard, gallery: slider / justified, video, and audio. In order to activate these post options, you’ll first want to ensure you’ve installed & activated the required theme plugins.

To create a new post, go to WordPress Dashboard > Posts > Add New.

On the right side of your content box, you’ll see a series of tabs titled Standard, Image, Gallery, Video, and Audio. Select whichever tab you’d like your post format to be in. Each tab will give you different input boxes depending on the content you’d like to add.

Standard & Image Post

A standard / Image post is the default post type. You can add text and images to your post using the tools and content box.

Gallery Post

A gallery post allows you to create a slideshow or justified type gallery at the top of your post. After clicking the “Gallery” tab to choose this post format option, click the “Pick Images” button within the “Gallery Images” box that has appeared. Select whatever images you’d like from your WordPress Media Library.

When you set gallery post type, new tab will appear on the right side of your editor (near the bottom) called Gallery Type with which you can choose Slider (default) or Justified gallery type.

Video Post

A video post displays a video at the top of your post. You can share videos from nearly all video hosting sites, such as Vimeo or Youtube. Simply copy & paste the video’s URL or iframe code. When you preview or publish your post, the video will appear.

Audio Post

An audio post allows you to share a music or audio track and displays it at the top of the post. Like the video post, simply copy & paste the track’s URL, iframe code. When you preview or publish the post, the track will appear.

Assign a category & featured image

Once you’ve determined your desired post format, entered your title, and added your content, remember to assign at least 1 category to your post. Additionally, also ensure you assign a featured image to the post in the bottom right corner.

6. Creating a page

A standard, static page is similar to creating a post, and is ideal for creating an About or Contact page for your website.

To create a new page, navigate to WP Dashboard > Pages > Add New. Like a post, you can enter a page title & add content.

Additionally, you have the option of choosing to add Featured Image (bottom right corner) and above to set the Featured Image Option style to be Standard, Fullwidth or Large.

Also if you want page title to be hidden check "Hide Page Title" option on the right side of your page content box.

Once you’ve published your new page, it will not automatically appear in your main menu. For a tutorial on adding items to your main menu, please see: Set up navigation menu.

7. Setting up Contact page

First, please be sure that you have installed and activated the Contact Form 7 plugin.

– Within your WordPress Dashboard, navigate to Contact > Add New – We will want to replace the form HTML code with the following code instead in order to have the same looking form as on a demo site. You can simply delete the code within the text box and replace it with the following instead:

<div class="left">[text* your-name placeholder "Your Name"]</div>
<div class="right">[email* your-email placeholder "Email Address"]</div>
[text your-subject placeholder "Subject"]
[textarea your-message placeholder "Your Message"]
[submit "Send Message"]

– Along the top of the contact form’s settings box, there are 4 tabs: Form, Mail, Messages, and Additional Settings. Go to “Mail” tab: set up where messages to be sent and how to be displayed. On “Messages” tab: Adjust default messages visitors will receive in various situations.

IMPORTANT!  Please be sure to navigate to the “Mail” tab and insert your own email address within the “To:” form. 

Once finished setting up your form, click the “Save” button.

short code will be generated at the top of the page, highlighted in blue. Copy this code as we will then paste it into a WordPress page.

Navigate to Pages > All Pages > find Contact page and click edit, replace short code with the one from your new form.

8. Adding a featured image

A Featured Image is a representative picture for your post which is used in a number of areas & functions, like on the homepage, post page, related post areas, recent post widgets, featured area sliders, etc.. so assigning a featured image to your posts is very important.

To assign a Featured Image to a post, navigate to your post’s create/edit screen and look to the bottom-right. Here, you’ll see a box titled “Featured Image” where you can add your desired image. Be sure to update your post when you’re finished.

Additionally, you can set style for your Featured Image in a tab box above titled "Featured Media Options". You can choose between Standard, Large and Fullwidth.

9. What is the best image size for the blog?

The recommended image size is 1080px by 700px – width/height.

You’re very welcome to use images that are larger than noted above, as WordPress will crop & resize the images to fit their respective containers nicely.

Please note that using very large images where it is not necessary can affect your site’s loading speed and may even cause image uploading errors.

10. Setting up your Shop

When you first install the theme, the shop options and pages won’t be visible. This is because the shop features will be activated once you install and activated the free WooCommerce plugin.

Below is a general overview of how to setup your shop. You can also take a look at WooCommerce’s extensive documentation & tutorial articles if you need more in-depth explanation.

Install the WooCommerce plugin

First install the WooCommerce plugin by navigating to WP Dashboard > Plugins > “Add New” button in the top-left.

Search the WordPress Plugin Directory for the term “WooCommerce“.

“Install” the WooCommerce plugin. Navigate to WP Dashboard > Plugins > and click the “Activate” button next to the WooCommerce plugin.

WooCommerce Onboarding Wizard

Once WooCommerce is activated, the WooCommerce Onboarding Wizard can help you set up your shop.

Select Let’s Go! to get started.

Page Setup

The wizard first helps to set up pages needed for an e-commerce store, such as the shop page, cart page and checkout. Select Continueto automatically install pages.

Store Locale

Next is your store’s location, currency and dimensional units for shipping calculations (cm, inches).

WooCommerce automatically detects your location using the IP and selects the country, currency and units. Confirm that the data is correct, and then select Continue.

Shipping & Tax

Shipping and Taxes can be enabled for your store, if needed.

If you enable taxes, further options will appear. Choose how to enter prices, with/without tax, and check the list of taxes WooCommerce will create for you (can change later). Consult a tax professional to ensure rates are correct.

Select Continue when you’re satisfied.

Payments

Finally, how you want to be paid.

Ready!

The wizard is complete, and now you’re ready to start selling. The only remaining action is to add your products. Select the big Create your first product! button.

Or you can click through to access our setup guides and educational resources.

Rerun wizard

If you’ve skipped the wizard when you installed WooCommerce, you can run the wizard again. Go to: Help > Setup Wizard and select Setup Wizard.

help-setupwizard

11. Set Up Products

Adding a product

Before adding your first product, let’s get familiar with how product categories, tags, and attributes work.

Product Categories

Product categories and tags work in much the same way as normal categories and tags you have when writing posts in WordPress. They can be created, edited, and selected at any time. This can be done when you first create a product or come back and edit it or the category/tag specifically.

Attributes

These can be added per product, or you can set up global attributes for the entire store to use (e.g., in layered navigation).

To learn more, see: Managing Product Categories, Tags and Attributes

Product Types

With attributes and categories set up and stock management configured, we can begin adding products. When adding a product, the first thing to decide is what type of product it is.

Adding a simple product

Adding a Simple product is similar to writing a post in WordPress.

  1. Go to WooCommerce > Products > Add Product. You then have a familiar interface and should immediately feel at home.
  2. Enter a product Title and Description.
WooCommerce Add Product - Familiar Interface
A familiar interface for adding product information
  1. Go to the Product Data panel, and select downloadable (digital) or virtual (service) if applicable. Note: Virtual products don’t require shipping — an order with virtual products won’t calculate shipping costs.

Product data

The Product Data meta box is where the majority of important data is added for your products.

WooCommerce Simple Product - General Tab
Product data is added in this panel

General section

Inventory section

The inventory section allows you to manage stock for the product individually and define whether to allow back orders and more. If stock management is disabled from the settings page, only the ‘Manage stock?’ option is visible.

WooCommerce Simple Product - Inventory Tab

Ticking the Sold Individually checkbox limits the product to one per order.

Shipping section

Linked Products section

Using up-sells and cross-sells, you can cross promote your products. They can be added by searching for a particular product and selecting the product from the dropdown list:

WooCommerce Simple Product - Linked Products Tab

After adding, they are listed in the input field:

WooCommerce Simple Product - Linked Product Added

Up-sells are displayed on the product details page. These are products that you may wish to encourage users to upgrade, based on the product they are currently viewing. For example, if the user is viewing the coffee product listing page, you may want to display tea kettles on that same page as an up-sell.

WooCommerce Product Up-Sells

Cross-sells are products that are displayed with the cart and related to the user’s cart contents. As an example, if the user adds a Nintendo DS to their cart, you may want to suggest they purchase a spare stylus when they arrive at the cart page.

Grouping – Used to make a product part of a grouped product. More info below at: Grouped Products.

Attributes section

On the Attributes tab, you can assign details to a product. You will see a select box containing global attribute sets you created (e.g., platform). More at: Managing Product Categories, Tags and Attributes.

Once you have chosen an attribute from the select box, click add and apply the terms attached to that attribute (e.g., Nintendo DS) to the product. You can hide the attribute on the frontend by leaving the Visible checkbox unticked.

Custom attributes can also be applied by choosing Custom product attribute from the select box. These are added at the product level and won’t be available in layered navigation or other products.

Advanced section

Excerpt

Add a short product description. This typically appears next to product imagery on the listing page, and the long description appears in the Product Description tab.

Taxonomies

On the right-hand side of the Add New Product panel, there are product categories in which you can place your product, similar to a standard WordPress post. You can also assign product tags in the same way.

WooCommerce Product Categories and Tags

Product images

You can add a main image and a gallery of images. More at: Adding product image and galleries.

Setting catalog visibility and feature status

In the Publish panel, you can set catalog visibility for your product.

WooCommerce Product Visibility Options

Deleting a product

delete-product-woocommerce

To delete a product:

  1. Go to: WooCommerce > Products.
  2. Find the product you wish to delete.
  3. Hover in the area under the Product name and click Trash.

You can find more documentation on setting up your products here: Set Up Products

12. Translating WordPress theme to another language

1. Add Loco Translate plugin

There are several translations plugins out there but we think Loco Translate is the easiest to work with . Loco Translate has been around for several years and is a favorite among developers and translators in the WordPress community. It’s also free to use, which eliminates a major barrier to entry for first-time translators.

To install Loco Translate plugin navigate to Dashboard > Plugins > Add New. Then search for Loco translate on the right side search bar.  Click and Install the plugin. Once Loco Translate is installed you can activate it.

2. Create Your Language

Navigate to Dashboard > Loco Translate > Themes. Click on WunderMag.

Select "New Language". From the WordPress language dropdown, select language you want theme to be translated into.

Click "Start Translating" button.

3. Translate some strings

Once on the editor screen you'll see all the strings the theme has defined in its template file. Untranslated strings are shown in bold blue. To start with they will all be untranslated.

The basics of the editor should be fairly intuitive. Select the English string at the top and enter your translation in the pane at the bottom. You can ignore most of the editor buttons for now. We're just going to enter a translation and save it.

img

For our example we've picked out the phrase "Leave a comment". Using the text filter at the top of the editor we can find this phrase quickly and select it in the list. Then we enter the text "Σχολιάστε" into the bottom pane as our translation.

The string at the top now shows a star icon to indicate that our changes are not yet saved.

Continue to translate as much as you like and when you're ready click the Save icon in the editor toolbar. 

4. Switch your WordPress to your language

Head to the Settings > General admin screen and scroll to the bottom. You should see a dropdown list with the label "Site Language". Changing this will set a new default language for all site visitors. Try it and you should see something like this:

img

Continuing the theme of our example, we're going to set the language to Greek, listed under "Available > Ελληνικά" in the list. Once WordPress has downloaded the core language packs for Greek this entry will move to the "Installed" section.

If you don't see your language in the dropdown list you may have to install the core language packs manually.

Congratulations, you've just made your first WordPress translation.


13. ​Updating the theme

Updating your theme to the latest version is sometimes necessary in order to apply bug fixes to your theme or even add additional features that may be available.

Please read through the following instructions carefully.

PLEASE NOTE: If you’ve modified any of the theme files yourself, you’ll need to note these changes prior to updating in order to re-implement them once you’ve installed the latest version of the theme. The update will replace your previous version’s theme files with new ones.

Any Custom CSS additions placed within your Additional CSS box should remain safe and sound.

Downloading the new theme version:

Simply log into your ThemeForest account you used to initially purchase the theme. Inside, navigate to your “Downloads” page and find the theme in the list. Re-download the theme you’d like to update.

Installing the new theme version:

  1. Navigate to WP Dashboard > Appearance > Themes. You’ll need to “Activate” another theme. It can be any theme at all aside from the theme you’re updating. *WordPress will not allow you to delete a theme that is currently activated.*
  2. Once you’ve activated another theme, click on the theme you’d like to update. In the bottom right corner is a little option to Delete the theme. Go ahead and delete it.
  3. Once the theme is deleted, you can now re-install the newest version of the theme. Appearance > Themes > Add New > Upload Theme > Select the theme’s ZIP file > Install Now
  4. Remember! It’s important to install the theme’s ZIP file, and not the entire theme package. Otherwise you will receive an error message.