Theme Requirements

To use this theme you must be running WordPress 5.0 or higher, PHP 5.6.20 or higher (for WooCommerce plug-in PHP 7.0+). If you use hosting with limited resources (for example GoDaddy and other lowcost shared hosting providers), you may experience issues with one-click demo data installation feature.

We recommend you to contact your web hosting service provider to make sure that your server PHP configuration limits are as follows:

• max_execution_time 600
• memory_limit (up to) 256M
• post_max_size 32M
• upload_max_filesize 32M

If you are running unmanaged dedicated server or VPS, you should check your php.ini file. Alternatively, you can edit .htaccess file in the root of your website and add the following values:

php_value max_execution_time 600
php_value memory_limit 256M
php_value post_max_size 32M
php_value upload_max_filesize 32M

Setting these values will ensure you will not get error messages during the installation. To safeguard your website, please use secure passwords and the latest version of WordPress and plugins.

IMPORTANT! To avoid any errors that might come up during the installation we recommend to have memory limit set up to 512M.

Here is the list of other recommended web hosting services:

• Bluehost (Exclusive Offer for our Customers: -70% OFF)
• SiteGround
• InMotion Hosting

Theme Installation

Unpacking the theme

Before installing the theme, please make sure you unpacked the archive and extracted theme files. After unzipping the archive, you will see the following files:

If you try to install the wrong files, you will get missing style.css file error. This is the most common error that means you are trying to install an incorrect package.

To install "Melania" theme, you must have WordPress installed. For information regarding WordPress platform installation, please check the WordPress Codex or check this great video tutorial.

Update WordPress: To ensure a positive user experience, we highly recommend updating your WordPress to the latest stable version. This will help utilizing all of the latest features of WordPress.

If you have questions regarding theme installation, we recommend reading a detailed instruction below.

You can install the theme in two ways:

• via FTP:
  1. Log into your web server with FTP client software.
  2. Unzip melania.zip file and ONLY use the extracted /melania theme folder.
  3. Upload the extracted /melania theme folder into /wp-content/themes folder.
  4. Activate the newly installed theme. Go to Appearance > Themes and activate it.
• via WordPress:
  1. Login to admin panel.
  2. Go to Appearance - Themes and click on the Add New button.
  3. Choose Upload theme option. Click on Browse... (Choose file in Safari/Chrome), select "melania.zip" and click Install Now button.
  4. After the successful installation, click on Activate or go to Appearance - Themes and click on Activate to activate the newly installed theme.
  5. After the theme is activated, you will be prompted to install recommended plugins: Contact Form 7, Elegro Payment, MailChimp for WP, Themerex Socials, Themerex Updater, WPBakery PageBuilder and WooCommerce.
     
     
     
     All these plugins are included into the theme archive, or can be installed from the WordPress.org repository.
     The theme can function without any of these plugins. But if you want your website look precisely as the demo page, you have to install all recommended plugins and import demo content. This is a good idea if you are building your website from scratch.
     However, if you have an existing website, you should be very careful with plugin installation and importing demo data: this may affect the website content and structure. Please read the Demo Content article for details.
  6. Attention! If you want to make changes in theme’s templates or functions, we recommend activating a child theme before demo data installation. Please see the Child Theme section for more information.

Plugins Installation

In order to make the theme look exactly as the demo page, you need to install recommended plugins. Click on Begin installing plugins link.

You will be redirected to plugins installation page. Check all listed plugins, select Install option and click on Apply button. Installation may take a few minutes, please be patient and do not refresh the page.

After the installation you will get a notification informing that plugins were installed successfully.

Attention! Our theme is compatible with Cookie Information plug-in (formerly WP GDPR Compliance), though it is not included into the theme's package.

Gutenberg Compatibility

Our theme is compatible with Gutenberg page builder. You can create new pages using this editor.

All existing demo pages are built using WPBakery Page Builder and should be customized using WPBakery Page Builder ONLY.

IMPORTANT: It is possible to switch between the page builders. Please use One page builder for creating/customizing One particular page/post.

Child Theme

Child theme is for developers willing to make changes to core functions and code. If you are not planning to dig that deep, you can just skip this chapter.

IMPORTANT: If you want to make changes in theme templates or functions, we recommend that you install the child theme and apply changes there. To learn more about the purpose and basis of creation of child theme, please visit WordPress Codex.

In the theme package you will see materials for the child theme. It’s located in "melania-child.zip" archive. You can install the child theme just like you installed the main theme (see above, in the section "Installation").

A few recommendations on how to use a Child Theme from ThemeREX:

