Contents

1. ​Updating the theme

2. Install required plugins

3. Translate the theme to another language

4. Setting up your Shop

5. Installing the theme

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

7. Adding a Featured Image to Your Post

8. Demo Import / One click demo import

9. Setting up Contact page

10. Creating a post

11. Adding social media icons

12. Translate our WordPress themes to another language

13. Set up navigation menu

14. Adding a featured image

15. Creating a post

16. Updating the theme

17. Set up navigation menu

18. Set Category Header Image

19. Adding a featured image

20. Setting up Contact page

21. Creating a page

22. Set Up Products

23. Installing the Theme

24. Creating a page

25. Adding widgets to sidebar & footer

26. Install required plugins

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

28. How do I set up my navigation menu?

29. Import the Demo Content

30. How to display my Instagram images in footer?

31. Setting up your Shop

32. Import the Demo Content

33. Theme Options

34. Homepage settings

35. Installing the theme

36. Setting up promo boxes

37. Set Up Products

38. Adding widgets to sidebar, side menu & footer

39. Translating WordPress theme to another language

1. ​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.

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 return to plugins page and at the top click on "Begin activating plugins".
Select all the plugins and set Bulk Action to Activate > click "Apply" button.


All required plugins are now installed and activated!


3. Translate the 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 Blggn.

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.

4. 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

5. 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 "wonderblog.zip".

6. 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.

7. Adding a Featured Image to Your Post

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 withing page header in a metabox on the left side titled "Page Header". You can choose between Standard, Large, Fullwidth, Fullscreen styles.

8. Demo Import / One click demo import

Wonderblog theme comes with "One Click Demo Import" feature which allows you to import all the demo posts, pages, images, theme settings, etc. This is the easiest way to setup your theme and it will allows 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.

Click the blue button "Import Demo Data" and the import process will start. 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.

9. 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.

10. Creating a post

Theme has the possibility to create 4 different types of posts: standard, gallery, 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.

Above your content box & toolbar, you'll see a series of tabs titled Standard, 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 Post

A standard 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-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.

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.

11. Adding social media icons

Navigate to Appearance > Customize > Social Media Settings.
Here, you will see a list of social networks followed by a text input box.

