Theme Requirements

To use this theme you must be running WordPress 5.0 or higher, PHP 5.6.20 or higher. 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

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 "Gardenia 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 gardeniablog.zip file and ONLY use the extracted /gardeniablog theme folder.
  3. Upload the extracted /gardeniablog 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 "gardeniablog.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: MailChimp for WP, Revolution Slider, Themerex Banners, Themerex Socials, Themerex Updater, WP GDPR Compliance and WP Review.
     
     
     
     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.

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.

Attention! 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 "gardeniablog-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 AxiomThemes:

• 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 "gardeniablog-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 the Theme Utilities plugin - click on "Begin installing plugins" and install it on the corresponding page.
   IMPORTANT: The rest of recommended plugins (for example, Revolution Slider, WPBakery Page Builder, and others) are not mandatory for installation of demo content but recommended.
   
   
   
   
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. Extract the archive to demo/ folder and upload this demo/ folder to wp-content/themes/gardeniablog 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. Our tech support operators will assist you.

General

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

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:



• 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:

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.

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

Responsive Menu

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

On the image below, 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:

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.

Blog sidebar 1/sidebar 2

Specify the sidebar to show in the blog area (Advertisement block).

Position count (sidebar 1/sidebar 2)

Specify the position after which post exactly to show the sidebar.

In the example below the footer sidebar with Instagram is inserted into the blog area.

Text with Privacy Policy link

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.



NOTICE! In case you are planning to use default forms without consent checkboxes, just leave the "Text with Privacy Policy link" option empty!

Logo, Title and 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. 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 demo page:

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:

Logo

Logo image is uploaded or selected from the Media Library:

Header Image

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

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:

Background Image

These settings allow you to add the background image behind the content body, when "Boxed" body style is enabled and to manage its position:

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.

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

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.

If you expand one of these widget sets, 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, please click on "Done" button at the bottom.

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 2 Custom Widget sets that can be managed in Appearance - Widgets:

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.

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.



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



4. ThemeREX - Categories block: Displays available categories.



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



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



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



8. ThemeREX Socials: Instagram Feed This widget requires ThemeREX Socials plug-in to be active. The widget shows the latest photos from your Instagram account or demo photos in a form of a feed on your WordPress website. You can connect to your Instagram account in the Appearance (WP Dashboard) > ThemeREX Socials section (you need a valid Instagram Access Token).
   Demo mode means that the images will be taken from your demo folder (/wp-content/uploads/).
   Alternatively, you can use photos from Instagram without connecting to your account: by using a hashtag #... or by specifying an Instagram username (WITHOUT a hash symbol).
9. 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 - MailChimp in your WordPress admin and enter your MailChimp API key. To do that you should be registered at Mailchimp website:

     

   • Open MC4WP - Forms 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:

     

   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:

   

10. Footer: We have also added an Instagram widget to it.
    
    
    
    This is how it looks on frontend:
    
    
    
    By default, the demo mode is enabled and the "ThemeREX Socials Instagram Feed" displays images from your demo folder (/wp-content/uploads/). You can disable the demo mode and connect your Instagram account in Appearance (WP Dashboard) > ThemeREX Socials.

Additional CSS

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

Footer

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

Footer widgets

Here you can select the sidebar for your footer area: Sidebar, Footer or one of Custom widget sets.

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.

Slider

In this section you can choose the slider engine and slider position:

Slider engine

You have two options here:

• Select slider - If this option is selected, the slider will not be shown on the website.
• Posts Slider (Swiper) - This slider engine will display the featured images of your posts.
• Layer slider (Revolution) - Creates amazing background transitions. Supports layers. IMPORTANT: Revolution slider is available only if you have installed the plugin revslider.

Slider style:

You can select the slider width using these settings:

• Boxed - there is a space on the right and on the left of the slider.
  
  
• Fullwide - the slider images are stretched to the window width:
  
  

Slider style - This setting allows you to devide slider into several coulumns.

Slider height - You can enter any desired slider height here (in px).

As soon as you select Swiper slider engine, you will see a set of additional parameters:

Category - This option allows you to select the category of posts which featured images will be shown in the slider. If no category is selected, you will see images from the latest posts in the slider.

Posts - Allows you to enter the category ID, or comma-separated post IDs for the slider images.

Interval - You may customize the slides change intwrval (pause time) here.

Top panel position - This setting helps you to specify the top menu position. It can be Above slider or Below slider:

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:

  

• List: all posts will be displayed under each other:

  

Sidebar Widgets

Here you can decide whether you want to have a sidebar on the homepage and which one:

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

  

• Sidebar: widgets from the widget set "Sidebar" will be displayed on the homepage.
• Footer: widgets from the widget set "Footer" will be displayed on the homepage.

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 our article or visit 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:

Sidebar widgets: select the widget set for your Blog archive pages: Sidebar, Footer.

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

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