• Almost all files from the main theme can be replaced in a child theme. It doesn’t concern only .php-files with templates and basic logic, but also both .js, .css files from respective folders and files with images, icons etc.
• If you want to change some of the theme-related functions or to add new ones, copy/add all the required functions into 'functions.php' in the "melania-child" folder. If our theme contains functions with such names, they will be replaced with yours, if not – your functions will complete our theme logics.
  IMPORTANT: If you want to replace some functions from other files (except functions.php), e.g. from _wp_utils.php or _utils.php, we do not recommend you to copy respective files into the child theme, but you should create the respective functions in functions.php in the child theme. This should be done, so that when updating the theme, new functions from these files are available for use.
  As for other files - put out the templates from the folder 'templates', images from the folder 'images' etc. - to make changes copy theme into the folder 'child theme' and make changes there.

Demo Content

Our themes have simple One click demo data import tool. It's very easy to use and you can get a precise copy of our demo website in just 1 click.

Before installing demo data, please make sure you have installed all the required plugins, please refer to Plugins installation section of this document for details.

To import demo content into a WordPress site, please follow these steps:

1. Log in to your site as an administrator.
2. If you see a message prompting to install required ThemeREX Utilities plugin, click on "Begin installing plugins" and install it on the corresponding page.
   IMPORTANT: The rest of recommended plugins (for example, Revolution Slider, Visual Composer, etc.) are not mandatory for installation of demo content.
   
   
   
   
3. Go to Appearance -> Install Demo Data:
   
   
   
   
4. On the page that showed up please set the required parameters.
   
   • Only pages, forms and sliders - Allows you to select the content you need to be imported for a definite page, slider, etc. It is recommended when the site is already built.
   
   
   
   
   • Whole demo-site content - Allows you to import whole demo content. It is recommended for new installations of WordPress.
     IMPORTANT: When installing whole demo-data ALL EXISTING CONTENTS of your website will be deleted and replaced with the new data! We highly recommend that you install demo data only on blank WordPress install.
   
   
5. Click on "Start Import" button.
   IMPORTANT: Please wait while demo data is being copied from our server to your site. It may take a while and depends significantly upon Internet connection speed between your website and our server. Please wait patiently and do not refresh/leave the page.
   
   
6. After the data is successfully imported you will see the "Congratulations" message:
   
   
   
   In 99.9% it works fine, but if something went wrong and data was not imported, please repeat the procedure described above. The system will find the last item imported successfully and you will be able to continue the import.
   
   In case "Demo Data" installation stuck and you see "Error load data from the file ... " error message, you can manually install it by downloading the demo.zip archive from our server and extract it in your Theme's folder root directory.
   
   Treat the screenshot below as an example only. The list of folders inside a theme package may vary.
   
   
   
   If the issue persists, please contact your hosting provider to make sure that your server configuration meets the Theme Requirements. Otherwise, please contact our support team at https://themerex.net/support/. Our tech support operators will assist you.

General

In this section you can customize the general website look using the following settings.

Responsive Layouts

Using this setting you can decide if you want to have responsive layouts, adjusted for each screen size and device or to keep the main layout for all of them.

• Yes - To have responsive layouts. The website will be adjusted for each screen size.
• No - To keep the main layout intact for all screen sizes. The users will scroll the page to see the content.

Responsive Menu

In this field you should fill in the window width when responsive menu will be enabled.

Add SEO meta

By choosing "Yes" metadata (Google reach snippets, Facebook meta tags, etc.) will be added to a single post. Choose "No" if you are using any of the SEO plugins.

Text with Privacy Policy link (for theme versions 1.5.2 and below!)

Specify the text for the checkbox in "Contact Me" form (for Page style "About me"). This text will be displayed before the Privacy Policy link. Please see "About Me" page for more information.

In order to add/custimoze the Privacy Policy link, navigate to Settings (WP Dashboard) > Privacy and specify the page that will be used as a Privacy Policy one.

Starting from theme version 1.5.3 the default form has been replaced with contact form 7.

Image dimensions

Choose the necessary image dimensions: Original or Retina.

Quality for cropped images

Choose the necessary quality for cropped images.

Show page preloader

This setting allows you to upload an image that will act as your main preloader image.

Use AJAX post views counter

What type of counter should I use to count the number of page views: AJAX is applied if your site uses content caching system (in this case extra requests to the server are being generated). If you do not use caching - this option should be disabled.

Disable new Widgets Block Editor

Disable new Widgets Block Editor, if after the update to WordPress 5.8+ you are having trouble with editing widgets or working in Customizer. New Widgets Block Editor is used in WordPress 5.8+ instead of classic widgets panel.