Type in your username for that particular network (do not insert your profile's full URL into the box unless prompted to do so).

When you enter your username within Social Media Settings, the icon of that media will appear in the header top bar and will automatically link to the URL.

To add the social icon widget to your sidebar or footer area, you can do so within WP Dashboard > Appearance > Widgets

12. Translate our WordPress themes 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 Wonderblog.

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. 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.

14. 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, even if you don't want the featured image to display at the top of your post, you should still assign a featured image. Once that's done, you can hide the featured image from the top of your post by navigating to Appearance > Customize > Post Settings > And checking the box next to "Hide Post Featured Image".

15. 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.

16. 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.

Important!
By default, WordPress should save your content to your database. This is why your content appears on whatever theme you have activated within your WP Dashboard. However, it's always a good idea to create a database backup before deleting a theme, just in case.

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 Custom 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. Remember! It's important to install the theme's ZIP file, and not the entire theme package. Otherwise you will receive an error message.

17. 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.

Be sure to check the box to set the menu as "Primary menu"
Click the "Save Menu" button.

18. Set Category Header Image

Within your WP dashboard navigate to Posts > Categories.

On this page you can create new or edit existing category. Once you are on "Edit Category" page, you'll find options to add image at the bottom of the page with additional options to control the category header style, title,  layout of the page and to show/hide list of all categories.


19. 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.

20. 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 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:

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

- 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.

A 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.

21. 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 between a number of page layouts via the drop-down menu on the right titled "Template":

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.

22. 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

23. 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 "bloggin.zip".

24. 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.

25. Adding widgets to sidebar & footer

To add, remove, or edit your sidebar & footer widgets, navigate to Appearance > Widgets.
On the left, you will see a list of the available widgets to choose from.
On the right, you will see a few different widget areas in the theme.

To add a widget to your sidebar, simply drag & drop a widget on the left into the widget area titled "Sidebar".

Once you've dropped a widget into the Sidebar widget area, click on its heading. A drop-down will appear and you can make any necessary adjustments to the widget's settings. From this widget setting drop-down, you can also delete the widget.

To position widgets within the sidebar, drag and drop them above or below each other.

Setting up your Newsletter widget

Theme comes with custom CSS stylings for the "MailChimp for WordPress" plugin. This plugin allows you to insert a newsletter sign-up form in your sidebar & footer area.

When a visitor adds their email via the form, it is saved to your chosen MailChimp mailing list. When you're ready, you can use MailChimp's easy interface to create and send personalized newsletters to your hoards of fans!

If you would like to apply the same stylings to your newsletter form as seen on theme demo site, you can follow the steps below.

1. First, Install and Activate the "MailChimp for WordPress" plugin.

2. Once the plugin is activated, navigate to WordPress Dashboard > MailChimp for WP.
Here, you can copy and paste in your unique MailChimp API Key which will connect your newsletter form to your MailChimp mailing list.

If you don't have a MailChimp API Key yet, you can sign up for a MailChimp account at MailChimp's website.

3. Next, navigate to WordPress Dashboard > MailChimp for WP > Forms.

4. We will want to replace the form HTML code with the following code instead in order to have 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="wonderblog-subscribe-form">
    <input type="email" class="email-input" name="EMAIL" placeholder="Your email address" required />
    <input type="submit" value="Subscribe" class="btn" />
</div>

To add your newsletter sign-up form to your site, you can navigate to WordPress Dashboard > Appearance > Widgets and add the "MailChimp Sign-up Form" widget to your Sidebar or Footer widget area on the right side of the screen.

Setting up your Instagram widget

The footer has a widget area titled "Footer Instagram" where you can add in a widget to display your Instagram images in a full-width section.  The widget is simply called "Instagram" and is made available after installing & activating the required theme plugins ( the instagram plugin is called WP Instagram Widget ).

To add the Instagram widget, navigate to WP Dashboard > Appearance > Widgets.  On the right, you'll see the theme's different widget areas. One of which is the widget area titled "Footer Instagram".

Drag the "Instagram" widget from the left of this screen into the "Footer Instagram" widget area. To edit the widget's settings, click on the widget's heading once it's been placed in a widget area. A drop-down area will appear.

Please ensure that your Instagram account on Instagram website is set to "Public" and not "Private".

26. 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.

27. 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 WP will crop & re-size 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.

28. How do I set up my navigation menu?

How do I set up my navigation 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 (see screenshot above). 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.




Adding a "Home" link to your menu

To add a link to your navigation menu that will direct users back to your homepage, select the "Link" drop-down menu. Enter your homepage's URL into the appropriate box and then give it a title, such as "Home". Click "Add to Menu" and drag and drop the menu item to where you'd like it to be placed.



Adding a Category page to your menu

Once you've created a post category (within a post's create/edit screen) and assigned it to at least one post, when you look within Appearance > Menus > Categories, you will see this category listed. Check the box next to your desired category and select "Add to Menu". WordPress will automatically generate a page and pull in all posts that have this particular category assigned to it.



Creating an empty parent menu item  

 In some situations, it's preferable to have a "parent" menu item which, when clicked, leads nowhere. Nested beneath the item, there may be a variety of related "child" menu items. 

For example, a parent menu item titled "Categories" which is not hyperlinked, and child menu items of your various category options. 

To create a menu item that doesn't link anywhere, you can navigate to WP Dashboard > Appearance > Menus. Select the drop-down on the left titled "Custom Links". 

For its "URL" field, you can simply use a hashtag # ) character.  For its "Link Text" field, you can enter whatever you'd like the menu item to be named.  When finished, click "Add to Menu".  

Next, nest your other regular menu items beneath this un-hyperlinked parent item.  Save changes when finished.



Sub Menus

Once you've populated your menu with items, you can create sub-menus by dragging and dropping the items "within" other menu items. When you drag one item beneath the "parent" menu item, it will indent a bit to the right. This indicates that the "child" menu item is now nested beneath the "parent" menu item. 



Editing Menu Items

If you wish to edit or remove a menu item, click the little arrow on the right-side of the menu item name. A selection of options will drop down, including editing the navigation label as well as removing the item altogether.




Additional Menu Item Features

For additional menu features, click on the "Screen Options" tab in the top-right corner of the Menu page.  Here, you can add the option of linking directly to a Post or specific Tag within your navigation menu. You can also check the box next to "Link Target" to give yourself the option of having menu items open in an entirely new tab when clicked.



For more information on menus in WordPress, check out:

http://codex.wordpress.org/WordPress_Menu_User_Guide


29. Import the Demo Content

Log in to your WordPress dashboard and make sure you have activated your new theme before proceeding.

