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:

• SiteGround
• Bluehost
• InMotion Hosting

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 "Mariana Blog" 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 mariana-blog.zip file and ONLY use the extracted /mariana-blog theme folder.
  3. Upload the extracted /mariana-blog 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 "mariana-blog.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, Instagram Feed, MailChimp for WP 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, otherwise the Theme Options will be lost. 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 WP GDPR Compliance plugin, 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 through WPBakery Page Builder and should be customized via 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.

IMPORTANT: When activating a child theme or switching back to the parent theme, some settings may be lost. We recommend activating a child theme before demo data installation.

In the theme package you will see materials for the child theme. It’s located in "mariana-blog-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 "mariana-blog-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 ThemeREX Addons plugin - click on "Begin installing plugins" and install it on the corresponding page.
   IMPORTANT: The rest of recommended plugins 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, you can manually install it by downloading the demo.zip archive from our server. Extract the archive to demo/ folder and upload this demo/ folder to wp-content/themes/mariana-blog directory. If the issue persists, please contact your hosting provider to make sure that your server configuration meets the Theme Requirements.

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. The screenshots below are with dark color scheme enabled.

• Yes - To have responsive layouts. The website will be adjusted for each screen size. On the image below you can see the website layout on the mobile:



• No - To keep the main layout intact for all screen sizes. The users will scroll the page to see the content. This is how the website will look on the same device:

Mobile layout from

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

On the image below (with dark color scheme enabled), this parameter is 960 px, so even if you have responsive layouts set to No, you will get responsive menu when resizing the browser window:

Alternatively, you can select 480 in case you want to have a navigation bar only on the small screen devices:

Menus

These settings allow you to manage Menus:

Manage Locations

There are 2 default Menu locations, so now you can choose which one goes where. Menus are also available for editing through the "Appearance > Menus" options.

• Main Menu - Displays menu under the logo image.
• Footer Menu - Responsible for displaying menu in the footer.

Main menu

Footer menu

Title, Tagline & Site icon

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. As you can see even if you use the text logo, a nice cursive font is applied automatically :

Let's dwell on the square brackets you see in the title. They help you to create the logo style as on the screenshot below. Please note, that on our demo the logo image is applied in Appearance > Customize > Header section.

As soon as you delete the brackets from "Site title" field, you will get the logo text in one style:

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.

You can use || special character to break the line in the site title and tagline.

Site Icon

The site icon (favicon) is used as a browser and app icon for your site. Icons must be square, and at least 512 pixels wide and tall.

Background