Socials

You can add links to social media icons here. If you leave these fields empty, icons will not be shown. Social icons will be displayed in the top right corner of the header:

In the Share section you can specify URLs to share posts in social networks (if you leave the field empty - there will be no sharing).

Menus

Settings of this group are responsible for managing Menus. Each menu location is available for filling with any of the predefined menu sets.

Menus are also available for editing through the "Appearance > Menus" options.

• Main Menu - Displays menu under the logo image.

Check the screenshot below for more information.

This is how the menu was built.

Main menu

Widgets

These settings allow you to manage Sidebar and Footer widgets just as you used to do in Appearance > Widgets in WordPress admin panel:

Here you can manage standard sidebars (widget sets) included in the theme:

• Sidebar - By default, it is displayed vertically to the left or right from the main content.
• Footer - By default, it is displayed at the footer of the page.

Attention! Our theme supports both Classic Widgets Editor and New Block Editor (WordPress 5.8+). You can easily switch between the editors using the "Disable new Widgets Block Editor" option in Appearance (WP Dashboard) > Customize > General section.

If you expand one of available widget sets, you will be able to:

1. Add a Widget (for Classic Widgets Editor) or Add a Block (for New Block Editor): just click on "Add a Widget/Block" button to see the available widgets, then choose the one you want to use:



2. Reorder the position of widgets using 3 icons:
• Move - allows you to move the widget to another sidebar.
• Down - the widget will be moved down.
• Up - the widget will be moved upwards.

After you reorder the position of widgets in the sidebar, save your changes.

You will be able to assign any of these widget sets to the sidebar of Homepage, Blog archive pages, Search results pages, Single post pages and Single pages in the corresponding menu items of Appearance > Customize.

Moreover, you get a few Custom Widget sets that can be managed in Appearance > Widgets (for New Block Editor - under "Widgets" group):

On the same page you will see Available Widgets section which also includes MailChimp SignUp form. In order to add the widget to the Sidebar, just drag and drop it to the needed position, add the content and Save it.

IMPORTANT: In case you want to add an image to the widget area (for widgets with such functionality), we recommend you to refresh the page, navigate to the needed widget, click on "Choose Image" button and select/upload the image.

Custom widgets

1. Melania - About Me: Displays the photo and description of the website admin:



2. Melania - Advertisement block: Used to insert advertising banners - images with links or arbitrary HTML-blocks. IMPORTANT: Be careful to use extraneous HTML-code not to disrupt the design of the page.



3. Melania - Calendar: A standard WP Calendar showing the current date and the days with available daily archives (posts).



4. Melania - Categories list: Displays the list of available categories.



5. Melania - Most Popular & Commented Posts: Displays the most visited, most commented and most liked articles.



6. Melania - Recent News: Displays the most recent news.



7. Melania - Recent Posts: Displays the most recent posts. Unlike the standard widget, it can display a post featured image, author name, comments, post counters and post category if you enable these options.



8. Melania - Slider: Displays the slides via Swiper Slider.



9. Melania - Socials: Shows the links to social network profiles. The widgets for social media icons are added in Appearace - Customize - Socials.



10. Melania - Twitter: Shows latest tweets from Twitter account.



11. MailChimp SignUp form: Allows you to add subscribers to your MailChimp lists. Mailchimp for WP plugin should be installed to use this widget.

    In order to configure your MailChimp widget, please follow these steps:

    • Navigate to MailChimp for WP - MailChimp in your WordPress admin and enter your MailChimp API key. To do that you should be registered at Mailchimp website:

      

    • Open MailChimp for WP - Forms and fill in Form mark-up. You can see the code for the demo form on the screenshot below:

      

    <label>Sign up today and receive an email once I publish new recipes and giveaways.</label> <div class="mc4wp_wrap"> <input type="email" id="mc4wp_email" name="EMAIL" placeholder="email address" required> <input type="submit" value="Sign Up"> <label> <input name="AGREE_TO_TERMS" type="checkbox" value="1" required="">I have read and agree to <a href="/privacy-policy/" target="_blank">the terms & conditions</a> </label> </div><span class="mini">We hate spam & respect to Email Privacy</span>
    • Widget's backend:

      

    Once all these steps are done, you will get the following block in one of your sidebars, where the users can sign up for a newsletter:

    

Logo, Title & Tagline

Settings of this group are responsible for the website logo and title display:

Site Title

The text entered into this field will be displayed as the logo (if the image logo is not uploaded) and as the website title in your browser tab.

Tagline