• Page numbers
  
  

  

• Older/Newer
  
  

  

Search Results

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

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

Sidebar widgets: you can select the widget set for your Blog archive pages: Sidebar, Footer.

Single Post

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

Sidebar widgets: you can select the widget set for your Blog archive pages: Sidebar, Footer. Check the Widgets section for more information.

On the screenshot below you can see the example of the single post page with "Sidebar" enabled. The post page contains post info (post categories, tags and post counters), author information, previous/next posts section and "Leave a reply" area:

Single Page

You can adjust the sidebar for pages here:

Sidebar widgets: feel free to select the widget set for your pages: Sidebar, Footer. Check the Widgets section for more information.

Color Scheme

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

The first one contains the following options:

• Color scheme - enables Default (light) or any Custom color scheme for your website (website background and background of content blocks).
• Accent 1 - to select the color of certain links and accented areas. "Default" button changes the color to default selection.
• Accent 1 hover - to set the hover color for the same links and accented areas.
• 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.
• 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).
• Background color - to select the background color of the page:
  
  
• Border color - to select the color of the bordered elements, separators, etc.
  The last group of settings include "Alter" colors responsible for elements inside blocks with alternative background (like the homepage and blog archive pages.
• 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)
• 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).

Socials

You can add links to social media icons here. If you leave the field empty, the icon will not be shown. Social icons will be displayed in the header next to the top menu and in your Socials widget:

Share

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

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.

Revolution Slider

Our theme is fully compatible with an extremely powerful Revolution Slider plugin.

Once the demo content is installed Revolution Slider item will show up in the theme's menu (otherwise you can install the plugin manually and create/add the necessary slides on your own).

Please check the following links for more information regarding the Revolution Slider functionality:

• Slider usage Example and how-tos
• Support center + FAQs and Documentation

TheneREX Banner

This is our self-made plugin that allows you to create banners in an easy way and output them using shortcode of the banner.

In order to create new banners, navigate to Banners (WP Dashboard) > Add New menu.

Please find the screenshot below with the back-end view of a banner item.

ThemeREX Socials

This plugin helps you output Instagram feed or demo photos in a form of a feed on your WordPress website in one of the following ways: through connection to your Instagram account (you need a valid Instagram Access Token), from your demo folder (/wp-content/uploads/), by using a hashtag #... (for taking photos from Instagram) or by specifying an Instagram username.

In order to connect to you Instagram account, please navigate to the Appearance (WP Dashboard) > ThemeREX Socials tab and enter your Instagram Access Token. For demo mode, displaying photos using a hashtag or Instagram username no connection to your Instagram account is needed.

How to get Access Token from Instagram:

• Log into your Instagram account with photos you want to display on your website.
• Visit the Facebook Developer Page, click My Apps to create and set a Facebook application. Please click here to view an official tutorial.
• Fill in the form. For "valid redirect URLs" option use the following link
  https://your_website_name/wp-json/trx_addons/v1/widget_instagram/get_access/.
• Get your "Client ID" and "Client Secret".
• Navigate to Appearance (WP Dashboard) > ThemeREX Socials section and paste "Client ID" and "Client Secret" into the corresponding fields. Click on "Get Access Token" button.
• Approve that you want to grant the application access to your Instagram account.

Now you can proceed to Appearance (WP Dashboard) > Widgets section and locate "ThemeREX Socials: Instagram Feed" widget into any widget area available in the theme. The "Hashtag" field works for both a hashtag (starting WITH a symbol #) and your Instagram username (WITHOUT a hash symbol).

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

WP GDPR Compliance

The WP GDPR Compliance plugin allows you to make your website GDPR-compliant. It currently supports Contact Form 7 (>= 4.6), Gravity Forms (>= 1.9), WooCommerce (>= 2.5.0) and WordPress Comments.

Using the WP GDPR Compliance plugin does NOT guarantee complete compliance to General Data Protection Regulation.

Check the links below for more information about this plugin:

1. Official WordPress page.
2. Official plugin's page.

IMPORTANT: According to General Data Protection Regulation, you need to make your forms compliant. All prebuilt forms, that come with this theme, already have the corresponding "I agree..." checkboxes. For newly created forms, navigate to Tools (WP Dashboard) > WP GDPR Compliance, enable a GDPR form tag integration for a particular form and save the changes. You can specify and activate the Privacy Policy page in the Tools (WP Dashboard) > WP GDPR Compliance > Settings tab.

WP Review

This plug-in is an easy yet powerful way to review content easily, without affecting the speed of your site. If you're a blogger, you probably occasionally review or rank products, services, tools, recipes, or other content on your site. WP Review plug-in is a customizable and lightweight way to create reviews, using stars, percentage or point rating, and it includes support for translation, WPMU, Google rich snippets and unlimited colors. Just install it and follow the simple configuration instructions to place it in your desired location. Check this link for more information.