Within your WordPress Dashboard, navigate to Tools > Import, then choose “WordPress” from the list.
Click the "Choose File" button, then within theme package open "Demo Content" folder and select theme.xml file > click "Upload file and Import" button.

You will be asked to map the authors in this export file to users on the blog. For each author, you may choose to map to an existing user on the blog or to create a new user.

You will then have the choice to import attachments, so click on the “Download and import file attachments” box.
Please be patient while WordPress imports all the content.

This will import the demo site's images, posts, pages, etc. Please note that while the XML file can import the demo site's content, it cannot import the Customizer settings. You will then need to select your homepage layout, preferred colors, enable/disable sidebar, etc. within the theme's Customizer section.

30. How to display my Instagram images in footer?

To display your Instagram images in footer please make sure you have installed & activated the WP Instagram Widget plugin in your Dashboard > Plugins.

Within your WP dashboard navigate to Appearance > Customize > Footer Settings > Instagram.
In "Instagram Username" field type in your username and click on "Publish" at the top to save the settings.


31. 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 Continue to 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

32. Import the Demo Content

The 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.

33. Theme Options

Theme Options

After installing the theme & all theme required plugins, navigate to Appearance > Customize.

Here you'll have access to all the theme's configuration settings. Each setting is commented and very straight-forward and should be easy to understand and configure.

Theme supports live preview of all customizations, so you may preview any changes before saving them.




Colors

There're numerous color controls in theme options. All colors can be configured in Appearance > Customizer >  Colors Settings

Use the unlimited color picker by clicking and dragging your cursor inside the picker area to highlight a color on the right. You can also input Hex or RGB values to search for a particular color in the field above the color swatch.




Typography

All typography settings can be found in Appearance > Customizer > Typography Settings.

Note: Even though you may individually setup each typography element, please make sure you use max two font families in order to keep your website loading fast.




Layout

General layout settings can be found in Appearance > Customize > General > Layout Settings. The section includes global settings for Page, Post & Archive Layout.

All global layout are listed here but there are also many options located in your page metaboxes available on every edit page screen which are configured on a per-page basis. Layouts also can be customized on per-page basic through page builder.




Posts & Pages

In Appearance > Customize > Posts Settings or Page Settings tabs you may control individual Page Layout settings.

Addional blocks, like Post Author, Post Tags, Comments, Post Pagination, Related posts, Share icons etc can be control from here.




Page Header

Theme supports several types of Page Header which can be control in Appearance > Customize > Page Settings and also on per-page basic. For posts and pages, open any post or page in WordPress editor and scroll to bottom. For Categories navigate to Dashboard > Posts > Category > scroll to bottom.


34. Homepage settings

Your homepage is the first page visitors will see when they arrive at your website. By default, the homepage will be the page that also displays all of your posts, beginning with the most recent.

To customize how your homepage looks, including its layout, colors, enabling/disabling the sidebar, etc., navigate to WordPress Dashboard > Appearance > Customize

Under the various drop-down tabs on the left of this screen, you'll find loads of ways to customize your homepage & website in general. For example, within the "General Settings" tab, you can choose your homepage's post layout and enable/disable the sidebar.

Be sure to explore the various options within this Customizer section. The live preview on the right will show you a preview of how each adjustment will visually affect your site.

35. 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”.


36. Setting up promo boxes

The 3 boxes below the featured area slider on theme's demo site are called Promo Boxes. These boxes allow you to draw special attention to any post, page, or general URL you'd like.

To set up your promo boxes, navigate to Appearance > Customize > Promo Boxes Settings.

Here, you can enable/disable the promo boxes and input your various promo box preferences.

For each of the 3 promo boxes, you have the option to enter a title & subtitle, select an image, and input the URL you'd like that specific promo box to link to.

37. 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

38. Adding widgets to sidebar, side menu & footer

To add, remove, or edit your sidebar, side menu & footer widgets, navigate to Appearance > Widgets.
On the left, you will see a list of the available widgets to choose from. On the right, you will see a few different widget areas in the theme.

To add a widget to your sidebar, simply drag & drop a widget on the left into the widget area titled "Sidebar". Once you've dropped a widget into the Sidebar widget area, click on its heading. A drop-down will appear and you can make any necessary adjustments to the widget's settings. From this widget setting drop-down, you can also delete the widget.

To position widgets within the sidebar, drag and drop them above or below each other.

39. 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.