The text entered into this field will be displayed as the website slogan under the logo. By default, the tagline is used if no image logo is selected.

Site Icon

You can upload/remove your site icon here (must be 512x512px).

Favicon

You can upload/remove your favicon here.

Background

These settings allow you to add the background image/color behind the content body, when "Boxed" body style is enabled.

Just click on "Select image" button to upload the image from the Media Library or from your computer. After this step you will see a set of other parameters for background.

Color Scheme

The next section of settings allows you to manage the color scheme of your website. Let's consider these parameters.

Color Settings

Here you can select Simple or Advanced option of your color scheme customization.

Color Scheme

Select one of two predefined color schemes: Default or Dark. Check the screenshots below.

Links

Set the necessary color for your links and accented areas.

Links Hover

Set the necessary hover color for your links and accented areas.

In case the capabilities of "Simple" color scheme are not enough you can go with the "Advanced" one and completely change your website's look.

Header

This option allows you to add the header background image to your website top panel.

Current Header/Previously uploaded

Shows current and previous headers.

Header Style

Pick the necessary style.

IMPORTANT: The header area is created via the Global Customize settings (Appearance > Customize). To change the header area in available styles you should navigate to the .../wp-content/themes/melania/templates folder and edit the corresponding template file like header-1.php, header-2.php or header-3.php.

Available header styles:

• "Header 1" style:



• "Header 2" style:



• "Header 3" style:

Header widgets

Add the necessary widgets to the header.

Header columns

Select the necessary quantity of columns to display widgets in the header.

Header fullwide

Header goes stretched.

Logo

Logo image is uploaded or selected from the Media Library.

Logo for Retina

Upload special size logo image to make it look better on the Retina displays.

WooCommerce

Settings of this group allow managing the overall look of the WooCommerce elements (works only if the WooCommerce plugin is installed).

The quantity of products displayed on shop page is inherited from the Appearance > Customize > WooCommerce > Product Catalog section.

Additional CSS

This setting allows you to embed custom styles to anywhere on the page.

Content

You can customize behavior of the content area in this section.

Body Style

Body Style options allow you to choose the way the page is displayed selecting the width for the website body content:

• Boxed - page body is located in the zone of limited screen width, and you can see the background image behind it.



• Wide - page body occupies the entire screen width (background image is not seen behind it), and the content is placed in the area of limited width, in the center of the screen.

Blog style

Choose the necessary style for blog archives.

Posts content

This setting is responsible for posts' content overall look.

Animation for posts

Here you can choose the necessary animation type for posts to be displayed.

Allow animation on mobile

Whether to apply an extra animation effects on mobile devices.

Pagination style

Displays different pagination styles.

Sidebar

This option allows you to customize sidebars behavior.

Sidebar widgets

This setting allows you to select default widgets that will be displayed in the sidebar.

Sidebar position

Set the needed position.

Widgets above the page

This setting will let you to display widgets above the page.

Widgets above the content

This setting will let you to display widgets above the main content area.

Widgets below the content

This setting will let you to display widgets below the main content area.

Widgets below the page

This setting will let you to display widgets below the page.

Footer

This option allows you to customize footer widgets.

Footer widgets

Select the necessary widgets that will be displayed in the footer.

Footer columns

Set the necessary columns quantity to display the widgets in.

Footer fullwide

It this setting is enabled footer will occupy an entire window width.

Copyright

Type your copyright text here. In order to make the current year change automatically, just paste {Y} instead of the year.

Homepage

Settings of this section allow you to manage homepage style and its widgets:

Blog style:

• Excerpt - Posts will contain the featured image, a small excerpt from the post content and "Continue Reading" button.

  

• Grid /2 columns/ - The first post will look the same as in the "Excerpt" style, the rest posts will be displayed in 2 columns.

  

• Excerpt Extra - Posts will be displayed as a list with an image and a little description to the right.

  

Header Widgets

Select the necessary widgets that will be displayed in the header.

The rest of the settings display the widgets according to their names.

Search Results

You can adjust the layout and sidebar for the pages displaying Search results in this section:

Blog style

Select the necessary post style for search results.

Sidebar widgets

Select the necessary sidebar to display on search result page.

The rest of the settings display the widgets according to their names.

Single Post

You can adjust the sidebar for the single post pages in this section:

Sidebar-related settings

These settings are responsible for specifying widgets set for a sidebar.

Widgets-related settings

These settings allow specifying widgets set for any widget area. Check the Widgets section for more information.

Single Page

You can adjust the sidebar for pages here:

Sidebar-related settings

These settings are responsible for specifying widgets set for a sidebar.

Widgets-related settings