Settings of this group allow editing the background color/image (the one behind the body's content when "Boxed" body style is on).

Just click on "Select image" button to upload the image from the Media Library or your computer. Right after this step, additional options appear, such as "Preset", "Image Position", "Image Size" and a few other.

Color Scheme

The next section of settings allows you to manage the color scheme of your website. You can choose between two modes: Simple and Advanced. Simple mode settings allow you to change only accented color, used for links, buttons and some accented areas:

• Color scheme - enables Default (light) or Dark color scheme for your website (website background and background of content blocks). On the screenshot below you can see how the website looks if Dark color scheme is enabled:

  

• Links - to select the color of certain links and accented areas. On the example below you can see that the color of accented "Edit" and "Reply" buttons has changed:

  

  Pressing on "Default" button will change the color to default selection.

• Links hover - to set the hover color for the same links and accented areas.

Now let's consider additional parameters of Advanced mode settings divided into three groups.

1. Colors for single post/page - to specify colors for single post/page (not for alter blocks). It contains the following options:

   

   • Background color - to select the background color of the page:

     

   • Border color - to select the color of the bordered elements, separators, etc.

   • Text - to select the color of the plain text of pages and single posts.
   • Light Text - to select the color of post info blocks: post date, category, tags etc.

   

   • Dark Text - to set the color for some headers, like post and post info titles. On the example below the text of widget headers has changed:

   

   • Links - has the same function as in Simple settings.
   • Links hover - has the same function as in Simple settings.

   On the following screenshot you can see main post colors:

   

2. Colors for alter blocks - this group of settings include "Alter" colors responsible for elements inside rectangular blocks with its own alternative background (posts in homepage, blog archive pages, search results, widgets on sidebar, footer, etc.):



• Alter background color - to select the alternative background color (for post blocks on homepage and blog archive pages, form fields, alter blocks, etc.).

• Alter hovered background color - to select the alternative color of the bordered elements (form fields, alter blocks like the border around "Learn more" button on homepage).

• Alternative hovered border color - to select the alternative color for the focused state of the form fields, alter blocks, etc. (the border around "Learn more" button on hover).

• Alter text - to select the color of the text inside blocks with alternative background (for post text on homepage and blog archive pages).

• Alter light - to select the color of the info blocks inside blocks with alternative background (for "Learn more" button, post info, social icons, tags text).

• Alter dark - to select the color of headers inside blocks with alternative background (post titles, widget titles).

• Alter link - to select the color of links inside blocks with alternative background (post titles, widget titles, categories).

• Alter hover - to select the color of hovered links inside blocks with alternative background (post titles, widget titles, categories on hover)

On the example below you can see how the page colors can be customized using this set of options:



3. Colors for inverse blocks - to specify colors for inverse blocks, rectangular blocks with background color equal to the links color or one of accented colors (if used in the current theme):

   

   • Inverse text - to select the color of the text inside blocks with accented background (for example the color of numbers in pagination and calendar, color of icons in Socials widget).

     

   • Inverse light - to select the color of info blocks inside blocks with accented background

   • Inverse dark - to select the color of headers inside blocks with accented background.

   • Inverse hover - to select the color of hovered links inside blocks with accented background (available in in post formats aside, sttaus, link)

   • Inverse link - to select the color of the links inside block with accented background (available in in post formats aside, sttaus, link).

   Here is the example of Aside post format where Inverse colors are applied:

   

Header

Settings of this group allow you to manage an overall look and behavior of the header elements.

Just click on "Add new image" button and browse the image from the Media Library. Alternatively, you can upload it from your computer:

We have selected the header image on the screenshot below:

Available header style:

• "Header 1" style:

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

IMPORTANT: The social icons in the header area can be enabled/disabled in Appearance > ThemeREX Addons > Socials. Here you can specify the links (URLs) to your social profiles.

Header widgets

Select the necessary widget set to display it in the header area.
"Header fullwide" setting is responsible for stretching the header widgets area to the entire window width. You can customize the widgets in Appearance > Widgets section.

Logo

Logo image can be uploaded or selected from the Media Library.

Logo for Retina

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

Widgets

Widgets are the blocks of content that can be placed into specifically designed widget areas.

Depends on the selected page that is available for editing with Customizer's tools you can notice a different kind of widgets sets included to a particular page.

If you expand this widget set, you will be able to:

1. Add a widget: just click on "Add a widget" 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, click on "Done" button at the bottom.

Moreover, our theme provides a few Custom Widget sets that are available through Appearance > Widgets section as well as a few more additional locations that allow displaying the necessary widgets almost anywhere on the page. Check the schematic screenshot below for more information. You can add/disable widgets in Appearance > ThemeREX Addons > Widgets section.

You can assign any Custom widget (Widget area) to the page in the Theme Options section on a particular page.

Custom widgets

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



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



This is how the widget looks on frontend:



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



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



5. ThemeREX - Socials: Shows the links to social network profiles. The social icons inherit the links (URLs) to your social profiles specified in the Appearance > ThemeREX Addons > Socials tab.



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



7. ThemeREX Addons - Categories list: Shows the list of available post categories.



You can add the thumbnails in Posts (WP Dashboard) > Categories section.
Use "Large image" option for "Style 2" and "Small image" option for "Style 1" of widget's output.



8. ThemeREX Addons - Post Slider: Displays the slides via Posts (Swiper) Slider.



9. ThemeREX - Recent News: Displays the most recent news.



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



11. Instagram photos: Shows photos from Instagram account. IMPORTANT! You need to install plugin Instagram widget plugin before using this widget.



12. 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 MC4WP in your WordPress admin and enter your MailChimp API key. To do that you should be registered at Mailchimp website:

  

• Open MC4WP (WP Dashboard) - Form and fill in Form mark-up. You can see the code for the demo form on the screenshot below:

  

• Copy the shortcode you see on the same screen, and paste it to the Text widget created in Appearance - Widgets:

  

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

WooCommerce

Settings of this group allow managing the overall look of the WooCommerce elements (works only if the WooCommerce plugin is installed). The single products can be added/customized in WordPress Dashboard Menu > Products.

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

Additional CSS

Settings of this group allow you to specify additional custom styles.

Content

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:



• Fullwide - page body occupies the entire screen width (background image is not seen behind it), the content is stretched to the entire screen with small indents off the window edges:

"Expand Content" setting allows you to expand the pages content, if the sidebar is hidden.

Footer

These settings allow you to manage the content and layout of your website footer:

Footer widgets

Select a preferred footer widget set. Check the Widgets section for more information.

Footer columns

This settings lets you choose the number of columns for your footer widgets. If you have 4 widgets added to the footer, but 2 columns selected, you will get the third and fourth widgets under the first two.

Logo for footer

You can upload your logo image here from the Media Library or from your computer.

Copyright

Feel free to enter your copyright information here. If you leave the field empty, copyright will not be displayed on the site. In order to make the current year change automatically, just paste {Y} instead of the year.

IMPORTANT: The social icons in the footer area are enabled in Appearance > ThemeREX Addons > Socials. Here you can specify the links (URLs) to your social profiles.

Homepage

Settings of this section allow you to manage homepage style and sidebar.

Blog style:

• Excerpt: the posts will contain the featured image, a small excerpt from the post content and "Learn More" 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:

  

• Grid /3 columns/: the first post will look the same as in the "Excerpt" style, the rest posts will be displayed in 3 columns:

  

Header Widgets

This setting allows specifying header widgets. The widgets can be managed in Appearance > Widgets.

Sidebar Widgets

Here you can decide whether you want to have a sidebar on the homepage and which one. The widgets can be managed in Appearance > Widgets.

• Select Widgets: if the sidebar is not selected, it will not be displayed on the website. The content area will be moved to the center:

  

Sidebar Position

You can choose whether you want to have sidebar on the right or on the left on the page.

• Right - the sidebar is located on the right of the content.



• Left - the sidebar is located on the left of the content.

Widgets-related settings

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

Blog Archive

This section allows you to control the layout and style of your blog archive pages such as a blog stream page and category pages.
Please check this video tutorial for more information on how to customize the Posts pages.

Blog style: you may choose if you want to show the page in Excerpt style, Grid /2columns/, Grid /3columns/ - exactly the same as for the Homepage.

Post content : here you can specify if you want to show only a small passage of post text - Excerpt with "Learn more" button or post Full text. "Excerpt" option is selected by default, if we switch to "Full text", the post will look like this:

Animation for posts : this setting sets the animation effect for posts on the blog archive pages.

Allow animation on mobile: allows extended animation effects on mobile devices.

Pagination style is shown at the bottom of the blog archive pages:

• Page numbers
  
  

  

• Older/Newer
  
  

  

Header Widgets

This setting allows specifying header widgets. The widgets can be managed in Appearance > Widgets.

Sidebar Widgets

Here you can decide whether you want to have a sidebar on the homepage and which one. The widgets can be managed in Appearance > Widgets.

• Select Widgets: if the sidebar is not selected, it will not be displayed on the website. The content area will be moved to the center:

Sidebar Position

You can choose whether you want to have sidebar on the right or on the left on the page.

• Right - the sidebar is located on the right of the content.
• Left - the sidebar is located on the left of the content.

Widgets-related settings

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

Shop

Here you can manage an overall look and behavior of shop-related pages.

Expand content

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

Shop mode (for shop pages only)

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

Thumbnails mode

List mode

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

Header Widgets

This setting allows specifying header widgets. The widgets can be managed in Appearance > Widgets.

Sidebar Widgets

Here you can decide whether you want to have a sidebar on the homepage and which one. The widgets can be managed in Appearance > Widgets.

• Select Widgets: if the sidebar is not selected, it will not be displayed on the website. The content area will be moved to the center:

Sidebar Position

You can choose whether you want to have sidebar on the right or on the left on the page.

• Right - the sidebar is located on the right of the content.
• Left - the sidebar is located on the left of the content.

Widgets-related settings

These settings allow specifying widgets set for any widget area. Check the Widgets section 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.

You can also check their documentation. Find a default shortcode below:

Smash Balloon Instagram Feed (formerly Instagram Feed)

Instagram Feed plugin allows you to display a completely customizable Instagram feed on your WordPress website. Please click here for more information about this plugin.

You can specify your Instagram Access Token in the WP Dashboard > Instagram Feed > Configure tab.

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.

WooCommerce

WooCommerce is an industry leader e-commerce plug-in for WordPress. 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 plug-in 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.

1. Documentation - official plug-in documentation.
2. Free and Premium extensions - powerful toolbox bringing more features to your shop.
3. iOS app for WooCommerce - this application gives you full control over your shop.