These settings allow specifying widgets set for any widget area. Check the Widgets section for more information.

Shop Page

You can adjust the overall Shop page behavior here:

This is how the default Shop page looks like with current settings.

Expand content

In case there is no sidebar on the page content will occupy the sidebar's area.

Shop mode

This setting allows you to display products' lists in 2 different styles: Thumbnails & List.

Header-related settings

These settings allow specifying header widgets.

Sidebar-related settings

These settings are responsible for specifying widgets set for a sidebar.

Widgets-related settings

These settings allow specifying widgets set for any widget area. Check the Widgets section for more information.

The quantity of products displayed on shop page is inherited from the Appearance > Customize > WooCommerce > Product Catalog section. "Products per row" and "Rows per page" options work only if the "Shop mode" (Appearance > Customize > Shop) is set to "Thumbnails".

WPBakery Page Builder

To make your customization even easier we have added the WPBakery Page Builder to this theme. Before you start, please check these WPBakery Page Builder related tutorials. They will give you a basic understanding of how to build a page properly.

1. Official WPBakery Page Builder FAQ page.


2. Getting Started With WPBakery Page Builder Guide.


3. WPBakery Page Builder: A Guide To Drag & Drop Page Building.


4. How to Add Row and Column with WPBakery Page Builder.


5. How to Add Row or Column Background with WPBakery Page Builder.


6. How to Create Empty Space Between Elements with Custom Height.

WooCommerce

Woocommerce is an industry leader e-commerce plugin for WordPress. Another good news is that our theme is fully compatible with this great tool, allowing you to turn your website into sales machine in just a few clicks. You simply need to install this plugin and allow it to create a set of pages to display categories, products etc. Then you need to add a set of products.

We highly encourage you to read the great documentation files WooCommerce offers. These manuals help to create effective and reliable on line stores providing more features than you can imagine. Here is a list of really useful links helping you create and polish your shop.

• Documentation - official plugin documentation.
• Free and Premium extensions - powerful toolbox bringing more features to your shop
• iOS app for Woocommerce - this application gives you full control over your shop.

The quantity of products displayed on shop page is inherited from the Appearance > Customize > WooCommerce > Product Catalog section. "Products per row" and "Rows per page" options work only if the "Shop mode" (Appearance > Customize > Shop) is set to "Thumbnails".

MailChimp

MailChimp is a newsletter service that allows you to send out email campaigns to a list of email subscribers. MailChimp is free for lists up to 2000 subscribers, which is why it is the newsletter-service of choice for thousands of businesses.
This plugin acts as a bridge between your WordPress site and your MailChimp account, connecting the two together.
Check this link for more information.
More guides are available here.

The backend settings can be found in the WP dashboard menu > MC4WP > MailChimp tab.

Elegro Crypto Payment

Elegro Gateway provides facilities for smooth, safe and instant cryptocurrency payments with automated exchange to EUR/USD or any other fiat currency at direct exchange rates. Payment processing fees are reasonable and calculated depending on business risk levels. Your customers can make purchases on any device and without any fees for elegro-inspired payments.
Check this link for more information.

ThemeREX Updater

This is our self-made plugin that allows you to update the main theme as well as the bundled plugins through the WordPress admin panel. ThemeREX Updater plugin requires a valid purchase code that can be entered in the Appearance > ThemeREX Updater section. To get the code, please navigate to your ThemeForest "Downloads" page and click on the theme download link. Check this guide for more details. Once any plugins or theme updates are available for download, you will receive a corresponding notice in WP Dashboard > Updates. Please view the Theme Update chapter of this documentation file for more information.

Contact Form 7

Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on. More information on how to use this plugin can be found here.

More guides are available here (video tutorial) and here. Find a default shortcode below:

Attention! According to General Data Protection Regulation, you need to make your forms compliant. Some prebuilt forms, that come with this theme, already have the corresponding "I agree..." checkboxes. For newly created forms you should add the consent checkboxes in ONE of the following ways:

1. Use [acceptance acceptance-985]...[/acceptance] tag. Treat the code and the screenshot below just as an example:
   
   
2. Use the Cookie Information plug-in (not provided with the theme).

ThemeREX Socials

This is our self-made plug-in, that helps you output Instagram feed on your WordPress website in an easy way. To make this plug-in work properly, you should specify your Instagram Access Token in the Appearance (WP Dashboard) > ThemeREX Socials tab.

Once you have specified your Instagram Access Token in the plug-in's settings, you can output your instagram photos using the "ThemeREX Socials: Instagram Feed" widget (Appearance > Widgets) (for any widget area available in the theme).